组件

提供十几个可重用组件, 包括导航, 警示, 提示工具, 等等.

例子

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

单一按钮组

带有 .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>

标准分页

如此简洁的分页的灵感来自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>

标签

标签 标记
默认 <span class="label">默认</span>
成功 <span class="label label-success">成功</span>
警告 <span class="label label-warning">警告</span>
重要 <span class="label label-important">重要</span>
信息 <span class="label label-info">信息</span>
反向 <span class="label label-inverse">反向</span>

标记

名称 例子 标记
默认 1 <span class="badge">1</span>
成功 2 <span class="badge badge-success">2</span>
警告 4 <span class="badge badge-warning">4</span>
重要 6 <span class="badge badge-important">6</span>
信息 8 <span class="badge badge-info">8</span>
反向 10 <span class="badge badge-inverse">10</span>

Hero单元

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

iTunes!

iTunes 已经完全重新设计, 让你更轻松地浏览与管理你的音乐、视频及更多内容。添加收藏也更简易,还可随时随地播放。.

了解更多

<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内容, 如标题, 段落, 或按钮.

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

    Action Action

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

    Action Action

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

    Action Action

为什么要使用缩略图

缩略图 (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>

媒体列表

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

  • Media heading

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

    Nested media heading

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

    Nested media heading

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

    Nested media heading

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

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" 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>

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

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

可选

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

Look, I'm in a well!
<div class="well well-large">
  ...
</div>
Look, I'm in a well!
<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;
  }
}