可用的图标

包括200个来自Glyphicon Halflings的字体图标。Glyphicons Halflings 一般不允许免费使用，但是他们的作者允许Bootstrap免费使用。为了表示感谢，希望你在使用时加上Glyphicons 的链接。

glyphicon glyphicon-adjust
glyphicon glyphicon-align-center
glyphicon glyphicon-align-justify
glyphicon glyphicon-align-left
glyphicon glyphicon-align-right
glyphicon glyphicon-arrow-down
glyphicon glyphicon-arrow-left
glyphicon glyphicon-arrow-right
glyphicon glyphicon-arrow-up
glyphicon glyphicon-asterisk
glyphicon glyphicon-backward
glyphicon glyphicon-ban-circle
glyphicon glyphicon-barcode
glyphicon glyphicon-bell
glyphicon glyphicon-bold
glyphicon glyphicon-book
glyphicon glyphicon-bookmark
glyphicon glyphicon-briefcase
glyphicon glyphicon-bullhorn
glyphicon glyphicon-calendar
glyphicon glyphicon-camera
glyphicon glyphicon-certificate
glyphicon glyphicon-check
glyphicon glyphicon-chevron-down
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-chevron-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-circle-arrow-left
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-cloud
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-cog
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-comment
glyphicon glyphicon-compressed
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-credit-card
glyphicon glyphicon-cutlery
glyphicon glyphicon-dashboard
glyphicon glyphicon-download
glyphicon glyphicon-download-alt
glyphicon glyphicon-earphone
glyphicon glyphicon-edit
glyphicon glyphicon-eject
glyphicon glyphicon-envelope
glyphicon glyphicon-euro
glyphicon glyphicon-exclamation-sign
glyphicon glyphicon-expand
glyphicon glyphicon-export
glyphicon glyphicon-eye-close
glyphicon glyphicon-eye-open
glyphicon glyphicon-facetime-video
glyphicon glyphicon-fast-backward
glyphicon glyphicon-fast-forward
glyphicon glyphicon-file
glyphicon glyphicon-film
glyphicon glyphicon-filter
glyphicon glyphicon-fire
glyphicon glyphicon-flag
glyphicon glyphicon-flash
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-open
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-font
glyphicon glyphicon-forward
glyphicon glyphicon-fullscreen
glyphicon glyphicon-gbp
glyphicon glyphicon-gift
glyphicon glyphicon-glass
glyphicon glyphicon-globe
glyphicon glyphicon-hand-down
glyphicon glyphicon-hand-left
glyphicon glyphicon-hand-right
glyphicon glyphicon-hand-up
glyphicon glyphicon-hd-video
glyphicon glyphicon-hdd
glyphicon glyphicon-header
glyphicon glyphicon-headphones
glyphicon glyphicon-heart
glyphicon glyphicon-heart-empty
glyphicon glyphicon-home
glyphicon glyphicon-import
glyphicon glyphicon-inbox
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-info-sign
glyphicon glyphicon-italic
glyphicon glyphicon-leaf
glyphicon glyphicon-link
glyphicon glyphicon-list
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-log-in
glyphicon glyphicon-log-out
glyphicon glyphicon-magnet
glyphicon glyphicon-map-marker
glyphicon glyphicon-minus
glyphicon glyphicon-minus-sign
glyphicon glyphicon-move
glyphicon glyphicon-music
glyphicon glyphicon-new-window
glyphicon glyphicon-off
glyphicon glyphicon-ok
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ok-sign
glyphicon glyphicon-open
glyphicon glyphicon-paperclip
glyphicon glyphicon-pause
glyphicon glyphicon-pencil
glyphicon glyphicon-phone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-picture
glyphicon glyphicon-plane
glyphicon glyphicon-play
glyphicon glyphicon-play-circle
glyphicon glyphicon-plus
glyphicon glyphicon-plus-sign
glyphicon glyphicon-print
glyphicon glyphicon-pushpin
glyphicon glyphicon-qrcode
glyphicon glyphicon-question-sign
glyphicon glyphicon-random
glyphicon glyphicon-record
glyphicon glyphicon-refresh
glyphicon glyphicon-registration-mark
glyphicon glyphicon-remove
glyphicon glyphicon-remove-circle
glyphicon glyphicon-remove-sign
glyphicon glyphicon-repeat
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-resize-small
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-retweet
glyphicon glyphicon-road
glyphicon glyphicon-save
glyphicon glyphicon-saved
glyphicon glyphicon-screenshot
glyphicon glyphicon-sd-video
glyphicon glyphicon-search
glyphicon glyphicon-send
glyphicon glyphicon-share
glyphicon glyphicon-share-alt
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-signal
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-alphabet
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-star
glyphicon glyphicon-star-empty
glyphicon glyphicon-stats
glyphicon glyphicon-step-backward
glyphicon glyphicon-step-forward
glyphicon glyphicon-stop
glyphicon glyphicon-subtitles
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-tasks
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-th
glyphicon glyphicon-th-large
glyphicon glyphicon-th-list
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-time
glyphicon glyphicon-tint
glyphicon glyphicon-tower
glyphicon glyphicon-transfer
glyphicon glyphicon-trash
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-deciduous
glyphicon glyphicon-unchecked
glyphicon glyphicon-upload
glyphicon glyphicon-usd
glyphicon glyphicon-user
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-up
glyphicon glyphicon-warning-sign
glyphicon glyphicon-wrench
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out

如何使用

出于性能的考虑，所有图标都需要基类和单独的图标类。把下面的代码放在任何地方都能使用。为了留下正确的内补（padding），一定要在图标和文本之间加上一个空格。

不要和其它组件混合使用

图标 class 不能和其它元素联合使用，因为这些图标被设计为独立的元素、独立使用。

<span class="glyphicon glyphicon-search"></span>

案例

把它们放在按钮，工具栏的按钮组中，导航或输入栏的前面都可以。

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

用于显示链接列表的可切换、有上下文的菜单。JavaScript 下拉菜单插件让它有交互性。

案例

将下拉菜单触发器和下拉菜单都包裹在.dropdown里，或者另一个声明了position: relative;的元素。然后添加组成菜单的HTML代码。

<div class="dropdown">
  <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

对齐选项

给下拉菜单.dropdown-menu加上.pull-right 使文字右对齐。

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

标题

在任何下拉菜单中均可通过添加标题来标明一组动作。

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  ...
  <li role="presentation" class="divider"></li>
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  ...
</ul>

禁用的菜单项

给下拉菜单中的<li>加上.disabled禁用链接。

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>

用按钮组把一组按钮放在同一行里。通过使用我们的按钮插件，可以设置为单选框或多选框样式及行为。

按钮组中的工具提示和弹出框需要特别的设置

当为.btn-group中的元素应用工具提示或弹出框时，必须指定container: 'body'选项，这样可以避免不必要的副作用（例如工具提示或弹出框触发时，会让页面元素变宽和/或失去圆角）。

基本案例

把一系列的.btn按钮放入.btn-group。

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

把一组<div class="btn-group">组合进一个<div class="btn-toolbar">做成更复杂的组件。

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
</div>

尺寸

只要给.btn-group加上.btn-group-*，而不是给组中每个按钮都应用大小类。

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

嵌套

想要把下拉菜单混合到一系列按钮中，就把.btn-group放入另一个.btn-group中。

<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

垂直排列

让一组按钮竖直显示而不是水平显示。

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

两端对齐的链接排列

让一组按钮拉长为相同的尺寸，适应父元素的宽度。对于按钮组中的按钮下拉菜单也同样适用。

特定元素的用法

这只适用 <a> 元素，因为 <button> 元素不能应用这些样式并将其所包含的内容两端对齐（就像display: table-cell;之类的表现形式）。

Left Middle Right

Left Middle

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

把任何按钮放入.btn-group然后加入正确的菜单标记，就可以做成下拉菜单触发器。

插件需求

按钮下拉菜单需要你的版本的Bootstrap的下拉菜单插件。

单按钮下拉菜单

只要改变一些基本的标记，就能把按钮变成下拉菜单开关。

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

分裂式按钮下拉菜单

相似地，分裂式按钮下拉菜单也需要同样的改变标记，但只要多一个分开的按钮。

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

尺寸

下拉菜单按钮适用所有尺寸的按钮。

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

向上弹出式菜单

给父元素添加.dropup就能使触发的下拉菜单在元素上方。

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

通过在基于文本的输入框前面，后面或是两边加上文字或按钮，可以扩展对表单的控制。用带有.input-group-addon的.input-group，可以给.form-control前面或后面追加元素。

跨浏览器兼容性

这里请避免使用 <select> 元素，因为 WebKit 浏览器不能完全支持它的样式。

输入框组中的工具提示和弹出框需要特别的设置

When using tooltips or popovers on elements within an .input-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

不要和`.form-group`混用

不要直接将.input-group和.form-group混合使用，因为.input-group是一个独立的组件。

基本案例

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

尺寸

给.input-group添加标明尺寸的class，它自己和其中的内容都会自动调整尺寸。没必要给每个元素都重复添加尺寸class。

<div class="input-group input-group-lg">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

复选框与单选框

可以把复选框或单选框放在输入组里而不是文本前。

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox">
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio">
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

附加按钮

输入组里的有点不同，它需要多加一层元素。你要用 .input-group-btn 包住按钮而不是 .input-group-addon。这是因为默认的浏览器样式不能被覆盖。

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

带下拉菜单的按钮

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu pull-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

分段按钮

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control">
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Bootstrap中可用的导航有相似的标记，用基类.nav开头，这是相似的部分。改变修饰类可以改变样式。

标签页

注意.nav-tabs类需要.nav基类。

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

Requires JavaScript tabs plugin

For tabs with tabbable areas, you must use the tabs JavaScript plugin.

胶囊式标签页

用相同的 HTML 标记，但要用.nav-pills代替。

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

Pills 可以竖直堆叠。只要加上.nav-stacked。

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

两端对齐的导航

在大于768px的屏幕上，通过.nav-justified可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。

Safari 和响应式两端对齐导航

Safari有一个bug：对于两端对齐的导航，水平改变浏览器大小将引起绘制错误。此bug可以在justified nav example页面得到重现。

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

禁用的链接

对任何导航（包括标签页，pills，或列表，加入.disabled使链接为灰色且没有鼠标悬停效果。

链接功能没有受到影响

这个类只改变<a>的外观，而不是它的功能。用自定义的 JavaScript 禁用这里的链接。

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

使用下拉菜单

用一点点额外HTML和 JavaScript下拉菜单插件加入下拉菜单。

带下拉菜单的导航

<ul class="nav nav-tabs">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

带下拉菜单的胶囊式标签页

<ul class="nav nav-pills">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

导航条是在您的应用或网站中作为导航标头的响应式元组件。它们在移动设备上可以折叠（并且可开可关），且在可用的视口宽度增加时变为水平展开模式。

定制折叠模式与水平模式的阈值

根据你所放在导航条上的内容的长度，也许你需要调整导航条进入折叠模式和水平模式的阈值。通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求。

Requires JavaScript

If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
          <li class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

插件依赖

这个响应式导航栏需要你当前版本的Bootstrap的collapse插件

增强导航条的可访问性

要增强可访问性，一定要给每个导航条加上role="navigation"。

将表单放置于.navbar-form之内可以呈现很好的垂直对齐，并在较窄的viewport中呈现折叠状态。使用对齐选项可以确定其在导航条上出现的位置。

通过使用mixin，.navbar-form和 .form-inline共享了很多代码。

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

为输入框添加label标签

如果你没有为输入框添加label标签，屏幕阅读器将会遇到问题。对于导航条内的表单，可以通过.sr-only class隐藏label标签。

对于不包含在<form>中的<button>元素，加上.navbar-btn这个class后可以让它在导航条里垂直居中。

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Context-specific usage

Like the standard button classes, .navbar-btn can be used on <a> and <input> elements. However, neither .navbar-btn nor the standard button classes should be used on <a> elements within .navbar-nav.

把文本包裹在.navbar-text中时，为了有正确的行距和颜色，通常使用<p>标签。

<p class="navbar-text">Signed in as Mark Otto</p>

或许你希望在标准的导航组件之外添加标准链接，那么，使用.navbar-link class可以让链接有正确的默认颜色和反色。

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

用.navbar-left或者.navbar-right工具类给导航链接、表单、按钮或文本对齐。两种类都用到在特定方向的CSS浮动样式。例如，要对齐导航链接，就要把它们放在个分开的、应用了工具类的<ul>里。

这些class是.pull-left和.pull-right的mixin版本，但是他们被限定在了媒体查询中，这样可以更容易的在各种尺寸的屏幕上处理导航条组件。

添加.navbar-fixed-top可以让导航条固定在顶部。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  ...
</nav>

需要为body标签设置内补（padding）

这个固定的导航条会遮住页面上的其它内容，除非你给<body>的上方设置了padding。用你自己的值，或用下面给出的代码都可以。提示：导航条的默认高度是50px。

body { padding-top: 70px; }

一定要放在Bootstrap CSS的核心文件之后。

用.navbar-fixed-bottom代替。

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  ...
</nav>

需要为body标签设置内部（padding）

这个固定的导航条会遮住页面上的其它内容，除非你给<body>底部设置了padding。用你自己的值，或用下面给出的代码都可以。提示：导航条的默认高度是50px。

body { padding-bottom: 70px; }

一定要在加载Bootstrap CSS的核心后使用它。

通过添加.navbar-static-top即可创建一个与页面的导航条。它会随着页面向下滚动而消失。和.navbar-fixed-*类不同的是，你不用给body添加padding。

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  ...
</nav>

通过添加.navbar-inverse类可以改变导航条的外观。

<nav class="navbar navbar-inverse" role="navigation">
  ...
</nav>

用一个带方向的层次表明当前页面的位置。

分割符自动地通过CSS的:before和content添加上了。

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

为您的网站或应用提供多页的分页组件，或是用更简单的翻页代替。

默认分页

Rdio启发出了这个简单的分页，用在应用或搜索结果中超级棒。这个大块容易看见，容易缩放并有大块的点击区域。

«
1
2
3
4
5
»

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

激活和禁用状态

链接在不同情况下可以定制。给不能点击的链接用.disabled 并且用.active显示是当前页。

<ul class="pagination">
  <li class="disabled"><a href="#">&laquo;</a></li>
  <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
  ...
</ul>

你还可以将active或disabled应用于<span>标签，这样就可以让其保持需要的样式并移除点击功能。

<ul class="pagination">
  <li class="disabled"><span>&laquo;</span></li>
  <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
  ...
</ul>

尺寸

想要更小或更大的分页？要得到更多尺寸，加上.pagination-lg或.pagination-sm吧。

«
1
2
3
4
5
»

«
1
2
3
4
5
»

«
1
2
3
4
5
»

<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>

翻页

用轻便的标记和样式，就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。

默认案例

在默认的翻页中，链接居中。

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

对齐链接

您可以把链接向两端对齐作为替代。

<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

可选的禁用状态

翻页链接也用分页中的.disabled工具类。

<ul class="pager">
  <li class="previous disabled"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

案例

Example heading New

<h3>Example heading <span class="label label-default">New</span></h3>

可用的变体

用下面的任何一个class即可改变标签的外观。

Default Primary Success Info Warning Danger

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

给链接，Bootstrap导航等等加入<span class="badge">，可以容易地高亮新的或未读的条目。

Inbox 42

<a href="#">Inbox <span class="badge">42</span></a>

自动消失（self colapsing）

当没有新的或未读的条目时，里面没有内容的徽章会消失（通过CSS的:empty选择器实现）。

跨浏览器兼容性

徽章在Internet Explorer 8中不会自动消失，因为它需要对:empty选择器的支持。

适应导航的激活状态

在胶囊式导航和列表式导航中的徽章有内置的样式。

<ul class="nav nav-pills nav-stacked">
  <li class="active">
    <a href="#">
      <span class="badge pull-right">42</span>
      Home
    </a>
  </li>
  ...
</ul>

轻量，灵活的可选组件，扩展整个视角，展示您站点上的关键内容。要让大屏幕介绍是屏幕宽度，请别把它包括在.container。

Hello, world!

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

Learn more

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>

如果需要让大屏幕介绍（jumbotron）占据全部宽度并且去掉圆角，只需将其放到所有.container外面，并在其内部添加一个.container。

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

简单的h1样式，可以适当地分出空间且分开页面中的章节。像其它组件一样，它可以使用h1的默认small元素（添加了一些额外的样式）。

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

用缩略图组件扩展Bootstrap的栅格系统，可以简单地显示栅格样式的图像，视频，文本，等等。

默认案例

Boostrap的缩略图的默认设计仅需最小的标记，就能展示带链接的图片。

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/100%x180" alt="...">
    </a>
  </div>
  ...
</div>

定制内容

用一点点额外的标记，可以把任何种类的HTML内容像标题，段落或按钮加入缩略图。

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

为典型的用户动作提供少数可用且灵活的反馈消息。要用关闭功能，请使用jQuery警告框插件.

案例

为了得到基本的警告信息，把任何文本和可选的关闭按钮放入.alert和四种有意义的类中（例如，.alert-success）。

没有默认类

警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种内容类。从成功，消息，警告或危险中任选其一。

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Best check yo self, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>

可关闭的警告框

可以用一个可选的.alert-dismissable和关闭按钮。

Warning! Best check yo self, you're not looking too good.

<div class="alert alert-warning alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

确定在所有设备上的正确行为

一定要给data-dismiss="alert"属性用上<button>。

警告框中的链接

用.alert-link工具类，可以快速提供在任何警告框中相符的颜色。

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Best check yo self, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

<div class="alert alert-success">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger">
  <a href="#" class="alert-link">...</a>
</div>

提供工作或动作的实时反馈，只用简单且灵活的进度条。

跨浏览器兼容性

进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持animation属性。

基本案例

默认的进度条。

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

有意义的替换

为了一致的样式，进度条使用与按钮和警告框相同的类。

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete</span>
  </div>
</div>

条纹效果

用一个渐变可以创建条纹效果，在IE8中不可用。

<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

运动效果

给.progress-striped加上.active使它由右向左运动。在IE的所有版本不可用。

<div class="progress progress-striped active">
  <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

堆叠效果

把多个进度条放入同一个.progress，使它们堆叠。

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右对齐的图片（就像blog内容或Tweets等）。

默认媒体

默认的媒体允许在一个内容块的左边或右边浮动一个媒体对象（图像，视频，音频）

Media heading

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

Media heading

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

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 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">
  <a class="pull-left" href="#">
    <img class="media-object" src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

媒体列表

用一点点额外的标记，就能在列表内使用媒体（对评论或文章列表很有用）。

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" src="..." alt="...">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

列表组是灵活又强大的组件，不仅仅用于显示简单的成列表的元素，还用于复杂的定制的内容。

基本案例

最简单的列表只是无顺序列表，列表条目和正确的类。Build upon it with the options that follow, or your own CSS as needed.

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>

徽章

给列表组加入徽章，它会自动地放在右面。

14 Cras justo odio
2 Dapibus ac facilisis in
1 Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

链接条目

用<a>标签而不是<li>标签（也就是说父元素是<div>而不是<ul>）。没必要给每个元素都加一个父元素。

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

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

定制内容

在里面可以加几乎任何HTML，甚至是像下面的带链接的列表组。

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

虽然不总是必须，但是某些时候你可能需要将某些内容放到一个盒子里。对于这种情况，可以试试面板组件。

基本案例

默认的.panel所做的只是提供基本的边界和内部，来包含内容。

Basic panel example

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

带标题的面版

用.panel-heading可以简单地加入一个标题容器。您也可以用<h1>-<h6>和.panel-title类加入预定义样式的标题。

Panel heading without title

Panel content

Panel title

Panel content

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

带脚注的面版

把按钮或次要的文本放入.panel-footer。注意面版的脚注不会从带意义的替换中继承颜色，因为它不是在前面的内容。

Panel content

Panel footer

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

有意义的替换

像其它组件一样，可以简单地通过加入有意义的状态类，给特定的内容使用更有意义的面版。

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

带表格的面版

为了无缝的设计，在面版中加入.table。如果有.panel-body，就在表格的上方加上一个用于分割的边界。

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

如果没有.panel-body，面版标题会和表格连接起来，没有空隙。

Panel heading

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

带列表组的面版

可以简单地在任何面版中使用最大宽度的列表组。

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <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>
</div>

默认效果

把Well用在元素上，能有嵌入(inset)的的简单效果。

Look, I'm in a well!

<div class="well">...</div>

可选类

用这两种可选修饰类，可以控制内补（padding）和圆角。

Look, I'm in a large well!

<div class="well well-lg">...</div>

Look, I'm in a small well!

<div class="well well-sm">...</div>

组件

Glyphicons 图标

可用的图标

如何使用

不要和其它组件混合使用

案例

下拉菜单

案例

对齐选项

标题

禁用的菜单项

按钮组

按钮组中的工具提示和弹出框需要特别的设置

基本案例

按钮工具栏

尺寸

嵌套

垂直排列

两端对齐的链接排列

特定元素的用法

按钮式下拉菜单

插件需求

单按钮下拉菜单

分裂式按钮下拉菜单

尺寸

向上弹出式菜单

输入框组

跨浏览器兼容性

输入框组中的工具提示和弹出框需要特别的设置

不要和.form-group混用

基本案例

尺寸

复选框与单选框

附加按钮

带下拉菜单的按钮

分段按钮

导航

标签页

Requires JavaScript tabs plugin

胶囊式标签页

两端对齐的导航

Safari 和响应式两端对齐导航

禁用的链接

链接功能没有受到影响

使用下拉菜单

带下拉菜单的导航

带下拉菜单的胶囊式标签页

导航条

默认的导航条

定制折叠模式与水平模式的阈值

Requires JavaScript

插件依赖

增强导航条的可访问性

表单

为输入框添加label标签

按钮

Context-specific usage

文本

非导航的链接

组件对齐

固定在顶部

需要为body标签设置内补（padding）

固定在底部

需要为body标签设置内部（padding）

静止在顶部

反色的导航条

面包屑导航

分页

默认分页

激活和禁用状态

尺寸

翻页

默认案例

对齐链接

可选的禁用状态

标签

案例

Example heading New