滚动监听
—— 通过 data 属性调用
滚动监听（Scrollspy）插件是用来根据滚动条所处的位置自动更新导航项目， 显示导航项目高亮显示。
通过 data 属性调用
为监控对象设置被监控的 data 属性：data-spy="scroll"；
指定监控的导航条：data-target="#nav"；
定义监控过程中滚动条偏移位置 data-offset="0"（默认值为10）。
代码如下：
<div data-offset="0" data-target="#nav" data-spy="scroll">
....
</div>
具体实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 滚动监听</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="nav" class="navbar navbar-default">
<ul class="nav navbar-nav">
<li>
<a href="#html5">HTML5</a>
</li>
<li>
<a href="#bootstrap">Bootstrap</a>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">JavaScript <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#jquery">jQuery</a>
</li>
<li>
<a href="#yui">Yui</a>
</li>
<li>
<a href="#extjs">Extjs</a>
</li>
</ul>
</li>
</ul>
</nav>
<div data-offset="0" data-target="#nav" data-spy="scroll" style="height: 200px; overflow: auto; position: relative;padding: 0 10px;">
<h4 id="html5">HTML5</h4>
<p>为了推动 Web 标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而 W3C（World Wide Web Consortium，万维网联盟） 专注于 XHTML2.0。在 2006 年， 双方决定进行合作，来创建一个新版本的 HTML。 </p>
<h4 id="bootstrap">Bootstrap</h4>
<p> Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、 CSS、 JAVASCRIPT 的。</p>
<h4 id="jquery">jQuery</h4>
<p> 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 即可。 </p>
<h4 id="yui">Yui</h4>
<p> 近几年随着 jQuery、Ext 以及 CSS3 的发展，以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野， 可谓应接不暇。 不论是桌面浏览器端还是移动端都涌现出很多优秀的框架，极大丰富了开发素材，也方便了大家的开发。这些框架各有特点，本文对这些框架进行初步的介绍与比较， 希望能够为大家选择框架提供一点帮助， 也为后续详细研究这些框架的抛砖引玉。 </p>
<h4 id="extjs">Extjs</h4>
<p> ExtJS 可以用来开发 RIA 也即富客户端的 AJAX 应用，是一个用 javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端 ajax 框架。因此，可以把 ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。ExtJs 最开始基于 YUI 技术，由开发人员 JackSlocum 开发，通过参考 JavaSwing 等机制来组织可视化组件，无论从 UI 界面上 CSS 样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript 客户端技术的精品。 </p>
</div>
</body>
</html>
滚动监听 —— 通过 JavaScript 调用
在 Bootstrap 框架中，使用 JavaScript 方法触发滚动监控器只需要指定两个容器的名称即可。
比如下面的结构：
<nav id="navbar-menu" class="navbar navbar-default">
...
</nav>
<div class="scrollspy" id="scrollspy">
...
</div>
如果使用 JavaScript 触发， 可以去掉 data-*， 使用脚本属性定义： offset、 spy 和 target。
具体方法如下：
$('#scrollspy').scrollspy({
offset : 0,
target: "#navbar-menu",
});
无论何种实现方式，滚动监听都需要被监听的组件是 position: relative; 即相对定位方式。
方法
方法
Bootstrap 的滚动监控还提供了一个更新容器 DOM 的方法 scrollspy("refresh")。
当滚动监控所作用的 DOM 有增加或删除页面元素的操作时，需要调用下面的refresh方法：
$(function(){
$("[data-spy='scroll']").each(function(){
var $spy=$(this).scrollspy("refresh");
})
})
注意：这个方法必须使用 data-*声明式。
事件
滚动监听还有一个切换到新条目的事件。
事件绑定在导航上的实例：
$('#nav').on('activate.bs.scrollspy', function() {
...
});
标签页
标签页（Tab）也就是通常所说的选项卡功能。
标签页是 Web 中一种非常常用的功能。
用户点击或悬浮对应的菜单项，能切换出对应的内容。如下图所示：
标签页的结构
一个标签页主要包括两个部分：
菜单项
内容面板
菜单项结构实例如下：
<!-- 标签页组件（菜单项nav-tabs）--> <ul class="nav nav-tabs">
<li class="active">
<a href="#bootstrap" data-toggle="tab">bootstrap</a>
</li>
...
</ul>
内容面板结构如下：
<div class="tab-content">
<div class="tab-pane" id="bootstrap">
<p>bootstrap ... </p>
</div>
...
</div>
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 标签页（Tab）插件</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 选项卡组件（菜单项nav-tabs）-->
<ul class="nav nav-tabs">
<li class="active">
<a href="#html5" data-toggle="tab">HTML5</a>
</li>
<li>
<a href="#bootstrap" data-toggle="tab">Bootstrap</a>
</li>
<li>
<a href="#jquery" data-toggle="tab">jQuery</a>
</li>
<li>
<a href="#extjs" data-toggle="tab">ExtJS</a>
</li>
</ul>
<!-- 选项卡面板 -->
<div class="tab-content" style="padding: 10px;">
<div class="tab-pane active" id="html5">
<p>为了推动 Web 标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而 W3C（World Wide Web Consortium，万维网联盟） 专注于 XHTML2.0。在 2006 年， 双方决定进行合作，来创建一个新版本的 HTML。 </p></div>
<div class="tab-pane" id="bootstrap">
<p>
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、 CSS、 JAVASCRIPT 的。
</p>
</div>
<div class="tab-pane" id="jquery">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" id="extjs">ExtJS 可以用来开发 RIA 也即富客户端的 AJAX 应用，是一个用 javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端 ajax 框架。因此，可以把 ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。ExtJs 最开始基于 YUI 技术，由开发人员 JackSlocum 开发，通过参考 JavaSwing 等机制来组织可视化组件，无论从 UI 界面上 CSS 样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript 客户端技术的精品。 </div>
</div>
</body>
</html>
通过 data 属性
标签页也定义 data 属性来触发切换效果。
声明式触发需要满足以下几点：
- 标签页导航链接中要设置 data-toggle="tab";
面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与标签页中的 data-target 或 href 的值匹配。
使用 data-target 绑定或不绑定效果都是一样的
通过 JavaScript
除了在 HTML 设置 data-toggle 来触发选项卡之外，还可以通过 Javascript 来启用标签页。
直接使用 tab 方法：
$('#nav a').on('click', function(e) {
e.preventDefault();
$(this).tab('show');
})
标签页 —— 基本用法
淡入淡出
我们可以为标签页设置淡入淡出效果，添加 .fade 到每个 .tab-pane 后面。最初的默认显示的内容面板一定要加上 in 类名，不然其内容用户无法看到。
<div class="tab-pane fade in active" id="html5">
胶囊式标签页
Bootstrap 除了可以让 nav-tabs 具有标签页的切换功能之外，还可以对胶囊式导航也具有标签页的功能。
添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。
<ul class="nav nav-pills">
事件
下表列出了标签页（Tab）插件中要用到的事件
事件实例(其他事件雷同)：
$('#nav a').on('show.bs.tab', function() {
alert('调用 tab 时触发！');
});
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
e.target // 激活的标签页
e.relatedTarget // 前一个激活的标签页
})
JS 触发提示工具方法
Bootstrap 框架中的提示工具的触发方式和前面介绍的插件略有不同。
它不直接通过自定义的属性 data-* 来触发，必须得依赖于 JavaScript 的代码触发。
启用页面上所有工具提示的一种方法是通过数据切换属性选择它们：
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
除此之外，也可单独指定一个元素，在该元素上调用提示工具且可无需定义一些 data 属性。
使用 JavaScript 来设置提示工具参数，如：
$(function(){
$('#myTooltip').tooltip({
title:"超文本标识符"
});
});
方法
提示工具（Tooltip）插件中有四种方法：show、hide、toggle 和 destroy 。
$('#element').tooltip('show'); //显示元素
$('#element').tooltip('hide'); //隐藏元素
$('#element').tooltip('toggle'); //切换显示/隐藏元素
$('#element').tooltip('destroy');//隐藏并销毁元素
事件
Tooltip 中事件有四种，如下：
事件实例（其他雷同）：
$('#element').on('show.bs.tooltip', function() {
alert('调用 show 时触发！');
});
弹出框
弹出框：点击一个元素弹出一个包含标题和内容的容器。
弹出框的结构
弹出框（Popover）和提示工具（tooltip）相比，就多了一个 data-content 属性，我们可以使用 data-content 来定义弹出框中的内容。
同样可以使用 button 或者 a 标签来制作弹出框，如下：
HTML 部分：
<button class="btn btn-danger" type="button" data-toggle="popover" title="弹出框" data-content="这是一个弹出框插件"> 点我 </button>
JS 部分：
$('button').popover();
Bootstrap 框架中触发弹出框和提示工具一样，不能直接通过 HTML 的自定义 data 属性来触发，需要依赖于JavaScript脚本
除了上面的触发方式外，也可通过 JavaScript 的各种参数来（与提示工具中的自定义的 data 属性基本相同）实现，无需定义一些data属性，如：
$(function(){
$('[data-toggle="popover"]').popover({
title:"我是弹出框的标题",
content:"我是弹出框的内容",
placement:"right"
});
});
弹出框 -- 方法和事件
通过 JavaScript 执行的方法有四个：
$('#element').popover('show'); //显示元素
$('#element').popover('hide'); //隐藏元素
$('#element').popover('toggle'); //切换显示/隐藏元素
$('#element').popover('destroy');//隐藏并销毁元素
Popover 插件中事件有四种：
事件实例（其他雷同）：
$('button').on('show.bs.tab', function() {
alert('调用 show 方法时触发！');
});
弹出框和提示工具的异同
弹出框中 HTML 自定义的 data 属性和提示框中的自定义的 data 属性基本相同，只不过在其基础上增加了一个 data-content 属性，用来设置弹出框的内容。
两插件也有不同之处：
提示工具（tooltip）的默认触发事件是 hover 和 focus，而弹出框（popover）是 click
提示工具（tooltip）只有一个内容（title），而弹出框不仅可以设置标题（title）还可以设置内容(content)
警告框
警告框插件是在警告框组件的基础上添加单击 X 号能关闭警告框的功能。
所以警告框插件结构只需要在其组件的基础上添加一个按钮即可：
<div class="alert " role="alert">
<button class="close" type="button" >×</button>
恭喜恭喜！
</div>
使用 JS 代码来触发警告框
如果通过自定义的 HTML 属性（声明式）来触发警告框，需要在关闭按钮上设置自定义属性data-dismiss="alert"，这点已在警告框组件中学过，这里不再赘述。
除了通过自定义data-dismiss="alert"属性来触发警告框关闭之外，还可以通过 JavaScript 方法。
只需要在关闭按钮上绑定一个事件。如下所示：
html代码:
<div class="alert alert-warning">
<button class="close" type="button">
<span>×</span>
</button>
<p> 警告：您的浏览器不支持！</p>
</div>
通过下面的JavaScript代码来触发：
$('.close').on('click', function() {
$('.alert').alert('close');
})
注意:.alert('close')：关闭方法，关闭所有的警告框。
事件
Alert 插件中事件有两种：
事件实例（其他类似）：
$('#alert').on('close.bs.alert', function() {
alert('当 close 方法被触发时调用！');
});
我们还可以添加淡入淡出效果，添加 .fade 和 .in 类即可。如下：
<div class="alert alert-warning fade in">
