Bootstrap 插件

Bootstrap 模态框（Modal）插件

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

如果想要单独引用该插件的功能，那么您需要引用 modal.js。

用法

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

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

静态模态框实例.png

代码讲解：
使用模态窗口，需要有某种触发器。可以使用按钮或链接。
在
在模态框中需要注意两点：
第一是 .modal，用来把
的内容识别为模态框。
第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。
aria-labelledby="myModalLabel"，该属性引用模态框的标题。
属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
，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 用于打开模态窗口。

外观选项.png

与modal一块使用的方法.png

Bootstrap 下拉菜单（Dropdown）插件

通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单，如下所示：
如果需要保持链接完整（在浏览器不启用 JavaScript 时有用），请使用 data-target 属性代替 href="#"：
通过 JavaScript：通过 JavaScript 调用下拉菜单切换，请使用下面的方法：
$('.dropdown-toggle').dropdown()

Bootstrap 滚动监听（Scrollspy）插件

通过 data 属性：向想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。
通过 JavaScript：可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数：
$('body').scrollspy({ target: '.navbar-example' })

data-offset.png

Bootstrap 标签页（Tab）插件

通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式,添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式.
通过 JavaScript：可以使用 Javscript 来启用标签页
$('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show')})

淡入淡出效果

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

方法

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

事件

事件.png

Bootstrap 提示工具（Tooltip）插件

通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。
请悬停在我的上面
通过 JavaScript：通过 JavaScript 触发提示工具（tooltip）：
$('#identifier').tooltip(options) $(function () { $("[data-toggle='tooltip']").tooltip(); });

方法

常用方法.png

Bootstrap 弹出框（Popover）插件

通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。
请悬停在我的上面
通过 JavaScript：通过 JavaScript 启用弹出框（popover）：
$('#identifier').popover(options)

方法

方法.png

Bootstrap 警告框（Alert）插件

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

方法

alert方法.png

Bootstrap 按钮（Button）插件

用法

可以通过 JavaScript 启用按钮（Button）插件
$('.btn').button()

加载状态

如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性

单个切换

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

复选框（Checkbox）

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

单选按钮（Radio）

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

方法

按钮插件中常用方法.png

Bootstrap 折叠（Collapse）插件

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

用法

折叠插件用法.png

Bootstrap 轮播（Carousel）插件

用法

** 通过 data 属性**：使用 data 属性可以很容易控制轮播（Carousel）的位置。

属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。
data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。

通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示：

$('.carousel').carousel()

方法

轮播方法1.png

轮播图方法2.png