bootstrap 元素

时间：2017-10-16 11:00:33 阅读：203 评论：0 收藏：0 [点我收藏+]

标签：ref 响应 tab jmeter 切换 reset family port block

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> 文本底部一条虚线鼠标悬停在上面时会显示完整的文本

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 内加上下拉菜单即可

实例：

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

</button>

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

</li>

</li>

</li>

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

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

</li>

</ul>

</div>

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

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

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

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

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

.disabled 下拉菜单中的禁用项

.divider 下拉菜单中的分割线

Bootstrap 按钮组

.btn-group

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

</div>

.btn-toolbar

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

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

</div>

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

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

.btn-group-vertical

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

带分割线的按钮下拉菜单

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

</button>

</ul>

</div>

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

Bootstrap 输入框组

概念：

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

输入框组的大小

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

复选框和单选插件

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

</span>

</div>

按钮插件

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

</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>

</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 的无序列表即可。

响应式的导航栏

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 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> 标签一起使用，确保适当的前导和颜色

实例

</div>

<div>

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

</div>

</nav>

结合图标的导航链接

组件对齐方式

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

</div>

<div>

Java

</a>

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

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

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

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

</ul>

</li>

</ul>

向左对齐-提交按钮

</button>

</form>

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

</a>

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

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

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

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

</ul>

</li>

</ul>

向右对齐-提交按钮

</button>

</form>

</div>

</nav>

固定到顶部

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

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

固定到底部

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

静态的顶部

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

倒置的导航栏

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

Bootstrap 面包屑导航（Breadcrumbs）

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

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

.breadcrumb > li + li:before {

color: #CCCCCC;

content: "/ ";

padding: 0 5px;}

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

实例

</ol>

Bootstrap 分页

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

分页（Pagination）

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

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

.disabled, .active

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

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

默认的分页

</ul>

翻页（Pager）

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

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

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

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

默认的翻页

.pager

对齐的链接

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

<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来改变标签的外观，如下面的实例所示

标签更多实例

.label label-default	默认的灰色标签
.label label-primary	"primary" 类型的蓝色标签
.label label-success	"success" 类型的绿色标签
.label label-info	"info" 类型的浅蓝色标签
.label label-warning	"warning" 类型的黄色标签
.label 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>、

Bootstrap 页面标题（Page Header）

.page-header

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

<h1>页面标题实例

</h1>

</div>

Bootstrap 缩略图

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

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

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

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

实例

</a>

</div>

添加自定义的内容

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

</p>

</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、添加一个关闭按钮。

实例

<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 实体类来快速提供带有匹配颜色的链接。

实例

<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>

交替的进度条

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

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

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

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

实例

</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>

动画的进度条

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

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

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

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

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

实例

</div>

堆叠的进度条

Bootstrap 多媒体对象（Media Object）

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

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

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

实例

</a>

这是一些示例文本

</div>

</div>

Bootstrap 列表组

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

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

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

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

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

向列表组添加徽章

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

向列表组添加链接

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

向列表组添加自定义内容

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

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

</a>

</div>

Bootstrap 面板（Panels）

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

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

</div>

面板标题

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

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

带有 title 的面板标题

</h1>

</div>

面板内容

</div>

面板脚注

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

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

</div>

带语境色彩的面板

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

</div>

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

</div>

Bootstrap Well

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .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>  <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> </div> </div>

选项名称	类型/默认值	Data 属性名称	描述
backdrop	boolean 或 string ‘static‘ 默认值：true	data-backdrop	指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。
keyboard	boolean 默认值：true	data-keyboard	当按下 escape 键时关闭模态框，设置为 false 时则按键无效。
show	boolean 默认值：true	data-show	当初始化时显示模态框。
remote	path 默认值：false	data-remote	使用 jQuery .load 方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。如下面的实例所示： <a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>

方法	描述	实例
Options:.modal(options)	把内容作为模态框激活。接受一个可选的选项对象。	$(‘#identifier‘).modal({ keyboard: false})
Toggle: .modal(‘toggle‘)	手动切换模态框。	$(‘#identifier‘).modal(‘toggle‘)
Show: .modal(‘show‘)	手动打开模态框。	$(‘#identifier‘).modal(‘show‘)
Hide: .modal(‘hide‘)	手动隐藏模态框。	$(‘#identifier‘).modal(‘hide‘)

Class	描述	实例
.collapse	隐藏内容。	尝试一下
.collapse.in	显示内容。	尝试一下
.collapsing	当过渡效果开始时被添加，当过渡效果完成时被移除。

事件	描述	实例
show.bs.modal	在调用 show 方法后触发。	$(‘#identifier‘).on(‘show.bs.modal‘, function () { // 执行一些动作...})
shown.bs.modal	当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。	$(‘#identifier‘).on(‘shown.bs.modal‘, function () { // 执行一些动作...})
hide.bs.modal	当调用 hide 实例方法时触发。	$(‘#identifier‘).on(‘hide.bs.modal‘, function () { // 执行一些动作...})
hidden.bs.modal	当模态框完全对用户隐藏时触发。	$(‘#identifier‘).on(‘hidden.bs.modal‘, function () { // 执行一些动作...})

选项名称	类型/默认值	Data 属性名称	描述
offset	number 默认值：10	data-offset	当计算滚动位置时，距离顶部的偏移像素。

选项名称	类型/默认值	Data 属性名称	描述
animation	boolean 默认值：true	data-animation	提示工具使用 CSS 渐变滤镜效果。
html	boolean 默认值：false	data-html	向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
placement	string\|function 默认值：top	data-placement	规定如何定位提示工具（即 top\|bottom\|left\|right\|auto）。当指定为 auto 时，会动态调整提示工具。例如，如果 placement 是 "auto left"，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
selector	string 默认值：false	data-selector	如果提供了一个选择器，提示工具对象将被委派到指定的目标。
title	string \| function 默认值：‘‘	data-title	如果未指定 title 属性，则 title 选项是默认的 title 值。
trigger	string 默认值：‘hover focus‘	data-trigger	定义如何触发提示工具： click\| hover \| focus \| manual。您可以传递多个触发器，每个触发器之间用空格分隔。
content	string \| function 默认值：‘‘	data-content	如果未指定 data-content 属性，则使用默认的 content 值。
delay	number \| object 默认值：0	data-delay	延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示： delay:{ show: 500, hide: 100 }
container	string \| false 默认值：false	data-container	向指定元素追加提示工具。实例： container: ‘body‘

方法	描述	实例
Options: .tooltip(options)	向元素集合附加提示工具句柄。	$().tooltip(options)
Toggle: .tooltip(‘toggle‘)	切换显示/隐藏元素的提示工具。	$(‘#element‘).tooltip(‘toggle‘)
Show: .tooltip(‘show‘)	显示元素的提示工具。	$(‘#element‘).tooltip(‘show‘)
Hide: .tooltip(‘hide‘)	隐藏元素的提示工具。	$(‘#element‘).tooltip(‘hide‘)
Destroy: .tooltip(‘destroy‘)	隐藏并销毁元素的提示工具。	$(‘#element‘).tooltip(‘destroy‘)