按钮

使用 Bootstrap 自定义按钮样式到表单、对话框等操作,并支持多种按钮大小、状态等。

实例

Bootstrap 包括多个预先定义的按钮样式,每个都有自己的语义目的及更多的控制

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
对于使用辅助技术的用户而言

尽管上面的这些类可以对信息进行着色以提供视觉指示,但是这些指示不会传达给辅助技术的用户 - 例如屏幕阅读器。 因此如果某些内容很重要,请直接加入正文中,或者通过其他方式引用,例如使用 .sr-only 类隐藏这些必要的内容。

按钮标签

.btn 是设计为了于 <button> 元素一起使用。 但是,你也可以在 <a><input> 元素上使用这些 Class(尽管有些浏览器可能会使用稍微不同的渲染)。

当在用于触发页面内功能(例如折叠内容)的 <a> 元素上使用按钮类,而不是链接到新页面或当前页面中的部分时,这些 <a> 元素应该再加上 role="button" 以优化用户使用屏幕阅读器等辅助性技术时的体验。

Link
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

外框按钮

需要一个按钮,但不是用填满的背景颜色?用 .btn-outline-* 替换默认修饰用的 Class,以移除任何按钮上的所有背景色及背景图。

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

大小

想要较大或较小的按钮?加入 .btn-lg.btn-sm 来应用尺寸。

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

增加 .btn-block.创建块级别的按钮(等同于外元素的宽)。

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

启用状态

当启用时,按钮将出现按压(背景较暗、边框较暗、内阴影)。 沒有必要在 <button>添加一个 Class,因为它们使用伪类。但是,如果你需要以动态方式改变状态,则可以使用 .active (并包括 aria-pressed="true" 属性) 应用相同的启用外观。

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

停用状态

通过将 disabled 布林属性添加到任何 <button> 元素,使按钮看起来处于停用状态。

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

使用 <a> 元素的停用略有不同:

  • <a>不支持 disabled 属性,所以你必须添加 .disabled 使它在视觉上看起来被禁用。
  • 包括友善的样式行为设计,以禁用<a>按钮上的所有pointer-events 在支持该属性的浏览器中,会看不到禁用的图标。
  • 禁用按钮应包含 aria-disabled="true" 属性来向辅助性技术指示元素的状态。
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

The .disabled 使用 pointer-events: none 来禁用 <a>的链接功能,但该 CSS 属性尚未标准化。此外,即使在支持 pointer-events: none 的浏览器中,键盘导览仍然不受影响,这意味著键盘使用者和辅助性技术的使用者仍然可以启动这些链接。为了安全起见,在这些链接上添加一个 tabindex="-1" 属性防止他们应用 focus,并使用自定义的 JavaScript 来禁用它们的功能。

按钮插件

让按钮可以做更多,控制按钮状态或群组按钮等相关的元件。

切换状态

增加 data-toggle="button" 来切换按钮 active 状态。 如果你预先需要切换按钮,则必须手动将 .active class aria-pressed="true" 添加到 <button> 中。

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

复选框和选项按钮

Bootstrap’s .button 样式可以应用于其他元素,例如 <label>以提供复选框或选项按钮样式进行按钮切换。 将 data-toggle="buttons" 加到包含这些按钮的 .btn-group 中,并通过 JavaScript 来启用它们的切换行为,并增加 .btn-group-toggle 来设置 <input>按钮。 请注意,你可以创建单个,或是群组的这些。

这些按钮的检查状态 只能通过按钮上的 click 事件 进行更新。如果你使用其他方法来更新输入 - 例如,使用 <input type="reset"> 或手动应用输入的 checked 属性,你需要手动在 .active 上切换 <label>

请注意,预先检查的按钮需要你手动添加 .active 类到输入的<label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

方法

方法 描述
$().button('toggle') 切换状态,给予按钮已经启用的外观。
$().button('dispose') 销毁一个元素的按钮。

下拉菜单

使用 Bootstrap 下拉菜单插件通过链接来切换内文框显示

概述

下拉选单是可切换的,内文框用于显示链接列表或其他。这些交互功能于 Bootstrap JavaScript 下拉选单插件提供。通过点击切换,而不是滑入的方式,这是一个策划好了的 设计决定。

下拉选单是通过第三方插件, Popper.js 所建构的,这提供了动态位置及 viewport 的监控。使用前请确认 popper.min.js在 Bootstrap’s JavaScript 之前,或者使用 bootstrap.bundle.min.js / bootstrap.bundle.js 这已经包含 Popper.js。Popper.js 没有使用在导览列的下拉选单,所以该动态位置并不适用。

如果你要自行编译 JS,记得引入util.js

可视性

WAI ARIA 该标准定义了role="menu" 小部件,但这是专门用于应用程式的功能表,它们触发动作或功能。 ARIA 选单只能包含功能表项目,核取方块功能表项目,选项按钮功能表项目,选项按钮组和子功能表。ARIA 菜单只能包含菜单项,复选框菜单项,单选按钮菜单项,单选按钮组和子菜单。

Bootstrap 的下拉选单是设计为通用的,适用于各种情况和标记结构。 例如,可以创建包含其他输入和表单控制项(如搜索栏位或登录表单)的下拉选单。 因此,Bootstrap 不希望(也不能自动添加)true ARIA 功能表所需的任何 rolearia- 属性。 作者必须自己加入这些具体属性。

然而,Bootstrap 为大多数标准键盘功能表操作加入内置支援,例如使用游标键移动单个 。 .dropdown-item 元素并使用ESC 键关闭功能表的功能。

实例

将下拉菜单触发器(你的按钮或链接)和下拉菜单列表都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素。

单一按钮

通过在button上面添加data-toggle="dropdown" 属性,任何一个 .btn 可以变成触发器:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

通过 <a> 元素:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

比较爽的是,你可以使用任何按钮变体:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

分离按钮

同样的,用与单个按钮下拉选单几乎相同的标记创建分割按钮下拉选单,但是添加了 .dropdown-toggle-split 以在下拉插入符号做适当间隔。

我们使用这个额外的 class 将插入符号的两边水平 padding 减少了25%,并移除了为常规按钮下拉选单添加的 margin-left。 这些额外的变化使插入符号集中在分割按钮中,并在主按钮旁边提供适当的空间。

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

尺寸

按钮下拉选单可以使用所有尺寸的按钮,包括默认及分割下拉按钮。

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

指向

Dropup

通过添加到父元素,在元素上方的装配下拉菜单 .dropup

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

向右

加入 .dropright 到父元素上来切换向右侧的选单。

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

向左

加入 .dropleft 到父元素上来切换向左侧的选单。

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

在过去下拉选单内容必须是个连接,但 v4 不再是这样。现在你可以选择在下拉选单中使用 <button> 元素,而不是仅使用 <a>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

你还可以使用 .dropdown-item-text 创建非交互式下拉选单。你可以使用自定义 CSS 或通用类别调整。

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

添加

增加 .active 到项目上使 样式如同添加。

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

禁用

增加 .disabled 到下拉列表中的项目 将它们设为禁用。

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

默认情况下,下拉菜单会自动从其父级的顶部和左侧100%定位。 添加 .dropdown-menu-right.dropdown-menu 中可右键对齐下拉菜单。

Heads up! Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

表头

添加标题来标记下拉选单中的操作部分。

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

分隔线

使用分隔符号来分隔选单中的群组。

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

文本

将任意自由格式文本放在带有文本和使用的下拉菜单中间隔工具。请注意,你可能需要额外的大小调整样式来约束菜单宽度。

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

表单

在下拉式选单中加入表单,并且使用 margin or padding utilities 调整所需要的空间。

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

使用 data-offsetdata-reference 来改变下拉选单的位置。

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

用法

通过 data 属性或 JavaScript,下拉选单插件通过切换父级按钮上 .show 来切换隐藏内容(下拉选单)。 data-toggle="dropdown" 依赖于属性来关闭应用程序级别的下拉菜单,因此始终使用它是个好主意。

在带有触屏的设备上,打开下拉列表会将空($.noop)鼠标悬停处理程序添加到 <body> 元素的直接子项。 为了解决 iOS 平台上事件响应的一些奇怪表现(外部资料:英文内容),需要进行额外的处理,否则会阻止在下拉列表之外的任何位置触发关闭下拉列表的代码。 关闭下拉列表后,将删除这些额外的空鼠标悬停处理程序。

通过 data 属性

加入 data-toggle="dropdown" 至链接或按钮来启用切换下拉选单。

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

通过 JavaScript

通过 JavaScript 来调用下拉选单:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown" still required

无论是通过 JavaScript 调用你的下拉清单或使用 data-api, data-toggle="dropdown" 都需要在下拉选单的触发器元素中显示。

选项

可以通过 data 属性或 JavaScript 插件传递选项。对于 data 属性,将选项名称加到data- 上,如 data-offset=""

名称 类型 默认值 描述
offset number | string | function 0 下拉选单相对于其目标的偏移参考 Popper.js 的位移文件。
flip boolean true 允许下拉选单重叠到其相关的元素上,更多资讯可参考 Popper.js 的触发文件。
boundary string | element 'scrollParent' 下拉菜单的溢出约束边界。 接受 'viewport', 'window', 'scrollParent', HTMLElement引用的值(仅限JavaScript)。 有关更多信息,请参阅 Popper.js 的 preventOverflow 文档。
reference string | element 'toggle' Reference element of the dropdown menu. Accepts the values of 'toggle', 'parent', or an HTMLElement reference. For more information refer to Popper.js's referenceObject docs.
display string 'dynamic' By default, we use Popper.js for dynamic positioning. Disable this with static.

方法

请注意,当boundary被设置为 'scrollParent',之外的任何值时 position: static 样式应用于 .dropdown 容器。

方法 描述
$().dropdown('toggle') 切换给定导航栏或选项卡式导航的下拉菜单
$().dropdown('update') 更新下拉选单元素的定位。
$().dropdown('dispose') 销毁一个元素的下拉选单。

事件

所有下拉选单事件在 .dropdown-menu 的父元素下触发,并具有一个 relatedTarget 属性,其值是切换的锚元素。 hide.bs.dropdownhidden.bs.dropdown 事件具有 clickEvent 属性(仅当单击原始事件类型时),该属性包含 click 事件的事件对象。

事件 描述
show.bs.dropdown 这个事件在调用显示时被立即触发。
shown.bs.dropdown 当这个物件可被看见时会触发此事件(当完成 CSS 转换后)。
hide.bs.dropdown 这个事件在调用隐藏时被立即触发。
hidden.bs.dropdown 当这个物件隐藏后会触发此事件(当完成 CSS 转换后)。
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

警告框

警告框可以为用户提供醒目的操作提示。

实例

警告框可用于任何长度的内容,还可以选择性地加入关闭按钮。 要获得正确的展示效果,请使用 .alert-* 系列类,一共8个效果。

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
对于使用辅助技术的用户而言

尽管上面的这些类可以对信息进行着色以提供视觉指示,但是这些指示不会传达给辅助技术的用户 - 例如屏幕阅读器。 因此如果某些内容很重要,请直接加入正文中,或者通过其他方式引用,例如使用 .sr-only 类隐藏这些必要的内容。

使用.alert-link使用 .alert-link 来快速为警告框中的链接增添合适的色彩.

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

额外的內容

警告框可以增加额外的 HTML 元素,比如标题、段落以及分隔线。

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

关闭警告框

通过此组件可以为警告信息添加点击并消失的功能。

  • 在警告框中加入一个关闭按钮,关闭按钮请加上.close 设置按钮的样式;
  • 给警告框加上 .alert-dismissible 类,这个类的作用是在警告框右侧添加内边距,并将关闭按钮绝对定位到右上角
  • 给关闭按钮加上 data-dismiss="alert" 属性就可以使其自动为警告框赋予关闭功能。关闭警告框也就是将其从 DOM 中删除。尽量使用 <button> 元素来创建按钮,这可以在所有设备上提供正确的效果。
  • 为了让警告框在关闭时表现出动画效果,请确保为其添加了 .fade.show 类。

你可以查看下面的实例:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

JavaScript 方法

方法 描述
$().alert() 让一个警告框监听具有data-dismiss="alert" 属性的后代元素上的点击事件。 (如果是通过 data 属性进行的初始化则无需使用)
$().alert('close') 从 DOM 中删除来关闭警告框。如果元素上出现.fade.show则在删除之前该警告框将淡出.
$().alert('dispose') 销毁一个元素的警告框
$('#btnClose').click(function () {
  $("#myAlert").alert('close')
})

事件

Bootstrap 的警告框组件对外暴露了一些可以被监听的事件。

事件 描述
close.bs.alert close 方法被调用后立即触发此事件。
closed.bs.alert 当警告框被关闭后(也即 CSS 过渡效果完毕之后)立即触发此事件。

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

徽章

徽章的文档与实例,包含小号及元件.

实例

徽章通过使用相对字体大小和 em 单位来缩放以匹配直接父元素的大小

Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

徽章可以作为链接或按钮的计数器.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

根据使用方式,徽章可能会让屏幕阅读器及相关辅助技术的用户感到困惑,虽然徽章的样式提供了一个视觉提示,但这些用户只会将只会显示徽章的内容。这些徽章会看起来像在句子、链接、按钮中的后方随机加入的词或数字.

除非内文是清楚的 ( 与“通知”示例一样,在理解“4”是通知的数量的情况下 ),请考虑将附加的文字内容在视觉上隐藏。

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

情境变化

加入以下的 Class 来修改徽章的外观。

Primary Secondary Success Danger Warning Info Light Dark
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
对于使用辅助技术的用户而言

尽管上面的这些类可以对信息进行着色以提供视觉指示,但是这些指示不会传达给辅助技术的用户 - 例如屏幕阅读器。 因此如果某些内容很重要,请直接加入正文中,或者通过其他方式引用,例如使用 .sr-only 类隐藏这些必要的内容。

胶囊徽章

使用 .badge-pill 可以使徽章更圆润(具有较大的 border-radius 和 附加的水平 padding)。

Primary Secondary Success Danger Warning Info Light Dark
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

使用 .badge-* 可在 <a> 元素上调整 hover 和 focus 的效果。

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>

面包屑导航

在导航结构中通过 CSS 自动添加分隔符号来指示当前页面的位置。

实例

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

更改分隔符

通过 ::beforecontent 自动在CSS中添加分隔符。 可以更改 $breadcrumb-divider 来调整它们的行为。 需要引用函数来生成字符串周围的引号,因此如果您想要 > 作为分隔符,你可以使用:

$breadcrumb-divider: quote(">");

也可以使用 base64 嵌入式 SVG 图标:

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

可以通过将 $breadcrumb-divider 设置为 none 来删除分隔符:

$breadcrumb-divider: none;

网页可见性

由于面包屑提供了导航功能,所以增加一个有意义的标签, aria-label="breadcrumb" 來描述 <nav> 元素的导航说明,以及应用 aria-current="page" 到此群组的最后一个项目,表示这是当前页面。

有关更多信息,请参阅面包屑模式的WAI-ARIA创作实践。

按钮组

使用按钮组将一系列按钮组合在一起,并且通过 JavaScript 增加它们。

基本例子

将一系列的 .btn 包装在 .btn-group 内。可使用按钮插件增加 JavaScript 选项按钮和选取框的行为。

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>
确保正确的 role 并提供标签

为了辅助性技术 (如屏幕阅读器) 传达一系列按钮的分组讯息,需要提供一个适当的 role 属性。对于按钮组,这将是 role="group",而工具栏应该有一个 role="toolbar".

此外,群组和工具栏应该给予明确的标签,因为尽管存在正确的 role 属性,大多数辅助性技术不会明确呈现他们。 在这裡提供的例子中,我们使用 aria-label, 但也可以使用如 aria-labelledby 等。

按钮工具列

将整组的按钮组加入到按钮工具列中,用于更复杂的组件。根据需要的工具可以将群组、按钮等间隔开来。

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

将 input 组合与工具列中的按钮组进行混合。与上面的实例类似,你需要一些工具来将这些的内容间隔开。

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

缩放

不是将按钮大小 Class 应用于群组中的每个按钮,只需在每个 .btn-group-* 中增加 .btn-group, 就能套用在多个群组中的每一个。



<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

内嵌

当你想要下拉菜单与群组按钮混合时,只需要将 .btn-group 放在另一个 .btn-group 中。

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

垂直变化

将一组按钮垂直堆叠而不是水平呈现。此处不支持分隔下拉菜单。

<div class="btn-group-vertical">
  ...
</div>

媒体对象

构建高度重复的组件,如博客评论,推文等。

例子

媒体对象有助于构建复杂且重复的组件,其中一些媒体与不包围所述媒体的内容并置。 此外,由于 flexbox,它只需要两个必需的类。

以下是单个媒体对象的示例。 只需要两个类 - 包裹 .media.media-body 围绕你的内容。 可选的填充和边距可以通过 spacing 工具来控制。

64x64
标题
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
  <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">标题</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>
Flexbug #12: 内联元素不被视为弹性项

Internet Explorer 10-11不会将内联元素(如链接或图像(或 :: before 和 :: after 伪元素))渲染为弹性项目。 唯一的解决方法是设置非内联显示值(例如,块,内联块或 flex )。 我们建议使用我们的显示工具之一 .d-flex 作为一个简单的修复程序。

信息来源 Flexbugs on GitHub

嵌套

媒体对象可以无限嵌套,但我们建议你在某个时候停止。 将嵌套的 .media 放在父媒体对象的 .media-body 中。

64x64
标题
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64
标题
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
  <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">标题</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    <div class="media mt-3">
      <a class="pr-3" href="#">
        <img src=".../64x64" alt="Generic placeholder image">
      </a>
      <div class="media-body">
        <h5 class="mt-0">标题</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>

对齐

媒体对象中的媒体可以与flexbox工具对齐到 .media-body 内容的顶部(默认),中间或末尾。

64x64
顶部对齐

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <img class="align-self-start mr-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">顶部对齐</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
64x64
中间对齐

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <img class="align-self-center mr-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">中间对齐</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
64x64
底部对齐

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <img class="align-self-end mr-3" src=".../64x64" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">底部对齐</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

顺序

通过修改 HTML 本身或通过添加一些自定义 Flexbox CSS 来设置 order 属性(更改为你选择的值)来更改媒体对象中的内容顺序。

Media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64
<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Media object</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
  <img class="ml-3" src=".../64x64" alt="Generic placeholder image">
</div>

列表

由于媒体对象具有如此少的结构要求,因此你还可以在列表 HTML 元素上使用这些类。 在 <ul><ol> 上,添加 .list-unstyled 以删除任何浏览器默认列表样式,然后将 .media 应用于 <li>。 与往常一样,在需要微调的地方使用 spacing 工具。

  • 64x64
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • 64x64
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • 64x64
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<ul class="list-unstyled">
  <li class="media">
    <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media my-4">
    <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media">
    <img class="mr-3" src=".../64x64" alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
</ul>

卡片

Bootstrap’s 卡片提供了一个具有多种变形和选择性的扩展容器

关于

卡片 是一个灵活可扩展的内容容器。包含页眉和页脚的选项、各种弹性内容、背景颜色和强大的显示选项。如果你熟悉 Bootstrap 3,卡片取代了旧的 panels、wells、thumbnails(以上为原文名称),类似的功能已经都整合到卡片内了。

实例

卡片构建时尽可能少一些标记和样式,但仍然可以提供许多的控制项和自定义。使用 flexbox 构建,它们可以使对齐更方便并且与其它 Bootstrap 元件良好混合。默认中他并没有 margin 所以可以依需求加入间距属性。

以下是具有混合内容和固定宽度的基本卡的范例。卡片如果没有固定的宽度,那麽他们将自然填充其父元素的全部宽度。这可以通过我们的各种尺寸选项轻松调整。

100%x180
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

内容设计

卡片支持各种内容,包括图像、文本、清单组、链接等。以下是支持的实例。

Body

卡的块状结构是 .card-body。当你需要在一个卡片内含 padding 部分就可以使用它。

This is some text within a card body.
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

卡片标题的使用时在 <h*> 标签中添加 .card-title 同样,将 .card-link 加到 <a> 标签中实现链接的添加

通过在 <h*> 标签中添加一个 .card-subtitle 来使用次标题。 如果 .card-title.card-subtitle 放在 .card-body 中,那麽卡片标题和次标题就很好地对齐了。

Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

图片

.card-img-top 将图像放在卡片顶部。 使用 .card-text, 可以将文字内容可以添加到卡片中。 .card-text 中的文本也可以用标准的 HTML 标签设计样式。

Image cap [100%x180]

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

列表群组

建立一个包含内容的清单卡片。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
Featured
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

混合样式

混合并搭配多个内容形式,用来创建你所需要的卡片。以下来说是图像风格、块状、文字风格以及清单在一个固定宽度的卡片中。

Image cap [100%x180]
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

在卡片内加入选择性的页眉或页脚。

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

可通过在 <h*> 元素中添加 .card-header 加入卡片头的样式。

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

缩放

卡片假设没有特定的 width 除非是另有声明,否则它们的宽度将是100%。你可以根据需求自定义 CSS、网格系统、Sass mixins grid 或工具来调整。

使用网格标记

使用网格,根据需求按行与列包装卡片。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

使用工具

使用我们的几个可调整大小的工具来设置卡片的宽度

Card title

With supporting text below as a natural lead-in to additional content.

Button
Card title

With supporting text below as a natural lead-in to additional content.

Button
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

使用自定义 CSS

在样式表中使用自定义 CSS 或使用行内样式设置宽度。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

文字对齐

你可以通过我们的文本对齐类更改任何卡片的整体或特定部分的文本对齐方式。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

使用 Bootstrap 导航元件向卡片的标题(或块)添加一些导览。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

图像

卡片包含一些选项用来搭配图像。选择在卡片的任一端附加 “image caps”,用卡片内容覆盖图像 (像是背景),或者只是将图像嵌入到卡中。

Image caps

像页眉或页脚,卡片可以使用 Image caps 在卡片顶部或是底部。

100%x180
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

100%x180
<div class="card mb-3">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" src=".../100px180/" alt="Card image cap">
</div>

图像覆盖

将图像转换为卡片背景,并叠加卡片的文字。 根据图像,你可以选择是否需要额外的样式或工具。

100%x270
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

卡片样式

包括用于自定义其背景、边框和颜色的各种选项

背景与颜色

使用文字与背景工具来改变卡片的显示颜色。

Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
对于使用辅助技术的用户而言

尽管上面的这些类可以对信息进行着色以提供视觉指示,但是这些指示不会传达给辅助技术的用户 - 例如屏幕阅读器。 因此如果某些内容很重要,请直接加入正文中,或者通过其他方式引用,例如使用 .sr-only 类隐藏这些必要的内容。

边框

使用边框工具,来改变卡片的 border-color。 也能设置 .text-{color} class 在父层的 .card ,或者是卡片的显示内容上。

Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins 工具

你可以使用 Mixins 工具来改变卡片页首及页脚的框线,也能使用 .bg-transparent 来移除背景颜色。

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

卡片排版

Bootstrap 除了对卡片内的内容进行设计外,还包括一些卡片布置的选项。目前 这些排版还没包含响应式。

卡片群组

将多个卡片和成为一个群组,他们具有相同宽度和高度的列。卡片群组使用 display: flex; 来实现他们一致的尺寸。

100%x180
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

100%x180
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

100%x180
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

当使用带页脚的卡片群组时,他们的内容会自动对在同一线上。

100%x180
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

100%x180
Card title

This card has supporting text below as a natural lead-in to additional content.

100%x180
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

卡片叠

需要一套互不相连但宽度和高度相同的卡片?使用卡片叠。

100%x200
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

100%x200
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

100%x200
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

就像卡片群组一样,卡片叠上的卡片页脚会自动对在同一条线上。

100%x180
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

100%x180
Card title

This card has supporting text below as a natural lead-in to additional content.

100%x180
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

卡片排列

将它们包在 .card-columns 中,可以将卡片像 Masonry 那样的瀑布式排列。卡片是使用 CSS column 属性而不是 flexbox 来构建,更便于对齐。排列是从上到下、从左到右。

注意 你的卡片排列的用处可能会有所不同。为了防止卡片撑破排列,我们必须将它们设置为 display: inline-blockcolumn-break-inside: avoid 这个解决方案未生效时。

100%x160
Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
100%x160
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title
Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

100%x260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src=".../100px260/" alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

卡片排列也可以通过一些附加程式码进行扩展和自定义。 下面的是 .card-columns 的扩展,与我们使用的 CSS 排列使用相同的 CSS,这样可以调整生成的栏位数。

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

折叠(Collapse)

通过 Class 及 JavaScript 插件切换内容的显示与否。

如何运作

折叠的 JavaScript 插件用于显示和隐藏内容。按钮或锚点做为触发器,对应到需要切换的元素上。折叠元素会将 height 当前值设置转为 0。由于 CSS 如何处理动画的条件,你不能在 .collapse 元素上使用 padding 。相反,使用该 class 作为独立的包装元素。

实例

点击按钮通过 Class 更改来显示及隐藏另一个元素:

  • .collapse 隐藏物件
  • .collapsing 应用转换中的动态效果
  • .collapse.show 显示内容

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

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.
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" 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>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    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.
  </div>
</div>

多个目标

<button><a> 可以通过在其 hrefdata-target 属性中使用 JQuery 选择器引用它们来显示和隐藏多个元素。 如果每个引用它们 hrefdata-target 属性,多个 <button><a> 都可以显示和隐藏元素。

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.
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.
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      </div>
    </div>
  </div>
</div>

折叠实例

使用卡片组件,你可以展开默认的折叠行为以创建折叠功能。

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.
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.
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 class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-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="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-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="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-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>

可视性

确保在控制元素中添加 aria-expanded 。 该属性传达与屏幕阅读器和类似辅助技术相关的可控元件的当前状态。如果可折叠元素默认关闭,则控制项元素上的属性值应为 aria-expanded="false"。 如果你使用 show 将可折叠元素设置为默认打开,在控制项上设置 aria-expanded="true"。插件将根据是否打开或关闭可折叠元素自动切换控制项上的此属性(通过 JavaScript,当使用者触发的另一个控制项元素也绑定到同一个折叠元素)。如果控制的 HTML 元素不是按钮 (例如 <a><div>),那麽属性 role="button" 应该加到元素中。

If your control element is targeting a single collapsible element – i.e. the data-target attribute is pointing to an id selector – you should add the aria-controls attribute to the control element, containing the id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.

请注意,Bootstrap 当前的折叠不包含 WAI-ARIA Authoring Practices 1.1 accordion pattern 描述的键盘操作,你需要自定义 JavaScript 来实现这些内容。

用法

折叠插件使用一些 Class 来处理这些麻烦事:

  • .collapse 隐藏内容
  • .collapse.show 显示内容
  • .collapsing 当过渡效果开始时被添加,当过渡效果完成时被移除。

这些 Class 可以在 _transitions.scss內找到。

通过 data 属性

只需将 data-toggle="collapse"data-target 添加到元素中即可自动指定可折叠元素的控制。 data-target 属性接受 CSS 选择器来应用折叠。 确保将 collapse 添加到可折叠元素上。如果你希望它默认打开,可增加额外的 show

可将折叠区域中的风格加到data属性 data-parent="#selector"中。可以参考范例中的效果。

通过 JavaScrip

可通过 JavaScript 激活 collapse 方法,如下所示:

$('.collapse').collapse()

选项

可通过 data 属性或 JavaScript 加入选项。对于 data 属性,将选项名称附加到 data-, 如 data-parent=""

选项名称 类型/默认值 Data 属性名称 描述
parent selector | jQuery object | DOM element false 如果提供了一个选择器,当可折叠项目显示时,指定父元素下的所有可折叠的元素将被关闭。这与传统的折叠面板(accordion)的行为类似 - 这依赖于 card class)。该属性必须在目标可折叠区域上设置。
toggle boolean true 切换调用可折叠元素。

方法

异步方法和转换

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

有关更多信息,请参阅我们的 JavaScript 文档

.collapse(options)

启用你的可折叠元素的内容,通过包含选项的 object.

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

.collapse('toggle')

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

.collapse('show')

显示可折叠的元素。 在可折叠元素实际显示之前 (即在 shown.bs.collapse 事件发生之前)返回到调用者。

.collapse('hide')

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

.collapse('dispose')

销毁一个元素的折叠。

事件

Bootstrap 提供一些事件给予折叠使用。

Event Type Description
show.bs.collapse 在调用 show 方法后触发该事件。
shown.bs.collapse 当折叠元素对用户可见时触发该事件(将等待 CSS 过渡效果完成)。
hide.bs.collapse 当调用 hide 实例方法时立即触发该事件。
hidden.bs.collapse 当折叠元素对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

表单

用于创建各种表单的表单控件样式,布局选项和自定义组件的示例和使用指南。

概览

Bootstrap 的表单控制与 Class 一起在我们重置表单样式上作延伸。使用这些 Class 来选择自定义显示,以便在浏览器和设备之间进行更一致的呈现。

确保在输入框上使用正确的 type 属性 (例如, email 用于电子邮件地址或 number 用于数字信息),以利用较新的输入控制,如电子邮件验证、号码选择等。

以下是 Bootstrap 表单样式的一个简单范例。 继续阅读有关的 Class 、表单布局等的文档。

We'll never share your email with anyone else.
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

表单控制

文本形式控制元件 (如 <input>s, <select><textarea>)使用 .form-control 进行样式化。包括一般外观、focus 状态、尺寸等等的样式。

请务必浏览我们的自定义表单以进一步了解 <select> 设计风格。

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

对于档案类型的 input,改用 .form-control 取代了 .form-control-file

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

尺寸

使用 .form-control-lg.form-control-sm 设置高度。

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

只读

在输入上添加 readonly (布林)属性,以防止修改 input 的值。仅能阅读的 input 显示较淡(就像禁用的输入),但保留标准游标。

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

只读的文本

如果你希望将 <input readonly> 元素设置为纯文本,请使用 .form-control-plaintext 来删除默认表单纯文字样式,并保留适当的边距

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Range Inputs

Set horizontally scrollable range inputs using .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

复选框和选取按钮

通过 .form-check,默认复选框和选项按钮得到改进,这两种输入类型的 class 都改进了 HTML 元素的布局和行为。复选框用于在列表中选择一个或多个选项,而选项按钮是用于从许多选项中选择一个选项

支持 not-allowed 复选框和选项按钮,并在父标签。 <label>,滑入时显示不允许的游标,则需要将 disabled 加到父級 .form-check-input。这也将淡化文字颜色以提示 input 的状态。

使用 复选框和选项按钮是基于 HTML 的验证标准,并提供简洁易读的标签,因此 <input><label> 是兄弟元素,而不是 <input> 内的 <label>,这是比较冗长的,因为必须指定 idfor 适性来关联 <input><label>.

默认 (堆叠)

默认情况下,同级任意数量的复选框和选项按钮将被垂直堆叠,并与 .form-check 适当间隔。

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

行內

通过 .form-check-inline 加到任何 .form-check 来将复选框或选项按钮组合放到同一水平行上。

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

没有标签

.form-check 没有任何文字内容的 input 加上 .position-static 。 请记住,仍然需要为辅助技术提供某种形式的标签(例如使用 aria-label)。

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

布局

自从 Bootstrap 使用 display: blockwidth: 100% 在全部的 input 控制上后,表单都是採垂直堆叠排列。可以通过增加 Class 来改变表单的布局方式。

表单群组

.form-group 是向表单加一些结构的方法。其唯一的目的是提供标签的配对及 margin-bottom,默认情况下他只会应用 margin-bottom,但他会在.form-inline 但他会在中选择其他样式。由于它是一个 class,你可以使用它在 <fieldset>s, <div>s, or nearly any other element.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

表单格线

可以使用网格 Class 构建更複杂的表单。请使用这些对于需要多列、多种宽度和其他对齐选项的表单布局

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

表单列

可以使用 .form-row 取代 .row ,这个变体可以相对于原本的网格 row 来说,他提供更小的 gutter 及紧凑的布局。

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

还可以使用网格系统创建更复杂的布局。

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

水平表单

建立水平表单,需通过增加 .row 在表单群组上及使用 .col-*-* 来指定标签及控制项。一定要将 .col-form-label 加到你的 <label>中,这样就可以垂直居中对应的表单元件。

有时,可以依据需求使用 margin 或 padding 的工具来调整良好的对齐。举例来说,我们移除 padding-top 在堆叠的复选选项,让他更好的对齐文字基准线。

Radios
Checkbox
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
水平形式标签尺寸

一定要用 .col-form-label-sm.col-form-label-lg 到你的 <label><legend> 正确地遵循的大小 .form-control-lg.form-control-sm

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

列大小

如前面的示例所示,我们的网格系统允许你将任意数量的 .col 放置在 .row.form-row中。会在它们之间平均分割可用的宽度。你也可以选择列的一部分来佔用更多或更少的空间,而剩馀的 .col 将分配给其他列,例如 .col-7

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

自动调整大小

下面的示例使用一个 flexbox 工具垂直居中的内容,并将 .col 更改为 .col-auto ,这样你的列只佔用了所需的空间。换句话说,列的大小本身就是基于内容。

@
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

然后,你可以重新混合不同大小栏 Class。

@
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

也支持自定义表单。

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

内联表单

使用 .form-inline 在单个水平列上显示一系列标签、表单控制项、按钮,行内表单的控制元件与默认的状态略有不同。

  • 控制元件是使用 display: flex,折叠任何 HTML 的空白区域及允许对齐的控制工具如 spacing 和 flexbox 工具。
  • 控制元件和 input 群组通过 width: auto 复写默认的 width: 100%.
  • 控制元件 仅会在 viewport 大于 576px 时才会显示行内 以便在行动装置上完全显示。

你需要手动添加宽度或对齐在单独的控制元件上,通过间隔工具。最后,一定要 <label> 包含在每个表单控制元件内,即使你需要使用 .sr-only从非屏幕阅读器访问者隐藏它。

@
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

自定义表单控制件和 select 都是支持的。.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
隐藏标签的替代品

如果你没有为每个 input 添加标签,屏幕阅读器等辅助技术将对你的表单感到困扰。对于这些行内表单,你可以使用 .sr-only 来隐藏标签。还提供了辅助技术标签的另外的替代方法,例如 aria-label, aria-labelledby or title 属性。如果这些都不存在,辅助技术可能会使用 placeholder 的属性(如果存在),但请注意,不建议使用 placeholder 替代其他标签方法。

帮助文字

可以使用 .form-text (v3 中称为 .help-block )创建表单中的块级帮助文字。可以使用任何行内 HTML 元素和工具(如 .text-muted)灵活地实现行内帮助文字。

帮助文字需要与控制元件相关联

帮助文字应该使用 aria-describedby 与表单控制元件相关连,这将确保辅助技术(例如屏幕阅读器)在用户 focus 或输入 input 时将了解此帮助文字。

input 下方的帮助文字可以用 .form-text。包括 display: block并添加一些 margin-top,以便与上面的 input 之间的间隔。

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

行内文本可以使用任何典型的行内 HTML 元素(无论是 <small><span>还是其他)。

Must be 8-20 characters long.
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

禁用表单

加上 disabled 的布林属性在 input 上,让防止使用者操作并使它看起来更淡。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

disabled 属性添加到 <fieldset> 以禁用其中的所有控制元件。

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
警告与锚点

默认情況下,浏览器会将 <fieldset disabled> 中的所有本地表单控制项(<input><select><button> 元素)视为禁用,防止键盘和滑鼠和他们之间的交互。但是,如果你的表单还包含 <a ... class="btn btn-*"> 元素,则只会给出一种 pointer-events: none 的样式。关于按钮禁用状态(特别是在锚元素的子部分),此 CSS 属性尚未标准化,Opera 18 及更低版本或 Internet Explorer 10 中不完全支持,并且不会阻止键盘使用者 focus 或添加这些链接。为了安全起见,请使用自定义 JavaScript 来禁用此类链接。

跨浏览器相容性

虽然 Bootstrap 将在所有浏览器中应用这些样式,但 Internet Explorer 11 及更低版本不完全支持 disabled 上的 <fieldset>属性。 使用自定义JavaScript 来禁用这些浏览器中的标签。

验证

通过 HTML5 表单验证可在我们所有支持的浏览器都提供为你的用户提供可操作的反馈。从浏览器中选择默认验证反馈,或者使用我们内置的 Class 和启动 JavaScript 实现自定义讯息。

我们目前建议使用自定义验证样式,因为浏览器默认验证讯息并未完全确认(最值得注意的是,桌面和移动设备上的 Chrome)。

如何运作

这里描述 Bootstrap 中的验证是如何运作的。

  • HTML 表单验证通过 CSS 的两个伪类 :invalid:valid 。它适用于 <input><select><textarea> 元素。
  • Bootstrap :invalid:valid 樣式在 .was-validated,通常会运用在 <form>。否则,必填的内容在载入的过程中会显示无效。这个方法你可以选择在任何时候启用他 (通常在尝试提交表单后)。
  • 如果需要重置表单的外观(例如,使用 AJAX 提交动态表单的情况下),请在提交后再次从 <form> 中删除 .was-validated className。
  • 作为回馈,可以使用 .is-invalid.is-valid 替代服务器端的验证伪类,他们不需要 .was-validated 在父层。
  • 由于 CSS 的工作原理,我们无法(现在)将样式应用于 DOM 中的表单控制元件之前的 <label>,而不通过自定义 JavaScript 的帮助。
  • 所有现代浏览器都支持约束验证 API ,一系列用于验证表单控制元件的 JavaScript 方法。
  • 回馈讯息会使用浏览器默认值(每个浏览器不同,unstylable via CSS)或其他 HTML 和 CSS 的自定义反馈样式。
  • 你可以在 JavaScript 中提供带有 setCustomValidity 的自定义验证讯息。

请参考以下的自定义表单验证样式、服务器端验证 Class 和浏览器默认值。

自定义样式

对于自定义 Bootstrap 表单验证讯息,你需要将 novalidate 属性添加到你的 <form>。这将禁用浏览器默认的回馈提示,但仍提供 JavaScript 中表单验证 API 有效。尝试提交以下表格;我们的 JavaScript 将拦截提交按钮并向你提供回馈。

尝试提交时,你会看到 :invalid:valid 的样式应用于你的表单控制元件。

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

浏览器默认值

对自定义验证回馈或编写 JavaScript 以更改表单行为没兴趣?你也可以使用浏览器的默认值。尝试提交以下表格。根据你的浏览器和操作系统,你会看到一种略有不同的回馈样式。

虽然这些反馈风格不能用 CSS 样式,但你仍然可以通过 JavaScript自定义回馈文字内容。

@
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

服务器端

我们建议使用客户端验证,但是如果你需要服务器端,则可以使用 .is-invalid”和 .is-valid 表示无效且有效的表单。 请注意,这些 Class 也支持 .invalid-feedback

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

支持元素

范例表单显示了上面的原生文本 <input>,但也可以为自定义表单控制元件提供表单验证样式。

Example invalid feedback text
More example invalid feedback text
Example invalid custom select feedback
Example invalid custom file feedback
<form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

提示

如果你的排版允许,可以使用 .{valid|invalid}-tooltip 来替换 .{valid|invalid}-feedback,在样式,使用风格化的提示来显示表单的错误回馈,确保父元素有一个 position: relative 作为题式的定位,在以下的范例中 col 已经包含 relative,在你的专案上也需要做类似的设定。

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

自定义表单

为了自定义和跨浏览器更为一致性,请使用自定义的表单元素来替换浏览器默认值。它们建立在语义和具亲和力标记之上,因此它们是可以替代任何默认表单控制元件的。

多选框和单选框

每一个 checkbox 和 radio 与一个邻近的 <span> 被包裹在 <div> 中,用来创建自定义元件的文字内容。就结构上来说,这与 .form-check 是一样的。

我们为所有我们的 <input> 使用选择器 (~) 确认 :checked 状态?正确地设置我们的自定义表单指示器。 当与 .custom-control-label 结合使用时,我们也可以根据 <input> 的状态对每个事件进行样式调整。

我们使用 opacity 来隐藏 <input>,并用 .custom-control-label 建立新的自定义义表单指示在 ::before::after。不幸的是,我们不能从 <input> 建立一个自定义的,因为CSS的 content不能在这个元素上运作。

我们为所有我们的 <input> 使用选择器 (~) 确认 :checked 状态?正确地设置我们的自定义表单指示器。 当与 .custom-control-description 結合使用時,我們也可以根據 <input> 的状态对每个事件进行样式调整。

在检查状态下,我们使用 Open Iconic 中的 base64嵌入式SVG图标。这为我们提供了跨浏览器和装置样式的定位做最佳控制。

复选框

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

通过 JavaScript(当没有可用的 HTML 属性来指定它)手动设置时,自定义复选框块还可以使用 :indeterminate 伪类。

如果你正使用 jQuery,可以用下面这些:

$('.your-checkbox').prop('indeterminate', true)

单选

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

行内

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

禁用

自定义复选框和选项按钮也可以禁用。 将 disabled 布林属性加到 <input>,自定义指示符和标签样式都会自动加入。

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

选择功能表

自定义 <select> 只需要一个 .custom-select 来触发自定义样式。

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

也可以选择小或大的自定义选单来符合相似的文字 input。

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

多选 multiple 属性也是被支持的:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

As is the size attribute:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

范围

创建自定义 <input type="range"> 控制与 .custom-range. 轨道(背景)和拇指(值)都被设计为在浏览器中显示相同。 由于只有IE和Firefox支持从拇指的左侧或右侧“填充”它们的轨道作为可视化指示进度的手段,我们目前不支持它。

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

Range inputs have implicit values for min and max0 and 100, respectively. You may specify new values for those using the min and max attributes.

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

默认情况下,范围输入“捕捉”到整数值。 要更改此设置,你可以指定一个 step 值。 在下面的示例中,我们使用了两倍的步骤 step="0.5".

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

文件浏览器

文件输入是最麻烦的,如果你想用功能连接它们需要额外的JavaScript Choose file… 和选定的文件名文本。

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

通过 opacity 隐藏档案的 <input> 以及通过样式取代 <label>。通过 ::after 定位及产生按钮,最后,我们为了 <input> 宣告了 widthheight 为周围保留空间。

翻译或自定义字符串

:lang() 伪类, 用于轻松将 “Browse” 文本翻译到其他语言。 只需用相关的语言标签和当地语系化的字串覆盖或加到 $custom-file-text SCSS 变数。英文字串可以以相同的方式进行定制。范例,如何添加西班牙语翻译(西班牙语的语言代码是 es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Here’s lang(es) in action on the custom file input for a Spanish translation:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

你需要正确设置文件的语言才能显示正确的文本。 这可以使用 lang 属性 <html>Content-Language HTTP header,以及其他方法。

输入框组

将一组表单控件加入其中,可以是文字内容,按钮,按钮组等。

基本例子

在输入框组的两侧放置附加组件或按钮。 记得要放置 <label> 在输入框组之外。

@
@example.com
https://example.com/users/
$
.00
With textarea
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  </div>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">With textarea</span>
  </div>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div>

大小

将相对表单大小调整类添加到 .input-group本身和内容将自动调整大小 - 不需要在每个元素上重复表单控件大小类。

不支持调整单个输入框组元素的大小

Small
Default
Large
<div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>

多选框和单选选项

将任何复选框或单选选项放在输入框组而不是文本中。

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox" aria-label="Checkbox for following text input">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio" aria-label="Radio button for following text input">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with radio button">
</div>

多个 inputs

虽然支持多个 <input> 显示,但验证样式仅适用于单个 <input>的 input 群组。

First and last name
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">First and last name</span>
  </div>
  <input type="text" aria-label="First name" class="form-control">
  <input type="text" aria-label="Last name" class="form-control">
</div>

多附加组件

支援多个附加元件,可以与核取方块和单选按钮 input 混合使用。

$ 0.00
$ 0.00
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
  <div class="input-group-append">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
</div>

按钮插件

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend" id="button-addon3">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" aria-describedby="button-addon3">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
  <div class="input-group-append" id="button-addon4">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

带下拉式选单的按钮

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

分段按钮

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary">Action</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
  <div class="input-group-append">
    <button type="button" class="btn btn-outline-secondary">Action</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

自定义表单

输入框组包含 select 及 input 样式,将覆盖浏览器默认的样式。

自订选单样式

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">Options</label>
  </div>
  <select class="custom-select" id="inputGroupSelect01">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group mb-3">
  <select class="custom-select" id="inputGroupSelect02">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <label class="input-group-text" for="inputGroupSelect02">Options</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <select class="custom-select" id="inputGroupSelect03" aria-label="Example select with button addon">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group">
  <select class="custom-select" id="inputGroupSelect04" aria-label="Example select with button addon">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

文件控件

Upload
Upload
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile02">
    <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
  </div>
  <div class="input-group-append">
    <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
    <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
  </div>
</div>

<div class="input-group">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
    <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
  </div>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
  </div>
</div>

无障碍访问

如果你没有为每个 input 添加 label,萤幕阅读器会无法正确接收你表单讯息。对于这些输入框组,请确保有任何 label 或功能传达到辅助技术的用户。

要使用的确切技术(使用 .sr-only 隐藏 <label> 元素,或者使用 aria-labelaria-labelledby 属性,可与 aria-describedby 结合使用 )以及需要传达的其他信息,将根据你正在实现的组件的具体类型而有所不同。 本节中的范例提供了一些建议,基于具体案例的方法。

超大屏幕

轻巧,灵活的组件,用于展示醒目风格的内容。

这是一个轻量极的、灵活的元件,用于调用对特色内容或信息的额外关注。

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more
<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

要想让广告屏占满屏幕宽度、不带有圆角,请加 .jumbotron-fluid ,并在里面添加一个 .container.container-fluid

Fluid jumbotron

This is a modified jumbotron that occupies the entire horizontal space of its parent.

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>

列表群组

列表群组具有弹性的显示一系列内容组件。可以修改扩增,已支持更多的内容

基本例子

最基本的列表群组是具有列表项目和适当 Class 的无序列表。可以根据以下的选项或根据你自己需要调整 CSS。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

添加工具

.active 加到 .list-group-item 指示当前的活动状态。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

禁用选项

.disabled 加到 .list-group-item 使其呈现禁用状态。请注意,一些带有 .disabled 的元素还需要自订 JavaScript 才能完全禁用其点击事件(例如链接)。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
  <li class="list-group-item disabled">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

使用 <a><button> 加入 .list-group-item-action 来创建具有 hover、禁用和活动状态的动态清单项目。我们分离这些 Class,以确保由非交互元素组成的列表群组 (如 <li><div>s) 不提供可点点击或触击

一定 不要在这里使用标准的 .btn。

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>

使用 <button>,你也可以使用 disabled 属性而不是 .disabled class。 不幸的是,<a> 不支持 disabled 属性。

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>

Flush

添加 .list-group-flush 可以移除边框和圆角,以在父容器(例如卡片)中呈现无边框的列表组。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

情境 Class

使用情境式 Class 来设计具有状态背景和颜色的列表项目。

  • Dapibus ac facilisis in
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>

  
  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

情境式 Class 也可以使用 .list-group-item-action。请注意,在上述范例中,不存在 hover 样式。另外还支持 .active 状态 ;应用它来指示在情境列表组合项目上的添加状态。

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>

  
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

带标签

在某些 Flex 工具的帮助下,向任何列表项目添加标签以显示未读计数、活动等。

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

自定义内容

在 flexbox 工具的帮助下,添加几乎任何的 HTML 或内容、链接等,都能加入到一个项目内。

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

JavaScript 行为

使用列表群组的 JavaScript 插件 - 单独或通过编译的 bootstrap.js 列扩展我们的列表群组,以创建可选择的内容表单。

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

使用 data 属性

data-toggle="list" 上使用这些 data 属性,可以指定 .list-group-item或元素来启动列表群组的导航,而无需编写任何 JavaScript。

<!-- List group -->
<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

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

通过 JavaScript

通过 JavaScript 添加可选个列表项目(每个列表项目需要单独启动):

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

You can activate individual list item in several ways:

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab

淡出效果

要使定位元素淡入淡出,请将 .fade 添加到每个 .tab-pane中。 第一个列表项目还必须具有 .show 使初始内容可见。

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

方法

$().tab

启动列表项目元素和内容容器。选项卡应该有一个 data-targethref 定位在 DOM 中的一个容器节点。

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

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

<script>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab(‘show’)

选择给定的列表项目显示其关联的分页。而先前选择的任何其他列表项目将被取消,并使其关联的表单隐藏。 在 Tab 显示之前回传给调用者(例如,在 shown.bs.tab 事件发生之前)。

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

事件

当显示新分页时,事件按以下顺序触发:

  1. hide.bs.tab (在当前添加的选项上)
  2. show.bs.tab (在准备添加的选项上)
  3. hidden.bs.tab (在先前添加的选项上,与 hide.bs.tab 事件相同)
  4. shown.bs.tab (在刚刚显示的选项上,与 show.bs.tab 事件相同)

如果没有选项添加,则 hide.bs.tabhidden.bs.tab 事件将不被触发。

事件类型 描述
show.bs.tab 这个事件因选项显示而触发,但是在新选项被显示之前。 使用 event.targetevent.relatedTarget 将目前与先前添加(如果可用) 的作为目标。
shown.bs.tab 这个事件在选项显示后触发,但是在新选项被显示之前。 使用 event.targetevent.relatedTarget 来分别定位添加中和刚刚添加的选项。
hide.bs.tab 新的选项要显示(先前的添加选项将被隐藏)时,此事将触发。 使用 event.targetevent.relatedTarget 分别定位先前添加和即将添加的选项。
hidden.bs.tab 新的选项显示后(因此先前添加的选项将隐藏),此事件将触发。 使用 event.targetevent.relatedTarget 分别定位先前添加选项和新添加的选项。
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

模态框(modal)

使用 Bootstrap JavaScript 的 modal 插件来增加一个对话视窗、用户提示或完整的自定义内容。

如何使用

在开始使用 Bootstrap modal之前,请务必阅读以下内容。

  • modal是用 HTML、CSS 和 JavaScript 构建的。 它们可以在文件的任何元素上,并从 <body> 中删除滚动,以便 modal 的内容滚动。
  • 点击modal “backdrop” 将自动关闭 modal。
  • Bootstrap 一次只支持一个modal。不支持嵌套modal,因为我们认为嵌套modal用户体验不佳。
  • modal使用 position: fixed 在呈现的方式有点特别。尽可能将你的modal HTML 放置在顶级位置,以避免其他元素的潜在干扰。在另一个固定元素中内加入一个 .modal 的时候,你可能会遇到问题。
  • 由于 position: fixed,在移动设备上使用modal有一些附加说明。有关详细资讯,请参阅 入门 -> 兼容性 。

  • 依据 HTML5 定义其语义,autofocus HTML 属性 对 Bootstrap modal没有影响。 要达到同样的效果,请使用一些自定义 JavaScript:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

继续阅读演示和使用指南。

实例

下面是一个 static modal实例(意思是它的 positiondisplay 已被重写)。 包括modal标题、modal体(padding 必要)和modal页脚(可选)。尽可能地包含modal标题与移除按钮,或提供另一个明确的移除操作。

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

完整实例

通过点击下面的按钮切换 modal 呈现。它将从页面顶部向下滑动并淡入。

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

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

滚动长内容

当模态对于用户的 viewport 或设备变得太长时,它们会独立于页面本身滚动。 试试下面的演示来看看我们的意思。

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

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

垂直居中

.modal-dialog-centered 加入到 .modal-dialog 来使互动视窗垂直居中

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

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

工具提示和弹出提示框

Tooltips 和 popovers 可以根据需要放置在 modal。 当 modal 关闭时,其中的任何工具提示和插件也将自动关闭。

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

使用网格

通过 .modal-body 中加入 .container-fluid modal 中使用 Bootstrap 网格系统。然后,像其他任何地方一样使用正常的网格系统 class。

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

不同的 modal 内容

有一对按钮来触发相同互动视窗,但导入不同内容? 使用 event.relatedTargetHTML data-* 属性 (或者 通过 jQuery) 依据点击按钮来更改modal的内容。

下面在 HTML 和 JavaScript 后有一个实例。 有关 relatedTarget 的详细资讯,请参阅 modal 的事件。

<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>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" 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)
})

移除动画

对于只要出现而不需要淡入淡出的 modal,请从你的 modal 标记中删除 .fade

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

动态高度

如果一个 modal 的高度在打开时改变,你应该调用 $('#myModal').modal('handleUpdate') 来重新调整 modal 的位置,以防止卷轴出现。

无障碍访问

请务必在.modalrole="document" modal标题的 .modal-dialog 中添加 .modal-dialogaria-labelledby="..."。另外,你可以使用 .modal 上的 aria-descriptby 来描述你的modal。

嵌入 YouTube 影片

在 modal 上嵌入 YouTube 影片需要额外的 JavaScript 不在 Bootstrap 自动停止重播和更多。有关详细资讯,请参阅 Stack Overflow 的文章

大小选项

modal 有两个可选的大小,可以通过 Class 放在 .modal-dialog 上。 这些尺寸会在某些中断点调整,以避免在较窄的 viewport 上出现水平卷轴。

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

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

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

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

用法

modal 插件通过 data 属性或 JavaScript 切换你隐藏的内容。它将 .modal-open 加到 <body> 以覆盖默认的滚动行为,并生成一个 .modal-backdrop 来提供点击区域,以便在点击modal外面时移除显示的modal。

通过data属性

启动一个 modal 而无需编写 JavaScript。在控制元素上设置 data-toggle="modal" (如按钮),以及一个 data-target="#foo"href="#foo" 来指定特定的modal进行切换。

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

通过 JavaScript

使用单行 JavaScript 调用 id 为 myModal 的 modal。

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

选项

可以通过 data 属性或 JavaScript 传递选项。对于data属性,将选项名称附加到 `.data-,如 data-backdrop=”” 那样。

名称 类型 默认值 描述
backdrop boolean or the string 'static' true 包括modal背景元素。或者指定 static 在点击背景时不关闭modal。
keyboard boolean true 按下 ESC 时关闭modal
focus boolean true 初始化时 focus modal。
show boolean true 初始化时显示模态框。

方法

异步方法和转换

所有API方法都是 asynchronous 然后开始 transition。 。 一旦转换开始但在结束之前,它们将返回到调用者。 此外,将忽略对转换组件的方法调用。

有关更多信息,请参阅 入门->Javascript

.modal(options)

通过 modal 启用你的内容,将选项加入 object内。

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

.modal('toggle')

手动切换 modal。在 modal 实际显示或隐藏之前返回给调用者 (即在 shown.bs.modalhidden.bs.modal 之前)。

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

.modal('show')

手动打开 modal。 modal 实际显示之前返回给调用者 (即在 shown.bs.modal 事件发生之前)。

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

.modal('hide')

手动隐藏modal。 在 modal 实际隐藏之前返回给调用者 (即在 hidden.bs.modal 事件发生之前)。

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

.modal('handleUpdate')

如果模态的高度在打开时发生变化(即如果出现滚动条),则手动重新调整模态的位置。

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

.modal('dispose')

销毁一个元素的 Modal。

事件

Bootstrap modal提供了一下事件,所有相关事件都被触发在他本身的状态中(在 <div class="modal">)。

事件类型 描述
show.bs.modal 当调用 show 实例方法时,此事件会立即触发。如果是因点击,点击的元素作为事件的 relatedTarget 属性可用。
shown.bs.modal 当modal显示时会触发此事件(等待 CSS 转换完成)。如果是因点击导致,点击的元素作为事件的 relatedTarget 属性可用。
hide.bs.modal 当调用 hide 实例方法时,会立即触发此事件
hidden.bs.modal 当 modal 隐藏后会触发此事件(等 CSS 转换完成)。
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

导航

有关如何使用Bootstrap包含的导航组件的文档和示例。

基本导航

Bootstrap中可用的导航从基础共享一般标记和样式 .nav 类到活动和禁用状态。 交换修饰符类以在每种样式之间切换。

基础的 .nav 组件使用flexbox构建,为构建所有类型的导航组件提供了坚实的基础。 它包括一些样式覆盖(用于处理列表),一些用于较大命中区域的链接填充和基本禁用样式。

基础的.nav 组件不包含任何 .active 状态。以下实例包括该类别,主要是为了说明这个 class 不会触发任何特殊的样式。

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

class 可以使用在很多地方,因此你的标记可以超级灵活。 使用与上面类似的 <ul>,或者用的 <nav> 元素自己滚动。 因为 .nav 使用 display: flex,导航链接与导航元件一样,不需要有额外的标记。

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

可用样式

使用工具更改.nav 元件的样式。 依据需要混合搭配或自行建立。

水平对齐

使用 布局 -> 栅格系统 -> flexbox 工具 更改导航的水平对齐方式。默认情况下导航左对齐,但你可以轻鬆地将其更改为中心或右对齐。

.justify-content-center 置中:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

使用 .justify-content-end 靠右对齐:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

垂直

通过使用 .flex-column 工具更改 flex 项目的轴项。如果在特定 viewports 需要堆叠,可使用响应式版本(例如 .flex-sm-column)。

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

和往常一样,垂直导航也是可以没有 <ul>

<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

Tab标签

从上面获取基本导航并添加 .nav-tabs 用于生成分页标签界面的类。 使用它们来创建可用于我们的区域 分页 JavaScript 插件。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

片狀

使用相同的 HTML,但使用 .nav-pills 取代:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

填充和对齐

.nav内容有两种宽度扩展用的 Class,使用 .nav-fill 会将 .nav-item 容按照比例分配空间。注意,这会佔用所有的水平空间,但并不是每个导航项目都具有相同宽度。

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

当使用 <nav> 的导航时,请确保在链接上包含 .nav-item on the anchors.

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>

对于等宽元素使用 .nav-justified。 所有的水平空间将被导航链接佔据,但与上面的 .nav-fill 不同,每个导航项都将是相同的宽度。

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

.nav-fill 的例子类似,使用基于 <nav> 的导航,请确保在链接上包含 .nav-item

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>

使用 flex 工具

如果需要响应式的导航变化,请使用一系列 flexbox 工具 这些工具在中断点之间提供更多的设定。 在下面的实例中,我们的导航将堆叠在最小的中断点上,从小中断点开始填充完整宽度的水平佈局。

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Disabled</a>
</nav>

关于可访问性

如果你使用导航栏来提供导航栏,请务必添加导航栏role="navigation" 到最合乎逻辑的父容器 <ul>,或包装 <nav> 围绕整个导航的元素。 不要将角色添加到 <ul>本身,因为这将阻止它被辅助技术宣布为实际列表。

请注意导航栏,即使在视觉上将其设置为标签.nav-tabs 的分页标签,应该 不会 被赋予 role="tablist", role="tab"role="tabpanel" 属性。 这些仅适用于动态分页标签介面,如 WAI ARIA Authoring Practices中描述。 有关实例,请参阅本节中的 JavaScript behavior

使用下拉选单

加入额外的 HTML 和下拉选单组件。

带下拉选单的分页标签

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

片状的下拉选单

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

JavaScript 行为

使用 JavaScript 分页标签插件 - 单独或通过编译的 bootstrap.js 档 - 扩展我们的导航分页标签和片状的,以创建可选的分页标签、甚至是下拉选单。

如果你要自行编译 JS,记得包 util.js

动态tab页介面,如WAI ARIA Authoring Practices,需要 role="tablist"role="tab"role="tabpanel" 和附加的 aria- 属性,向用户提供辅助技术(如屏幕阅读器)的结构、功能和当前状态。

请注意,动态tab页应该 包含下拉选单,因为这会导致可用性和可见性问题。从可用性的角度来看,当前显示的选项卡的触发器元素不会立即显示(因为它在关闭的下拉选单中)可能会导致混淆。 从可见性的角度来看,目前还没有明确的方式将这种结构对应到标准的 WAI ARIA 模式,这意味著不能容易地被用户的辅助技术所理解。

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher 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.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

如上所示,这不仅可以使用于 <ul> 的标记。也可以用于 <nav> 的标记如下所示。或者随随著你自己需求的标示,如果你使用 <nav> 则不需要加入 role="tablist",因为这会覆盖该元素作为一个导航地标。相反,使用一个替代元素(以下实例是使用 <div>)可用 <nav> 包裹它。

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

标签分页插件也能使用于片状。

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

还有搭配垂直片状。

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

使用data属性

只需在元素上指定 data-toggle="tab"data-toggle="pill" 即可启动标签或片状导航,而无需编写任何 JavaScript。可在 .nav-tabs.nav-pills 上使用这些data属性

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

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

通过 JavaScrip

通过 JavaScript 启用分页标签(每一个分页标签需要分别启动):

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

启用分页标签有以下数种方法::

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').tab('show') // Select third tab

淡入淡出

要使分页标签淡入淡出,请将 .fade 加到每个 .tab-pane中。 第一个分页内容还必须具有 .show 以使初始内容可见。

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

方法

异步方法和转换

所有API方法都是异步 然后开始 过渡。一旦转换开始,它们就会返回调用者但是在它结束之前。另外,一个方法调用了 转换组件将被忽略.

$().tab

启动分页标签元素和内容容器。 标签应该有一个data-targethref 定位在 DOM 中的一个容器节点。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

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

<script>
  $(function () {
    $('#myTab li:last-child a').tab('show')
  })
</script>

.tab(‘show’)

选择给定的分页标签并显示其关联的分页内容。 之前选择的任何其他分页标签将被取消,并且其关联的内容被隐藏。 在 Tab 内容实际显示之前返回到调用者 (即在 shown.bs.tab 事件发生之前)。

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

.tab(‘dispose’)

销毁一个元素的分页标签。

事件

  1. hide.bs.tab (当前活动的分页标签上)
  2. show.bs.tab (待显示的分页标签上)
  3. hidden.bs.tab (在上一个启动的分页标签上,于 hide.bs.tab 事件相同)
  4. shown.bs.tab (在刚刚显示的新分页标签上,于 show.bs.tab 事件相同)

如果没有分页标签已经被启动,那麽 hide.bs.tabhidden.bs.tab 事件不会被触发。

事件类型 描述
show.bs.tab 这个事件在分页内容显示上触发,但在分页标签显示之前。 使用 event.targetevent.relatedTarget 来分别定位启用的分页标签和上一个分页标签(如果可用)。
shown.bs.tab 这个事件在一个分页标签显示之后在分页标签显示上触发。 使用 event.targetevent.relatedTarget 来分别定位启用分页标签和上一个启用分页标签(如果可用)。
hide.bs.tab c来分别定位启用分页标签和上一个启用分页标签(如果可用)。 event.targetevent.relatedTarget 来分别定位当前启用分页标签和新的即将启用的分页标签(如果有)。
hidden.bs.tab 在显示新分页标签之后触发此事件(因此以前的活动分页标签被隐藏)。 使用 event.targetevent.relatedTarget 来分别定位前一个起用分页标签和新的启用分页标签。
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

导航栏

Bootstrap强大的响应式导航标题,导航栏的文档和示例。 包括对品牌,导航等的支持,包括对我们的折叠插件的支持。

如何工作

在开始使用导航栏之前,你需要了解以下内容:

  • 导航栏需要包装 .navbar 并通过.navbar-expand{-sm|-md|-lg|-xl} 用于响应式折叠和 配色方案 类。.
  • 默认情况下,Navbars及其内容是浮动的。 使用 optional containers 限制它们的水平宽度。
  • 使用我们的间距和 Flex 工具用于控制导航栏中间距和对齐。
  • 默认情况下,导航栏会响应,但你可以轻松修改它们以更改它。 响应行为取决于我们的Collapse JavaScript插件。
  • 打印时默认隐藏导航栏。 强制他们通过添加打印 .d-printnavbar上。 查看 工具->显示 了解更多。
  • 使用 <nav> 元素确保亲和性,或者如果使用更通用的元素,如 <div>,在导览列中添加一个 role="navigation" ,为使用者的辅助技术明确标识为导览区域。

请阅读范例和一些支援的子组件清单。

支持的内容

Navbars内置了对少数子组件的支持。 根据需要选择以下内容:

  • .navbar-brand 适用于你的公司,产品或项目名称
  • .navbar-nav 用于全高度和轻量级导航(包括对下拉菜单的支持)。
  • .navbar-toggler 用于我们的折叠插件和其他 navigation toggling 行为。
  • .form-inline 用于任何表单控制元件和操作。
  • .navbar-text 用于垂直居中的文本字串。
  • .collapse.navbar-collapse 用于通过父断点对导航栏内容进行分组和隐藏。

以下是一个包含子元件的范例,包括在一个自动折叠在 lg (大)中断点处的响应式导览列。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

本范例使用 工具->颜色 (bg-light) 和 工具->间距 (my-2, my-lg-0, mr-sm-0, my-sm-0) 。

品牌

The .navbar-brand 可以应用于大多数元素,但锚点效果最好,因为某些元素可能需要工具类或自定义样式。

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

图像增加到 .navbar-brand 可能需要自定义样式或工具来正确调整大小。 以下是一些示例。

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

导览的链接建立在我们的 .nav 选项上,并使用专属的 Class 并且需要使用 toggler classes 在响应式中作切换。 在导览列中的导览元件,也将佔用更多的水平空间,以保持你的导览列内容安全对齐。

活动状态 - 用 .active - 表示当前页面。可以用于 .nav-link.nav-item

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

而且因为我们使用导航类,所以如果你愿意,可以完全避免使用基于列表的方法。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

你还可以在导航栏导航中使用下拉列表。 下拉菜单需要一个包装元素进行定位,因此请务必使用单独的嵌套元素 .nav-item.nav-link 如下所示。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

表单

将各种表单控件和组件放在导航栏中.form-inline

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

.navbar 中的直接子元素使用 flex 排版,预设为 justify-content: between。 根据需要使用其他 flex 工具来调整此行为

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

输入组也有效:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

这些导航栏表单也支持各种按钮。 这也是一个很好的提醒,垂直对齐工具序可用于对齐不同大小的元素。

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

文字

导览列可以在 .navbar-text 包含一些文本。 该 class 调整著文本字串的垂直对齐和水平间距。

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

根据需要与其他元件和工具类混合使用

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

配色方案

由于主题 class 和。 background-color 工具类 class 的结合,主题化导览列从未如此简单。 从 .navbar-light 用于浅色背景颜色, 或 .navbar-dark 深色背景颜色。 然后,自定义 .bg-* 工具。

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

容器

虽然不是必需的,但你可以将导航栏包装在一个 .container 中,将其放置在页面中央或内容的中间 固定或静态于顶的导览列 位置。

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

当容器位于导航栏中时,其水平填充将在低于指定值的断点处移除 .navbar-expand{-sm|-md|-lg|-xl} class. 这可确保在导航栏折叠时,我们不会在较低 viewport 上不必要地填充填充。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

定位

使用定位通用类别将导览列放置在非静态位置。从固定在顶部、固定在底部或 黏(stickied) 在顶部中选择。 請注意,position: sticky用於.sticky-top 这并非在每个流览器都完全支持

使用我們的 工具->定位 将导览列放置在非静态位置。选择固定到顶部、固定到底部、或粘贴到顶部(当页面滚动至物件位置时,会固定在顶部并停留在那裡)。 固定的导览列使用position:fixed',这意味著从 DOM 的正常定位中被拉出,并且可能需要自定义CSS(例如 <body> 上的 padding-top`),以防止与其他元素重叠。

还要注意 .sticky-top 使用 position:sticky,在每个浏览器中都不完全支持

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

响应式行为

按钮后面的内容折叠时,导览列可以使用 .navbar-toggler.navbar-collapse.navbar-expand{-sm|-md|-lg|-xl} 的 class 来改变。 结合其他通用类别,你可以选择显示或隐藏特定元素。

对于不需要折叠的导览列,在导览列中加入 .navbar-expand。对于总是折叠的导览列,不要加任何 .navbar-expand class。

切换元素

导览列切换元素预设情况下对齐左边,但如果它们遵循像导览列 .navbar-brand 这样的同层级元素,它们将自动和最右边对齐。 反转你的品牌标记将对调切换元素的位置。以下是不同切换元素样式的范例。

在最小中断点没有 .navbar-brand 的显示:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

左侧有一个品牌名称,右边是切换元素:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

左侧有一个切换元素,右边是品牌名称:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

外部内容

有时你希望使用折叠插件触发页面上其他位置的隐藏内容。 因为我们的插件适用于 iddata-target匹配,这很容易完成!

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

分页

在多个页面中存在用于显示分页以指示一系列相关内容的文档和示例。

概述

我们使用大量连接链接进行分页,使链接难以错过并且易于扩展 - 同时提供大量命中区域。分页是使用列表HTML元素构建的,因此屏幕阅读器可以宣布可用链接的数量。 使用包装 <nav> 元素将其识别为屏幕阅读器和其他辅助技术的导航部分。

此外,由于页面可能具有多个此类导航部分,因此建议提供描述性的部分 aria-label 为了 <nav> 反映其目的。 例如,如果分页组件用于在一组搜索结果之间导航,则可以使用适当的标签 aria-label="Search results pages"

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

使用图标

想要使用图标或符号代替某些分页链接的文本? 请务必提供适当的屏幕阅读器支持aria 属性和 .sr-only 工具。

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

禁用和活动状态

分页链接可根据不同情况进行复制。对于显示为不可点击的链接,使用 .disabled 和使用 .active 来指示当前页面。

.disabled 使用 pointer-events: none 來禁用 <a> 的链接功能,但该 CSS 属性尚未标准化。此外,即使在支持 pointer-events: none 的浏览器中,键盘导览仍然不受影响,这意味著键盘使用者和辅助性技术的使用者仍然可以启动这些链接。为了安全起见,在这些链接上添加一个 tabindex="-1" 属性防止他们应用 focus,并使用自定义的 JavaScript 来禁用它们的功能。

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

你可以用 <span> 替换的活动或禁用的链接,或者在上一个/下一个箭头的情况下省略链接以删除点击功能,并在保留预期样式的同时防止键盘 focus。

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

尺寸

加入 .pagination-lg.pagination-sm 应用其他尺寸。

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

对齐

使用 flexbox 工具更改分页元件的对齐方式

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

弹出框(Popover)插件

Bootstrap 弹出框的文件与实例,类似 iOS 上的风格,可加在网页上的任何元素上。

概览

使用弹出框插件时应了解的事情如下:

  • 弹出框依靠第三方函数库 Popper.js 进行定位。 在 Bootstrap 弹出框工作之前,你必须包含 popper.min.js,或者使用 bootstrap.bundle.min.js / bootstrap.bundle.js,这已经包含 Popper.js 可以直接运作。
  • 弹出框需要工具提示插件作为依赖。
  • 如果你自行编译 JS,记得 requires.util.js。
  • 由于性能原因,弹出窗口是具有选择性的,因此您必须自己初始化它们。
  • 零长度 titlecontent 值是不会显示一个弹出框。
  • 指定 container: 'body' 以避免在更复杂的元件(如我们的 input 群组,按钮组等)中出现问题。
  • 触发隐藏元素上的弹出窗口将不起作用。
  • .disableddisabled 元素弹出框的触发必须在外层元素上。
  • 当从跨越多行的超链接触发时,弹出框将被居中。在你的 <a> 上使用 white-space: nowrap; 来避免这种行为。
  • 必须先隐藏弹出框,然后才能从 DOM 中删除相应的元素。

都明白了?太好了,让我们通过一些例子看他们是如何运作的。

实例:在任何地方添加弹出框

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

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

实例:使用 container 选项

当你在父元素上有一些干扰弹出框的样式时,你需要指定一个自定义的 container 容器,以便弹出框的 HTML 显示在该元素中。

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

实例

<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-secondary" 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-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

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

下次点击移除

使用 focus 类以便用户进行下一次点击时移除这个弹出框。

下一步点击所需的具体标记

为了正确的跨浏览器和跨平台,你必须使用<a> 标签,而不是 <button> 标签,你还必须包含一个 tabindex 属性。

<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>
$('.popover-dismiss').popover({
  trigger: 'focus'
})

禁用的元素

具有 disabled 的元素是不能产生互动的,这意味用户不能使用 hover 及点击触发弹出(或工具提示),如果想要添加,你使用 <div><span> 包裹并覆盖 pointer-events 在禁用的属性上。

对于禁用的弹出框,你也许倾向使用 data-trigger="hover" 来直接为用户提供视觉回馈,因为用户不会去点击禁用的元素。

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

用法

通过 JavaScript 添加弹出窗口:

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

选项

选项可以通过 data 属性或JavaScript传递。 对于 data 属性,请将选项名称附加到 data-上,如 data-animation=""

名称 类型 默认 描述
animation boolean true 将 CSS 渐变应用到弹出框
container string | element | false false

将弹出框加到特定元素。例如:container: 'body'。该选项特别有用,因为它允许你将触摸屏定位在触发元素附近的文字内容 - 这将防止在画面调整大小期间弹出的提示远离触发元素。

content string | element | function ''

如果 data-content 属性不存在,则为预设内容值。

如果给出一个函数,它将被调用,其this 引用设置为弹出框附加到的元素。

delay number | object 0

显示和隐藏弹出框的延迟(ms) - 不适用于手动触发类型

如果提供了一个数字,则将延迟应用于隐藏/显示

事件结构是:delay: { "show": 500, "hide": 100 }

html boolean false 将HTML插入到弹出框中。 如果是 false,那麽将使用 jQuery 的 text 方法将内容插入到 DOM 中。如果你担心 XSS 攻击,请使用文字。
placement string | function 'right'

如何定位彈出提示框 - auto | top | bottom | left | right。
指定 auto 时,将动态重新定位弹出框。

当函数用于确定位置时,将使用弹出框 DOM 节点作为其第一个参数并将触发元素 DOM 节点作为其第二个参数来调用。 this 将被设为弹出框实例。

selector string | false false 如果提供了选择器,弹出框将被委派给指定的目标。实际上,这用于动态 HTML 来扩增弹出框。 请参阅一个讯息实例
template string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

创建动态提示框时使用的基本 HTML

动态提示框的 title 将被注入到 .popover-header 中。

动态提示框的 content 将被注入到 .popover-body 中。

.arrow 将成为动态提示框的箭头。

最外层的包装元素应该有 .popover

title string | element | function ''

如果 title 属性不存在,则为预设标题值。

如果给出一个函数,它将被调用,其 this 引用设置为动态提示框附加到的元素。

trigger string 'click' 如何触发动态提示框 - click | hover | focus | manual。 你可以传递多个触发器;将它们与空格分开。`manual` 不能与任何其他触发器组合。
offset number | string 0 动态提示框相对于其目标的偏移。更多信息,请参阅 Popper.js 的 偏移文档
fallbackPlacement string | array 'flip' 指定动态提示框将在调回时使用哪个位置。 有关更多信息,请参阅 Popper.js 的 行为文档
boundary string | element 'scrollParent' Overflow constraint boundary of the popover. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.

各弹出框的data属性

如上所述,可以通过使用data属性来替代指定各个弹出框的选项。

方法

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

$().popover(options)

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

.popover('show')

显示一个元素的弹出框。 在弹出实际显示之前返回给调用者 (即,在shown.bs.popover事件发生之前)。 这被认为是弹出框是 “手动” 触发。标题和内容均为零的弹出框从不显示。

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

.popover('hide')

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

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

.popover('toggle')

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

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

.popover('dispose')

隐藏和销毁一个元素的弹出框。使用委託(the selector option) 创建)的弹出框不能在后代触发元素上被单独销毁。

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

.popover('enable')

给一个元素的弹出框显示的功能。 弹出框是在预设情况下添加的。

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

.popover('disable')

删除要显示元素的弹出框的功能。只有在重新添加后,才能显示弹出框。

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

.popover('toggleEnabled')

切换弹出框的显示或隐藏元素功能。

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

.popover('update')

更新弹出框的位置。

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

事件

事件类型 描述
show.bs.popover 当调用 show 实例方法时,此事件会立即触发。
shown.bs.popover 当弹出框显示时,会触发此事件(待 CSS 转换完成)。
hide.bs.popover 当调用 hide 实例方法时,会立即触发此事件。
hidden.bs.popover 当弹出框隐藏后,会触发此事件(将等待CSS转换完成)
inserted.bs.popover 当将提示范本加到 DOM 时,此事件在 show.bs.popover 事件之后触发。
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

进度条

使用 Bootstrap 自定义进度条的文档和示例,支持堆叠进度条,调整动画背景和以及调整文本标签。

如何运作

进度元件使用两个 HTML 元素构建、一些CSS设置宽度、以及一些属性。我们不使用 HTML5 <progress> 元素 确保你可以堆叠进度条、加上动态效果,并在其上放置文本标签。

  • 使用 .progress 作为类来指示进度条的最大值。
  • 內部的 .progress-bar 来表示到目前为止的进度。
  • .progress-bar 需要行内样式,工具的 Class 或自定义 CSS 来设置它们的宽度。
  • .progress-bar 还需要一些 rolearia 属性来使其具有可视性。

把它们放在一起,你得到以下例子。

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Bootstrap 提供了一些宽度设定工具。 根据你的需要,这些可能有助于快速配置进度条。

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

标签

通过在进度条中放置文本,为进度条添加标签 .progress-bar

25%
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

高度

我们可以设置了一个 height 样式到 .progress, 因此,如果您更改 .progress-bar 内部将相应地自动调整大小。

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

背景

使用背景工具类更改各个进度条的外观。.

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

多进度条

如果需要,在进度组件中可以包含多个进度条。

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

带条纹的

.progress-bar-striped 加到任何 .progress-bar 中,通过 CSS 渐变对进度条的背景颜色加上条纹。

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

动态条纹

条纹渐变也可以设置动画。 将 .progress-bar-animated 加到 .progress-bar 中,通过 CSS3 绘制从右到左的动画条纹。

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

滚动监控(Scrollspy)插件

根据滚动条位置自动更新Bootstrap导航或列出组组件,以指示 viewport 中当前处于活动状态的链接。

如何运作

滚动监控正常运行的几个要求:

  • 如果自行编译 JS,记得包含util.js
  • 必须用在 Bootstrap 导航元件 或 列表群组。
  • 滚动监控需要在你所监控的元素上使用 position: relative; ,通常是 <body>
  • 当对 <body> ,以外的元素进行监控时,请确保具有 heightoverflow-y: scroll; 的应用。
  • 锚 (<a>) 是必需的,并且必须指向具有那 id 的元素。

成功后,你的导航或列表群组将相应更新,根据相关目标将 .active 从一个项目移动到下一个项目。

导航栏实例

滚动导航栏下方的区域,并观察活动变化。下拉菜单项目也将被突出显示

@fat

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.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

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 blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

嵌套导航的示例

(Scrollspy)插件也适用于嵌套 .nav。 如果是嵌套的.nav.active, 它的父级也会是 .active。滚动导航栏旁边的区域,并观察活动变化。

Item 1

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

Item 1-1

Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.

Item 2-2

Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.

Item 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Item 3-1

Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.

Item 3-2

Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 2-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

列表组实例

滚动监控对.list-group 有效。滚动列表群组旁边的区域,并观察活动变化

Item 1

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

Item 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Item 4

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

用法

通过 data 属性

将滚动监控行为加到你的导航中,将data-spy="scroll" 加到要监听的元素(通常是 <body>)。然后将 data-target 属性加到任何 Bootstrap .nav 元件的父元素的 ID 或 Class 中。

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

在你的 CSS 中加 position: relative; 后,通过 JavaScript 调用滚动监控。

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

Resolvable 需要解析的 ID 目标

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

忽略非 :visible 目标元素

目标元素如果是非 :visible 其会在 jQuery 中被忽略,其他相对应的导航元件将永远不会被 highlight。

方法

.scrollspy('refresh')

当从 DOM 中加入或删除元素使用滚动监控时,你需要调用刷新方式,如下所示:

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

.scrollspy('dispose')

Destroys an element’s scrollspy.

选项

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

名称 类型 默认值 描述
offset number 10 当计算位置时,从顶部开始的计算的像素偏移距离。

事件

事件类型。 描述
activate.bs.scrollspy 每当一个项目被添加时,这个事件会在滚动元素上触发。
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something…
})

提示框

当您想要描述一个链接的时候,提示工具(Tooltip)就显得非常有用。提示工具(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息。

概览

使用提示框插件时应了解的事情如下:

  • 提示框依靠第三方函数庫 Popper.js 进行定位。 在 Bootstrap 提示框工作之前,你必须包含 popper.min.js,或者使用 bootstrap.bundle.min.js / bootstrap.bundle.js ,这已经包含 Popper.js 可以直接运作。
  • 如果自行编译 JS,记得 requires util.js。
  • 提示框因为性能原因所以是选择加入,所以 你必须自己将他们初始化。
  • Tooltips 不会显示具有零长度标题的提示框。
  • 指定 container: 'body' 以避免在更复杂的元件(如我们的输入群组,按钮组等)中出现问题。
  • 隐藏元素上的触发提示框将不起作用。
  • .disableddisabled 元素提示框的触发必须在外层元素上。
  • 当从跨越多行的超链接触发时,提示框将被居中。在你的 white-space: nowrap; 上使用 <a>来避免这种行为
  • 必须先隐藏提示框,然后才能从 DOM 中删除相应的元素。

都明白了?太好了,让我们通过一些例子看他们是如何运作的。

实例:在任何地方添加提示框

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

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

实例

滑动 hover 到链接上查看提示框

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

将鼠标悬停在下方按钮上可查看四个提示框方向:顶部,右侧,底部和左侧.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

添加自定义的 HTML:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

用法

提示框插件会根据需要生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面。

通过JavaScript触发提示框:

$('#example').tooltip(options)
Overflow auto and scroll

Tooltip position attempts to automatically change when a parent container has overflow: auto or overflow: scroll like our .table-responsive, but still keeps the original placement’s positioning. To resolve, set the boundary option to anything other than default value, 'scrollParent', such as 'window':

$('#example').tooltip({ boundary: 'window' })

标记

提示框所需的标记只是一个 data 属性和 title 在你希望获得提示框的HTML元素上。 生成的提示框标记相当简单,但它确实需要一个位置 (默认情况下,设置为 top 通过插件)。

使提示框适用于键盘和辅助技术用户

你只应为传统上键盘 focus 和互动式(如链接或表单控制元件)的 HTML 元素添加提示框。虽然任意的 HTML 元素(如 <span>)可以通过添加 tabindex="0" 属性来调整 focus ,但这会为键盘使用者的非互动式元素增加可能造成困惑的定位点。此外,大多数辅助技术目前还没有加入这种情况下的提示框。

此外,不要单纯依赖 hover 作为提示框作为触发器,因为这将使用你的提示框无法被键盘触发。

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

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

禁用的元素

具有 disabled 的元素是不能产生互动的,这意味用户不能使用 hover 及点击触发弹出(或提示框),如果想要启用,可使用 <div><span>,包裹,且調整 tabindex="0",让键盘能够切换,并覆盖 pointer-events 在禁用的属性上。

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

选项

可以通过data属性或 JavaScript 传递选项。对于data属性,将选项名称附加到 data-, as in data-animation="".

名称 类型 默认值 描述
animation boolean true 将CSS淡入淡出过渡应用于提示框
container string | element | false false

将提示框附加到特定元素。 例:container: 'body'。此选项特别有用,它允许你将提示框放置在触发元素附近的文档流中 - 这将防止提示框在窗口大小调整期间从触发元素浮动。

delay number | object 0

显示和隐藏弹出提示框的延迟(ms) - 不适用于手动触发类型

如果提供了一个数字,则将延迟应用于隐藏/显示

对象结构是: delay: { "show": 500, "hide": 100 }

html boolean false

在提示框中允许 HTML。

如果为 true,提示框的 title 中的 HTML 标签将在提示框中呈现。如果为 false,则将使用 jQuery的 text 方法将内容插入到 DOM 中。如果你担心 XSS 攻击,请使用文字。

如果你担心XSS攻击,请使用文本。

placement string | function 'top'

如何定位提示框 - auto | top | bottom | left | right。
When auto 时,将动态重新定位提示框。

当函数用于确定位置时,将使用提示框 DOM 节点作为其第一个参数并将触发元素 DOM 节点作为其第二个参数来调用。 this 将被设为弹出提示框实例

selector string | false false 如果提供了选择器,提示框将被委派给指定的目标。实际上,这用于动态 HTML 来扩增提示框事件。
template string '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

创建提示框时使用的基本 HTML

提示框的 title 将被注入到 .tooltip-inner中。

.arrow 将成为提示框的箭头。

最外层的包装元素应该有 .tooltiprole="tooltip".

title string | element | function ''

如果 title属性不存在,则为默认标题值。

如果给出一个函数,它将被调用,其 this 引用设置为提示框附加到的元素

trigger string 'hover focus'

如何触发提示框 - 单击| 悬停| 焦点| 手册。 你可以传递多个触发器; 用空格隔开它们。

'manual' 表示提示框将通过 .tooltip('show'), .tooltip('hide').tooltip('toggle') 的方法触发,这个值不能与其它的触发器做组合。

'hover' 将导致键盘无法触发提示框,只能做为使用键盘用户传递讯息的替代方法。

offset number | string 0 提示框相对于其目标的偏移量。 有关更多信息,请参阅Popper.js的偏移文档
fallbackPlacement string | array 'flip' 允许指定Popper将在后备中使用的位置。 有关更多信息,请参阅Popper.js的行为文档
boundary string | element 'scrollParent' Overflow constraint boundary of the tooltip. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.

各个提示框的数据属性

如上所述,可以通过使用数据属性来指定单个提示框的选项。

方法

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

$().tooltip(options)

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

.tooltip('show')

显示元素的提示框. 在实际显示提示框之前返回调用者 (即在 shown.bs.tooltip 之前)。 这被认为是提示框的“手动”触发。 永远不会显示具有零长度标题的提示框。

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

.tooltip('hide')

隐藏元素的提示框。 在实际隐藏提示框之前返回调用者 (即在 hidden.bs.tooltip 之前)。 这被认为是提示框的“手动”触发。

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

.tooltip('toggle')

切换元素的提示框。 在实际显示或隐藏提示框之前返回调用者 (即在 shown.bs.tooltiphidden.bs.tooltip 之前)。这被认为是提示框的“手动”触发。

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

.tooltip('dispose')

隐藏和销毁元素的提示框。 使用委托的提示框(使用 the selector option) 不能在后代触发元素上单独销毁。

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

.tooltip('enable')

为元素的提示框提供显示的能力。 默认情况下启用提示框。

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

.tooltip('disable')

删除元素提示框的显示功能。 只有重新启用提示框才能显示。

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

.tooltip('toggleEnabled')

切换显示或隐藏元素提示框的功能。

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

.tooltip('update')

更新元素提示框的位置。

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

事件

事件类型 描述
show.bs.tooltip 当调用 show 实例方法时,此事件会立即触发。
shown.bs.tooltip 当提示框显示后,会触发此事件(待CSS转换完成)​​。
hide.bs.tooltip 当调用 hide 实例方法时,会立即触发此事件。
hidden.bs.tooltip 当提示框对隐藏后,会触发此事件(待CSS转换完成)​​。.
inserted.bs.tooltip 将提示框范本加到 DOM 后,会在 show.bs.tooltip 事件后触发此事件。
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})