JavaScript

单独或编译

插件可以单独包含（使用 Bootstrap 的单个*.js文件），也可以一次全部包含（使用bootstrap.js或 minified bootstrap.min.js）。

使用已编译的 JavaScript

两者都bootstrap.js包含bootstrap.min.js在一个文件中的所有插件。只包括一个。

插件依赖

一些插件和 CSS 组件依赖于其他插件。如果您单独包含插件，请确保在文档中检查这些依赖项。另请注意，所有插件都依赖于 jQuery（这意味着 jQuery 必须包含在插件文件之前）。请咨询我们bower.json以了解支持的 jQuery 版本。

数据属性

您可以完全通过标记 API 使用所有 Bootstrap 插件，而无需编写任何 JavaScript 代码。这是 Bootstrap 的一流 API，在使用插件时应该是您的首要考虑因素。

也就是说，在某些情况下，可能需要关闭此功能。因此，我们还提供了禁用数据属性 API 的功能，方法是解除对命名空间为data-api. 这看起来像这样：

$(document).off('.data-api')

或者，要针对特定插件，只需将插件的名称作为命名空间与 data-api 命名空间一起包含，如下所示：

$(document).off('.alert.data-api')

通过数据属性每个元素只有一个插件

不要在同一个元素上使用来自多个插件的数据属性。例如，一个按钮不能同时具有工具提示和切换模式。为此，请使用包装元素。

程序化 API

我们也相信您应该能够纯粹通过 JavaScript API 使用所有 Bootstrap 插件。所有公共 API 都是单一的、可链接的方法，并返回所操作的集合。

$('.btn.danger').button('toggle').addClass('fat')

所有方法都应该接受一个可选的选项对象，一个针对特定方法的字符串，或者什么都没有（它启动一个具有默认行为的插件）：

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

每个插件还在一个Constructor属性上公开其原始构造函数：$.fn.popover.Constructor. 如果您想获取特定的插件实例，请直接从元素中检索它：$('[rel="popover"]').data('popover')。

默认设置

您可以通过修改插件的Constructor.DEFAULTS对象来更改插件的默认设置：

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

没有冲突

有时需要将 Bootstrap 插件与其他 UI 框架一起使用。在这些情况下，有时会发生命名空间冲突。如果发生这种情况，您可以调用.noConflict您希望恢复其值的插件。

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

活动

Bootstrap 为大多数插件的独特操作提供自定义事件。通常，这些以不定式和过去分词形式出现 - 其中不定式（例如show）在事件开始时触发，其过去分词形式（例如shown）在动作完成时触发。

从 3.0.0 开始，所有 Bootstrap 事件都具有命名空间。

所有不定式事件都提供preventDefault功能。这提供了在动作开始之前停止执行的能力。

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

消毒剂

工具提示和弹出框使用我们内置的清理程序来清理接受 HTML 的选项。

默认whiteList值如下：

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

如果要向此默认值添加新值，whiteList可以执行以下操作：

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

如果您想绕过我们的清理程序，因为您更喜欢使用专用库，例如 DOMPurify，您应该执行以下操作：

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

没有的浏览器`document.implementation.createHTMLDocument`

对于不支持的浏览器document.implementation.createHTMLDocument，例如 Internet Explorer 8，内置的清理功能会按原样返回 HTML。

如果您想在这种情况下执行清理，请指定并使用像DOMPurifysanitizeFn这样的外部库。

版本号

每个 Bootstrap 的 jQuery 插件的版本都可以通过VERSION插件构造函数的属性来访问。例如，对于工具提示插件：

$.fn.tooltip.Constructor.VERSION // => "3.4.1"

禁用 JavaScript 时没有特殊的回退

当 JavaScript 被禁用时，Bootstrap 的插件不会特别优雅地回退。如果您关心这种情况下的用户体验，请使用<noscript>向您的用户解释情况（以及如何重新启用 JavaScript），和/或添加您自己的自定义后备。

第三方库

Bootstrap 不正式支持第三方 JavaScript 库，如 Prototype 或 jQuery UI。尽管有.noConflict命名空间的事件，但您可能需要自行修复兼容性问题。

关于过渡

对于简单的过渡效果，transition.js在其他 JS 文件旁边包含一次。如果您使用的是已编译（或缩小）bootstrap.js的，则无需包含它——它已经存在。

里面有什么

Transition.js 是transitionEnd事件的基本助手以及 CSS 过渡模拟器。其他插件使用它来检查 CSS 过渡支持并捕获悬挂过渡。

禁用过渡

可以使用以下 JavaScript 代码段全局禁用转换，该代码段必须在transition.js（或bootstrap.js或bootstrap.min.js，视情况而定）已加载之后：

$.support.transition = false

模态是精简但灵活的对话框提示，具有最低要求的功能和智能默认值。

不支持多个打开模式

确保在另一个仍然可见时不要打开一个模态。一次显示多个模式需要自定义代码。

由于 HTML5 定义其语义的方式，autofocusHTML 属性在 Bootstrap 模式中无效。要达到相同的效果，请使用一些自定义 JavaScript：

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

例子

静态示例

在页脚中带有页眉、正文和一组操作的渲染模式。

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

现场演示

单击下面的按钮，通过 JavaScript 切换模式。它将向下滑动并从页面顶部淡入。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

可选尺寸

模态框有两种可选尺寸，可通过修饰符类放置在.modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

移除动画

对于只是出现而不是淡入查看.fade的模态，请从模态标记中删除该类。

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

使用网格系统

要在模态中利用 Bootstrap 网格系统，只需.row将 s嵌套在中.modal-body，然后使用正常的网格系统类。

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

有一堆按钮都触发相同的模式，只是内容略有不同？使用event.relatedTarget和HTMLdata-*属性（可能通过 jQuery）根据单击的按钮来改变模式的内容。有关详细信息，请参阅模态事件文档relatedTarget，

...更多按钮...

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

用法

模态插件通过数据属性或 JavaScript 按需切换隐藏内容。它还添加.modal-open到<body>覆盖默认滚动行为并生成一个.modal-backdrop以提供单击区域，以便在单击模态框外时关闭显示的模态框。

通过数据属性

无需编写 JavaScript 即可激活模式。在控制器元素上设置data-toggle="modal"，如按钮，以及一个data-target="#foo"或href="#foo"以特定模式为目标进行切换。

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

通过 JavaScript

myModal使用单行 JavaScript调用带有 id 的模式：

$('#myModal').modal(options)

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到中data-，如data-backdrop="".

姓名	类型	默认	描述
背景	布尔值或字符串`'static'`	真的	包括一个模态背景元素。或者，指定`static`在单击时不关闭模式的背景。
键盘	布尔值	真的	按下退出键时关闭模态
节目	布尔值	真的	初始化时显示模态。
偏僻的	小路	错误的	此选项自 v3.3.0 起已弃用，并已在 v4 中删除。我们建议改为使用客户端模板或数据绑定框架，或者自己调用jQuery.load。如果提供了远程 URL，内容将通过 jQuery 的方法加载一次`load`并注入到`.modal-content`div 中。如果您使用的是 data-api，您也可以使用该`href`属性来指定远程源。这方面的一个例子如下所示： `<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>`

方法

`.modal(options)`

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

$('#myModal').modal({
  keyboard: false
})

`.modal('toggle')`

手动切换模式。在模态框实际显示或隐藏之前（即在or事件发生之前）返回给调用者。shown.bs.modalhidden.bs.modal

$('#myModal').modal('toggle')

`.modal('show')`

手动打开一个模态。在模态实际显示之前（即在事件发生之前）返回给调用者。shown.bs.modal

$('#myModal').modal('show')

`.modal('hide')`

手动隐藏模态。在模态框实际上被隐藏之前（即在事件发生之前）返回给调用者。hidden.bs.modal

$('#myModal').modal('hide')

`.modal('handleUpdate')`

重新调整模态框的位置以对抗滚动条，以防出现滚动条，这会使模态框跳到左侧。

仅当模态的高度在打开时发生变化时才需要。

$('#myModal').modal('handleUpdate')

活动

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

所有模态事件都在模态本身触发（即在<div class="modal">）。

事件类型	描述
show.bs.modal	`show`调用实例方法时立即触发此事件。如果由单击引起，则单击的元素可用作`relatedTarget`事件的属性。
显示.bs.modal	当模式对用户可见时触发此事件（将等待 CSS 转换完成）。如果由单击引起，则单击的元素可用作`relatedTarget`事件的属性。
hide.bs.modal	`hide`调用实例方法时立即触发此事件。
hidden.bs.modal	当模态对用户隐藏完成时会触发此事件（将等待 CSS 转换完成）。
加载.bs.modal	`remote`当模态使用该选项加载内容时会触发此事件。

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

例子

使用这个简单的插件几乎可以将下拉菜单添加到任何东西，包括导航栏、选项卡和药丸。

药丸内

用法

.open通过数据属性或 JavaScript，下拉插件通过切换父列表项上的类来切换隐藏内容（下拉菜单）。

在移动设备上，打开下拉菜单会添加一个.dropdown-backdrop作为在菜单外点击时关闭下拉菜单的点击区域，这是适当的 iOS 支持的要求。这意味着从打开的下拉菜单切换到不同的下拉菜单需要额外点击移动设备。

注意：该data-toggle="dropdown"属性依赖于在应用程序级别关闭下拉菜单，因此最好始终使用它。

通过数据属性

添加data-toggle="dropdown"到链接或按钮以切换下拉菜单。

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

要使用链接按钮保持 URL 完整，请使用data-target属性而不是href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

通过 JavaScript

通过 JavaScript 调用下拉菜单：

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`仍然需要

无论您是通过 JavaScript 调用下拉菜单还是使用 data-api，data-toggle="dropdown"都必须始终出现在下拉菜单的触发元素上。

选项

没有任何

方法

`$().dropdown('toggle')`

切换给定导航栏或选项卡式导航的下拉菜单。

活动

所有下拉事件都在.dropdown-menu的父元素上触发。

所有下拉事件都有一个relatedTarget属性，其值是切换锚元素。

事件类型	描述
show.bs.dropdown	此事件在调用 show 实例方法时立即触发。
显示.bs.dropdown	当下拉菜单对用户可见时触发此事件（将等待 CSS 转换完成）。
hide.bs.dropdown	当调用 hide 实例方法时，会立即触发此事件。
hidden.bs.dropdown	当下拉菜单完成对用户隐藏时触发此事件（将等待 CSS 转换完成）。

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

导航栏中的示例

ScrollSpy 插件用于根据滚动位置自动更新导航目标。滚动导航栏下方的区域并观察活动类的变化。下拉子项目也将突出显示。

@胖的

广告紧身裤 keytar，早午餐 id 艺术派对 dolor labe。Pitchfork yr enim lo-fi 在售罄之前 qui。Tumblr 从农场到餐桌的自行车权利。Anim keffiyeh carles 开衫。Velit seitan mcsweeney 的照相亭 3 wolf moon irure。Cosby 毛衣 lomo jean 短裤，williamsburg 连帽衫 minim qui 你可能没听说过它们和开衫信托基金过失生物柴油韦斯安德森美学。Nihil 纹身 accusamus，具有讽刺意味的生物柴油 keffiyeh 工匠 ullamco 后果。

@mdo

Veniam marfa 小胡子滑板，adipisicing fugiat velit 干草叉胡须。Freegan 胡须 aliqua cupidatat mcsweeney 的 vero。Cupidatat 四个 loko nisi，ea helvetica nulla carles。纹身 cosby 毛衣食品卡车，mcsweeney 的非免费乙烯基。低保真韦斯安德森 +1 裁缝。卡尔斯非审美练习 quis 绅士化。布鲁克林 adipisicing 精酿啤酒副 keytar deserunt。

一

Occaecat commodo aliqua delectus。Fap 精酿啤酒 deserunt 滑板 ea。Lomo 自行车权利 adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam。High Life id 黑胶唱片，echo park consequat quis aliquip banh mi 干草叉。Vero VHS est adipisicing。Consectetur nisi DIY 迷你邮差包。Cred ex in，可持续的 delectus consectetur 腰包 iphone。

二

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee 博客，过错邮差包 marfa 不管什么美味的食品卡车。Sapiente 合成器 id 假设。Locavore sed helvetica 陈词滥调具有讽刺意味，您可能没有听说过它们导致连帽衫无麸质 lo-fi fap aliquip。在售罄之前，Labore 曾登上过一席之地，terry Richardson 早午餐 nesciunt quis cosby 毛衣 pariatur keffiyeh ut helvetica artisan。开衫精酿啤酒 seitan 现成的 velit。VHS chambray labouris tempor veniam。Anim mollit minim commodo ullamco 雷猫。

用法

需要引导导航

Scrollspy 当前需要使用Bootstrap 导航组件来正确突出显示活动链接。

需要可解析的 ID 目标

导航栏链接必须具有可解析的 id 目标。例如，a<a href="#home">home</a>必须对应 DOM 中的某些内容，例如<div id="home"></div>.

非`:visible`目标元素被忽略

:visible不符合 jQuery的目标元素将被忽略，并且它们相应的导航项将永远不会突出显示。

需要相对定位

无论实现方法如何，scrollspy 都需要在position: relative;您正在监视的元素上使用。在大多数情况下，这是<body>. 当对以外的元素进行滚动监视时<body>，请务必height设置并overflow-y: scroll;应用。

通过数据属性

要轻松地将 scrollspy 行为添加到您的顶栏导航，请添加data-spy="scroll"到您要监视的元素（通常是<body>）。然后添加带有任何 Bootstrap组件data-target的父元素的 ID 或类的属性。.nav

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

通过 JavaScript

添加position: relative;CSS 后，通过 JavaScript 调用 scrollspy：

$('body').scrollspy({ target: '#navbar-example' })

方法

`.scrollspy('refresh')`

当使用 scrollspy 和从 DOM 中添加或删除元素时，你需要像这样调用 refresh 方法：

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到中data-，如data-offset="".

姓名	类型	默认	描述
抵消	数字	10	计算滚动位置时从顶部偏移的像素。

活动

事件类型	描述
激活.bs.scrollspy	每当滚动间谍激活新项目时，就会触发此事件。

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

示例选项卡

添加快速、动态的选项卡功能以在本地内容窗格之间进行转换，甚至通过下拉菜单。不支持嵌套选项卡。

你可能没听说过奥斯汀牛仔短裤。Nesciunt tofu stumptown aliqua，复古合成大师净化。小胡子陈词滥调，威廉斯堡卡尔斯素食主义者 helvetica。Reprehenderit 屠夫复古 keffiyeh 捕梦网合成器。Cosby 毛衣 eu banh mi, qui irure terry richardson ex squid。Aliquip placeat 鼠尾草 iphone。Seitan aliquip quis 开衫美国服装，屠夫 voluptate nisi qui。

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

扩展选项卡式导航

此插件扩展了选项卡式导航组件以添加选项卡区域。

用法

通过 JavaScript 启用可选项卡（每个选项卡需要单独激活）：

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

您可以通过多种方式激活单个选项卡：

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

标记

您无需编写任何 JavaScript，只需在元素上指定data-toggle="tab"或即可激活选项卡或药丸导航。data-toggle="pill"将nav和nav-tabs类添加到选项卡ul将应用 Bootstrap选项卡样式，而添加nav和nav-pills类将应用药丸样式。

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

淡化效果

要使标签淡入，请添加.fade到每个.tab-pane. 第一个选项卡窗格还必须.in使初始内容可见。

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

方法

`$().tab`

激活选项卡元素和内容容器。Tab 应该在 DOM 中具有一个data-target或一个href目标容器节点。在上面的示例中，选项卡是<a>带有data-toggle="tab"属性的 s。

`.tab('show')`

选择给定的选项卡并显示其相关内容。之前选择的任何其他选项卡都将被取消选择，并且其相关内容被隐藏。在选项卡窗格实际显示之前（即在事件发生之前）返回给调用者。shown.bs.tab

$('#someTab').tab('show')

活动

显示新选项卡时，事件按以下顺序触发：

hide.bs.tab（在当前活动选项卡上）
show.bs.tab（在待显示的选项卡上）
hidden.bs.tab（在上一个活动选项卡上，与hide.bs.tab事件相同）
shown.bs.tab（在刚刚显示的新活动选项卡上，与show.bs.tab活动相同）

如果没有选项卡处于活动状态，则不会触发hide.bs.taband事件。hidden.bs.tab

事件类型	描述
显示.bs.tab	此事件在标签显示时触发，但在新标签显示之前。使用`event.target`和`event.relatedTarget`分别定位活动选项卡和上一个活动选项卡（如果可用）。
显示的.bs.tab	显示选项卡后，此事件在选项卡显示时触发。使用`event.target`和`event.relatedTarget`分别定位活动选项卡和上一个活动选项卡（如果可用）。
隐藏.bs.tab	此事件在要显示新选项卡时触发（因此要隐藏先前的活动选项卡）。使用`event.target`和`event.relatedTarget`分别定位当前活动选项卡和新的即将活动选项卡。
hidden.bs.tab	此事件在显示新选项卡后触发（因此先前的活动选项卡被隐藏）。使用`event.target`和`event.relatedTarget`分别定位前一个活动选项卡和新活动选项卡。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

受到 Jason Frame 编写的优秀 jQuery.tipsy 插件的启发；工具提示是一个更新版本，它不依赖图像，使用 CSS3 制作动画，使用数据属性存储本地标题。

从不显示具有零长度标题的工具提示。

例子

将鼠标悬停在下面的链接上以查看工具提示：

有四个选项可用：上对齐、右对齐、下对齐和左对齐。

四个方向

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

选择加入功能

出于性能原因，Tooltip 和 Popover data-apis 是可选的，这意味着您必须自己初始化它们。

初始化页面上所有工具提示的一种方法是通过它们的data-toggle属性来选择它们：

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

用法

工具提示插件按需生成内容和标记，默认情况下将工具提示放置在其触发元素之后。

通过 JavaScript 触发工具提示：

$('#example').tooltip(options)

标记

工具提示所需的标记只是一个data属性，并且title在您希望拥有工具提示的 HTML 元素上。生成的工具提示标记相当简单，尽管它确实需要一个位置（默认情况下，top由插件设置）。

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到中data-，如data-animation="".

姓名	类型	默认	描述
动画	布尔值	真的	对工具提示应用 CSS 淡入淡出过渡
容器	字符串 \| 错误的	错误的	将工具提示附加到特定元素。示例：`container: 'body'`。此选项特别有用，因为它允许您将工具提示定位在文档流中靠近触发元素的位置 - 这将防止工具提示在窗口调整大小期间从触发元素浮动。
延迟	号码 \| 目的	0	延迟显示和隐藏工具提示 (ms) - 不适用于手动触发类型如果提供了一个数字，延迟将应用于隐藏/显示对象结构为：`delay: { "show": 500, "hide": 100 }`
html	布尔值	错误的	将 HTML 插入到工具提示中。如果为 false，jQuery 的`text`方法将用于将内容插入 DOM。如果您担心 XSS 攻击，请使用文本。
放置	字符串 \| 功能	'最佳'	如何定位工具提示 - 顶部 \| 底部 \| 离开 \| 对 \| 汽车。当指定“自动”时，它将动态地重新定位工具提示。例如，如果放置为“自动向左”，则工具提示将尽可能显示在左侧，否则将显示在右侧。当一个函数用于确定位置时，它会以工具提示 DOM 节点作为其第一个参数，触发元素 DOM 节点作为其第二个参数来调用。`this`上下文设置为工具提示实例。
选择器	细绳	错误的	如果提供了选择器，则工具提示对象将被委托给指定的目标。在实践中，这也用于将工具提示应用于动态添加的 DOM 元素（`jQuery.on`支持）。请参阅this和一个内容丰富的示例。
模板	细绳	`'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'`	创建工具提示时要使用的基本 HTML。工具提示`title`将被注入到`.tooltip-inner`. `.tooltip-arrow`将成为工具提示的箭头。最外层的包装元素应该有`.tooltip`类。
标题	字符串 \| 功能	''	`title`如果属性不存在，则默认标题值。如果给定了一个函数，它将被调用，并将其`this`引用设置为工具提示附加到的元素。
扳机	细绳	'悬停焦点'	工具提示是如何触发的 - 点击 \| 悬停 \| 焦点 \| 手动的。您可以传递多个触发器；用空格分隔它们。`manual`不能与任何其他触发器结合使用。
视口	字符串 \| 对象 \| 功能	{ 选择器：'body'，填充：0 }	将工具提示保持在此元素的范围内。示例：`viewport: '#viewport'`或`{ "selector": "#viewport", "padding": 0 }` 如果给定了一个函数，则使用触发元素 DOM 节点作为其唯一参数来调用它。`this`上下文设置为工具提示实例。
消毒	布尔值	真的	启用或禁用清理。如果激活`'template'`，选项将被清理`'content'`。`'title'`
白名单	目的	默认值	包含允许的属性和标签的对象
sanitizeFn	空 \| 功能	无效的	在这里，您可以提供自己的消毒功能。如果您更喜欢使用专用库来执行清理，这会很有用。

方法

`$().tooltip(options)`

将工具提示处理程序附加到元素集合。

`.tooltip('show')`

显示元素的工具提示。在工具提示实际显示之前（即在事件发生之前）返回给调用者。shown.bs.tooltip这被认为是工具提示的“手动”触发。从不显示具有零长度标题的工具提示。

$('#element').tooltip('show')

`.tooltip('hide')`

隐藏元素的工具提示。在工具提示实际上被隐藏之前（即在事件发生之前）返回给调用者。hidden.bs.tooltip这被认为是工具提示的“手动”触发。

$('#element').tooltip('hide')

`.tooltip('toggle')`

切换元素的工具提示。在工具提示实际显示或隐藏之前（即在or事件发生之前）返回给调用者。这被认为是工具提示的“手动”触发。shown.bs.tooltiphidden.bs.tooltip

$('#element').tooltip('toggle')

`.tooltip('destroy')`

隐藏和破坏元素的工具提示。使用委托（使用选项创建）的selector工具提示不能在后代触发器元素上单独销毁。

$('#element').tooltip('destroy')

活动

事件类型	描述
show.bs.tooltip	`show`调用实例方法时立即触发此事件。
显示的.bs.tooltip	当工具提示对用户可见时触发此事件（将等待 CSS 转换完成）。
hide.bs.tooltip	`hide`调用实例方法时立即触发此事件。
hidden.bs.tooltip	当工具提示完成对用户隐藏时触发此事件（将等待 CSS 转换完成）。
插入的.bs.tooltip	此事件`show.bs.tooltip`在工具提示模板添加到 DOM 的事件之后触发。

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

向任何元素添加小的内容覆盖，如 iPad 上的内容，以容纳辅助信息。

标题和内容均为零长度的弹出框永远不会显示。

选择加入功能

出于性能原因，Tooltip 和 Popover data-apis 是可选的，这意味着您必须自己初始化它们。

初始化页面上所有弹出框的一种方法是通过它们的data-toggle属性选择它们：

$(function () {
  $('[data-toggle="popover"]').popover()
})

例子

有四个选项可用：上对齐、右对齐、下对齐和左对齐。

现场演示

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

四个方向

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

下次点击关闭

使用focus触发器在用户下次单击时关闭弹出框。

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

用法

通过 JavaScript 启用弹出框：

$('#example').popover(options)

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到中data-，如data-animation="".

姓名	类型	默认	描述
动画	布尔值	真的	对弹出框应用 CSS 淡入淡出过渡
容器	字符串 \| 错误的	错误的	将弹出框附加到特定元素。示例：`container: 'body'`。此选项特别有用，因为它允许您将弹出框定位在靠近触发元素的文档流中 - 这将防止弹出框在窗口调整大小期间从触发元素浮动。
内容	字符串 \| 功能	''	`data-content`如果属性不存在，则默认内容值。如果给定了一个函数，它将被调用，并将其`this`引用设置为弹出框附加到的元素。
延迟	号码 \| 目的	0	延迟显示和隐藏弹出框（毫秒） - 不适用于手动触发类型如果提供了一个数字，延迟将应用于隐藏/显示对象结构为：`delay: { "show": 500, "hide": 100 }`
html	布尔值	错误的	将 HTML 插入弹出框。如果为 false，jQuery 的`text`方法将用于将内容插入 DOM。如果您担心 XSS 攻击，请使用文本。
放置	字符串 \| 功能	'正确的'	如何定位弹出框 - 顶部 \| 底部 \| 离开 \| 对 \| 汽车。当指定“auto”时，它将动态地重新定向弹出框。例如，如果放置是“自动向左”，则弹出框将尽可能显示在左侧，否则将显示在右侧。当一个函数用于确定位置时，它会以弹出框 DOM 节点作为其第一个参数，触发元素 DOM 节点作为其第二个参数来调用。`this`上下文设置为弹出框实例。
选择器	细绳	错误的	如果提供了选择器，弹出框对象将被委托给指定的目标。在实践中，这用于启用动态 HTML 内容以添加弹出框。请参阅this和一个内容丰富的示例。
模板	细绳	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'`	创建弹出框时要使用的基本 HTML。弹出框`title`将被注入到`.popover-title`. 弹出框`content`将被注入到`.popover-content`. `.arrow`将成为弹出框的箭头。最外层的包装元素应该有`.popover`类。
标题	字符串 \| 功能	''	`title`如果属性不存在，则默认标题值。如果给定了一个函数，它将被调用，并将其`this`引用设置为弹出框附加到的元素。
扳机	细绳	'点击'	弹出框是如何触发的 - 点击 \| 悬停 \| 焦点 \| 手动的。您可以传递多个触发器；用空格分隔它们。`manual`不能与任何其他触发器结合使用。
视口	字符串 \| 对象 \| 功能	{ 选择器：'body'，填充：0 }	将弹出框保持在此元素的范围内。示例：`viewport: '#viewport'`或`{ "selector": "#viewport", "padding": 0 }` 如果给定了一个函数，则使用触发元素 DOM 节点作为其唯一参数来调用它。`this`上下文设置为弹出框实例。
消毒	布尔值	真的	启用或禁用清理。如果激活`'template'`，选项将被清理`'content'`。`'title'`
白名单	目的	默认值	包含允许的属性和标签的对象
sanitizeFn	空 \| 功能	无效的	在这里，您可以提供自己的消毒功能。如果您更喜欢使用专用库来执行清理，这会很有用。

方法

`$().popover(options)`

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

`.popover('show')`

显示元素的弹出框。在弹出框实际显示之前（即在事件发生之前）返回给调用者。shown.bs.popover这被认为是弹出框的“手动”触发。标题和内容均为零长度的弹出框永远不会显示。

$('#element').popover('show')

`.popover('hide')`

隐藏元素的弹出框。在弹出框实际上被隐藏之前（即在事件发生之前）返回给调用者。hidden.bs.popover这被认为是弹出框的“手动”触发。

$('#element').popover('hide')

`.popover('toggle')`

切换元素的弹出框。在弹出框实际显示或隐藏之前（即在or事件发生之前）返回给调用者。这被认为是弹出框的“手动”触发。shown.bs.popoverhidden.bs.popover

$('#element').popover('toggle')

`.popover('destroy')`

隐藏和销毁元素的弹出框。使用委托（使用选项创建）的selector弹出框不能在后代触发器元素上单独销毁。

$('#element').popover('destroy')

活动

事件类型	描述
show.bs.popover	`show`调用实例方法时立即触发此事件。
显示的.bs.popover	当弹出框对用户可见时触发此事件（将等待 CSS 转换完成）。
hide.bs.popover	`hide`调用实例方法时立即触发此事件。
hidden.bs.popover	当弹出窗口完成对用户隐藏时触发此事件（将等待 CSS 转换完成）。
插入的.bs.popover	该事件`show.bs.popover`在弹出框模板添加到 DOM 后触发。

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

示例警报

使用此插件向所有警报消息添加解除功能。

使用.close按钮时，它必须是的第一个子元素，.alert-dismissible并且在标记中不能出现任何文本内容。

神圣的鳄梨酱！最好检查一下自己，你看起来不太好。

哦，快！你有一个错误！

改变这个和那个，然后再试一次。Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit。Cras mattis consectetur purus 坐在 amet 发酵液中。

用法

只需添加data-dismiss="alert"到您的关闭按钮即可自动提供警报关闭功能。关闭警报会将其从 DOM 中删除。

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

要让警报在关闭时使用动画，请确保它们已经应用了.fade和.in类。

方法

`$().alert()`

使警报侦听具有该data-dismiss="alert"属性的后代元素上的单击事件。（使用 data-api 的自动初始化时不需要。）

`$().alert('close')`

通过从 DOM 中删除警报来关闭它。如果元素上存在.fade和.in类，则警报将在被删除之前淡出。

活动

Bootstrap 的警报插件公开了一些用于连接警报功能的事件。

事件类型	描述
关闭.bs.alert	`close`调用实例方法时立即触发此事件。
关闭.bs.alert	当警报关闭时触发此事件（将等待 CSS 转换完成）。

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

用按钮做更多事情。控制按钮状态或为更多组件（如工具栏）创建按钮组。

跨浏览器兼容性

Firefox 在页面加载时保持表单控制状态（禁用和检查）。一种解决方法是使用autocomplete="off". 请参阅Mozilla 错误 #654072。

有状态的

添加data-loading-text="Loading..."以在按钮上使用加载状态。

此功能自 v3.3.5 起已弃用，并已在 v4 中删除。

使用您喜欢的任何状态！

为了演示，我们使用data-loading-textand $().button('loading')，但这不是您可以使用的唯一状态。在下面的文档中查看更多$().button(string)信息。

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

单切换

添加data-toggle="button"以激活单个按钮上的切换。

预切换按钮需要`.active`和`aria-pressed="true"`

对于预切换按钮，您必须将.active类和aria-pressed="true"属性添加到您button自己。

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

复选框/收音机

添加data-toggle="buttons"到.btn-group包含复选框或单选输入以启用各自样式的切换。

预选选项需要`.active`

对于预选选项，您必须自己将.active类添加到输入中label。

仅在单击时更新视觉检查状态

如果复选框按钮的选中状态在没有触发click按钮上的事件的情况下更新（例如，通过<input type="reset">或通过设置checked输入的属性），您将需要自己切换.active输入上的类label。

复选框 1（预先选中）复选框 2 复选框 3

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

收音机 1（预选）电台 2 电台 3

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Radio 3
  </label>
</div>

方法

`$().button('toggle')`

切换推送状态。使按钮具有已激活的外观。

`$().button('reset')`

重置按钮状态 - 将文本交换为原始文本。此方法是异步的，并在重置实际完成之前返回。

`$().button(string)`

将文本交换为任何数据定义的文本状态。

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

灵活的插件，利用少数类来轻松切换行为。

插件依赖

Collapse 需要在您的 Bootstrap 版本中包含过渡插件。

例子

单击下面的按钮以通过类更改显示和隐藏另一个元素：

.collapse隐藏内容
.collapsing在过渡期间应用
.collapse.in显示内容

您可以使用带有属性的链接href或带有属性的按钮data-target。在这两种情况下，data-toggle="collapse"都是必需的。

与href链接

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

手风琴示例

扩展默认折叠行为以使用面板组件创建手风琴。

可折叠组项目 #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid。3 wolf moon officia aute，非 Cupidatat 滑板 dolor 早午餐。食品卡车藜麦 nesciunt labourum eiusmod。早午餐 3 wolf moon tempor，sunt aliqua 在上面放了一只鸟 squid 单一产地咖啡 nulla assumendashoreditch 等。Nihil anim keffiyeh helvetica，精酿啤酒工人韦斯安德森相信 nesciunt sapiente ea proident。Ad vegan excepteur 屠夫 Vice lomo。紧身裤 occaecat 精酿啤酒从农场到餐桌，粗斜纹棉布美学合成器您可能没有听说过它们 accusamus labe 可持续 VHS。

可折叠组项目 #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid。3 wolf moon officia aute，非 Cupidatat 滑板 dolor 早午餐。食品卡车藜麦 nesciunt labourum eiusmod。早午餐 3 wolf moon tempor，sunt aliqua 在上面放了一只鸟 squid 单一产地咖啡 nulla assumendashoreditch 等。Nihil anim keffiyeh helvetica，精酿啤酒工人韦斯安德森相信 nesciunt sapiente ea proident。Ad vegan excepteur 屠夫 Vice lomo。紧身裤 occaecat 精酿啤酒从农场到餐桌，粗斜纹棉布美学合成器您可能没有听说过它们 accusamus labe 可持续 VHS。

可折叠组项目 #3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid。3 wolf moon officia aute，非 Cupidatat 滑板 dolor 早午餐。食品卡车藜麦 nesciunt labourum eiusmod。早午餐 3 wolf moon tempor，sunt aliqua 在上面放了一只鸟 squid 单一产地咖啡 nulla assumendashoreditch 等。Nihil anim keffiyeh helvetica，精酿啤酒工人韦斯安德森相信 nesciunt sapiente ea proident。Ad vegan excepteur 屠夫 Vice lomo。紧身裤 occaecat 精酿啤酒从农场到餐桌，粗斜纹棉布美学合成器您可能没有听说过它们 accusamus labe 可持续 VHS。

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

也可以.panel-body用s 交换.list-groups。

可折叠列表组

引导层
一种益生菌
第二爱欲

页脚

使展开/折叠控件可访问

一定要添加aria-expanded到控制元素。该属性明确定义了屏幕阅读器和类似辅助技术的可折叠元素的当前状态。如果可折叠元素默认关闭，则它的值应为aria-expanded="false". 如果您已使用in类将可折叠元素设置为默认打开，aria-expanded="true"请改为在控件上设置。该插件将根据可折叠元素是否已打开或关闭自动切换此属性。

此外，如果您的控制元素以单个可折叠元素为目标——即该data-target属性指向一个id选择器——您可以向控制元素添加一个附加aria-controls属性，其中包含id可折叠元素的。现代屏幕阅读器和类似的辅助技术利用此属性为用户提供额外的快捷方式，以直接导航到可折叠元素本身。

用法

崩溃插件利用几个类来处理繁重的工作：

.collapse隐藏内容
.collapse.in显示内容
.collapsing在过渡开始时添加，并在过渡结束时删除

这些类可以在component-animations.less.

通过数据属性

只需向元素添加data-toggle="collapse"和 adata-target即可自动分配对可折叠元素的控制。该data-target属性接受一个 CSS 选择器来应用折叠。确保将类添加collapse到可折叠元素。如果您希望它默认打开，请添加附加类in。

要将手风琴式的组管理添加到可折叠控件，请添加 data 属性data-parent="#selector"。请参阅演示以查看此操作。

通过 JavaScript

手动启用：

$('.collapse').collapse()

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到中data-，如data-parent="".

姓名	类型	默认	描述
父母	选择器	错误的	如果提供了选择器，则在显示此可折叠项时，将关闭指定父项下的所有可折叠元素。（类似于传统的手风琴行为 - 这取决于`panel`类）
切换	布尔值	真的	在调用时切换可折叠元素

方法

`.collapse(options)`

将您的内容激活为可折叠元素。接受一个可选选项object。

$('#myCollapsible').collapse({
  toggle: false
})

`.collapse('toggle')`

将可折叠元素切换为显示或隐藏。在可折叠元素实际显示或隐藏之前（即在or事件发生之前）返回给调用者。shown.bs.collapsehidden.bs.collapse

`.collapse('show')`

显示可折叠元素。在可折叠元素实际显示之前（即在事件发生之前）返回给调用者。shown.bs.collapse

`.collapse('hide')`

隐藏可折叠元素。在可折叠元素实际被隐藏之前（即在事件发生之前）返回给调用者。hidden.bs.collapse

活动

Bootstrap 的折叠类公开了一些用于挂钩折叠功能的事件。

事件类型	描述
show.bs.collapse	`show`调用实例方法时立即触发此事件。
显示.bs.collapse	当折叠元素对用户可见时触发此事件（将等待 CSS 转换完成）。
hide.bs.collapse	`hide`调用该方法时会立即触发此事件。
hidden.bs.collapse	当对用户隐藏折叠元素时会触发此事件（将等待 CSS 转换完成）。

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

用于循环播放元素的幻灯片组件，例如轮播。不支持嵌套轮播。

例子

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

可访问性问题

轮播组件通常不符合可访问性标准。如果您需要合规，请考虑使用其他选项来展示您的内容。

Internet Explorer 8 和 9 不支持过渡动画

Bootstrap 专门使用 CSS3 来制作动画，但 Internet Explorer 8 和 9 不支持必要的 CSS 属性。因此，使用这些浏览器时没有幻灯片过渡动画。我们有意决定不为过渡包含基于 jQuery 的后备。

需要初始活动元素

该类.active需要添加到其中一张幻灯片中。否则，轮播将不可见。

字形图标不是必需的

控件不一定需要和.glyphicon .glyphicon-chevron-left类。.glyphicon .glyphicon-chevron-rightBootstrap 提供.icon-prev并.icon-next作为纯 unicode 替代品。

可选字幕

使用.carousel-caption任何.item. 在那里放置几乎任何可选的 HTML，它将自动对齐和格式化。

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

用法

多个轮播

轮播需要在id最外面的容器 (the .carousel) 上使用，以便轮播控件正常运行。添加多个轮播或更改轮播时id，请务必更新相关控件。

通过数据属性

使用数据属性轻松控制轮播的位置。data-slide接受关键字prevor next，它改变相对于当前位置的幻灯片位置。或者，使用data-slide-to将原始幻灯片索引传递给 carousel data-slide-to="2"，这会将幻灯片位置移动到以开头的特定索引0。

该data-ride="carousel"属性用于将轮播标记为在页面加载时开始动画。它不能与同一轮播的（冗余和不必要的）显式 JavaScript 初始化结合使用。

通过 JavaScript

手动调用轮播：

$('.carousel').carousel()

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到中data-，如data-interval="".

姓名	类型	默认	描述
间隔	数字	5000	自动循环项目之间的延迟时间。如果为 false，carousel 将不会自动循环。
暂停	字符串 \| 无效的	“徘徊”	如果设置为`"hover"`，则暂停旋转木马`mouseenter`的循环并恢复旋转木马的循环`mouseleave`。如果设置为`null`，则将鼠标悬停在轮播上不会暂停它。
裹	布尔值	真的	转盘是否应连续循环或硬停止。
键盘	布尔值	真的	轮播是否应对键盘事件做出反应。

方法

`.carousel(options)`

使用可选选项初始化轮播object并开始循环浏览项目。

$('.carousel').carousel({
  interval: 2000
})

`.carousel('cycle')`

从左到右循环浏览轮播项目。

`.carousel('pause')`

停止轮播在项目中循环。

`.carousel(number)`

将轮播循环到特定帧（基于 0，类似于数组）。

`.carousel('prev')`

循环到上一个项目。

`.carousel('next')`

循环到下一个项目。

活动

Bootstrap 的 carousel 类公开了两个用于连接 carousel 功能的事件。

这两个事件都具有以下附加属性：

direction：轮播的滑动方向（"left"或"right"）。
relatedTarget：作为活动项滑入到位的 DOM 元素。

所有轮播事件都在轮播本身（即在<div class="carousel">）触发。

事件类型	描述
slide.bs.carousel	`slide`调用实例方法时立即触发此事件。
slide.bs.carousel	当轮播完成其幻灯片转换时会触发此事件。

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

例子

词缀插件可以position: fixed;打开和关闭，模拟使用position: sticky;. 右侧的子导航是词缀插件的现场演示。

用法

通过数据属性或手动使用您自己的 JavaScript 使用 affix 插件。在这两种情况下，您都必须为附加内容的定位和宽度提供 CSS。

注意：不要在包含在相对定位元素中的元素上使用词缀插件，例如拉或推的列，因为Safari 呈现错误。

通过 CSS 定位

词缀插件在三个类之间切换，每个类代表一个特定的状态：.affix、.affix-top和.affix-bottom。您必须自己（独立于此插件）为这些类提供样式，除了position: fixed;on来处理实际位置。.affix

以下是词缀插件的工作原理：

首先，插件添加.affix-top以指示元素处于其最顶部位置。此时不需要 CSS 定位。
滚动过去要附加的元素应该会触发实际的附加。这是.affix替换.affix-top和设置的地方position: fixed;（由 Bootstrap 的 CSS 提供）。
如果定义了底部偏移，则滚动过去应替换.affix为.affix-bottom. 由于偏移量是可选的，因此设置一个需要您设置适当的 CSS。在这种情况下，position: absolute;必要时添加。该插件使用 data 属性或 JavaScript 选项来确定从那里放置元素的位置。

按照上述步骤为以下任一使用选项设置 CSS。

通过数据属性

要轻松地将词缀行为添加到任何元素，只需添加data-spy="affix"到要监视的元素即可。使用偏移量来定义何时切换元素的固定。

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

通过 JavaScript

通过 JavaScript 调用 affix 插件：

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到中data-，如data-offset-top="200".

姓名	类型	默认	描述
抵消	号码 \| 功能 \| 目的	10	计算滚动位置时从屏幕偏移的像素。如果提供了单个数字，则将在顶部和底部方向上应用偏移量。要提供唯一的底部和顶部偏移，只需提供一个对象`offset: { top: 10 }`或`offset: { top: 10, bottom: 5 }`. 当您需要动态计算偏移量时使用函数。
目标	选择器 \| 节点 \| jQuery 元素	`window`对象_	指定词缀的目标元素。

方法

`.affix(options)`

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

$('#myAffix').affix({
  offset: 15
})

`.affix('checkPosition')`

根据相关元素的尺寸、位置和滚动位置重新计算词缀的状态。、.affix和类根据新状态添加到附加内容.affix-top中.affix-bottom或从附加内容中删除。每当附加内容或目标元素的尺寸发生变化时，都需要调用该方法，以确保附加内容的正确定位。

$('#myAffix').affix('checkPosition')

活动

Bootstrap 的词缀插件公开了一些用于挂钩词缀功能的事件。

事件类型	描述
词缀.bs.词缀	此事件在元素被附加之前立即触发。
附加.bs.affix	此事件在元素被附加后触发。
词缀-top.bs.affix	此事件在元素被固定到顶部之前立即触发。
贴-top.bs.affix	此事件在元素被固定到顶部后触发。
词缀-bottom.bs.affix	此事件在元素被固定到底部之前立即触发。
贴-bottom.bs.affix	此事件在元素被固定到底部后触发。

概述

单独或编译

使用已编译的 JavaScript

插件依赖

数据属性

通过数据属性每个元素只有一个插件

程序化 API

默认设置

没有冲突

活动

消毒剂

没有的浏览器document.implementation.createHTMLDocument

版本号

禁用 JavaScript 时没有特殊的回退

第三方库

过渡transition.js

关于过渡

里面有什么

禁用过渡

模态modal.js

不支持多个打开模式

模态标记放置

移动设备注意事项

例子

静态示例

现场演示

使模态可访问

嵌入 YouTube 视频

可选尺寸

移除动画

使用网格系统

根据触发按钮改变模态内容

用法

通过数据属性

通过 JavaScript

选项

方法

.modal(options)

.modal('toggle')

.modal('show')

.modal('hide')

.modal('handleUpdate')

活动

下拉菜单 dropdown.js

例子

在导航栏中

药丸内

用法

通过数据属性

通过 JavaScript

data-toggle="dropdown"仍然需要

选项

方法

$().dropdown('toggle')

活动

ScrollSpy scrollspy.js

导航栏中的示例

@胖的

@mdo

一

二

three

用法

需要引导导航

需要可解析的 ID 目标

非:visible目标元素被忽略

需要相对定位

通过数据属性

通过 JavaScript

方法

.scrollspy('refresh')

选项

活动

可切换标签tab.js

示例选项卡

扩展选项卡式导航

用法

标记

淡化效果

没有的浏览器`document.implementation.createHTMLDocument`

`.modal(options)`

`.modal('toggle')`

`.modal('show')`

`.modal('hide')`

`.modal('handleUpdate')`

`data-toggle="dropdown"`仍然需要

`$().dropdown('toggle')`

非`:visible`目标元素被忽略

`.scrollspy('refresh')`

`$().tab`

`.tab('show')`

`$().tooltip(options)`

`.tooltip('show')`

`.tooltip('hide')`

`.tooltip('toggle')`

`.tooltip('destroy')`

`$().popover(options)`

`.popover('show')`

`.popover('hide')`

`.popover('toggle')`

`.popover('destroy')`

`$().alert()`

`$().alert('close')`