Bootstrap 笔记元素

学习网址：http://www.runoob.com/bootstrap/bootstrap-tutorial.html

Bootstrap CSS

Bootstrap 包的内容：

基本结构 ：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

组件 ：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。

JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件

定制 ：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本

一 属性：

.container  容器，整个网页的布局

.row  对于行的布局必须包含在 .container   以下是使用12列网格布局系统

.col-xs-12 一般使用超小设备手机(<768px)

.col-sm-12 小型设备平板电脑(>=768px)

.col-md-12 中心设备台式电脑，笔记本(>=992px)

.col-lg-12 大型设备台式电脑 (>=1200px)

.sr-only 隐藏内联表单相当于hidden

.small  设置文本为父文本大小的 85%

.lead 更大更粗、行高更高

.text-left 向左对齐文本

.   居中对齐文本

.text-right  向右对齐文本

.text-muted  本行内容是减弱的

.text-primary 本行内容带有一个 primary class 蓝色

.text-success 本行内容带有一个 success class 绿色

.text-info 本行内容带有一个 info class

.text-warning 本行内容带有一个 warning class

.text-danger 本行内容带有一个 danger class

<abbr> 文本底部一条虚线鼠标悬停在上面时会显示完整的文本

<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

Bootstrap 支持有序列表、无序列表和定义列表。

有序列表 ：指以数字或其他有序字符开头的列表

无序列表 ：无序列表 以传统风格 .开头
.list-unstyled移除默认的列表样式，列表项中左对齐，仅适用于直接子列表项

. list-inline 将所有列表项放置同一行

.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行

.text-nowrap 段落中超出屏幕部分不换行

.text-lowercase 设定文本小写

.text-uppercase 设定文本大写

.text-capitalize 设定单词首字母大写

.initialism   显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母

.blockquote-reverse 设定引用右对齐

.dl-horizontal 该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中.

.pre-scrollable 使 <pre> 元素可滚动 scrollable.

Bootstrap 表格

.table 为任意 <table> 添加基本样式 (只有横向分隔线)

.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)

.table-bordered 为所有表格的单元格添加边框

.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态

.table-condensed 让表格更加紧凑

.active 将悬停的颜色应用在行或者单元格上

.success 表示成功的操作

.info 表示信息变化的操作

.warning 表示一个警告的操作

.danger 表示一个危险的操作

Bootstrap 表单

表单布局  1.垂直表单(默认) 2.内联表单 3.水平表单

1.垂直表单向父form 元素添加  role=”form”

2.内联表单，它所有元素是内联的,向左对齐的，标签是并排的，向form 添加 .form-inline

3.水平表单

向父 <form> 元素添加 class .form-horizontal。

把标签和控件放在一个带有 class .form-group 的 <div> 中。

向标签添加 class .control-label。

.form-group

.checkbox

.btn .btn-default

.control-label

.form-control

.checkbox-inline

.radio-inline

.has-error 表单border的颜色红色

.has-warning 表单border的颜色褐色

.has-success 表单border的颜色绿色

.input-lg 表单控件大小

.input-sm 表单控件大小

复选框 multiple="multiple" 允许用户选择多个选项。

禁用的输入框 input添加 disabled 属性

禁用的字段集 fieldset  <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件

表单帮助文本

表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 <input> 后使用.help-block

.help-block

Bootstrap 按钮

Bootstrap 提供了一些选项来定义按钮的样式、以下样式可用于<a>, <button>, <input> 元素上

.btn 为按钮添加基本样式

.btn-default 默认/标准按钮

.btn-primary 原始按钮样式（未被操作）

.btn-success 表示成功的动作

.btn-info 该样式可用于要弹出信息的按钮

.btn-warning 表示需要谨慎操作的按钮

.btn-danger 表示一个危险动作的按钮操作

.btn-link 让按钮看起来像个链接 (仍然保留按钮行为)

.btn-lg 制作一个大按钮

.btn-sm 制作一个小按钮

.btn-xs 制作一个超小按钮

.btn-block 块级按钮(拉伸至父元素100%的宽度)

.active 按钮被点击

.disabled 禁用按钮

Bootstrap 图片

Bootstrap 提供了三个可对图片应用简单样式的 class：

.img-rounded  添加 border-radius:6px 来获得图片圆角。

.img-circle 添加 border-radius:50% 来让整个图片变成圆形。

.img-thumbnail 添加一些内边距（padding）和一个灰色的边框。

Bootstrap 辅助类

背景

.bg-primary 表格单元格使用了 "bg-primary" 类

.bg-success 表格单元格使用了 "bg-success" 类

.bg-info 表格单元格使用了 "bg-info" 类

.bg-warning 表格单元格使用了 "bg-warning" 类

.bg-danger 表格单元格使用了 "bg-danger" 类

其他

.pull-left 元素浮动到左边

.pull-right 元素浮动到右边

.center-block 设置元素为 display:block 并居中显示

.clearfix 清除浮动

.show 强制元素显示

.hidden 强制元素隐藏

.sr-only 除了屏幕阅读器外，其他设备上隐藏元素

.sr-only-focusable 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)

.text-hide 将页面元素所包含的文本内容替换为背景图

.close 显示关闭按钮

.caret 显示下拉式功能

Bootstrap 布局组件

Bootstrap 下拉菜单（Dropdowns）

Bootstrap 下拉菜单是可切换的，是以列表格式显示链接的上下文菜单

如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可

实例：

<div class="dropdown">

<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题

<span class="caret"></span> 

</button> 

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">  <li role="presentation" class="dropdown-header">下拉菜单标题</li>

  <li role="presentation"> 

<a role="menuitem" tabindex="-1" href="#">Java</a> 

</li> 

<li role="presentation"> 

<a role="menuitem" tabindex="-1" href="#">数据挖掘</a> 

</li> 

<li role="presentation"> 

<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a> 

</li> 

<li role="presentation" class="divider"></li> 

<li role="presentation" class="dropdown-header">下拉菜单标题</li>

<li role="presentation"> 

<a role="menuitem" tabindex="-1" href="#">分离的链接</a> 

</li> 

</ul> 

</div>

.dropdown 指定下拉菜单，下拉菜单都包裹在 .dropdown 里

<div class="btn-group dropdown">

.dropup 菜单往上拉伸,向父.btn-group 容器添加.dropup即可。

<div class="btn-group dropup">

.dropdown-menu 创建下拉菜单
.dropdown-menu-right 下拉菜单右对齐

.dropdown-header 下拉菜单中添加标题

.dropup 指定向上弹出的下拉菜单

.disabled 下拉菜单中的禁用项

.divider 下拉菜单中的分割线

Bootstrap 按钮组

.btn-group

该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。

<div class="btn-group">

<button type="button" class="btn btn-default">按钮 1</button>

</div>

.btn-toolbar

该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件

<div class="btn-toolbar" role="toolbar"> 

<div class="btn-group"> </div>.....

<div class="btn-group"></div> 

</div>

.btn-group-lg, .btn-group-sm, .btn-group-xs

这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。

<div class="btn-group btn-group-lg">

<div class="btn-group btn-group-sm">

<div class="btn-group btn-group-xs">

.btn-group-vertical

该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。

<div class="btn-group-vertical">

带 分割 线 的按钮下拉菜单

<div class="btn-group"> 

<button type="button" class="btn btn-default">默认</button> 

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 

<span class="caret"></span> 

<span class="sr-only">切换下拉菜单</span> 

</button> 

<ul class="dropdown-menu" role="menu"> 

<li> <a href="#">功能</a> </li> 

</ul> 

</div>

<span class="caret"></span> 来指示按钮作为下拉菜单

Bootstrap 输入框组

概念：

输入框组 是指向用户输入添加公共的元素，例您可以添加美元符号，用户名前添加 @或者应用程序接口所需要的其他公共的元素

<div class="input-group">

<span class="input-group-addon">@</span> 

<input type="text" class="form-control" placeholder="twitterhandle"> </div>

输入框组的大小

通过向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm）来改变输入框组的大小。输入框中的内容会自动调整大小

<div class="input-group input-group-lg">

复选框和单选插件

复选框和单选插件作为输入框组的前缀或者后缀元素

<div class="input-group"> 

<span class="input-group-addon"> 

<input type="checkbox">

</span> 

<input type="text" class="form-control"> 

</div>

按钮插件

使用 class.input-group-btn 来包裹按钮

<span class="input-group-btn"> 

<button class="btn btn-default" type="button">Go!</button> 

</span>

Bootstrap 导航元素

 Bootstrap 提供的用于定义导航元素，它们使用相同的标记和基类 .nav

<ul class="nav nav-tabs"> 标签式的导航菜单

<ul class="nav nav-pills">   胶囊式导航菜单

<ul class="nav nav-pills nav-stacked"> 胶囊垂直堆叠

<ul class="nav nav-pills nav-justified"> 两端对齐的导航

补充：1、带有下拉菜单的胶囊  2、带有下拉菜单的标签

.nav nav-tabs 标签页

.nav nav-pills 胶囊式标签页

.nav nav-pills nav-stacked 胶囊式标签页以垂直方向堆叠排列的

.nav-justified 两端对齐的标签页

.disabled 禁用的标签页

.tab-content

与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改

.tab-pane

与 .tab-content 和 data-toggle="tab" (data-toggle="pill")一同使用, 设置标签页对应的内容随标签的切换而更改
简单 tab 实例

<ul class="nav nav-tabs">

<li class="active"><a href="#home" data-toggle="tab">Home</a></li>

<li class=""><a href="#svn" data-toggle="tab">SVN</a></li>

<li><a href="#ios" data-toggle="tab">iOS</a></li>

</ul>

<div class="tab-content">

<div class="tab-pane in active" id="home">home</div>

<div class="tab-pane fade" id="svn">svn</div>

<div class="tab-pane fade" id="ios">iOS</div>

</div>

Bootstrap 导航栏

导航栏在您的应用或网站中作为导航页头的响应式基础组件,在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。

默认的导航栏

创建一个默认的导航栏的步骤如下：

1、向 <nav> 标签添加 class .navbar、.navbar-default。

2、向上面的元素添加 role="navigation"，有助于增加可访问性。

3、向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。

4、为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

<nav class="navbar navbar-default" role="navigation">

响应式的导航栏

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素

导航栏中的表单

它是使用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。

导航栏中的按钮

可以使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上

导航栏中的文本

如果需要在导航中包含文本字符串，请使用 class .navbar-text。这通常与 <p> 标签一起使用，确保适当的前导和颜色

 实例

<nav class="navbar navbar-default" role="navigation"> 

<div class="container-fluid"> 

    <div class="navbar-header"> 

        <a class="navbar-brand" href="#">菜鸟教程</a> 

</div> 

<div> 

<p class="navbar-text">Runoob 用户登录</p> 

</div> 

</div> 

</nav>

结合图标的导航链接

组件对齐方式

您可以使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件。这两个 class 都会在指定的方向上添加 CSS 浮动。

<nav class="navbar navbar-default" role="navigation">

<div class="container-fluid">

    <div class="navbar-header">

        <a class="navbar-brand" href="#">菜鸟教程</a>

    </div>

    <div>

        <!--向左对齐-->

        <ul class="nav navbar-nav navbar-left">

            <li class="dropdown">

                <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                    Java

                    <b class="caret"></b>

                </a>

                <ul class="dropdown-menu">

                    <li><a href="#">jmeter</a></li>

                    <li><a href="#">EJB</a></li>

                    <li><a href="#">Jasper Report</a></li>

                    <li class="divider"></li>

                    <li><a href="#">分离的链接</a></li>

                    <li class="divider"></li>

                    <li><a href="#">另一个分离的链接</a></li>

                </ul>

            </li>

        </ul>

        <form class="navbar-form navbar-left" role="search">

            <button type="submit" class="btn btn-default">

                向左对齐-提交按钮

            </button>

        </form>

        <p class="navbar-text navbar-left">向左对齐-文本</p>

        <!--向右对齐-->

        <ul class="nav navbar-nav navbar-right">

            <li class="dropdown">

                <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                    Java <b class="caret"></b>

                </a>

                <ul class="dropdown-menu">

                    <li><a href="#">jmeter</a></li>

                    <li><a href="#">EJB</a></li>

                    <li><a href="#">Jasper Report</a></li>

                    <li class="divider"></li>

                    <li><a href="#">分离的链接</a></li>

                    <li class="divider"></li>

                    <li><a href="#">另一个分离的链接</a></li>

                </ul>

            </li>

        </ul>

        <form class="navbar-form navbar-right" role="search">

            <button type="submit" class="btn btn-default">

                向右对齐-提交按钮

            </button>

        </form>

        <p class="navbar-text navbar-right">向右对齐-文本</p>

    </div>

</div>

</nav>

固定到顶部

Bootstrap 导航栏可以动态定位、向 .navbar class 添加 class .navbar-fixed-top。

注意：为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 <body> 标签添加至少 50 像素的内边距（padding），内边距的值可以根据您的需要进行设置。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

固定到底部

果您想要让导航栏固定在页面的底部，请向 .navbar class 添加 class .navbar-fixed-bottom。

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">

静态的顶部

如需创建能随着页面一起滚动的导航栏，请添加 .navbar-static-top class。该 class 不要求向 <body> 添加内边距

倒置的导航栏

为了创建一个带有黑色背景白色文本的倒置的导航栏，只需要简单地向 .navbar class 添加 .navbar-inverse class 即可。

注意：为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 <body> 标签添加至少 50 像素的内边距（padding），内边距的值可以根据您的需要进行设置。

Bootstrap 面包屑导航（Breadcrumbs）

面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。

Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中下面所示的 class 自动被添加：

.breadcrumb > li + li:before {

    color: #CCCCCC;

    content: "/ ";

    padding: 0 5px;}

下面的实例演示了面包屑导航：

实例

<ol class="breadcrumb"> 

<li><a href="#">Home</a></li> 

<li><a href="#">2013</a></li> 

<li class="active">十一月</li> 

</ol>

Bootstrap 分页

分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。

分页（Pagination）

下表列出了 Bootstrap 提供的处理分页的 class。

.pagination 添加该 class 来在页面上显示分页。

.disabled, .active

您可以自定义链接，通过使用 .disabled 来定义不可点击的链接，通过使用 .active 来指示当前的页面

.pagination-lg, .pagination-sm 使用这些 class 来获取不同大小的项。

默认的分页

<ul class="pagination"> 

<li><a href="#">?</a></li> 

<li><a href="#">1</a></li> 

<li><a href="#">2</a></li> 

<li><a href="#">?</a></li> 

</ul>

翻页（Pager）

创建一个简单的分页链接为用户提供导航，可通过翻页来实现。与分页链接一样，翻页也是无序列表。默认情况下，链接是居中显示

.pager 添加该 class 来获得翻页链接。

.previous, .next 使用 class .previous 把链接向左对齐，使用.next 把链接向右对齐。

.disabled 添加该 class 来获得一个颜色变淡的外观。

默认的翻页

.pager

<ul class="pager">

对齐的链接

下面的实例演示了上表中所讨论的 class .previous、.next 的用法：

<ul class="pager"> 

<li class="previous"><a href="#">← Older</a></li>

<li class="next"><a href="#">Newer →</a></li> 

</ul>

分页更多实例

.previous .pager 中上一页的按钮样式，左对齐

.next .pager 中下一页的按钮样式，右对齐

.disabled 禁用链接

Bootstrap 标签

标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签

可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger来改变标签的外观，如下面的实例所示

标签更多实例

Bootstrap 徽章（Badges）

徽章与标签相似，主要的区别在于徽章的边角更加圆滑。徽章（Badges）主要用于突出显示新的或未读的项。

<a href="#">Mailbox <span class="badge">50</span></a>

激活导航状态

您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 <span class="badge"> 来激活链接，如下面的实例所示：

Bootstrap 超大屏幕（Jumbotron）

Bootstrap 支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）

创建一个带有 class .jumbotron. 的容器 <div>、

<div class="jumbotron">

Bootstrap 页面标题（Page Header）

.page-header

页面标题（Page Header）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如需使用页面标题（Page Header），请把您的标题放置在带有 class .page-header 的 <div> 中：

<div class="page-header"> 

<h1>页面标题实例

<small>子标题</small> 

</h1> 

</div>

Bootstrap 缩略图

缩略图 ： 大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下

1、在图像周围添加带有 class .thumbnail 的 <a> 标签。

2、这会添加四个像素的内边距（padding）和一个灰色的边框。

3、当鼠标悬停在图像上时，会动画显示出图像的轮廓。

 实例

<div class="row"> 

<div class="col-sm-6 col-md-3"> 

         <a href="#" class="thumbnail"> 

              <img src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图"> 

          </a> 

</div>

</div>

添加自定义的内容

<div class="col-sm-6 col-md-3"> 

<div class="thumbnail"> 

<img src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图"> 

<div class="caption"> 

<h3>缩略图标签</h3> <p>一些示例文本。一些示例文本。</p> 

<p> <a href="#" class="btn btn-primary" role="button"> 按钮 </a>

 <a href="#" class="btn btn-default" role="button"> 按钮 </a> 

</p> 

</div> 

</div> 

</div>

Bootstrap 警告（Alerts）

警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。

可以为警告框添加一个可选的关闭按钮

并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框

可取消的警告（Dismissal Alerts）

创建一个可取消的警告（Dismissal Alert）步骤如下：

1、通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。

2、同时向上面的 <div> class 添加可选的 .alert-dismissable。

3、添加一个关闭按钮。

实例

<div class="alert alert-success alert-dismissable"> 

<button type="button" class="close"data-dismiss="alert"aria-hidden="true"> × </button> 成功！很好地完成了提交。 </div>

注意：请确保使用带有 data-dismiss="alert" data 属性的 <button> 元素

警告（Alerts）中的链接

在警告（Alerts）中创建链接的步骤如下：

1、通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框

2、使用 .alert-link 实体类来快速提供带有匹配颜色的链接。

 实例

<div class="alert alert-success"> 

<a href="#" class="alert-link">成功！很好地完成了提交。</a> 

</div>

Bootstrap 进度条

使用 Bootstrap 创建加载、重定向或动作状态的进度条

Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。

默认的进度条

创建一个基本的进度条的步骤如下：

1、添加一个带有 class .progress 的 <div>。

2、接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。

3、添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

 实例

<div class="progress"> 

<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> 

     <span class="sr-only">40% 完成</span> 

</div> 

</div>

交替的进度条

创建不同样式的进度条的步骤如下：

1、添加一个带有 class .progress 的 <div>。

2、接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是success、info、warning、danger。

3、添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

 实例

<div class="progress"> 

<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"> 

     <span class="sr-only">90% 完成（成功）</span> 

</div> 

</div>

条纹的进度条

创建一个条纹的进度条的步骤如下：

1、添加一个带有 class .progress 和 .progress-striped 的 <div>。

2、接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是success、info、warning、danger。

3、添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

 实例

<div class="progress progress-striped"> 

<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"> 

    <span class="sr-only">90% 完成（成功）</span> 

</div> 

</div>

动画的进度条

创建一个动画的进度条的步骤如下：

1、添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active。

2、接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。

3、添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

这将会使条纹具有从右向左的运动感。

 实例

<div class="progress progress-striped active"> 

<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> 

     <span class="sr-only">40% 完成</span> 

</div> 

</div>

堆叠的进度条

Bootstrap 多媒体对象（Media Object）

媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象：

.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。

.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

 实例

<div class="media"> 

<a class="pull-left" href="#"> 

<img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒体对象"> 

</a> 

<div class="media-body"> 

     <h4 class="media-heading">媒体标题</h4> 

        这是一些示例文本

 </div> 

</div>

<div class="media"> 

<div class="media-body">

<h4 class="media-heading">媒体标题</h4>

</div> 

</div> 

Bootstrap 列表组

列表组件用于以列表形式呈现复杂的和自定义的内容。

创建一个基本的列表组的步骤如下：

1、向元素 <ul> 添加 class .list-group。

2、向 <li> 添加 class .list-group-item。

<ul class="list-group">

<li class="list-group-item">免费域名注册</li>

向列表组添加徽章

我们可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在 <li> 元素中添加 <span class="badge"> 即可。

向列表组添加链接

通过使用锚标签代替列表项，我们可以向列表组添加链接。我们需要使用 <div> 代替 <ul> 元素。下面的实例演示了这点。

<a href="#" class="list-group-item active">

向列表组添加自定义内容

我们可以向上面已添加链接的列表组添加任意的 HTML 内容。下面的实例演示了这点：

<div class="list-group"> 

<a href="#" class="list-group-item active"> 

<h4 class="list-group-item-heading"> 入门网站包 </h4> 

</a>

</div>

Bootstrap 面板（Panels）

面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可

<div class="panel panel-default"> 

<div class="panel-body"> 这是一个基本的面板 </div> 

</div>

面板标题

使用.panel-heading class 可以很简单地向面板添加标题容器

使用 带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。

<div class="panel panel-default">

<div class="panel-heading">

<h1 class="panel-title">

带有 title 的面板标题

</h1>

</div>

<div class="panel-body">

面板内容

</div>

</div>

面板脚注

我们可以在面板中添加脚注，只需要把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可

<div class="panel panel-default"> 

<div class="panel-body"> 这是一个基本的面板 </div> 

<div class="panel-footer">面板脚注</div> 

</div>

带语境色彩的面板

使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置带语境色彩的面板

<div class="panel panel-primary"> 

<div class="panel-heading"> 

<h3 class="panel-title">面板标题</h3> 

</div> 

<div class="panel-body"> 这是一个基本的面板 </div> 

</div>

Bootstrap Well

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可

<div class="well">您好，我在 Well 中！</div>

尺寸大小

使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小。这两个类是与 .well 类结合使用的。这两个类会影响内边距（padding），根据使用的类，Well 会显示得更大或者更小

Bootstrap 插件

Bootstrap 插件概览

在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员，您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情况被触发。

站点引用 Bootstrap 插件的方式有两种：

• 单独引用 ：使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。如果您单独引用插件，请先确保弄清这些插件之间的依赖关系。
• 编译（同时）引用 ：使用 bootstrap.js 或压缩版的 bootstrap.min.js。

不要尝试同时引用这两个文件，因为 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。

所有的插件依赖于 jQuery。所以必须在插件文件之前引用 jQuery。请访问  bower.json  查看 Bootstrap 当前支持的 jQuery 版本。

data 属性

你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式。

话又说回来，在某些情况下可能需要将此功能关闭。因此，我们还提供了关闭 data 属性 API 的方法，即解除以 data-api为命名空间并绑定在文档上的事件。就像下面这样：

$(document).off(‘.data-api‘)

如需关闭一个特定的插件，只需要在 data-api 命名空间前加上该插件的名称作为命名空间即可，如下所示：

$(document).off(‘.alert.data-api‘)

编程方式的 API

我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。例如：

$(".btn.danger").button("toggle").addClass("fat")

所有的方法都可以接受一个可选的选项对象作为参数，或者一个代表特定方法的字符串，或者不带任何参数（这种情况下，将会初始化插件为默认行为），如下所示：

// 初始化为默认行为

$("#myModal").modal()    

 // 初始化为不支持键盘               

$("#myModal").modal({ keyboard: false })  // 初始化并立即调用 show

$("#myModal").modal(‘show‘)                

每个插件在 Constructor 属性上也暴露了其原始的构造函数：$.fn.popover.Constructor。如果您想获取某个特定插件的实例，可以直接通过页面元素获取：

 $(‘[rel=popover]‘).data(‘popover‘).

避免命名空间冲突

某些时候 Bootstrap 插件可能需要与其他 UI 框架一起使用。在这种情况下，可能会发生命名空间冲突。如果不幸发生了这种情况，你可以通过调用插件的 .noConflict 方法恢复其原始值。

// 返回 $.fn.button 之前所赋的值var bootstrapButton = $.fn.button.noConflict() // 为 $().bootstrapBtn 赋予 Bootstrap 功能        

$.fn.bootstrapBtn = bootstrapButton            

事件

Bootstrap 为大多数插件的独特行为提供了自定义事件。一般来说，这些事件有两种形式：

动词不定式 ：这会在事件开始时被触发。例如 ex: show。动词不定式事件提供了 preventDefault 功能。这使得在事件开始前可以停止操作的执行。

$(‘#myModal‘).on(‘show.bs.modal‘, function (e) {// 阻止模态框的显示

  if (!data) return e.preventDefault() })

Bootstrap 过渡效果（Transition）插件

过渡效果（Transition）插件提供了简单的过渡效果。

如果您想要单独引用该插件的功能，那么除了其他的 JS 文件，您还需要引用 transition.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

Transition.js 是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类。它被其他插件用来检查 CSS 过渡效果支持，并用来获取过渡效果。

使用案例

过渡效果（Transition）插件的使用案例：

具有幻灯片或淡入效果的模态对话框。具体实例参见 Bootstrap 模态框（Modal）插件。

具有淡出效果的标签页。具体实例参见 Bootstrap 标签页（Tab）插件。

具有淡出效果的警告框。 具体实例参见 Bootstrap 警告框（Alert）插件。

具有幻灯片效果的轮播板。具体实例参见 Bootstrap 轮播（Carousel）插件。

Bootstrap 模态框（Modal）插件

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

您可以切换模态框（Modal）插件的隐藏内容：

• 通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
• 通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：

$(‘#identifier‘).modal(options)

实例

一个静态的模态窗口实例，如下面的实例所示：

实例

<h2>创建模态框（Modal）</h2> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button> <!-- 模态框（Modal） --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4> </div> <div class="modal-body">在这里添加一些文本</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">提交更改</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div>

尝试一下 ?

结果如下所示：

代码讲解：

• 使用模态窗口，您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
• 如果您仔细查看上面的代码，您会发现在 <button> 标签中，data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。
• 在模态框中需要注意两点：

1. 第一是 .modal，用来把 <div> 的内容识别为模态框。
2. 第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。

• aria-labelledby="myModalLabel"，该属性引用模态框的标题。
• 属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
• <div class="modal-header">，modal-header 是为模态窗口的头部定义样式的类。
• class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
• data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
• class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
• class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
• data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

选项

有一些选项可以用来定制模态窗口（Modal Window）的外观和感观，它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

方法

下面是一些可与 modal() 一起使用的有用的方法。

实例

下面的实例演示了方法的用法：

实例

<!-- 模态框（Modal） --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4> </div> <div class="modal-body">按下 ESC 按钮退出。</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">提交更改</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div> <!-- /.modal --> <script> $(function() { $(‘#myModal‘).modal({ keyboard: true }) }); </script>

尝试一下 ?

结果如下所示：

只需要点击 ESC 键，模态窗口即会退出。

事件

下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。

实例

下面的实例演示了事件的用法：

实例

<!-- 模态框（Modal） --> <h2>模态框（Modal）插件事件</h2> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button> <!-- 模态框（Modal） --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4> </div> <div class="modal-body">点击关闭按钮检查事件功能。</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">提交更改</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div> <!-- /.modal --> <script> $(function() { $(‘#myModal‘).modal(‘hide‘) })}); </script> <script> $(function() { $(‘#myModal‘).on(‘hide.bs.modal‘, function() { alert(‘嘿，我听说您喜欢模态框...‘); }) }); </script>

尝试一下 ?

结果如下所示：

正如上面实例所示，如果您点击了 关闭 按钮，即 hide 事件，则会显示一个警告消息。

Bootstrap 下拉菜单（Dropdown）插件、

Bootstrap 下拉菜单 这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。

如果您想要单独引用该插件的功能，那么您需要引用 dropdown.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

您可以切换下拉菜单（Dropdown）插件的隐藏内容：

• 通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单，如下所示：

<div class="dropdown">

  <a data-toggle="dropdown" href="#">下拉菜单（Dropdown）触发器</a>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

    ...

  </ul></div>

如果您需要保持链接完整（在浏览器不启用 JavaScript 时有用），请使用 data-target 属性代替 href="#"：

<div class="dropdown">

  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">

    下拉菜单（Dropdown） <span class="caret"></span>

  </a>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

    ...

  </ul></div>

• 通过 JavaScript：通过 JavaScript 调用下拉菜单切换，请使用下面的方法：

$(‘.dropdown-toggle‘).dropdown()

实例

在导航栏内

下面的实例演示了在导航栏内的下拉菜单的用法：

实例

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">菜鸟教程</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> <li class="divider"></li> <li><a href="#">另一个分离的链接</a></li> </ul> </li> </ul> </div> </div> </nav>

尝试一下 ?

结果如下所示：

在标签页内

下面的实例演示了在标签页内的下拉菜单的用法：

实例

<p>带有下拉菜单的标签页</p> <ul class="nav nav-tabs"> <li class="active"> <a href="#">Home</a></li> <li> <a href="#">SVN</a></li> <li> <a href="#">iOS</a></li> <li> <a href="#">VB.Net</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Java <span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="#">Swing</a></li> <li> <a href="#">jMeter</a></li> <li> <a href="#">EJB</a></li> <li class="divider"></li> <li> <a href="#">分离的链接</a></li> </ul> </li> <li> <a href="#">PHP</a></li> </ul>

尝试一下 ?

结果如下所示：

选项

没有选项。

方法

下拉菜单切换有一个简单的方法用来显示或隐藏下拉菜单。

$().dropdown(‘toggle‘)

实例

下面的实例演示了下拉菜单（Dropdown）插件方法的用法：

实例

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">W3Cschool</a> </div> <div id="myexample"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">iOS</a> </li> <li> <a href="#">SVN</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li> <a id="action-1" href="#">jmeter</a> </li> <li> <a href="#">EJB</a> </li> <li> <a href="#">Jasper Report</a> </li> <li class="divider"></li> <li> <a href="#">分离的链接</a> </li> <li class="divider"></li> <li> <a href="#">另一个分离的链接</a> </li> </ul> </li> </ul> </div> </div> </nav> </div> <script> $(function() { $(".dropdown-toggle").dropdown(‘toggle‘); }); </script>

尝试一下 ?

结果如下所示：

Bootstrap 滚动监听（Scrollspy）插件

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。

如果您想要单独引用该插件的功能，那么您需要引用 scrollspy.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

您可以向顶部导航添加滚动监听行为：

• 通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。

<body data-spy="scroll" data-target=".navbar-example">

...<div class="navbar-example">

<ul class="nav nav-tabs">

...

</ul></div>

...</body>

• 通过 JavaScript：您可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数：

$(‘body‘).scrollspy({ target: ‘.navbar-example‘ })

实例

下面的实例演示了通过 data 属性使用滚动监听（Scrollspy）插件：

实例

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">教程名称</a> </div> <div class="collapse navbar-collapse bs-js-navbar-scrollspy"> <ul class="nav navbar-nav"> <li><a href="#ios">iOS</a></li> <li><a href="#svn">SVN</a></li> <li class="dropdown"> <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> <li><a href="#jmeter" tabindex="-1">jmeter</a></li> <li><a href="#ejb" tabindex="-1">ejb</a></li> <li class="divider"></li> <li><a href="#spring" tabindex="-1">spring</a></li> </ul> </li> </ul> </div> </div> </nav> <div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:200px;overflow:auto; position: relative;"> <h4 id="ios">iOS</h4> <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。 </p> <h4 id="svn">SVN</h4> <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。 </p> <h4 id="jmeter">jMeter</h4> <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。 </p> <h4 id="ejb">EJB</h4> <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。 </p> <h4 id="spring">Spring</h4> <p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。 </p> <p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。 </p> </div>

尝试一下 ?

结果如下所示：

选项

通过 data 属性或 JavaScript 来传递。下表列出了这些选项：

方法

.scrollspy(‘refresh‘)：当通过 JavaScript 调用 scrollspy 方法时，您需要调用 .refresh 方法来更新 DOM。这在 DOM 的任意元素发生变更（即，您添加或移除了某些元素）时非常有用。下面是使用该方法的语法。

$(‘[data-spy="scroll"]‘).each(function () {

  var $spy = $(this).scrollspy(‘refresh‘)})

实例

下面的实例演示了 .scrollspy(‘refresh‘) 方法的用法：

实例

<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">教程名称</a> </div> <div class="collapse navbar-collapse bs-js-navbar-scrollspy"> <ul class="nav navbar-nav"> <li class="active"><a href="#ios">iOS</a></li> <li><a href="#svn">SVN</a></li> <li class="dropdown"> <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> <li><a href="#jmeter" tabindex="-1">jmeter</a></li> <li><a href="#ejb" tabindex="-1">ejb</a></li> <li class="divider"></li> <li><a href="#spring" tabindex="-1">spring</a></li> </ul> </li> </ul> </div> </div> </nav> <div data-spy="scroll" data-target="#myScrollspy" data-offset="0" style="height:200px;overflow:auto; position: relative;"> <div class="section"> <h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);"> × 删除该部分</a></small> </h4> <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p> </div> <div class="section"> <h4 id="svn">SVN<small></small></h4> <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。</p> </div> <div class="section"> <h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);"> × 删除该部分</a></small> </h4> <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p> </div> <div class="section"> <h4 id="ejb">EJB</h4> <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p> </div> <div class="section"> <h4 id="spring">Spring</h4> <p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。</p> <p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。</p> </div> </div> <script> $(function(){ removeSection = function(e) { $(e).parents(".section").remove(); $(‘[data-spy="scroll"]‘).each(function () { var $spy = $(this).scrollspy(‘refresh‘) }); } $("#myScrollspy").scrollspy(); }); </script>

尝试一下 ?

结果如下所示：

事件

下表列出了滚动监听中要用到事件。这些事件可在函数中当钩子使用。

实例

下面的实例演示了 activate.bs.scrollspy 事件的用法：

实例

<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">教程名称</a> </div> <div class="collapse navbar-collapse bs-js-navbar-scrollspy"> <ul class="nav navbar-nav"> <li class="active"><a href="#ios">iOS</a></li> <li><a href="#svn">SVN</a></li> <li class="dropdown"> <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> <li><a href="#jmeter" tabindex="-1">jmeter</a></li> <li><a href="#ejb" tabindex="-1">ejb</a></li> <li class="divider"></li> <li><a href="#spring" tabindex="-1">spring</a></li> </ul> </li> </ul> </div> </div> </nav> <div data-spy="scroll" data-target="#myScrollspy" data-offset="0" style="height:200px;overflow:auto; position: relative;"> <div class="section"> <h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);"> × 删除该部分</a></small> </h4> <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p> </div> <div class="section"> <h4 id="svn">SVN<small></small></h4> <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。</p> </div> <div class="section"> <h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);"> × 删除该部分</a></small> </h4> <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p> </div> <div class="section"> <h4 id="ejb">EJB</h4> <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p> </div> <div class="section"> <h4 id="spring">Spring</h4> <p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。</p> <p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。</p> </div> </div> <span id="activeitem" style="color:red;"></span> <script> $(function(){ removeSection = function(e) { $(e).parents(".section").remove(); $(‘[data-spy="scroll"]‘).each(function () { var $spy = $(this).scrollspy(‘refresh‘) }); } $("#myScrollspy").scrollspy(); $(‘#myScrollspy‘).on(‘activate.bs.scrollspy‘, function () { var currentItem = $(".nav li.active > a").text(); $("#activeitem").html("目前您正在查看 - " + currentItem); }) }); </script>

尝试一下 ?

结果如下所示：

更多实例

创建水平滚动监听

以下实例演示了如何创建水平滚动监听:

实例

<!-- The navbar: used to jump to a section in the scrollable area -->
<nav class="navbar navbar-inverse navbar-fixed-top">
...
  <ul class="nav navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    ...
</nav>
<!-- The scrollable area -->
<div data-spy="scroll" data-target=".navbar" data-offset="12">
  <!-- Section 1 -->
  <div id="section1">
    <h1>Section 1</h1>
    <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
  </div>
  ...
</div>

尝试一下 ?

如何创建垂直滚动监听

以下实例演示了如何创建垂直滚动监听:

实例

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
  <div class="container">
    <div class="row">
      <nav class="col-sm-3" id="myScrollspy">
        <ul class="nav nav-pills nav-stacked">
          <li><a href="#section1">Section 1</a></li>
          ...
        </ul>
      </nav>
      <div class="col-sm-9">
        <div id="section1"> 
          <h1>Section 1</h1>
          <p>Try to scroll this page and look at the navigation list while scrolling!</p>
        </div> 
        ...
      </div>
    </div>
  </div>
</body>

尝试一下 ?

Bootstrap 标签页（Tab）插件

标签页（Tab）在 Bootstrap 导航元素 一章中介绍过。通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。

如果您想要单独引用该插件的功能，那么您需要引用 tab.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

您可以通过以下两种方式启用标签页：

• 通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。

添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。

<ul class="nav nav-tabs">

<li><a href="#identifier" data-toggle="tab">Home</a></li>

...</ul>

• 通过 JavaScript：您可以使用 Javscript 来启用标签页，如下所示：

$(‘#myTab a‘).click(function (e) {

  e.preventDefault()

  $(this).tab(‘show‘)})

下面的实例演示了以不同的方式来激活各个标签页：

// 通过名称选取标签页

$(‘#myTab a[href="#profile"]‘).tab(‘show‘)

// 选取第一个标签页

$(‘#myTab a:first‘).tab(‘show‘)

// 选取最后一个标签页

$(‘#myTab a:last‘).tab(‘show‘)

// 选取第三个标签页（从 0 开始索引）

$(‘#myTab li:eq(2) a‘).tab(‘show‘)

淡入淡出效果

如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容，如下面实例所示：

<div class="tab-content">

<div class="tab-pane fade in active" id="home">...</div>

<div class="tab-pane fade" id="svn">...</div>

<div class="tab-pane fade" id="ios">...</div>

<div class="tab-pane fade" id="java">...</div></div>

实例

下面的实例演示了使用 data 属性的标签页（Tab）插件及其淡入淡出的效果：

实例

<ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#home" data-toggle="tab"> 菜鸟教程 </a> </li> <li><a href="#ios" data-toggle="tab">iOS</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li> <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p> </div> <div class="tab-pane fade" id="ios"> <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p> </div> <div class="tab-pane fade" id="jmeter"> <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p> </div> <div class="tab-pane fade" id="ejb"> <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。 </p> </div> </div>

尝试一下 ?

结果如下所示：

方法

.$().tab：该方法可以激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href。

<ul class="nav nav-tabs" id="myTab">

<li class="active"><a href="#identifier" data-toggle="tab">Home</a></li>

.....</ul><div class="tab-content">

<div class="tab-pane active" id="home">...</div>

.....</div><script>

$(function () {

$(‘#myTab a:last‘).tab(‘show‘)

})</script>

实例

下面的实例演示了标签页（Tab）插件方法 .tab 的用法。在本实例中，第二个标签页 iOS 是激活的：

实例

<ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab"> 菜鸟教程</a> </li> <li><a href="#ios" data-toggle="tab">iOS</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#jmeter" tabindex="-1" data-toggle="tab"> jmeter</a> </li> <li><a href="#ejb" tabindex="-1" data-toggle="tab"> ejb</a> </li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p> </div> <div class="tab-pane fade" id="ios"> <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p> </div> <div class="tab-pane fade" id="jmeter"> <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p> </div> <div class="tab-pane fade" id="ejb"> <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。 </p> </div> </div> <script> $(function () { $(‘#myTab li:eq(1) a‘).tab(‘show‘); }); </script>

尝试一下 ?

结果如下所示：

事件

下表列出了标签页（Tab）插件中要用到的事件。这些事件可在函数中当钩子使用。

实例

下面的实例演示了标签页（Tab）插件事件的用法。在本实例中，将显示当前和前一个访问过的标签页：

实例

<hr> <p class="active-tab"><strong>激活的标签页</strong>：<span></span></p> <p class="previous-tab"><strong>前一个激活的标签页</strong>：<span></span></p> <hr> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab"> 菜鸟教程</a></li> <li><a href="#ios" data-toggle="tab">iOS</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li> <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p> </div> <div class="tab-pane fade" id="ios"> <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p> </div> <div class="tab-pane fade" id="jmeter"> <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p> </div> <div class="tab-pane fade" id="ejb"> <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。 </p> </div> </div> <script> $(function(){ $(‘a[data-toggle="tab"]‘).on(‘shown.bs.tab‘, function (e) { // 获取已激活的标签页的名称 var activeTab = $(e.target).text(); // 获取前一个激活的标签页的名称 var previousTab = $(e.relatedTarget).text(); $(".active-tab span").html(activeTab); $(".previous-tab span").html(previousTab); }); }); </script>

尝试一下 ?

结果如下所示：

Bootstrap 提示工具（Tooltip）插件

当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件是受 Jason Frame 写的jQuery.tipsy 的启发。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。

如果您想要单独引用该插件的功能，那么您需要引用 tooltip.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。您可以有以下两种方式添加提示工具（tooltip）：

• 通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。

<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

• 通过 JavaScript：通过 JavaScript 触发提示工具（tooltip）：

$(‘#identifier‘).tooltip(options)

提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的提示工具（tooltip）：

$(function () { $("[data-toggle=‘tooltip‘]").tooltip(); });

实例

下面的实例演示了通过 data 属性使用提示工具（Tooltip）插件的用法。

实例

<h4>提示工具（Tooltip）插件 - 锚</h4> 这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip"> 默认的 Tooltip </a>. 这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip"> 左侧的 Tooltip </a>. 这是一个 <a href="#" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip"> 顶部的 Tooltip </a>. 这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip"> 底部的 Tooltip </a>. 这是一个 <a href="#" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip"> 右侧的 Tooltip </a> <br> <h4>提示工具（Tooltip）插件 - 按钮</h4> <button type="button" class="btn btn-default" data-toggle="tooltip" title="默认的 Tooltip"> 默认的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip"> 左侧的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip"> 顶部的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip"> 底部的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip"> 右侧的 Tooltip </button>

<script> $(function () { $("[data-toggle=‘tooltip‘]").tooltip(); }); </script>

尝试一下 ?

结果如下所示：

选项

有一些选项是通过 Bootstrap 数据 API（Bootstrap Data API）添加或通过 JavaScript 调用的。下表列出了这些选项：

方法

下面是一些提示工具（Tooltip）插件中有用的方法：

实例

下面的实例演示了提示工具（Tooltip）插件方法的用法。

实例

<div style="padding: 100px 100px 10px;"> 这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip" title="show">Tooltip 方法 show </a>. 这是一个 <a href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="left" title="hide">Tooltip 方法 hide </a>. 这是一个 <a href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="top" title="destroy">Tooltip 方法 destroy </a>. 这是一个 <a href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="bottom" title="toggle">Tooltip 方法 toggle </a>. <br><br><br><br><br><br> <p class="tooltip-options" > 这是一个 <a href="#" data-toggle="tooltip" title="<h2>‘am Header2 </h2>">Tooltip 方法 options </a>. </p> <script>

$(function () { $(‘.tooltip-show‘).tooltip(‘show‘);}); $(function () { $(‘.tooltip-hide‘).tooltip(‘hide‘);}); $(function () { $(‘.tooltip-destroy‘).tooltip(‘destroy‘);}); $(function () { $(‘.tooltip-toggle‘).tooltip(‘toggle‘);}); $(function () { $(".tooltip-options a").tooltip({html : true }); });

</script> <div>

尝试一下 ?

结果如下所示：

事件

下表列出了提示工具（Tooltip）插件中要用到的事件。这些事件可在函数中当钩子使用。

实例

下面的实例演示了提示工具（Tooltip）插件事件的用法。

实例

<h4>提示工具（Tooltip）插件 - 锚</h4> 这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip </a>. <script>

$(function () { $(‘.tooltip-show‘).tooltip(‘show‘);}); $(function () { $(‘.tooltip-show‘).on(‘show.bs.tooltip‘, function () { alert("Alert message on show"); }) });

</script>

尝试一下 ?

结果如下所示：

Bootstrap 弹出框（Popover）插件

弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。

如果您想要单独引用该插件的功能，那么您需要引用 popover.js，它依赖于 工具提示（Tooltip）插件。或者，正如Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。您可以有以下两种方式添加弹出框（popover）：

• 通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。

<a href="#" data-toggle="popover" title="Example popover">

请悬停在我的上面</a>

• 通过 JavaScript：通过 JavaScript 启用弹出框（popover）：

$(‘#identifier‘).popover(options)

弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的弹出框（popover）：

$(function () { $("[data-toggle=‘popover‘]").popover(); });

实例

下面的实例演示了通过 data 属性使用弹出框（Popover）插件的用法。

实例

<div class="container" style="padding: 100px 50px 10px;" > <button type="button" class="btn btn-default" title="Popover title" data-container="body" data-toggle="popover" data-placement="left" data-content="左侧的 Popover 中的一些内容"> 左侧的 Popover </button> <button type="button" class="btn btn-primary" title="Popover title" data-container="body" data-toggle="popover" data-placement="top" data-content="顶部的 Popover 中的一些内容"> 顶部的 Popover </button> <button type="button" class="btn btn-success" title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容"> 底部的 Popover </button> <button type="button" class="btn btn-warning" title="Popover title" data-container="body" data-toggle="popover" data-placement="right" data-content="右侧的 Popover 中的一些内容"> 右侧的 Popover </button> </div> <script>

$(function (){ $("[data-toggle=‘popover‘]").popover(); });

</script> </div>

尝试一下 ?

结果如下所示：

选项

有一些选项是通过 Bootstrap 数据 API（Bootstrap Data API）添加或通过 JavaScript 调用的。下表列出了这些选项：

方法

下面是一些弹出框（Popover）插件中有用的方法：

实例

下面的实例演示了弹出框（Popover）插件的方法：

实例

<div class="container" style="padding: 100px 50px 10px;" > <button type="button" class="btn btn-default popover-show" title="Popover title" data-container="body" data-toggle="popover" data-placement="left" data-content="左侧的 Popover 中的一些内容 —— show 方法"> 左侧的 Popover </button> <button type="button" class="btn btn-primary popover-hide" title="Popover title" data-container="body" data-toggle="popover" data-placement="top" data-content="顶部的 Popover 中的一些内容 —— hide 方法"> 顶部的 Popover </button> <button type="button" class="btn btn-success popover-destroy" title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容 —— destroy 方法"> 底部的 Popover </button> <button type="button" class="btn btn-warning popover-toggle" title="Popover title" data-container="body" data-toggle="popover" data-placement="right" data-content="右侧的 Popover 中的一些内容 —— toggle 方法"> 右侧的 Popover </button><br><br><br><br><br><br> <p class="popover-options"> <a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>" data-container="body" data-toggle="popover" data-content=" <h4>Popover 中的一些内容 —— options 方法</h4>"> Popover </a> </p> <script>

$(function () { $(‘.popover-show‘).popover(‘show‘);}); $(function () { $(‘.popover-hide‘).popover(‘hide‘);}); $(function () { $(‘.popover-destroy‘).popover(‘destroy‘);}); $(function () { $(‘.popover-toggle‘).popover(‘toggle‘);}); $(function () { $(".popover-options a").popover({html : true });});

</script> </div>

尝试一下 ?

结果如下所示：

事件

下表列出了弹出框（Popover）插件中要用到的事件。这些事件可在函数中当钩子使用。

实例

下面的实例演示了弹出框（Popover）插件的事件：

实例

<div clas="container" style="padding: 100px 50px 10px;" > <button type="button" class="btn btn-primary popover-show" title="Popover title" data-container="body" data-toggle="popover" data-content="左侧的 Popover 中的一些内容 —— show 方法"> 左侧的 Popover </button> </div> <script>

$(function () { $(‘.popover-show‘).popover(‘show‘);}); $(function () { $(‘.popover-show‘).on(‘shown.bs.popover‘, function () { alert("当显示时警告消息"); }) });

</script> </div>

尝试一下 ?

结果如下所示：

Bootstrap 警告框（Alert）插件

警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。

用法

您可以有以下两种方式启用警告框的可取消（dismissal）功能：

• 通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss="alert"，就会自动为警告框添加关闭功能。

<a class="close" data-dismiss="alert" href="#" aria-hidden="true">

×</a>

• 通过 JavaScript：通过 JavaScript 添加可取消功能：

$(".alert").alert()

实例

下面的实例演示了通过 data 属性使用警告框（Alert）插件的用法。

实例

<div class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert"> × </a> <strong>警告！</strong>您的网络连接有问题。 </div>

尝试一下 ?

结果如下所示：

选项

没有选项。

方法

下面是一些警告框（Alert）插件中有用的方法：

如需在关闭时启用动画效果，请确保添加了 .fade 和 .in class。

实例

下面的实例演示了 .alert() 方法的用法：

实例

<h3>警告框（Alert）插件 alert() 方法</h3> <div id="myAlert" class="alert alert-success"> <a href="#" class="close" data-dismiss="alert">×</a> <strong>成功！</strong>结果是成功的。 </div> <div id="myAlert" class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert">×</a> <strong>警告！</strong>您的网络连接有问题。 </div> <script>

$(function(){ $(".close").click(function(){ $("#myAlert").alert(); }); });

</script>

尝试一下 ?

下面的实例演示了 .alert(‘close‘) 方法的用法：

实例

<h3>警告框（Alert）插件 alert(‘close‘) 方法</h3> <div id="myAlert" class="alert alert-success"> <a href="#" class="close" data-dismiss="alert">×</a> <strong>成功！</strong>结果是成功的。 </div> <div id="myAlert" class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert">×</a> <strong>警告！</strong>您的网络连接有问题。 </div> <script>

$(function(){ $(".close").click(function(){ $("#myAlert").alert(‘close‘); }); });

</script>

尝试一下 ?

您可以看到所有的警告框都应用了关闭功能，即关闭任意的警告框，其他剩余的警告框也会被关闭。

事件

下表列出了警告框（Alert）插件中要用到的事件。这些事件可在函数中当钩子使用。

实例

下面的实例演示了警告框（Alert）插件的事件：

实例

<div id="myAlert" class="alert alert-success"> <a href="#" class="close" data-dismiss="alert">×</a> <strong>成功！</strong>结果是成功的。 </div> <script>

$(function(){ $("#myAlert").bind(‘closed.bs.alert‘, function () { alert("警告消息框被关闭。"); }); });

</script>

尝试一下 ?

结果如下所示：

Bootstrap 按钮（Button）插件

按钮（Button）在 Bootstrap 按钮 一章中介绍过。通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。

如果您想要单独引用该插件的功能，那么您需要引用 button.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

加载状态

如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可，如下面实例所示：

实例

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." type="button"> 加载状态 </button> <script> $(function() { $(".btn").click(function(){ $(this).button(‘loading‘).delay(1000).queue(function() { // $(this).button(‘reset‘); // $(this).dequeue(); }); }); }); </script>

尝试一下 ?

结果如下所示：

单个切换

如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle="button" 作为其属性即可，如下面实例所示：

实例

<button type="button" class="btn btn-primary" data-toggle="button"> 单个切换 </button>

尝试一下 ?

结果如下所示：

复选框（Checkbox）

您可以创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框组的切换。

实例

<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="checkbox"> 选项 1 </label> <label class="btn btn-primary"> <input type="checkbox"> 选项 2 </label> <label class="btn btn-primary"> <input type="checkbox"> 选项 3 </label> </div>

尝试一下 ?

结果如下所示：

单选按钮（Radio）

类似地，您可以创建单选按钮组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加单选按钮组的切换。

实例

<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="radio" name="options" id="option1"> 选项 1 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2"> 选项 2 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3"> 选项 3 </label> </div>

尝试一下 ?

结果如下所示：

用法

您可以 通过 JavaScript 启用按钮（Button）插件，如下所示：

$(‘.btn‘).button()

选项

没有选项。

方法

下面是一些按钮（Button）插件中有用的方法：

实例

下面的实例演示了上面方法的用法：

实例

<h2>点击每个按钮查看方法效果</h2> <h4>演示 .button(‘toggle‘) 方法</h4> <div id="myButtons1" class="bs-example"> <button type="button" class="btn btn-primary">原始</button> </div> <h4>演示 .button(‘loading‘) 方法</h4> <div id="myButtons2" class="bs-example"> <button type="button" class="btn btn-primary" data-loading-text="Loading...">原始 </button> </div> <h4>演示 .button(‘reset‘) 方法</h4> <div id="myButtons3" class="bs-example"> <button type="button" class="btn btn-primary" data-loading-text="Loading...">原始 </button> </div> <h4>演示 .button(string) 方法</h4> <button type="button" class="btn btn-primary" id="myButton4" data-complete-text="Loading finished">请点击我 </button> <script>

$(function () { $("#myButtons1 .btn").click(function(){ $(this).button(‘toggle‘); }); }); $(function() { $("#myButtons2 .btn").click(function(){ $(this).button(‘loading‘).delay(1000).queue(function() { }); }); }); $(function() { $("#myButtons3 .btn").click(function(){ $(this).button(‘loading‘).delay(1000).queue(function() { $(this).button(‘reset‘); }); }); }); $(function() { $("#myButton4").click(function(){ $(this).button(‘loading‘).delay(1000).queue(function() { $(this).button(‘complete‘); }); }); });

</script>

尝试一下 ?

结果如下所示：

Bootstrap 折叠（Collapse）插件

折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。

如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用Transition（过渡）插件。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的bootstrap.min.js。

您可以使用折叠（Collapse）插件：

• 创建可折叠的分组或折叠面板（accordion） ，如下所示：

实例

<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 点击我进行展开，再次点击我进行折叠。第 1 部分 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 点击我进行展开，再次点击我进行折叠。第 2 部分 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 点击我进行展开，再次点击我进行折叠。第 3 部分 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> </div>

尝试一下 ?

结果如下所示：

1. data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。
2. href 或 data-target 属性添加到父组件，它的值是子组件的 id。
3. data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。

• 创建不带 accordion 标记的简单的可折叠组件（collapsible） ，如下所示：

实例

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> 简单的可折叠组件 </button> <div id="demo" class="collapse in"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div>

尝试一下 ?

结果如下所示：

正如您在实例中看到的，我们创建了一个可折叠的组件，与折叠面板（accordion）不同，我们没有添加属性 data-parent。

用法

下表列出了折叠（Collapse）插件用于处理繁重的伸缩的 class：

您可以通过以下两种方式使用折叠（Collapse）插件：

• 通过 data 属性：向元素添加 data-toggle="collapse" 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。

为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent="#selector"。

• 通过 JavaScript：可通过 JavaScript 激活 collapse 方法，如下所示：

$(‘.collapse‘).collapse()

选项

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

方法

下面是一些折叠（Collapse）插件中有用的方法：

实例

下面的实例演示了方法的用法：

实例

<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 点击我进行展开，再次点击我进行折叠。第 3 部分--toggle 方法 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> 点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法 </a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> </div> <script>

$(function () { $(‘#collapseFour‘).collapse({ toggle: false })}); $(function () { $(‘#collapseTwo‘).collapse(‘show‘)}); $(function () { $(‘#collapseThree‘).collapse(‘toggle‘)}); $(function () { $(‘#collapseOne‘).collapse(‘hide‘)});

</script>

尝试一下 ?

结果如下所示：

事件

下表列出了折叠（Collapse）插件中要用到的事件。这些事件可在函数中当钩子使用。

实例

下面的实例演示了事件的用法：

实例

<div class="panel-group" id="accordion"> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseexample"> 点击我进行展开，再次点击我进行折叠。--shown 事件 </a> </h4> </div> <div id="collapseexample" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> </div> <script>

$(function () { $(‘#collapseexample‘).on(‘show.bs.collapse‘, function () { alert(‘嘿，当您展开时会提示本警告‘);}) });

</script>

尝试一下 ?

结果如下所示：

Bootstrap 轮播（Carousel）插件

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

如果您想要单独引用该插件的功能，那么您需要引用 carousel.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

实例

下面是一个简单的幻灯片，使用 Bootstrap 轮播（Carousel）插件显示了一个循环播放元素的通用组件。为了实现轮播，您只需要添加带有该标记的代码即可。不需要使用 data 属性，只需要简单的基于 class 的开发即可。

实例

<div id="myCarousel" class="carousel slide"> <!-- 轮播（Carousel）指标 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> </div> </div> <!-- 轮播（Carousel）导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">? </a> <a class="carousel-control right" href="#myCarousel" data-slide="next">? </a> </div>

尝试一下 ?

结果如下所示：

可选的标题

您可以通过 .item 内的 .carousel-caption 元素向幻灯片添加标题。只需要在该处放置任何可选的 HTML 即可，它会自动对齐并格式化。下面的实例演示了这点：

实例

<div id="myCarousel" class="carousel slide"> <!-- 轮播（Carousel）指标 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> <div class="carousel-caption">标题 1</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> <div class="carousel-caption">标题 2</div> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> <div class="carousel-caption">标题 3</div> </div> </div> <!-- 轮播（Carousel）导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">? </a> <a class="carousel-control right" href="#myCarousel" data-slide="next">? </a> </div>

尝试一下 ?

结果如下所示：

用法

• 通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。
• 属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
• 使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。
• data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。
• 通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示：

$(‘.carousel‘).carousel()

选项

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

方法

下面是一些轮播（Carousel）插件中有用的方法：

实例

下面的实例演示了方法的用法：

实例

<div id="myCarousel" class="carousel slide"> <!-- 轮播（Carousel）指标 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> </div> </div> <!-- 轮播（Carousel）导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">?</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">?</a> <!-- 控制按钮 --> <div style="text-align:center;"> <input type="button" class="btn start-slide" value="Start"> <input type="button" class="btn pause-slide" value="Pause"> <input type="button" class="btn prev-slide" value="Previous Slide"> <input type="button" class="btn next-slide" value="Next Slide"> <input type="button" class="btn slide-one" value="Slide 1"> <input type="button" class="btn slide-two" value="Slide 2"> <input type="button" class="btn slide-three" value="Slide 3"> </div> </div> <script>

$(function(){ // 初始化轮播 $(".start-slide").click(function(){ $("#myCarousel").carousel(‘cycle‘); }); // 停止轮播 $(".pause-slide").click(function(){ $("#myCarousel").carousel(‘pause‘); }); // 循环轮播到上一个项目 $(".prev-slide").click(function(){ $("#myCarousel").carousel(‘prev‘); }); // 循环轮播到下一个项目 $(".next-slide").click(function(){ $("#myCarousel").carousel(‘next‘); }); // 循环轮播到某个特定的帧 $(".slide-one").click(function(){ $("#myCarousel").carousel(0); }); $(".slide-two").click(function(){ $("#myCarousel").carousel(1); }); $(".slide-three").click(function(){ $("#myCarousel").carousel(2); }); });

</script>

尝试一下 ?

结果如下所示：

事件

下表列出了轮播（Carousel）插件中要用到的事件。这些事件可在函数中当钩子使用。

实例

下面的实例演示了事件的用法：

实例

<div id="myCarousel" class="carousel slide"> <!-- 轮播（Carousel）指标 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> </div> </div> <!-- 轮播（Carousel）导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">?</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">?</a> </div> <script>

$(function(){ $(‘#myCarousel‘).on(‘slide.bs.carousel‘, function () { alert("当调用 slide 实例方法时立即触发该事件。"); }); });

</script>

尝试一下 ?

结果如下所示：

Bootstrap 附加导航（Affix）插件

附加导航（Affix）插件允许某个 <div> 固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 <div> 会锁定在某个位置，不会随着页面其他部分一起滚动。

如果您想要单独引用该插件的功能，那么您需要引用 affix.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

您可以通过 data 属性或者通过 JavaScript 来使用附加导航（Affix）插件。

• 通过 data 属性：如需向元素添加附加导航（Affix）行为，只需要向需要监听的元素添加 data-spy="affix" 即可。请使用偏移来定义何时切换元素的锁定和移动。

实例

下面的实例演示了通过 data 属性使用附加导航（Affix）插件的用法：

实例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap 附加导航（Affix）插件</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style>

/* Custom Styles */ ul.nav-tabs{ width: 140px; margin-top: 20px; border-radius: 4px; border: 1px solid #ddd; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067); } ul.nav-tabs li{ margin: 0; border-top: 1px solid #ddd; } ul.nav-tabs li:first-child{ border-top: none; } ul.nav-tabs li a{ margin: 0; padding: 8px 16px; border-radius: 0; } ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{ color: #fff; background: #0088cc; border: 1px solid #0088cc; } ul.nav-tabs li:first-child a{ border-radius: 4px 4px 0 0; } ul.nav-tabs li:last-child a{ border-radius: 0 0 4px 4px; } ul.nav-tabs.affix{ top: 30px; /* Set the top position of pinned element */ }

</style> </head> <body data-spy="scroll" data-target="#myScrollspy"> <div class="container"> <div class="jumbotron"> <h1>Bootstrap Affix</h1> </div> <div class="row"> <div class="col-xs-3" id="myScrollspy"> <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125"> <li class="active"><a href="#section-1">第一部分</a></li> <li><a href="#section-2">第二部分</a></li> <li><a href="#section-3">第三部分</a></li> <li><a href="#section-4">第四部分</a></li> <li><a href="#section-5">第五部分</a></li> </ul> </div> <div class="col-xs-9"> <h2 id="section-1">第一部分</h2> <p>Lorem ipsum  </p> <p>Vestibulum  </p> <hr> <h2 id="section-2">第二部分</h2> <p> </p> <p>Vestibulum  /p> <hr> <h2 id="section-3">第三部分</h2> <p>I t rhoncus.</p> <p> potenti.</p> <hr> <h2 id="section-4">第四部分</h2> <p>Suspendisse  </p> <p>V  tellus.</p> <p> s id.</p> <p>U massa.</p> <hr> <h2 id="section-5">第五部分</h2> <p>Nam .</p> <p> utrum.</p> <p>Suspendisse  </p> <p> leo.</p> <p>Sed vitae  amet.</p> </div> </div> </div> </body> </html>

尝试一下 ?

结果如下所示：

• 通过 JavaScript：您可以通过 JavaScript 手动为某个元素添加附加导航（Affix），如下所示：

$(‘#myAffix‘).affix({

   offset: {

  top: 100, bottom: function () {

 return (this.bottom = 

$(‘.bs-footer‘).outerHeight(true))

 }

  }})

实例

下面的实例演示了通过 JavaScript 使用附加导航（Affix）插件的用法：

实例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap 附加导航（Affix）插件</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style>

/* Custom Styles */ ul.nav-tabs{ width: 140px; margin-top: 20px; border-radius: 4px; border: 1px solid #ddd; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067); } ul.nav-tabs li{ margin: 0; border-top: 1px solid #ddd; } ul.nav-tabs li:first-child{ border-top: none; } ul.nav-tabs li a{ margin: 0; padding: 8px 16px; border-radius: 0; } ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{ color: #fff; background: #0088cc; border: 1px solid #0088cc; } ul.nav-tabs li:first-child a{ border-radius: 4px 4px 0 0; } ul.nav-tabs li:last-child a{ border-radius: 0 0 4px 4px; } ul.nav-tabs.affix{ top: 30px; /* Set the top position of pinned element */ }

</style> <script>

$(document).ready(function(){ $("#myNav").affix({ offset: { top: 125 } }); });

</script> </head> <body data-spy="scroll" data-target="#myScrollspy"> <div class="container"> <div class="jumbotron"> <h1>Bootstrap Affix</h1> </div> <div class="row"> <div class="col-xs-3" id="myScrollspy"> <ul class="nav nav-tabs nav-stacked" id="myNav"> <li class="active"><a href="#section-1">第一部分</a></li> <li><a href="#section-2">第二部分</a></li> <li><a href="#section-3">第三部分</a></li> <li><a href="#section-4">第四部分</a></li> <li><a href="#section-5">第五部分</a></li> </ul> </div> <div class="col-xs-9"> <h2 id="section-1">第一部分</h2> <p>  ligula.</p> <p>Vestibulum q </p> <hr> <h2 id="section-2">第二部分</h2> <p> consequat.</p> <p>Vestibulum  </p> <hr> <h2 id="section-3">第三部分</h2> <p>Integer  mauris.</p> <p> rhoncus.</p> <p>Quisque  .</p> <hr> <h2 id="section-4">第四部分</h2> <p>Suspendisse  </p> <p> sss</p> <hr> <h2 id="section-5">第五部分</h2>  <p>Sed  amet.</p> </div> </div> </div> </body> </html>

尝试一下 ?

结果如下所示：

通过 CSS 定位

在上面两种使用附加导航（Affix）插件的方式中，您都必须通过 CSS 定位内容。附加导航（Affix）插件在三种 class 之间切换，每种 class 都呈现了特定的状态： .affix、.affix-top 和 .affix-bottom。请按照下面的步骤，来为这三种状态设置您自己的 CSS（不依赖此插件）。

• 在开始时，插件添加 .affix-top 来指示元素在它的最顶端位置。这个时候不需要任何的 CSS 定位。
• 当滚动经过添加了附加导航（Affix）的元素时，应触发实际的附加导航（Affix）。此时 .affix 会替代 .affix-top，同时设置position: fixed;（由 Bootstrap 的 CSS 代码提供）。
• 如果定义了底部偏移，当滚动到达该位置时，应把 .affix 替换为 .affix-bottom。由于偏移是可选的，假如设置了该偏移，则要求同时设置适当的 CSS。在这种情况下，请在必要的时候添加 position: absolute;。

选项

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

原文：http://www.cnblogs.com/wcnwcn/p/7675523.html