组件

许多可以重复使用的组件,导航,警示,缩略图,分页器等等。

示例

两个基本选项,两种变化。

单一按钮组

把一些带有 .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="#">
    选择类型
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- 下拉菜单的链接 -->
  </ul>
</div>

同样适用所有的按钮尺寸

按钮下拉菜单适用于所有尺寸: .btn-large, .btn-small, 或者 .btn-mini

需要 JavaScript

带下拉菜单的按钮需要 Bootstrap 下拉菜单插件才能正常工作。

有一些情况,比如在移动设备上,下拉菜单可能会出现在可视窗口之外,你需要自己手工调整对齐。


分离式带下拉菜单的按钮

创建于带下拉菜单链接之上,我们可以很容易创建一个分离式的按钮,按钮左边部是正常的运作,右边部分可以切换显示下拉菜单。

<div class="btn-group">
  <button class="btn">选择类型</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">选择类型</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">向上弹出</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- 下拉菜单链接 -->
  </ul>
</div>

标准分页

适用于应用程序或者搜索结果上面,很容易点击。

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

你可以在禁用或者激活的锚上,把 a 标签替换成 span 标签,这样它们就不能点击了。

<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; 上一页</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 的 :empty 选择器 )。

Hero 单元

轻量,灵活的显示网站主要内容的组件。比如适合用在营销类型的网站上。

从今天开始,学习网页设计

这里是一些吹牛B的话,^&$%^#$%&^*(&(&^*##$%%^&^& ... ...

了解更多

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

页头

h1 标签上添加一些边距,还有一条下边灰色实线,可以区分页面的不同部分,可以使用 small 标签标记大标题的子标题。

<div class="page-header">
  <h1>什么是 WordPress <small>是什么,能做什么</small></h1>
</div>

默认的缩略图

默认情况下,Bootstrap 的缩略图是使用最少的代码来显示带链接的图像。

可定制

加上点额外的代码,你可以把多种 HTML 内容放在缩略图里,比如标题,段落,按钮等等。

  • 肖申克的救赎

    银行家安迪因被当作杀害妻子与情夫的凶手,被判终身监禁。安迪在监狱中一方面帮监狱长做假账,一方面精心策划了一出越狱好戏。

    观看 收藏

  • 盗梦空间

    本片被定义为“发生在意识结构内的当代动作科幻片”,诺兰继《黑暗骑士》后再次给我们带来惊喜,带观众游走于梦境与现实之间。

    观看 收藏

  • 阿甘正传

    阿甘,他是一个占据着成年人躯体的幼童、一个圣贤级的傻子、一个超越真实的普通人、一个代表着民族个性的小人物。

    观看 收藏

为什么使用缩略图

缩略图很适合用在使用网格来显示视频,图像,商品,作品等等。

简单,灵活

缩略图只需要使用一个 ul,里面可以使用任意数量的 li 元素包装内容。它非常灵活,可以包装很多种内容。

使用网格栏

缩略图使用已有的网格系统类来控制缩略图的尺寸,像 .span2.span3 等等。

代码

就像上面说的一样,使用缩略图的代码很简单,下面是一个带链接的图像的缩略图

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

在缩略图里添加其它类型的内容,代码只需要简单修改一下,把 <a> 替换成 <div> ,像这样:

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
      <h3>缩略图标签</h3>
      <p>缩略图描述...</p>
    </div>
  </li>
  ...
</ul>

更多示例

你可以混合使用网格类。

默认的警示

把警示内容连同可选的关闭按钮放在 .alert 类的元素里。

警告! 出门之前一定带钥匙。
<div class="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>警告!</strong> 出门之前一定带钥匙。
</div>

关闭按钮

移动版 Safari 和移动版 Opera 浏览器,想要使用 data-dismiss="alert" 属性,需要在关闭所在的 <a> 标签上,添加一个 href="#" 属性。

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

你也可以使用带 data 属性的 <button> 元素, 当使用 <button> 元素的时候,你需要添加一个 type="button",不然关闭按钮可能不会起作用。

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

通过 JavaScript 关闭警示信息

使用 jQuery 警示插件,可以让警示信息可以关闭。


选项

比较长的信息,可以在警示信息的包装上添加 .alert-block,它可以添加一些内边距。

警告!

老婆永远是对的,如果你还没准备好向一个你认为不对的人一直点头微笑,那么说明你还没有到找老婆的时候。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>警告!</h4>
  老婆永远是对的,如果你还没准备好...
</div>

应用情境

添加额外的 CSS 类可以改变警示信息的意义。

错误或危险

我靠! 又忘了带钥匙。
<div class="alert alert-error">
  ...
</div>

成功

成功啦! 你已经是54IT.COM - IT人的导航网站的会员了 :)
<div class="alert alert-success">
  ...
</div>

信息

提示! 记住哦,老婆永远都是对的。
<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>

选项

其它额外

进度条也使用了类似按钮和警示一样的 CSS 类来改变样式。

<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 的渐变,过渡,还有动画来达到它的效果。这些东西在低版本的 Firefox 和 IE 浏览器上都不支持。

IE 10 和 Opera 12 不支持动画。

左边或右边显示一个小图像,紧跟着还有一小段文字。可以用在评论,内容列表块上。

默认示例

默认可以把媒体对象里的多媒体(图像,视频)浮动到内容区块的左边或者右边。

肖申克的救赎 The Shawshank Redemption (1994)

银行家安迪因被当作杀害妻子与情夫的凶手,被判终身监禁。安迪在监狱中一方面帮监狱长做假账,一方面精心策划了一出越狱好戏。

盗梦空间 Inception (2010)

本片被定义为“发生在意识结构内的当代动作科幻片”,诺兰继《黑暗骑士》后再次给我们带来惊喜,带观众游走于梦境与现实之间。

《 帝国 》对影片的评论

这部影片就像是《黑客帝国》加上《纽约提喻法》,反物理学的探讨、精彩的动作场面、具有冲击力的情感、以及莱昂纳多令人吃惊的表演,都让人沉迷不已,这是诺兰电影的一个全新领域。
<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>
    ...

    <!-- 嵌套的多媒体对象 -->
    <div class="media">
      ...
    </div>
  </div>
</div>

多媒体列表

再加上代码,可以把多媒体对象放在列表里(适用于评论或者文章列表)。

  • 多媒体标题

    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.

    被嵌套的多媒体标题

    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.

    被嵌套的多媒体标题

    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.

    被嵌套的多媒体标题

    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.
  • 多媒体标题

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

      <!-- 嵌套的多媒体对象 -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Well 可以为元素添加一个灰色背景和边框,还有一个内部阴影效果。

嘿!我在 Well 里。
<div class="well">
  ...
</div>

可选类

控制边距和圆角的两个类。

嘿!我在 Well 里。
<div class="well well-large">
  ...
</div>
嘿!我在 Well 里。
<div class="well well-small">
  ...
</div>

关闭图标

可以用于关闭对话框,警示信息的小图标。

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

如果你想用 a 标签的话,在 iOS 设备需要添加一个 href="#" 才能点击。

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

辅助类

一些用来修改小显示或行为的简单实用的 CSS 类。

.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

清查任何元素的 float (浮动)

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