bootstrap知识笔记

时间  2019-12-14
标签 bootstrap 知识 笔记 栏目 Bootstarp 繁體版
原文   原文链接

下拉菜单

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

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

Copy 
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

经过为下拉菜单的父元素设置 .dropup 类，可让菜单向上弹出（默认是向下弹出的）。ios

Copy 
<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

B默认状况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可让菜单右对齐。css3

可能须要额外的定位May require additional positioning

在正常的文档流中，经过 CSS 为下拉菜单进行定位。这就意味着下拉菜单可能会因为设置了 overflow 属性的父元素而被部分遮挡或超出视口（viewport）的显示范围。若是出现这种问题，请自行解决。git

不建议使用 .pull-right

从 v3.1.0 版本开始，咱们再也不建议对下拉菜单使用 .pull-right 类。如需将菜单右对齐，请使用 .dropdown-menu-right 类。导航条中如需添加右对齐的导航（nav）组件，请使用 .pull-right 的 mixin 版本，能够自动对齐菜单。如需左对齐，请使用 .dropdown-menu-left 类。github

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

在任何下拉菜单中都可经过添加标题来标明一组动做。web

Copy 
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

为下拉菜单添加一条分割线，用于将多个连接分组。bootstrap

Copy 
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。api

Copy 
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

按钮组

经过按钮组容器把一组按钮放在同一行里。经过与按钮插件联合使用，能够设置为单选框或多选框的样式和行为。浏览器

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

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

确保设置正确的 role 属性并提供一个 label 标签

为了向使用辅助技术 - 如屏幕阅读器 - 的用户正确传达一正确的按钮分组，须要提供一个合适的 role 属性。对于按钮组合，应该是 role="group"，对于toolbar（工具栏）应该是 role="toolbar"。

一个例外是按钮组合只包含一个单一的控制元素或一个下拉菜单（好比实际状况，<button> 元素组成的两端对齐排列的按钮组 ）或下拉菜单。

此外，按钮组和工具栏应给定一个明确的label标签，尽管设置了正确的 role 属性，可是大多数辅助技术将不会正确的识读他们。在这里提供的实例中，咱们使用 aria-label，可是， aria-labelledby 也可使用。

基本实例

Wrap a series of buttons with .btn in .btn-group.

Copy 
<div class="btn-group" role="group" aria-label="...">
  <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"> 中就能够作成更复杂的组件。

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

尺寸

只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每一个按钮都赋予尺寸类了，若是包含了多个按钮组时也适用。




Copy 
<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>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

嵌套

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

Copy 
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      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>

垂直排列

让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。

Copy 
<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

两端对齐排列的按钮组

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

关于边框的处理

因为对两端对齐的按钮组使用了特定的 HTML 和 CSS （即 display: table-cell），两个按钮之间的边框叠加在了一块儿。在普通的按钮组中，margin-left: -1px 用于将边框重叠，而没有删除任何一个按钮的边框。然而，margin 属性不支持 display: table-cell。所以，根据你对 Bootstrap 的定制，你能够删除或从新为按钮的边框设置颜色。

IE8 和边框

Internet Explorer 8 不支持在两端对齐的按钮组中绘制边框，不管是 <a> 或 <button> 元素。为了照顾 IE8，把每一个按钮放入另外一个 .btn-group 中便可。

参见 #12476 获取详细信息。

关于 <a> 元素

只须将一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中便可。

Left Middle Right

Left Middle
Dropdown
Copy 
<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Links acting as buttons

If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

关于 <button> 元素

为了将 <button> 元素用于两端对齐的按钮组中，必须将每一个按钮包裹进一个按钮组中you must wrap each button in a button group。大部分的浏览器不能将咱们的 CSS 应用到对齐的 <button> 元素上，可是，因为咱们支持按钮式下拉菜单，咱们能够解决这个问题。

Copy 
<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

按钮式下拉菜单

把任意一个按钮放入 .btn-group 中，而后加入适当的菜单标签，就可让按钮做为菜单的触发器了。

插件依赖

按钮式下拉菜单依赖下拉菜单插件 ，所以须要将此插件包含在你所使用的 Bootstrap 版本中。

单按钮下拉菜单

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

Copy 
<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    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 role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

分裂式按钮下拉菜单

类似地，分裂式按钮下拉菜单也须要一样的改变一些标记，但只是多一个分开的按钮。

Copy 
<!-- 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" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</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 role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

尺寸

按钮式下拉菜单适用全部尺寸的按钮。

Copy 
<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    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" aria-haspopup="true" aria-expanded="false">
    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" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

向上弹出式菜单

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

Copy 
<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" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

输入框组

经过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，能够实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，能够给 .form-control 的前面或后面添加额外的元素。

只支持文本输入框 <input>

这里请避免使用 <select> 元素，由于 WebKit 浏览器不能彻底绘制它的样式。

避免使用 <textarea> 元素，因为它们的 rows 属性在某些状况下不被支持。

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

为 .input-group 中所包含的元素应用工具提示（tooltip）或popover（弹出框）时，必须设置 container: 'body' 参数，为的是避免意外的反作用（例如，工具提示或弹出框被激活后，可能会让当前元素变得更宽或/和变得失去其圆角）。

不要和其余组件混用

不要将表单组或栅格列（column）类直接和输入框组混合使用。而是将输入框组嵌套到表单组或栅格相关元素的内部。

Always add labels

Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.

The exact technique to be used (visible <label> elements, <label> elements hidden using the .sr-only class, or use of the aria-label, aria-labelledby, aria-describedby, title or placeholder attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.

基本实例

在输入框的任意一侧添加额外元素或按钮。你还能够在输入框的两侧同时添加额外元素。

咱们不支持在输入框的单独一侧添加多个额外元素（.input-group-addon 或 .input-group-btn）。

咱们不支持在单个输入框组中添加多个表单控件。

@

@example.com

$ .00

https://example.com/users/
Copy 
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

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

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

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

尺寸

为 .input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。不须要为输入框组中的每一个元素重复地添加控制尺寸的类。

@

@

@
Copy 
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

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

做为额外元素的多选框和单选框

能够将多选框或单选框做为额外元素添加到输入框组中。

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

做为额外元素的按钮

为输入框组添加按钮须要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn 来包裹按钮元素。因为不一样浏览器的默认样式没法被统一的从新赋值，因此才须要这样作。

Copy 
<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" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

做为额外元素的按钮式下拉菜单

Copy 
<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" aria-haspopup="true" aria-expanded="false">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 role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

做为额外元素的分裂式按钮下拉菜单

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

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

Multiple buttons

While you can only have one add-on per side, you can have multiple buttons inside a single .input-group-btn.

 
Copy 
<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

导航

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类能够改变样式。

在标签页上使用导航须要依赖 JavaScript 标签页插件

因为标签页须要控制内容区的展现，所以，你必须使用 标签页组件的 JavaScript 插件。另外还要添加 role 和 ARIA 属性 – 详细信息请参考该插件的 实例。

确保导航组件的可访问性

若是你在使用导航组件实现导航条功能，务必在 <ul> 的最外侧的逻辑父元素上添加 role="navigation" 属性，或者用一个 <nav> 元素包裹整个导航组件。不要将 role 属性添加到 <ul> 上，由于这样能够被辅助设备（残疾人用的）上被识别为一个真正的列表。

注意 .nav-tabs 类依赖 .nav 基类。

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

HTML 标记相同，但使用 .nav-pills 类：

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

胶囊是标签页也是能够垂直方向堆叠排列的。只需添加 .nav-stacked 类。

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

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

两端对齐的导航条导航连接已经被弃用了。

Safari 和响应式两端对齐导航

从 v9.1.2 版本开始，Safari 有一个bug：对于两端对齐的导航，水平改变浏览器大小将引发绘制错误。此bug能够在两端对齐的导航实例中获得重现。


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

对任何导航组件（标签页、胶囊式标签页），均可以添加 .disabled 类，从而实现连接为灰色且没有鼠标悬停效果。

连接功能不受到影响

这个类只改变 <a> 的外观，不改变功能。能够本身写 JavaScript 禁用这里的连接。

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

用一点点额外 HTML 代码并加入下拉菜单插件的 JavaScript 插件便可。

带下拉菜单的标签页

Copy 
<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

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

Copy 
<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

导航条

导航条是在您的应用或网站中做为导航页头的响应式基础组件。它们在移动设备上能够折叠（而且可开可关），且在视口（viewport）宽度增长时逐渐变为水平展开模式。

两端对齐的导航条导航连接已经被弃用了。

导航条内所包含元素溢出

因为 Bootstrap 并不知道你在导航条内放置的元素须要占据多宽的空间，你可能会遇到导航条中的内容折行的状况（也就是导航条占据两行）。解决办法以下：

  1. 减小导航条内全部元素所占据的宽度。
  2. 在某些尺寸的屏幕上（利用 响应式工具类）隐藏导航条内的一些元素。
  3. 修改导航条在水平排列和折叠排列互相转化时，触发这个转化的最小屏幕宽度值。能够经过修改 @grid-float-breakpoint 变量实现，或者本身重写相关的媒体查询代码，覆盖 Bootstrap 的默认值。

依赖 JavaScript 插件

若是 JavaScript 被禁用，而且视口（viewport）足够窄，导致导航条折叠起来，导航条将不能被打开，.navbar-collapse 内所包含的内容也将不可见。

响应式导航条依赖 collapse 插件，定制 Bootstrap 的话时候必将其包含。

修改视口的阈值，从而影响导航条的排列模式

当浏览器视口（viewport）的宽度小于 @grid-float-breakpoint 值时，导航条内部的元素变为折叠排列，也就是变现为移动设备展示模式；当浏览器视口（viewport）的宽度大于 @grid-float-breakpoint 值时，导航条内部的元素变为水平排列，也就是变现为非移动设备展示模式。经过调整源码中的这个值，就能够控制导航条什么时候堆叠排列，什么时候水平排列。默认值是 768px （小屏幕 -- 或者说是平板 --的最小值，或者说是平板）。

导航条的可访问性

务必使用 <nav> 元素，或者，若是使用的是通用的 <div> 元素的话，务必为导航条设置 role="navigation" 属性，这样可以让使用辅助设备的用户明确知道这是一个导航区域。

Brand
Copy 
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

将导航条内放置品牌标志的地方替换为 <img> 元素便可展现本身的品牌图标。因为 .navbar-brand 已经被设置了内补（padding）和高度（height），你须要根据本身的状况添加一些 CSS 代码从而覆盖默认设置。

Brand
Copy 
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

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

注意，.navbar-form 和 .form-inline 的大部分代码都同样，内部实现使用了 mixin。 某些表单组件，例如输入框组，可能须要设置一个固定宽度，从而在导航条内有合适的展示。

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

移动设备上的注意事项

在移动设备上，对于在 fixed 定位的元素内使用表单控件的状况有一些注意事项。请参考咱们提供的浏览器支持状况相关的文档 。

为输入框添加 label 标签

若是你没有为输入框添加 label 标签，屏幕阅读器将会遇到问题。对于导航条内的表单，能够经过添加 .sr-only 类隐藏 label 标签。

对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可让它在导航条里垂直居中。有一些对于为辅助设备提供可识别标签的方法，例如， aria-label、aria-labelledby 或者 title 属性。若是这些方法都没有，屏幕阅读器将使用 placeholder 属性（若是这个属性存在的话），可是请注意，使用 placeholder 代替其余识别标签的方式是不推荐的。

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

基于情境的用法

就像标准的 按钮类 同样，.navbar-btn 能够被用在 <a> 和 <input> 元素上。然而，在 .navbar-nav 内，.navbar-btn 和标准的按钮类都不该该被用在 <a> 元素上。

文本

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

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

或许你但愿在标准的导航组件以外添加标准连接，那么，使用 .navbar-link 类可让连接有正确的默认颜色和反色设置。

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

经过添加 .navbar-left 和 .navbar-right 工具类让导航连接、表单、按钮或文本对齐。两个类都会经过 CSS 设置特定方向的浮动样式。例如，要对齐导航连接，就要把它们放在个分开的、应用了工具类的 <ul> 标签里。

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

向右侧对齐多个组件

导航条目前不支持多个 .navbar-right 类。为了让内容之间有合适的空隙，咱们为最后一个 .navbar-right 元素使用负边距（margin）。若是有多个元素使用这个类，它们的边距（margin）将不能按照你的预期正常展示。

咱们将在 v4 版本中重写这个组件时从新审视这个功能。

添加 .navbar-fixed-top 类可让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。

Copy 
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

须要为 body 元素设置内补（padding）

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

Copy 
body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

添加 .navbar-fixed-bottom 类可让导航条固定在底部，而且还能够包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。

Copy 
<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

须要为 body 元素设置内补（padding）

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

Copy 
body { padding-bottom: 70px; }

Make sure to include this after the core Bootstrap CSS.

经过添加 .navbar-static-top 类便可建立一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还能够包含一个 .container 或 .container-fluid 容器，用于将导航条居中对齐并在两侧添加内补（padding）。

与 .navbar-fixed-* 类不一样的是，你不用给 body 添加任何内补（padding）。

Brand
Copy 
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

经过添加 .navbar-inverse 类能够改变导航条的外观。

Brand
Copy 
<nav class="navbar navbar-inverse">
  ...
</nav>

路径导航

在一个带有层次的导航结构中标明当前页面的位置。

各路径间的分隔符已经自动经过 CSS 的 :before 和 content 属性添加了。

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

分页

为您的网站或应用提供带有展现页码的分页组件，或者可使用简单的翻页组件。

默认分页

受 Rdio 的启发，咱们提供了这个简单的分页组件，用在应用或搜索结果中超级棒。组件中的每一个部分都很大，优势是容易点击、易缩放、点击区域大。

Copy 
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Labelling the pagination component

The pagination component should be wrapped in a <nav> element to identify it as a navigation section to screen readers and other assistive technologies. In addition, as a page is likely to have more than one such navigation section already (such as the primary navigation in the header, or a sidebar navigation), it is advisable to provide a descriptive aria-label for the <nav> which reflects its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".

禁用和激活状态

连接在不一样状况下能够定制。你能够给不能点击的连接添加 .disabled 类、给当前页添加 .active 类。

Copy 
<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

咱们建议将 active 或 disabled 状态的连接（即 <a> 标签）替换为 <span> 标签，或者在向前/向后的箭头处省略<a> 标签，这样就可让其保持须要的样式而不能被点击。

Copy 
<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

尺寸

想要更小或更大的分页？.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。

Copy 
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

翻页

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

默认实例

在默认的翻页中，连接居中对齐。

Copy 
<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

对齐连接

你还能够把连接向两端对齐：

Copy 
<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

可选的禁用状态

.disabled 类也可用于翻页中的连接。

Copy 
<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

标签

实例

Example heading New

Example heading New

Example heading New

Example heading New

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

可用的变体

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

Default Primary Success Info Warning Danger
Copy 
<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>

若是标签数量不少怎么办？

若是你有大量的设置为 inline 属性的标签所有放在一个较窄的容器元素内，在页面上展现这些标签就会出现问题，每一个标签就会有本身的一个 inline-block 元素（就像图标同样）。解决的办法是为每一个标签都设置为 display: inline-block; 属性。关于这个问题以及实例，请参考 #13219 。

徽章

给连接、导航等元素嵌套 <span class="badge"> 元素，能够很醒目的展现新的或未读的信息条目。

Inbox 42

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

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

Self collapsing

若是没有新的或未读的信息条目，也就是说不包含任何内容，徽章组件可以自动隐藏（经过CSS的 :empty 选择符实现) 。

跨浏览器兼容性

徽章组件在 Internet Explorer 8 浏览器中不会自动消失，由于 IE8 不支持 :empty 选择符。

适配导航元素的激活状态

Bootstrap 提供了内置的样式，让胶囊式导航内处于激活状态的元素所包含的徽章展现相匹配的样式。

Copy 
<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

巨幕

这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展现网站上的关键内容。

Hello, world!

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

Learn more

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

若是须要让巨幕组件的宽度与浏览器宽度一致而且没有圆角，请把此组件放在全部 .container 元素的外面，并在组件内部添加一个 .container 元素。

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

页头

页头组件可以为 h1 标签增长适当的空间，而且与页面的其余部分造成必定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其余组件（须要增长一些额外的样式）。

Example page header Subtext for header

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

缩略图

经过缩略图组件扩展 Bootstrap 的 栅格系统，能够很容易地展现栅格样式的图像、视频、文本等内容。

若是你想实现一个相似 Pinterest 的页面效果（不一样高度和/宽度的缩略图顺序排列）的话，你须要使用一个第三方插件，好比 Masonry、Isotope 或 Salvattore。

默认样式的实例

Boostrap 缩略图的默认设计仅需最少的标签就能展现带连接的图片。

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

自定义内容

添加一点点额外的标签，就能够把任何类型的 HTML 内容，例如标题、段落或按钮，加入缩略图组件内。

100%x200

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

100%x200

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

100%x200

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

Copy 
<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." 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>

警告框

警告框组件经过提供一些灵活的预约义消息，为常见的用户动做提供反馈消息。

实例

将任意文本和一个可选的关闭按钮组合在一块儿就能组成一个警告框，.alert 类是必需要设置的，另外咱们还提供了有特殊意义的4个类（例如，.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! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Copy 
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

可关闭的警告框

为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮。

依赖警告框 JavaScript 插件

若是须要为警告框组件提供关闭功能，请使用 jQuery 警告框插件。

Warning! Better check yourself, you're not looking too good.
Copy 
<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

确保在全部设备上的正确行为

务必给 <button> 元素添加 data-dismiss="alert" 属性。

用 .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! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Copy 
<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

进度条

经过这些简单、灵活的进度条，为当前工做流程或动做提供实时反馈。

跨浏览器兼容性

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

Content Security Policy (CSP) compatibility

If your website has a Content Security Policy (CSP) which doesn't allow style-src 'unsafe-inline', then you won't be able to use inline style attributes to set progress bar widths as shown in our examples below. Alternative methods for setting the widths that are compatible with strict CSPs include using a little custom JavaScript (that sets element.style.width) or using custom CSS classes.

基本实例

默认样式的进度条

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

带有提示标签的进度条

将设置了 .sr-only 类的 <span> 标签从进度条组件中移除 类，从而让当前进度显示出来。

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

在展现很低的百分比时，若是须要让文本提示可以清晰可见，能够为进度条设置 min-width 属性。

0%
2%
Copy 
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

根据情境变化效果

进度条组件使用与按钮和警告框相同的类，根据不一样情境展示相应的效果。

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
Copy 
<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 (danger)</span>
  </div>
</div>

条纹效果

经过渐变能够为进度条建立条纹效果，IE9 及更低版本不支持。

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
Copy 
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" 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 progress-bar-striped" 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 progress-bar-striped" 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 progress-bar-striped" 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-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。

45% Complete
Copy 
<div class="progress">
  <div class="progress-bar progress-bar-striped active" 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)
Copy 
<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 progress-bar-striped" 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>

媒体对象

这是一个抽象的样式，用以构建不一样类型的组件，这些组件都具备在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。

默认样式

默认样式的媒体对象组件容许在一个内容块的左边或右边展现一个多媒体内容（图像、视频、音频）。

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

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.

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
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
Copy 
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

.pull-left 和 .pull-right 这两个类之前也曾经被用在了媒体组件上，可是，从 v3.3.0 版本开始，他们就再也不被建议使用了。.media-left 和 .media-right 替代了他们，不一样之处是，在 html 结构中， .media-right 应当放在 .media-body 的后面。

对齐

图片或其余媒体类型能够顶部、中部或底部对齐。默认是顶部对齐。

64x64

Top aligned media

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.

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.

64x64

Middle aligned media

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.

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.

64x64

Bottom aligned media

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.

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.

Copy 
<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</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.
Copy 
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

列表组

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

基本实例

最简单的列表组仅仅是一个带有多个列表条目的无序列表，另外还须要设置适当的类。咱们提供了一些预约义的样式，你能够根据自身的需求经过 CSS 本身定制。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
Copy 
<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
Copy 
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

连接

用 <a> 标签代替 <li> 标签能够组成一个所有是连接的列表组（还要注意的是，咱们须要将 <ul> 标签替换为 <div> 标签）。不必给列表组中的每一个元素都加一个父元素。

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros
Copy 
<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>

按钮

列表组中的元素也能够直接就是按钮（也同时意味着父元素必须是 <div> 而不能用 <ul> 了），而且无需为每一个按钮单独包裹一个父元素。注意不要使用标准的 .btn 类！

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

被禁用的条目

为 .list-group-item 添加 .disabled 类可让单个条目显示为灰色，表现出被禁用的效果。

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros
Copy 
<div class="list-group">
  <a href="#" class="list-group-item disabled">
    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>

情境类

为列表中的条目添加情境类，默认样式或连接列表均可以。还能够为列表中的条目设置 .active 状态。

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros
Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros
Copy 
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">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.

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

面版

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

基本实例

默认的 .panel 组件所作的只是设置基本的边框（border）和内补（padding）来包含内容。

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

带标题的面版

经过 .panel-heading 能够很简单地为面板加入一个标题容器。你也能够经过添加设置了 .panel-title 类的 <h1>-<h6> 标签，添加一个预约义样式的标题。不过，<h1>-<h6> 标签的字体大小将被 .panel-heading 的样式所覆盖。

为了给连接设置合适的颜色，务必将连接放到带有 .panel-title 类的标题标签内。

Panel heading without title
Panel content

Panel title

Panel content
Copy 
<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
Copy 
<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
Copy 
<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
Copy 
<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
Copy 
<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
Copy 
<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>

具备响应式特性的嵌入内容

根据被嵌入内容的外部容器的宽度，自动建立一个固定的比例，从而让浏览器自动肯定视频或 slideshow 的尺寸，可以在各类设备上缩放。

这些规则被直接应用在 <iframe>、<embed>、<video> 和 <object> 元素上。若是你但愿让最终样式与其余属性相匹配，还能够明确地使用一个派生出来的 .embed-responsive-item 类。

超级提示： 不须要为 <iframe> 元素设置 frameborder="0" 属性，由于咱们已经替你这样作了！

Copy 
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Well

默认效果

把 Well 用在元素上，就能有嵌入（inset）的简单效果。

Look, I'm in a well!
Copy 
<div class="well">...</div>

可选类/样式

经过这两种可选修饰类，能够控制此组件的内补（padding）和圆角的设置。

Look, I'm in a large well!
Copy 
<div class="well well-lg">...</div>
Look, I'm in a small well!
Copy 
<div class="well well-sm">...</div>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程