`

Bootstrap 第15章 标签页和工具提示插件

Bootstrap标签页工具提示插件 
阅读更多 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>标签页插件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
	a:focus{
		outline: none;
	}
</style>
</head>
<body style="margin: 200px;">

<!-- <ul class="nav nav-pills">
	<li class="active"><a href="#h5" data-toggle="tab">h5</a></li>
	<li><a href="#bootstrap" data-toggle="tab">bootstrap</a></li>
	<li><a href="#jq" data-toggle="tab">jq</a></li>
	<li><a href="#js" data-toggle="tab">js</a></li>
</ul> -->

<!-- <ul class="nav nav-tabs">
	<li class="active"><a href="#h5" data-toggle="tab">h5</a></li>
	<li><a href="#bootstrap" data-toggle="tab">bootstrap</a></li>
	<li><a href="#jq" data-toggle="tab">jq</a></li>
	<li><a href="#js" data-toggle="tab">js</a></li>
</ul> -->

<ul id="nav" class="nav nav-tabs">
	<li class="active"><a href="#h5">h5</a></li>
	<li><a href="#bootstrap">bootstrap</a></li>
	<li><a href="#jq">jq</a></li>
	<li><a href="#js">js</a></li>
</ul>

<div class="tab-content" style="padding: 10px">
	<div class="tab-pane fade in active" id="h5">
		标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后，后继的HTML5 和其它标准被束之高阁，为了推动Web 标准化运动的发展，一些公司联合起来，成立了一个叫做Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组-WHATWG） 的组织。WHA。在2006 年，双方决定进行合作，来创建一个新版本的HTML。
	</div>
	<div class="tab-pane fade" id="bootstrap">
		Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得Web 开发更加快捷。[1] 它由Twitter的设计师Mark Otto 和Jacob Thornton 合作开发，是一个CSS/HTML 框架。Bootstrap提供了优雅的HTML 和CSS 规范，它即是由动态CSS 语言Less 写成。Bootstrap 一经推出后颇受欢迎，一直是GitHub 上的热门开源项目，包括NASA 的MSNBC（微软全国广播公司）的Breaking News 都使用了该项目。[2] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap 源码进行性能优化而来。[3] 
	</div>
	<div class="tab-pane fade" id="jq">
		JQuery 是继prototype 之后又一个优秀的Javascript 库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0 及后续版本将不再支持IE6/7/8 浏览器。jQuery 使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery 能够使用户的html 页面保持代码和html 内容分离，也就是说，不用再在html 里面插入一堆js 来调用命令了，只需要定义id 即可。
	</div>
	<div class="tab-pane fade" id="js">
		近几年随着jQuery、Ext 以及CSS3 的发展，以Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野，可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架，极大丰富了开发素材，也方便了大家的开发。这些框架各有特点，本文对这些框架进行初步的介绍与比较，希望能够为大家选择框架提供一点帮助，也为后续详细研究这些框架的抛砖引玉。
	</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
	$('#nav a').on('click', function (e) {
		//阻止默认行为
		e.preventDefault();
		$(this).tab('show');
	});

	$('#nav a').on('show.bs.tab', function () {
		alert('调用前触发！');
	});
</script>

</body>
</html>

效果图：

 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>工具提示插件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
	a:focus{
		outline: none;
	}
</style>
</head>
<body style="margin: 100px;">
<a href="#" 
			data-toggle="tooltip" 
			data-original-title="<b>超文本标识符</b>"
			title="超文本标识符"
			data-animation="false"
			data-html="true"
			data-placement="auto top"
			data-trigger="hover focus"
			data-delay="100"
>HTML5</a>
<!-- data-template="<div
class='tooltip'><div
class='tooltip-arrow'></div><div
class='tooltip-inner'>123</div></div>" -->
<!-- <div id="selection">
	<a href="#" rel="tooltip" data-toggle="tooltip" title="超文本标识符">HTML5</a>
	<a href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>
</div>
<div class="btn-group">
	<button class="btn btn-default" data-toggle="tooltip" title="超文本标识符">左</button>
	<button class="btn btn-default" data-toggle="tooltip" title="超文本标识符">中</button>
	<button class="btn btn-default" data-toggle="tooltip" title="超文本标识符">右</button>
</div> -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
	$('a').tooltip({
		trigger : 'click'
	});

	$('button').on('click', function () {
		// $('a').tooltip('show');
		// $('a').tooltip('hide');
		// $('a').tooltip('toggle');
		// $('a').tooltip('destroy');
	})

	$('a').on('show.bs.tooltip', function () {
		alert('显示前触发！');
	});

	// $('button').tooltip({
	// 	delay : {
	// 		show : 100,
	// 		hide : 100,
	// 	},
	// 	container : 'body'
	// });
	// 	// placement : 'left'
	// });

	// $('#selection').tooltip({
	// 	selector : 'a[rel=tooltip]'
	// });
</script>

</body>
</html>

 

效果图：

 

 

  • 大小: 21.7 KB
  • 大小: 1.5 KB
1
顶
0
踩
分享到：
| 怎么批量修改文件扩展名
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS组件Bootstrap Table使用方法详解

    bootStrap table 是一个轻量级的table插件，使用AJAX获取JSON格式的数据，其分页和数据填充很方便，支持国际化 三、使用方法 1、引入js、css [js] view plain copy &lt;!--css样式--&gt; &lt;link href="css/...

    Mastering Web Application Development with AngularJS

    第4章　显示与格式化数据 第5章　创建高级表单 第6章　导航 第7章　安全 第8章　创建自定义指令 第9章　创建高级指令 第10章　创建为全球用户服务的AngularJS应用 第11章　开发健壮的AngularJS应用 第12章　打包和...

    python入门到高级全栈工程师培训 第3期 附课件代码

    第15章 01 上节课复习 02 全局变量与局部变量 03 风湿理论之函数即变量 04 函数递归 05 函数递归补充 第16章 01 上节课回顾 02 函数作用域 03 函数作用域补充 04 匿名函数 05 函数式编程介绍 06 函数式编程尾递归...

    精通AngularJS part1

    第12章打包和部署AngularJSWeb应用317 121提升网络相关的性能318 压缩静态资源318 AngularJS如何判断依赖关系318 编写会被安全压缩的JavaScript代码319 数组风格依赖注入的缺陷322 模板预加载323 使用指令预...

    最新Python3.5零基础+高级+完整项目（28周全）培训视频学习资料

    第15周 上节内容答疑 上节内容回顾 CSS内容补充之position CSS内容补充之overflow CSS内容之hover CSS内容之background 初始javaScript javascript代码存在形式 javascript基本预览 javascript字符串操作以及跑马灯...

    Zoomla!逐浪CMS 3.9.6.rar

    6.修复:内容列表--如节点未允许内容页生成,则不会显示生成按钮；7.改进：内容发布过渡页效果；8.修复:内容列表--生成Html BUG,生成发布时,过滤未审核内容；9.增加:通用排序页,已用于模型字段,内容,商品(支持拖动排序...

    断代、新生、创未来-Zoomla!逐浪CMS2 x3.9.6全面发布

    6、修复:内容列表--如节点未允许内容页生成,则不会显示生成按钮 7、改进：内容发布过渡页效果 8、修复:内容列表--生成Html BUG,生成发布时,过滤未审核内容 9、增加:通用排序页,已用于模型字段,内容,商品(支持拖动...

    Zoomla!逐浪CMS2 x3.9.6.zip

    6、修复:内容列表--如节点未允许内容页生成,则不会显示生成按钮 7、改进：内容发布过渡页效果 8、修复:内容列表--生成Html BUG,生成发布时,过滤未审核内容 9、增加:通用排序页,已用于模型字段,内容,商品(支持拖动...

    基于Django后端+Vue前端+阿里云数据库实现完整的书店系统源码+详细部署说明.zip

    3、 第三方插件 ·jquery ·bootstrap 4、 实现Vue组件(components) ·App.vue ·register.vue：用户注册 ·login.vue：用户登录 ·addstore.vue：新建店铺 ·balance.vue：查看余额/余额充值 ·book.vue：书本...

    互联网创意产品众筹平台

    不多说，懂得人看名字就能知道，挺好的一套案例，包含讲解视频和完整案例。 内容： 『课程目录』: ├─众筹项目-第01天《Atcrowdfunding》3 n7 ]2 w M, M1 ^ ^& P │ ├─代码 - G( G, ]4 n, n! y3 k! o │ ├─...

    老男孩第三期Python全栈开发视频教程 零基础系统学习Python开发视频+资料

    ├─(124) 03 python全栈3 day56 基于BootStrap和FontAwesome制作页面.avi ├─(125) 04 python全栈3 day56 创建学生信息（一）.avi ├─(126) 05 python全栈3 day56 创建学生信息（二）.avi ├─(127) 06 python...

Magicbox
Global site tag (gtag.js) - Google Analytics