Bootstrap 模态框（Modal）插件
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
如果想要单独引用该插件的功能，那么您需要引用 modal.js。
用法
可以切换模态框（Modal）插件的隐藏内容：
- 通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
-
通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：
<code>$('#identifier').modal(options)</code>
静态模态框实例.png
代码讲解：
- 使用模态窗口，需要有某种触发器。可以使用按钮或链接。
- 在 <button> 标签中，data-target="#myModal" 是想要在页面上加载的模态框的目标。可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，能在同一时间加载多个模块，但可以在页面上创建多个在不同时间进行加载。
- 在模态框中需要注意两点：
- 第一是 .modal，用来把 <div> 的内容识别为模态框。
- 第二是 .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 用于打开模态窗口。
外观选项.png
与modal一块使用的方法.png
Bootstrap 下拉菜单（Dropdown）插件
-
通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单，如下所示：
-
如果需要保持链接完整（在浏览器不启用 JavaScript 时有用），请使用 data-target 属性代替 href="#"：
-
通过 JavaScript：通过 JavaScript 调用下拉菜单切换，请使用下面的方法：
<code>$('.dropdown-toggle').dropdown()</code>
Bootstrap 滚动监听（Scrollspy）插件
- 通过 data 属性：向想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。
<code><body data-spy="scroll" data-target=".navbar-example"></code> - 通过 JavaScript：可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数：
<code>$('body').scrollspy({ target: '.navbar-example' })</code>
data-offset.png
Bootstrap 标签页（Tab）插件
-
通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式,添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式.
<code>
<ul class="nav nav-tabs">
< li>
<a href="#identifier" data-toggle="tab">Home</a>
< /li>
...
</ul>
</code> -
通过 JavaScript：可以使用 Javscript 来启用标签页
<code>$('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show')})</code>
淡入淡出效果
如果需要为标签页设置淡入淡出效果，添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容
方法
.$().tab：该方法可以激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href。
事件
事件.png
Bootstrap 提示工具（Tooltip）插件
- 通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。
<code><a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a></code> - 通过 JavaScript：通过 JavaScript 触发提示工具（tooltip）：
<code>$('#identifier').tooltip(options)
$(function () { $("[data-toggle='tooltip']").tooltip(); });</code>
方法
常用方法.png
Bootstrap 弹出框（Popover）插件
- 通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。
<code>
<a href="#" data-toggle="popover" title="Example popover">
请悬停在我的上面
</a></code> - 通过 JavaScript：通过 JavaScript 启用弹出框（popover）：
<code>$('#identifier').popover(options)</code>
方法
方法.png
Bootstrap 警告框（Alert）插件
- 通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss="alert"，就会自动为警告框添加关闭功能。
<code><a class="close" data-dismiss="alert" href="#" aria-hidden="true">
& times;
</a></code> - 通过 JavaScript：通过 JavaScript 添加可取消功能：
<code>$(".alert").alert()</code>
方法
alert方法.png
Bootstrap 按钮（Button）插件
用法
可以 通过 JavaScript 启用按钮（Button）插件
<code>$('.btn').button()</code>
加载状态
如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性
<code><button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..."
type="button"> 加载状态
</button></code>
单个切换
如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 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
网友评论