按钮组

按钮组可以将多个按钮做为一个复合组件来用。 由一系列 <a> 或 <button> 元素构建。

最佳实践

我们建议使用按钮组和工具条时应遵循下列准则：

• 在一个按钮组中只使用一种元素， <a> 或 <button> 。
• 不要在同一个按钮组中使用不同按钮颜色。
• 使用图标补充内容或直接替代文本时，应包含说明性的alt或title文字。

补充 下面会单独强调带下拉框的按钮组，其包含一个下拉/上弹三角以表示可点击触发下拉/上弹。

默认例子

用 button 标签按钮构建的标准按钮组：

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

工具条的例子

集合几组 <div class="btn-group"> ，再用 <div class="btn-toolbar"> 包装就可以合成工具条组件。

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

复选和单选形式

按钮组也可实现单选和复选功能。前者只有一个按钮被按下，后者可以按下多个按钮。详见Javascript插件 。

获取相关的javascript »

按钮组中的下拉项

强调! 为了渲染正常，带下拉项的按钮应该被 .btn-group 嵌套，然后再放入 .btn-toolbar 内。

简介和例子

下拉菜单中的按钮嵌套于 .btn-group 内。

标记例子

和按钮组类似，下拉按钮仍使用按钮标记，并用到少量其他标记以增强显示效果，同时支持Bootstrap的下拉jquery插件。

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

适应所有按钮的尺寸

下拉按钮适应任何尺寸，可以是 .btn-large, .btn-small, 或 .btn-mini 。

需要Javascript

下拉按钮需要 Bootstrap下拉插件 实现功能。

在某些情况下（诸如使用手机浏览），下拉菜单会超出可视区域。这时要么手动对齐，要么使用定制的javascript。

简介和例子

在按钮组的样式和标记的基础上，我们可以很方便的创建带间隔的下拉按钮。间隔左侧是按钮，右侧是下拉链接。

尺寸

使用 .btn-mini, .btn-small, 和 .btn-large 指定大小。

<div class="btn-group">
  ...
  <ul class="dropdown-menu pull-right">
    <!-- dropdown menu links -->
  </ul>
</div>

标记的例子

我们对普通的下拉按钮进行扩展，将下拉区域独立出来，可对其单独点击收放菜单。

<div class="btn-group">
  <button class="btn">Action</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

上弹菜单

下拉菜单也可以变成上弹菜单，只要在 .dropdown-menu 最近的父标签上应用 .dropup 即可。它会改变 .caret 的箭头方向，并将菜单底部与按钮顶部对齐。

<div class="btn-group dropup">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

强大的基类

所有的导航组件，诸如标签页/胶囊链接/列表，使用同样的标记和样式 - .nav 类。

何时适用

标签页和胶囊链接非常适合内容片段的切换，或是相关内容的页面导航。

组件对齐

使用 .pull-left 或 .pull-right 对齐导航链接，两者都依赖CSS float实现左/右对齐。

基本的标签页

对存放链接的 <ul> 应用 .nav-tabs ：

• 首页
• 介绍
• 消息

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">首页</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

基本的胶囊链接

HTML不变，使用 .nav-pills ：

• 首页
• 介绍
• 消息

<ul class="nav nav-pills">
  <li class="active">
    <a href="#">首页</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

如何叠放

默认情况下标签和胶囊链接是水平排放的，使用 .nav-stacked 就可以将其变成竖直叠放。

叠放式标签

• 首页
• 介绍
• 消息

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

叠放式胶囊链接

• 首页
• 介绍
• 消息

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

易用的富内容菜单

在Bootstrap中，创建标签和胶囊链接中的下拉菜单非常方便，仅需极少的HTML和一个轻巧的jQuery插件。

详见 初始化下拉项 。

带下拉项的标签页

• 首页
• 帮助
• 下拉
  • 动作
  • 其他动作
  • 其他
  • 被间隔的链接
• 上弹
  • 动作
  • 其他动作
  • 其他
  • 被间隔的链接

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        下拉
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
    </ul>
  </li>
</ul>

带下拉的胶囊链接

• 首页
• 帮助
• 下拉
  • 动作
  • 其他动作
  • 其他
  • 被间隔的链接
• 上弹
  • 动作
  • 其他动作
  • 其他
  • 被间隔的链接

<ul class="nav nav-pills">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        下拉
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
    </ul>
  </li>
</ul>

应用风格（application-style）的导航

导航列表可以便捷地创建带有标头(可选)的导航链接组，非常适合用做侧边栏（与OS X中的Finder类似）。

从结构上看，其与标签和胶囊链接无异，都使用同样的导航样式，所以用法和定制都一样简洁。

使用图标

在导航列表中使用图标很容易。只须添加带有图标类的 <i> 标签即可。

水平间隔

应用 .divider 的空列表项会显示为一个水平间隔，如下：

<ul class="nav nav-list">
  ...
  <li class="divider"></li>
  ...
</ul>

导航列表例子

对存放一组链接的列表使用 class="nav nav-list" :

<ul class="nav nav-list">
  <li class="nav-header">
    列表头
  </li>
  <li class="active">
    <a href="#">首页</a>
  </li>
  <li>
    <a href="#">类库</a>
  </li>
  ...
</ul>

使用图标的例子

同样的例子，使用 <i> 标签显示图标。

<ul class="nav nav-list">
  ...
  <li>
    <a href="#">
      <i class="icon-book"></i>
      类库
    </a>
  </li>
  ...
</ul>

包含哪些东西

我们使用一个简单的插件切换标签页对应的内容，从而让标签页变得生动。 Bootstrap 提供了四种样式的标签页：置顶(默认)，居右，置底，居左。

应用时只需修改很少的标记。

标签页切换的例子

用带 .tabbable 的div将 .nav-tabs 嵌套起来：

定制jQuery插件

所有标签页都依赖我们提供的轻量级jQuery插件。详见javascript中的关于标签页部分的文档。

获取javascript →

标签置底

反转HTML的顺序，用 .tabs-below 将标签居底。

<div class="tabbable tabs-below">
  <div class="tab-content">
    ...
  </div>
  <ul class="nav nav-tabs">
    ...
  </ul>
</div>

标签居左

使用 .tabs-left 将标签居左。

<div class="tabbable tabs-left">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

标签居右

使用 .tabs-right 将标签居右。

<div class="tabbable tabs-right">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

导航条基本框架

需要少量的div来构建静态static或是固定fixed的导航条。

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      ...
    </div>
  </div>
</div>

固定导航条

只要在最外层的div上应用 .navbar ，就可以将导航条固定到顶部或是底部。

<div class="navbar navbar-fixed-top">
  ...
</div>

<div class="navbar navbar-fixed-bottom">
  ...
</div>

附着导航条时，一定要留出一块空白区域，在 <body> 的顶端添加40px或是更多的padding。 要保证将这段样式加在Bootstrap核心CSS之后，在响应式CSS（可选的）之前。

品牌名称

用于展示品牌或项目名称的一个简单链接，只需要一个锚标签。

<a class="brand" href="#">
  品牌名称
</a>

导航条中的表单

导航条内的表单，用 .navbar-form 进行样式化，由 .pull-left 或 .pull-right 决定居左还是居中。

<form class="navbar-form pull-left">
  <input type="text" class="span2">
</form>

对导航栏应用 .navbar-search 的同时对其中的输入框使用 .search-query ，就会得到另一种搜索样式，从而增强搜索表单的可定制性。

<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Search">
</form>

响应性的补充（可选）

如果我们想根据置顶导航条中的不同内容实现响应性设计，就可以将导航内容嵌套在一个 .nav-collapse.collapse div容器中，并对按钮都应用 .btn-navbar 类。

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" href="#">Project name</a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>

    </div>
  </div>
</div>

导航链接

导航项与无序列表非常相似。

<ul class="nav">
  <li class="active">
    <a href="#">首页</a>
  </li>
  <li><a href="#">链接</a></li>
  <li><a href="#">链接</a></li>
</ul>

将应用 .divider-vertical 的空列表项插入到两个链接项之间，就会得到分隔条：

<ul class="nav">
  ...
  <li class="divider-vertical"></li>
  ...
</ul>

组件对齐

我们使用 .pull-left 或 .pull-right 对齐链接，搜索表单或是文本。这两个类都使用CSS浮动进行对齐。

添加下拉菜单

在导航中很容易添加上下拉菜单，要用到 下拉javascript插件 。

<ul class="nav">
  <li class="dropdown">
    <a href="#"
          class="dropdown-toggle"
          data-toggle="dropdown">
          帐户
          <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

下载相关javascript →

导航条中的文本

在导航条中用 <p> 标签包装文本以设置行高和颜色。

为什么使用面包屑导航条

面包屑导航栏用于展示用户当前在网站/应用中的位置，但并不是首要导航。适宜布局清爽，简洁明了的场合。

例子

一个简单的例子，可以用在多个页面中。

• 首页

• 首页 /
• 类库

• 首页 /
• 类库 /
• 数据

标记

使用无序号的ul列表。

<ul class="breadcrumb">
  <li>
    <a href="#">首页</a> <span class="divider">/</span>
  </li>
  <li>
    <a href="#">类库</a> <span class="divider">/</span>
  </li>
  <li class="active">数据</li>
</ul>

何时适用

受Rdio启发，我们设计了极为简致的页码样式，适用于应用和搜索结果。页码区域尺寸大，易于吸引注意力，易于扩展，易于点击。

页码链接的状态

Bootstrap使用一组样式类定制页码的状态，.disabled 用于不可点击链接，而 .active 用于表示当前页链接。

灵活的对齐方式

使用 .pagination-centered 和 .pagination-right 可以改变页码的对齐方式，前者居中，后者居右。

例子

默认的页码组件非常灵活，有多种展示形式。

标记

分页标记是一个嵌套在 <div> 中的 <ul> 。

<div class="pagination">
  <ul>
    <li><a href="#">前一页</a></li>
    <li class="active">
      <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="#">后一页</a></li>
  </ul>
</div>

前后页组件介绍

前后页组件是一组简便的分页实现，标记更少，样式更轻，适用于轻量级网站，如博客或网志。

禁用状态

前后页链接仍使用 .disabled 设置无效状态。

默认的例子

默认情况下，前后页组件居中。

• 前一页
• 后一页

<ul class="pager">
  <li>
    <a href="#">前一页</a>
  </li>
  <li>
    <a href="#">后一页</a>
  </li>
</ul>

居于左右端的链接

另一种情况下，链接分别居于左右端：

• ← 过去的
• 更新的 →

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; 过去的</a>
  </li>
  <li class="next">
    <a href="#">更新的 &rarr;</a>
  </li>
</ul>

介绍

标号是用来显示标识或某某数量的简洁小组件。 比如邮件客户端(比如Mail.app)中的邮件数量或是手机应用中的通知数量。

可用的类

Bootstrap提供了一个轻巧又灵活的组件，用以在网站中着重展示内容，称之为"hero unit"/主角单元。 适用于市场类或强调内容的网站。

标记

将内容嵌套入应用 .hero-unit　的 div 中，如下:

<div class="hero-unit">
  <h1>标题</h1>
  <p>标签行</p>
  <p>
    <a class="btn btn-primary btn-large">
      了解更多
    </a>
  </p>
</div>

相当于一个简单的 h1 外壳，它有适当的留白，以便在页面中分割内容片段。 还可以在 h1 内嵌入 small ，html元素或是其他组件。

<div class="page-header">
  <h1>页面标题例子</h1>
</div>

默认缩略项

默认情况下，Bootstrap的缩略项使用很少的标记来展示链接图象。

高可定制

使用少量其他标记就可以在缩略项中添加任何一种HTML内容，比如标题，段落，或按钮。

• 

  缩略项标签

  余华:文章怎么写很重要，怎么读也很重要。有时候将无耻的文章反过来读，也能读到真理的语句。比如陈光诚事件，官方媒体一律指责，可是陈光诚究竟做了什么，他们只字未提。今天《北京日报》发表《从陈光诚事件看美国政客的拙劣表演》的文章里说：“13亿中国人并没有那么好瞒哄”……这句话是真理。

  动作 动作

• 

  缩略项标签

  张思之：曾以为一国家只要有好的外交或者强大的国防就有面子，后来才明白其实人权才是一个国家最大的面子。···一个政权如果关起门来都不能维护自己本国普通公民的权利，它有什么资格在国际舞台上维护这个国家的权利，它的合法性就会遭到质疑。

  动作 动作

为什么使用缩略项

缩略项（1.4版之前使用 .media-grid ）适用于栅格化的图片和视频，图片搜索结果，零售产品，文件夹等等。缩略项可以是链接，也可以是静态内容。

简洁灵活的标记

缩略项标记既简单又灵活—只须用一个 ul 嵌套多个 li 元素。缩略项内容可以是任何一种HTML内容，只须少许标记。

使用栅格列确定大小

新版本中，缩略项组件使用栅格类—诸如 .span2 或 .span3 —确定缩略项的尺寸。

标记

正如之前所提到的，缩略项所需的标记是很少的。下面就是一个 带链接图象 的默认设置：

<ul class="thumbnails">
  <li class="span3">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/260x180" alt="">
    </a>
  </li>
  ...
</ul>

缩略项中的HTML内容仅须更改少许标记。将 <a> 变成 <div> 即可定制块状内容，如下：

<ul class="thumbnails">
  <li class="span3">
    <div class="thumbnail">
      <img src="http://placehold.it/260x180" alt="">
      <h5>缩略项标签</h5>
      <p>缩略项标题介绍</p>
    </div>
  </li>
  ...
</ul>

更多例子

尝试更多栅格类，混用不同的尺寸。

重写过的基类

Bootstrap 2 简化了基类，用 .alert 代替了 .alert-message 。 并对最低要求的标记也进行了精简—默认只使用 <div> ，而无须嵌套 <p> 。

统一后的通知消息

为了得到代码少而质量高的组件，我们统一了块状通知和普通通知的外观。原有的块状样式类被命名为 .alert-block ，其padding更大，通常容纳文本也更多。

与javascript配合良好

Bootstrap用一个很好的jQuery插件驱动通知消息，方便用户快速地关闭通知。

Get the plugin »

通知的例子

在div中嵌套信息，并放置一个关闭图标。

<div class="alert">
  <a class="close" data-dismiss="alert">×</a>
  <strong>警告！</strong> 不要拿法律当挡箭牌。
</div>

进度条有两个效果加强类： .alert-block 用于提供更大padding，适合容纳更多文本组件；而 .alert-heading 用以修饰标题。

<div class="alert alert-block">
  <a class="close" data-dismiss="alert">×</a>
  <h4 class="alert-heading">Warning!</h4>
  Best check yo self, you're not...
</div>

危险/错误

<div class="alert alert-error">
  ...
</div>

成功

<div class="alert alert-success">
  ...
</div>

信息

<div class="alert alert-info">
  ...
</div>

基本效果

默认的垂直渐变进度条。

<div class="progress">
  <div class="bar"
       style="width: 60%;"></div>
</div>

条纹效果

使用渐变创建条纹进度条（不支持IE）

<div class="progress progress-striped">
  <div class="bar"
       style="width: 20%;"></div>
</div>

动画效果

条纹进度条的动果效果（不支持IE）

<div class="progress progress-striped
     active">
  <div class="bar"
       style="width: 40%;"></div>
</div>

其他颜色

进度条使用和按钮/警告类相似的样式，提供一致的颜色风格。

条纹滚动条

与纯色相似，也可以使用多色的条纹进度条。

行为

进度条使用CSS3过渡效果，因此用javascript动态调整进度条宽度时，效果会非常平滑。

如果使用 .active ，那么 .progress-striped 导航栏就会呈现自左向右的条纹跑马灯动画效果。

浏览器支持

进度条使用CSS3渐变/过渡/动画以实现所有效果。IE7到IE9，以及某些老版本的Firefox还不能完全支持这些特性。

目前，Opera和IE还不支持动画效果。

消息墙

用来给某个元素添加包框效果。

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

关闭图标

象对话框和弹出框一样，用常见的叉叉图标关闭内容。

×

<a class="close">&times;</a>