组件

无数可复用的组件,包括导航、警告框、弹出框等更多功能。

案例

两个基本类型和更多变种类型。

单一按钮组

将带有.btn类的一系列按钮包裹在.btn-group中。

<div class="btn-group">
  <button class="btn">Left</button>
  <button class="btn">Middle</button>
  <button class="btn">Right</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的直接父节点添加一个类就可以让下拉菜单由下到上显示。.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,非常适合app和搜索结果的展示。分页中的每一块都非常大,不易弄错,而且很容易扩展,并具有非常大的点击区域。

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

选项

禁用与活动状态

可根据不同情况定制链接。用.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="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

排列链接

另外,还可以将两个链接放置于两侧:

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; Older</a>
  </li>
  <li class="next">
    <a href="#">Newer &rarr;</a>
  </li>
</ul>

禁用状态

分页也可使用.disabled工具类让链接处于禁用状态。

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

标签

标签 标记
默认样式 <span class="label">Default</span>
成功 <span class="label label-success">Success</span>
警告 <span class="label label-warning">Warning</span>
重要 <span class="label label-important">Important</span>
信息 <span class="label label-info">Info</span>
反色 <span class="label label-inverse">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的 :empty 选择器)。

Hero块

一个轻量、灵活的用于展示网站重点内容的组件。很适合营销类或内容类网站。

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元素,就像其他大部分组件一样(需要增加额外的样式)。

<div class="page-header">
  <h1>Example page header <small>Subtext for header</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

为什么要用缩略图

缩略图(v1.4版本之前叫.media-grid)很适合将图片、视频、图片搜索结果、商品列表等展示为网格样式。他们可以是链接或纯粹的内容。

简单、灵活的标记

组成缩略图的标记很简单—ul包裹任意数量的li 元素即可。它同样很灵活,只需添加少量标记即可包裹你需要展示的任何内容。

使用栅格中的列尺寸

最后,缩略图组件使用现有的栅格系统中的类—例如.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中包裹任何文本和一个可选的关闭按钮。

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

可选方案是,使用带有data属性的<button>元素,就像此文档中一样。当使用 <button>时,必须包含type="button"属性,否则你将无法执行提交(submit)动作。

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

通过JavaScript代码关闭

使用警告框jQuery插件可以快速、方便的关闭警告框。


选项

对于较长的信息,通过添加.alert-block类可以增加警告框上下方向的内补(padding)。

Warning!

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>

其它

通过添加其它类,可以改变警告框的含义。

错误或危险

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

成功

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

信息

Heads up! 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-9 或较老版本的Firefox所支持的。

IE10和Opera 12之前的版本均不支持动画特性。

这是一个抽象的样式,用以构建不同类型的组件,这些组件都具有在文本内容的左或右对齐的图片(就像blog内容或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>

Wells

well能给一个页面元素添加简单的嵌入(inset)效果。

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

可选的类

这两个类用以控制内补和圆角效果。

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>

如果你选择使用连接标签的话,在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;
  }
}