例子

可切换的链接列表. 互动式的下拉菜单需要JavaScript下拉菜单插件.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">行为</a></li>
  <li><a tabindex="-1" href="#">其他行为</a></li>
  <li><a tabindex="-1" href="#">特别行为</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">分割链接</a></li>
</ul>

标记

以下是下拉菜单所需的HTML. 下拉菜单的触发和下拉菜单都需要包含在.dropdown里, 或者声明 position: relative; 其他元素. 然后, 只需创建菜单.

<div class="dropdown">
  <!-- Link or button to toggle dropdown -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">行为</a></li>
    <li><a tabindex="-1" href="#">其他行为</a></li>
    <li><a tabindex="-1" href="#">特别行为</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">分割链接</a></li>
  </ul>
</div>

选项

列表右对齐, 和包括一个多级的下拉菜单.

对齐

在 .dropdown-menu 添加 .pull-right , 让下拉列表右对齐.

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

下拉菜单的子列表

添加一些简单的标记, 让下拉菜单拥有一个二级菜单, 停选效果类似OS X. 在任意的 li 添加 .dropdown-submenu 就会自动获得一个额外的菜单.

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">更多选项</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

例子

两个基本选项, 带有两个更明确的变化.

单一按钮组

带有 .btn 的按钮, 都放在 .btn-group 里面.

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

垂直按钮组

让一组按钮垂直摆放

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

复选框和单选框形式

按钮也可以有单选框或者复选框这样的功能. 点击 这里 看看.

在按钮组的下拉菜单

注意! 为了渲染正确, 具有下拉菜单的按钮必须单独放在 .btn-toolbar 里, 并放进 .btn-group.

概述和例子

通过将其放在 .btn-group 并添加一些下拉菜单的标记, 让点击按钮生产一个下拉菜单.

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

兼容所有按钮大小

按钮式下拉菜单支持所有按钮大小: .btn-large, .btn-small, 或 .btn-mini.

加入JavaScript

按钮式下拉菜单的某些功能需要 Bootstrap下拉菜单插件.

在某些情况, 如下拉菜单在手机上将会伸展. 你需要手动进行修改或者使用JavaScript.

拆分式按钮下拉菜单

在按钮组的基础上, 我们很容易创建拆分式的按钮. 拆分式按钮左边设有一个标准形式按钮, 右边是一个可触发下拉菜单的链接.

<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">
    <!-- 下拉菜单 -->
  </ul>
</div>

尺寸

使用按钮尺寸属性调整大小 .btn-mini, .btn-small, 或 .btn-large.

<div class="btn-group">
  <button class="btn btn-mini">Action</button>
  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- 下拉菜单 -->
  </ul>
</div>

菜单向上显示

在.dropdown-menu父级添加一个属性, 下拉菜单就可以由下到上显示. .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属性共享相同的标记和样式.

基本标签

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

不可用状态

在任何的导航组件(标签, 圆角或列表)添加 .disabled, 链接将变成灰色, 且没有停悬效果. 但是链接仍然保持可点击, 除非删除了href属性. 或者你也可用JavaScript来防止点击.

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

组件对齐方式

使用 .pull-left or .pull-right 让导航链接对齐. 它们都是添加了CSS float来指定方向.

堆式排列

标签和圆角在默认的情况下是水平展示, 只需添加一个属性, .nav-stacked, 就可让它们垂直展示.

堆式标签

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

堆式圆角

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

下拉菜单

添加下拉菜单需要添加一些额外的HTML代码和下拉菜单的JavaScript插件.

带有下拉列表的标签

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Dropdown
        <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="#">
        Dropdown
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
    </ul>
  </li>
</ul>

导航列表

一个简单容易的方法构建带有可选头部的导航. 它们很适合使用在侧边栏, 就像是OS X的Finder.

例子

使用列表链接并添加 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>

注意 对于嵌入在导航列表的任何 <ul> 都需要添加 class="nav nav-list" .

水平分隔符

添加一个水平分隔符, 只需在空列表项添加.divider, 像这样:

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

可切换标签导航

用一个简单的插件, 可让标签之间进行内容切换. Bootstrap对其整合了4种风格: 上(默认), 右, 下, 左.

例子

让标签可切换, 需在.tab-content里创建.tab-pane, 并对每个标签设置一个唯一的ID.

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>我是标签 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Hi, 我是标签 2.</p>
    </div>
  </div>
</div>

淡入

要让内容淡入, 需在每个.tab-pane添加.fade .

需要jQuery插件

所有可切换标签都采用了轻量级的jQuery插件. 在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>

基本导航条

导航条是静态的(未固定在顶部), 并包括项目名词和一些导航该有的功能. 将导航条放在任意一个 .container, 其宽度是与网站内容相同.

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">标题</a>
    <ul class="nav">
      <li class="active"><a href="#">首页</a></li>
      <li><a href="#">链接</a></li>
      <li><a href="#">链接</a></li>
    </ul>
  </div>
</div>

导航条组件

仅标题

一个简单的链接, 只显示你的名牌或项目名称.

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

导航链接

可以简单的往导航添加列表.

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

添加分隔符同样的简单, 只需在每个空白的列表项添加一个属性即可. 在每个链接间添加, 如下:

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

表单

如要一个表单以正确的位置和样式显示在导航内, 需要添加如下所示的属性. 对于默认的表单, 需要包含一个 .navbar-form 以及一个 .pull-left 或 .pull-right 来说明对齐的位置.

<form class="navbar-form pull-left">
  <input type="text" class="span2">
  <button type="submit" class="btn">提交</button>
</form>

搜索表单

在导航条内, 对 form 添加 .navbar-search 并在输入框添加专门的一个属性 .search-query, 就可获得一个搜索表单.

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

对齐

使用 .pull-left 或 .pull-right 对齐导航链接, 搜索表单或文本. 它们都是添加了CSS float来指定方向.

使用下拉菜单

在导航添加下拉菜单只需要加入一点点标记和下拉菜单JavaScript插件.

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

查看更多JavaScript下拉菜单文档.

文本

在 .navbar-text 下使用文本元素, 对于需要突出或设置颜色, 通常使用 <p> 标签.

可选的显示方法

在最外层div.navbar添加一个额外的属性, 就可把导航条固定在顶部或者底部.

固定在顶部

添加 .navbar-fixed-top 以及记得在<body>的顶部添加一个至少40px的padding. 确保是添加在Bootstrap核心CSS代码之后, 和响应式CSS代码(可选)之前.

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

固定在底部

添加 .navbar-fixed-bottom .

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

顶部静态导航条

通过添加 .navbar-static-top 创建一个全宽(full-width)的导航条. 这不像.navbar-fixed-top, 因为你不需要在body改动任何padding.

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

响应式导航条

要实现一个响应式导航条, 需要把导航条包含在div.nav-collapse.collapse里面, 并添加一个触发展开导航(适用在屏幕较窄的设备)的按钮.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 collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>

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

逆变化

需要变化导航条外观(变成黑色), 可添加.navbar-inverse.

<div class="navbar navbar-inverse">
  ...
</div>

例子

查看某个页面, 可以需要跳转多个页面, 可使用路径式导航方便使用者返回.

<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, 非常适合应用程序和显示搜索结果. 简洁大块的分页不容易看错, 容易扩展, 并有更大的点击区域不易点错.

<div class="pagination">
  <ul>
    <li><a href="#">Prev</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="#">Next</a></li>
  </ul>
</div>

选项

不可用和当前状态

在不同情况下, 可自定义链接. 使用 .disabled 让链接不可用, 使用 .active 表示当前页面.

<div class="pagination">
  <ul>
    <li class="disabled"><a href="#">Prev</a></li>
    <li class="active"><a href="#">1</a></li>
    ...
  </ul>
</div>

也可以使用span标签替换a标签, 这样可以删除点击功能, 同时又保留了样式.

<div class="pagination">
  <ul>
    <li class="disabled"><span>Prev</span></li>
    <li class="active"><span>1</span></li>
    ...
  </ul>
</div>

大小

想要更大或更小的分页? 添加.pagination-large, .pagination-small, 或 .pagination-mini 就可改变分页大小.

<div class="pagination pagination-large">
  <ul>
    ...
  </ul>
</div>
<div class="pagination">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-small">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-mini">
  <ul>
    ...
  </ul>
</div>

对齐

添加其中一个属性就可改变分页对齐位置: .pagination-centered 和 .pagination-right.

<div class="pagination pagination-centered">
  ...
</div>

<div class="pagination pagination-right">
  ...
</div>

翻页

用更少的标记和样式, 创建用于简单快速分页. 非常适用于简单的网站, 像博客或者杂志网站.

默认

默认情况下, 翻页链接居中.

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

不可用状态

同样也是使用 .disabled 让其显示不可用状态.

<ul class="pager">
  <li class="previous disabled">
    <a href="#">&larr; 较旧的</a>
  </li>
  ...
</ul>

标签

标记

Hero单元

一个轻量级、灵活的组件, 能在你网站上展示重点内容. 很适合在营销类或突出内容类网站使用.

<div class="hero-unit">
  <h1>Heading</h1>
  <p>Tagline</p>
  <p>
    <a class="btn btn-primary btn-large">
      Learn more
    </a>
  </p>
</div>

页面标题

在页面上给 h1 适当的间隔和显示一段内容. 它可以使用 h1 里的默认 small 元素, 以及其他提供额外样式的元素.

<div class="page-header">
  <h1>简单就是美 <small>iTunes 里你喜爱的一切，如今变得更出色、更简单。</small></h1>
</div>

默认缩略图

默认情况下, 实现Bootstrap下的缩略图图像, 只需少量标记.

自定义

只要添加一点额外的标记, 就可以在缩略图里添加任何类型的HTML内容, 如标题, 段落, 或按钮.

为什么要使用缩略图

缩略图 (1.4版本后移除 .media-grid) 很适合网格式图片或视频, 图片搜索结果, 零售产品, 文件夹, 等等. 它们可以是链接或静态内容.

简单, 灵活的标记

缩略图的标记十分简单, 一个 ul 里嵌套几个 li 元素. 这同样是超级灵活的, 只需在标记里面放入你任何类型的内容.

使用网格列的大小

最后, 缩略图组件使用现有的网格系统属性, 像 .span2 或 .span3, 以控制缩略图尺寸.

标记

正如前面所提到的, 所需的标记是轻量的, 简单的. 下面就来看看 链接图像 的默认设置:

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/300x200" alt="">
    </a>
  </li>
  ...
</ul>

对于在缩略图里自定义HTML内容, 标记的变化并不大. 为了允许块级内容在任何地方使用, 我们把 <a> 替换成 <div> , 像这样:

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img src="http://placehold.it/300x200" alt="">
      <h3>Thumbnail label</h3>
      <p>Thumbnail caption...</p>
    </div>
  </li>
  ...
</ul>

更多例子

探讨提供的所有选项的各种网格属性. 你也可以混合使用匹配不同的尺寸.

默认

在 .alert 里面添加任何文本内容和关闭按钮.

<div class="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>警告!</strong> 温度过高.
</div>

关闭按钮

在移动设备的Safari和Opera浏览器中, 当使用<a>标签用以关闭通知框, 除了在data-dismiss="alert"属性之外, 还需要包含一个href="#".

<a href="#" class="close" data-dismiss="alert">&times;</a>

另外, 你可以使用<button>元素的数据属性, 我们的文档就是使用这个元素. 当使用<button>, 必须包含type="button", 或者表单中没有提交.

<button type="button" class="close" data-dismiss="alert">&times;</button>

通过JavaScript关闭通知

使用 通知(alerts)jQuery插件 快速和容易的关闭通知.

选项

对于较长的信息, 添加.alert-block增加通知框顶部和底部的padding.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <h4>Warning!</h4>
  水温过高！！水温过高！！水温过高！！水温...
</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>

条纹

使用渐变创建一个条纹效果的进度条. 不支持IE6-8(求大家别用IE了!!!!!!!).

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

动画

在 .progress-striped 添加 .active , 创建一个从右到左移动的动画条纹. 同样不支持IE(为了你的身心健康, 请杜绝IE).

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

堆叠

将多个不同的进度条放在一个 .progress 里来堆叠它们.

<div class="progress">
  <div class="bar bar-success" style="width: 35%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>

选项

其他颜色

进度条使用一些相同的按钮和通知属性, 以获得一致的风格.

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

条纹进度条

类似的纯色, 我们有着各种不同的条纹进度条.

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

浏览器的支持

进度条的效果使用了CSS3渐变, 过渡和动画. 这些不支持IE6-9和老版本的火狐.

IE10之前的版本和Opera12, 均不支持动画.

建立各种类型的组件的抽象对象样式(像博客评论, Tweets, 等等), 该功能沿着文本内容左对齐或右对齐图像.

例子

默认的媒体浮动在一个媒体对象(图像, 视频, 音频)的左边或右边.

Media heading

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

Media heading

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

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" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...

    <!-- Nested media object -->
    <div class="media">
      ...
    </div>
  </div>
</div>

媒体列表

使用一些额外的标记, 你可以让媒体包含在列表内(对评论或文章列表十分有用).

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

      <!-- Nested media object -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

块

一个简单的元素效果, 给它添加另一个效果.

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

可选

有两个可选修饰属性, 控制padding和圆角.

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

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

关闭图标

使用通用的关闭图标来关闭内容(像对话框和通知框).

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

如果你使用a标签, 在iOS设备需要包含一个 href="#" 用作点击事件.

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

辅助属性

简单的, 集中的为小屏幕或行为做调整.

.pull-left

左浮动元素

class="pull-left"

.pull-left {
  float: left;
}

.pull-right

右浮动元素

class="pull-right"

.pull-right {
  float: right;
}

.muted

改变元素颜色为 #999

class="muted"

.muted {
  color: #999;
}

.clearfix

清除元素浮动

class="clearfix"

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}