组件

Bootstrap内置几十种高可用的组件,以实现导航栏,通知,弹出框等功能。

例子

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

单一按钮组

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

<div class="btn-group">
  <button class="btn">左</button>
  <button class="btn">中</button>
  <button class="btn">右</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>

复选框和单选框形式

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

在按钮组的下拉菜单

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

简介和例子

通过将其放在 .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">
    <!-- dropdown menu links -->
  </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">
    <!-- dropdown menu links -->
  </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">
    <!-- 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>

标准分页

受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="#">5</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>

选项

不可用和当前状态

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

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

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

<div class="pagination">
  <ul>
    <li class="disabled"><span>&laquo;</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; Older</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>

容易的标记

为了方便编写,请将标签和标记存在空的元素当中(通过 CSS's :empty 定义)

Hero单元

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

Hello, world!

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

Learn more

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

页面标题

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

页面标题的例子 子标题文字

<div class="page-header">
  <h1>页面标题的例子 <small>子标题文字</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.

    动作 动作

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

    动作 动作

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

    动作 动作

为什么使用缩略项

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

简洁灵活的标记

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

使用栅格列确定大小

最后,缩略项组件使用栅格类—诸如 .span2.span3 —确定缩略项的尺寸。

标记

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

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>
  ...
</ul>

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

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
      <h3>Thumbnail label</h3>
      <p>Thumbnail caption...</p>
    </div>
  </li>
  ...
</ul>

更多例子

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

默认样式

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

警告! Best check yo self, you're not looking too good.
<div class="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</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.

警告!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <h4>Warning!</h4>
  Best check yo self, you're not...
</div>

语境下的强化

根据通知的涵义使用不同的类

危险/错误

错误! Change a few things up and try submitting again.
<div class="alert alert-error">
  ...
</div>

成功

不错! You successfully read this important alert message.
<div class="alert alert-success">
  ...
</div>

重要

注意! This alert needs your attention, but it's not super important.
<div class="alert alert-info">
  ...
</div>

例子

基本效果

默认的垂直渐变进度条。

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

条纹效果

使用渐变创建条纹进度条(不支持IE7-8)

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

动画效果

.progress-striped 添加 .active , 创建一个从右到左移动的动画条纹. 同样不支持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渐变/过渡/动画以实现所有效果. IE7到IE9,以及某些老版本的Firefox还不能完全支持这些特性.

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>

消息墙

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

来看呀来看呀,这就是消息墙!
<div class="well">
  ...
</div>

可选的类

有两个可选的修饰类可以控制填充和圆角效果

来看呀来看呀,这就是消息墙!
<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-right"
.pull-right {
  float: right;
}

.pull-right

右浮动元素

class="pull-right"
.pull-right {
  float: right;
}

.muted

改变元素颜色为 #999

class="muted"
.muted {
  color: #999;
}

.clearfix

清除元素float

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