Glyphicons 图标

可用的图标

包括200个来自Glyphicon Halflings的字体图标GlyphiconsHalflings 一般不允许免费使用，但是他们的作者允许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），一定要在图标和文本之间加上一个空格。

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

按钮组

用按钮组把一组按钮放在同一行里。通过a href="../javascript/#buttons">我们按钮插件可以设置为单选框或多选框样式。

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

当为.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> 不能应用这些样式。

Left Middle Right 
<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).

基本案例

@

.00

$ .00 
<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 input-lg" 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可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。

WebKit和响应式两端对齐导航 and responsive justified navs

Chrome和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代码均可实现你的需求。

<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=".navbar-ex1-collapse">
      <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 navbar-ex1-collapse">
    <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><a href="#">Separated link</a></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><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>

对不在<form>中的按钮，加上这个让它在导航条里竖直居中。

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

文本

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

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

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

<p class="navbar-text pull-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添加上了。

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

分页

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

默认分页

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

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

<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

Example heading New

Example heading New

Example heading New

Example heading New
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>

页面标题

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

Example page header Subtext for header

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

缩略图

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

默认案例

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

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

定制内容

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

300x200

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

300x200

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

300x200

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不支持znimation属性。

基本案例

默认的进度条。

60% Complete 
<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>

有意义的替换

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

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger) 
<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中不可用。

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger) 
<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的所有版本不可用。

45% Complete
<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，使它们堆叠。

35% Complete (success)
20% Complete (warning)
10% Complete (danger) 
<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等）。

默认媒体

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

64x64

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.
64x64

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.
64x64

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>

媒体列表

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

  • 64x64

    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.

    64x64

    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.
    64x64

    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.
    64x64

    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.
  • 64x64

    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

默认效果

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