我们的 Modal 插件是对传统 modal js 插件的超薄版，特别注意只包含我们在 twitter 上需要的基本功能。

下载

使用引导模式

$ （'#my-modal' ）。模态（选项）

选项

姓名	类型	默认	描述
背景	布尔值	错误的	包括一个模态背景元素
键盘	布尔值	错误的	按下退出键时关闭模态
节目	布尔值	错误的	在类初始化时打开模式

标记

您可以轻松地在页面上激活模式，而无需编写一行 javascript。只需给一个元素一个data-controls-modal对应于模态元素 id 的属性，当单击时，它将启动您的模态。要添加模式选项，只需将它们也包含为数据属性即可。

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" >启动模态</a>    

注意如果您希望您的模态动画进出，只需.fade向您的元素添加一个类.modal（请参阅演示以查看此操作）。

方法

.modal（选项）

将您的内容激活为模式。接受一个可选选项object。

$ （'#my-modal' ）。模态（{
  closeOnEscape :真 
})

.modal('切换')

手动切换模式。

$ （'#my-modal' ）。模态（'切换' ）

.modal('显示')

手动打开一个模态。

$ （'#my-modal' ）。模态（“显示” ）

.modal('隐藏')

手动隐藏模态。

$ （'#my-modal' ）。模态（“隐藏” ）

.modal（真）

返回一个元素模式类实例。

$ （'#my-modal' ）。模态（真）

注意或者，这可以用 检索$().data('modal')。

活动

Bootstrap 的模态类公开了一些用于连接模态功能的事件。

事件	描述
节目	show调用实例方法时立即触发此事件。
显示	当模式对用户可见时触发此事件（将等待 css 转换完成）​​。
隐藏	hide调用实例方法时立即触发此事件。
隐	当模式对用户完成隐藏时触发此事件（将等待 css 转换完成）​​。

$ （'#my-modal' ）。绑定（'隐藏' ，函数（）{   
  // 做一点事 ...
})

演示

启动模式

此插件用于向引导顶部栏或选项卡式导航添加下拉交互。

下载

使用 boostrap-dropdown.js

$ （'#topbar' ）。下拉（）

标记

要快速将下拉功能添加到任何导航元素，请使用该data-dropdown属性。任何有效的引导下拉菜单都将自动激活。

<ul类= “标签” > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" >下拉</a>  
    <ul class = "下拉菜单" > 
      <li><a href = "#" >二级链接</a></li> 
      <li><a href = "#" >这里有别的东西</a></li> 
      <li class = "分隔符" ></li> 
      <li><a href = "#" >另一个链接</a></li> 
    </ul>
  </li>
</ul>

注意如果您的 ui 有多个下拉菜单，请考虑将data-dropdown属性添加到更重要的容器元素中，例如.tabsor .topbar。

方法

$().dropdown()

用于激活给定顶部栏或选项卡式导航的菜单的编程 api。

演示

此插件用于将滚动间谍（自动更新导航）交互添加到引导顶部栏。

下载

使用 boostrap-scrollspy.js

$ （'#topbar' ）。下拉（）

标记

要轻松地将 scrollspy 行为添加到您的导航，只需将data-scrollspy属性添加到.topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

方法

$().scrollspy()

自动通过用户滚动位置激活导航按钮。

$ ( 'body > .topbar' )。滚动间谍()

注意Topbar 锚标记必须具有可解析的 id 目标。例如， a<a href="#home">home</a>必须对应 dom 中的某些东西 like <div id="home"></div>。

.scrollspy('刷新')

scrollspy 缓存导航按钮和部分坐标以提高性能。如果您需要更新此缓存（如果您有动态内容），只需调用此刷新方法。如果你使用 data 属性来定义你的 scrollspy，只需在 body 上调用 refresh。

$ （“身体” ）。scrollspy ( '刷新' )

演示

签出此页面上的顶部栏导航。

该插件添加了快速、动态的选项卡和药丸功能。

下载

使用 boostrap-tabs.js

$ （'.tabs' ）。选项卡()

标记

您可以通过简单地给它们一个data-tabs或data-pills属性来激活选项卡或药丸导航，而无需编写任何 JavaScript。

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

方法

$().tabs 或 $().pills

激活给定容器的选项卡和药丸功能。选项卡链接应引用文档中的 id。

<ul类= “标签” > 
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" >个人资料</a></li> 
  <li><a href = "#messages" >消息</a></li> 
  <li><a href = "#settings" >设置</a></li> 
</ul>
 
<div class = "药丸内容" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "个人资料" > ... </div> 
  <div id = "消息" > ... </div> 
  <div id = "设置" > ... </div> 
</ul>
 
<脚本>
  $ (函数() {  
    $ （'.tabs' ）。选项卡()
  })
</脚本>

演示

• 家
• 轮廓
• 留言
• 设置

基于 Jason Frame 编写的优秀的 jQuery.tipsy 插件；twipsy 是一个更新版本，它不依赖图像，使用 css3 进行动画，使用 data-attributes 存储标题！

下载

使用 bootstrap-twipsy.js

$ （'#example' ）。twipsy (选项)

选项

姓名	类型	默认	描述
动画	布尔值	真的	对工具提示应用 css 淡入淡出过渡
延迟输入	数字	0	显示工具提示前的延迟（毫秒）
延迟输出	数字	0	隐藏工具提示前的延迟（毫秒）
倒退	细绳	''	不存在工具提示标题时使用的文本
放置	细绳	'以上'	如何定位工具提示 - 上面 | 下面 | 离开 | 正确的
html	布尔值	错误的	允许在工具提示中包含 html 内容
居住	布尔值	错误的	使用事件委托而不是单个事件处理程序
抵消	数字	0	工具提示与目标元素的像素偏移
标题	字符串 | 功能	'标题'	检索标题文本的属性或方法
扳机	细绳	'徘徊'	如何触发工具提示 - 悬停 | 焦点 | 手动的

方法

$().twipsy(选项)

将 twipsy 处理程序附加到元素集合。

.twipsy('显示')

揭示了一个元素 twipsy。

$ （'#element' ）。twipsy （'显示' ）

.twipsy('隐藏')

隐藏元素 twipsy。

$ （'#element' ）。twipsy （'隐藏' ）

.twipsy(真)

返回一个元素 twipsy 类实例。

$ （'#element' ）。twipsy （真）

注意或者，这可以用 检索$().data('twipsy')。

演示

popover 插件提供了一个简单的界面，用于将弹出框添加到您的应用程序中。它扩展了boostrap-twipsy.js插件，所以在你的项目中包含弹出框时一定要获取该文件！

下载

使用 boostrap-popover.js

$ （'#example' ）。弹出框（选项）

选项

姓名	类型	默认	描述
动画	布尔值	真的	对工具提示应用 css 淡入淡出过渡
延迟输入	数字	0	显示工具提示前的延迟（毫秒）
延迟输出	数字	0	隐藏工具提示前的延迟（毫秒）
倒退	细绳	''	不存在工具提示标题时使用的文本
放置	细绳	'正确的'	如何定位工具提示 - 上面 | 下面 | 离开 | 正确的
html	布尔值	错误的	允许在工具提示中包含 html 内容
居住	布尔值	错误的	使用事件委托而不是单个事件处理程序
抵消	数字	0	工具提示与目标元素的像素偏移
标题	字符串 | 功能	'标题'	检索标题文本的属性或方法
内容	字符串 | 功能	'数据内容'	检索内容文本的属性或方法
扳机	细绳	'徘徊'	如何触发工具提示 - 悬停 | 焦点 | 手动的

方法

$().popover(选项)

初始化元素集合的弹出框。

.popover('显示')

显示元素弹出框。

$ （'#element' ）。弹出窗口（“显示” ）

.popover('隐藏')

隐藏元素弹出框。

$ （'#element' ）。弹出框（'隐藏' ）

演示

悬停弹出框

警报插件是一个超小类，用于向警报添加关闭功能。

下载

使用 bootstrap-alerts.js

$ ( ".alert-message" )。警报()

标记

只需在data-alert您的警报消息中添加一个属性，即可自动为它们提供关闭功能。

方法

$().alert()

使用关闭功能包装所有警报。要让警报在关闭时显示动画，请确保它们已经应用了.fadeand.in类。

.alert('关闭')

关闭警报。

$ ( ".alert-message" )。警报（'关闭' ）

演示