BootStrap学习笔记（三）

BootStrap插件

过渡效果（Transition）插件

如果您想要单独引用该插件的功能，那么除了其他的 JS 文件，您还需要引用 transition.js。
Transition.js 是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类。它被其他插件用来检查 CSS 过渡效果支持，并用来获取过渡效果。
过渡效果（Transition）插件的使用案例：

具有幻灯片或淡入效果的模态对话框。具体实例参见 Bootstrap 模态框（Modal）插件。
具有淡出效果的标签页。具体实例参见 Bootstrap 标签页（Tab）插件。
具有淡出效果的警告框。 具体实例参见 Bootstrap 警告框（Alert）插件。
具有幻灯片效果的轮播板。具体实例参见 Bootstrap 轮播（Carousel）插件。

模态框（Modal）插件

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
如果您想要单独引用该插件的功能，那么您需要引用 modal.js。
用法
您可以切换模态框（Modal）插件的隐藏内容：

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

触发器
show.bs.modal 在调用 show 方法后触发。
shown.bs.modal 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。
hide.bs.modal 当调用 hide 实例方法时触发。
hidden.bs.modal 当模态框完全对用户隐藏时触发。

modal(options) 把内容作为模态框激活。接受一个可选的选项对象。
Toggle: .modal(‘toggle’) 手动切换模态框。
Show: .modal(‘show’) 手动打开模态框。
Hide: .modal(‘hide’) 手动隐藏模态框。

标签页（Tab）插件

通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。
如果您想要单独引用该插件的功能，那么您需要引用 tab.js。
用法
您可以通过以下两种方式启用标签页：

1.通过 data 属性：您需要添加 data-toggle=”tab” 或 data-toggle=”pill” 到锚文本链接中。
添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。
2.通过 JavaScript：您可以使用 Javscript 来启用标签页，如下所示：

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

// 通过名称选取标签页
$(‘#myTab a[href=”#profile”]’).tab(‘show’)

// 选取第一个标签页
$(‘#myTab a:first’).tab(‘show’)

// 选取最后一个标签页
$(‘#myTab a:last’).tab(‘show’)

// 选取第三个标签页（从 0 开始索引）
$(‘#myTab li:eq(2) a’).tab(‘show’)

Hooks
show.bs.tab
shown.bs.tab

Bootstrap 轮播（Carousel）插件

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
如果您想要单独引用该插件的功能，那么您需要引用 carousel.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
具体方法见http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html

警告（Alerts）

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

您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用 警告（Alerts） jQuery 插件。

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

可取消的警告（Dismissal Alerts）
.alert-dismissable
警告（Alerts）中的链接
使用 .alert-link 实体类来快速提供带有匹配颜色的链接。