`

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
踩
分享到：
| 怎么批量修改文件扩展名
评论
发表评论

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

相关推荐

    《响应式网页开发实战》教学教案—第15章 Bootstrap组件.pdf

    本教学教案聚焦于第15章，主要讲解了Bootstrap的组件使用，特别是对于前端网页开发的重要应用。 首先，章节的核心是创建响应式的会员注册页面。在这一部分，学习者需要掌握以下关键知识点： 1. **Glyphicons字体...

    bootstrap教程

    10. **第15章 标签页和工具提示插件**：标签页提供多视图切换，工具提示则为元素添加了提示信息，这两者都能提升页面的交互性和可用性。 通过这些章节的学习，开发者可以掌握Bootstrap的基本用法，从而高效地创建出...

    bootstrap总结与例子

    15. **自定义字体和图标** (`glyphicons`): Bootstrap早期版本包含 Glyphicons 图标库，但现在推荐使用第三方图标库如 Font Awesome 或 Material Icons。 16. **媒体对象** (`media object`): `.media` 类用于创建...

    全网超神bootstrap综合实战含源码

    Bootstrap的预定义CSS类和JavaScript插件大大简化了这些工作，让开发者能够快速搭建专业级别的网页。 根据压缩包子文件的文件名称，我们可以推断出教程涵盖的具体内容： 1. **12.满意的效果插件.mp4**：这部分可能...

    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 函数式编程尾递归...

    15天学会jquery

    第15天：进阶技术与未来展望 - 探讨jQuery的高级技术，如 Deferred 对象和 Promises。 - 关注jQuery的最新发展动态，理解未来的Web技术趋势。 通过这15天的学习，你将从一个jQuery新手成长为一个能够熟练运用jQuery...

    SpringBoot最全企业级博客前后端视频教程

    #### 第15章：博客系统的权限管理实现 - **15-1 权限管理的需求回顾**：回顾权限管理模块的需求细节。 - **15-2 后台编码**：实现权限控制逻辑。 - **15-3 CSRF防护的处理**：讲解如何防止跨站请求伪造攻击。 - **15...

    DREAMWEAVER 技巧集

    16. **插件扩展**：丰富的第三方插件库，扩展Dreamweaver的功能，如SEO优化工具、代码片段管理等。 综上，Dreamweaver作为一款全能的Web开发工具，提供了丰富的功能和优化技巧，帮助开发者更高效地创建和维护高质量...

    精通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字符串操作以及跑马灯...

    15天学会jQuery.

    《15天学会jQuery》是一本旨在帮助初学者在短时间内掌握jQuery核心概念和技术的教程。jQuery是一个广泛应用于网页开发的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互等任务，大大提高了前端开发...

    韩国学习网站模板

    5. **Bootstrap框架**：可能是模板的基础，它提供了一套完整的网格系统、组件和JavaScript插件，加速了开发进程。 6. **学习管理系统（LMS）集成**：模板可能预设了与常见LMS如Moodle、Blackboard的接口，便于课程...

    Art 个性模板

    9. **插件和库**：模板可能依赖于一些JavaScript库（如jQuery）或第三方插件（如Bootstrap），以实现特定功能或简化开发流程。 10. **SEO优化**：考虑到搜索引擎优化的重要性，模板可能已经预设了基本的SEO元素，如...

    18引导组合

    标题中的“18引导组合”很可能是指一个关于Bootstrap框架的学习资源或者项目，它可能是第18个关于这个主题的教程、实例或者集合。Bootstrap是目前非常流行的一个前端开发框架，主要用于构建响应式、移动优先的网页。...

    时尚美体塑身衣电子商城网站模板.zip

    【标签】"软件/插件"表明此模板可能不仅限于HTML静态页面，还可能包含一些动态功能实现，如使用JavaScript库或框架（如jQuery）、前后端交互的Ajax技术，以及可能集成的第三方插件，例如支付接口、社交媒体分享按钮...

    小众时尚单品在线电子商务网站模板.zip

    3. **Bootstrap框架**：为了实现响应式设计，模板可能使用了Bootstrap，这是一个流行的前端开发框架，提供了预设的样式、组件和JavaScript插件，简化了网页开发。 4. **图片优化**：小众时尚单品的展示需要高质量...

    Zoomla!逐浪CMS 3.9.6.rar

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

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