示例

可以切换显示的下拉菜单。交互功能使用了下拉菜单 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>

选项

右对齐菜单，还有包含多级别的下拉菜单。

对齐菜单

添加 .pull-right 类到 .dropdown-menu 上，可以右对齐下拉菜单。

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

禁用菜单选项

添加 .disabled 类到 <li> 上，可以禁用链接。

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">普通的链接</a></li>
  <li class="disabled"><a tabindex="-1" href="#">禁用的链接</a></li>
  <li><a tabindex="-1" href="#">其它的链接</a></li>
</ul>

下拉菜单里的子菜单

为下拉菜单添加一个额外的级别，鼠标悬停时会显示，在下拉菜单里面的 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">左对齐</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>

轻量化相同的代码，不同的类

选项卡，pills，列表，所有这些导航组件都会使用同样的代码和来自 .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>

基本 pills

使用同样的 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>

禁用的状态

在任何导航组件 (选项卡，pills，链接)上，添加一个 .disabled 类，可以把链接变成灰色并且去掉了悬停效果，链接依然可以点击，除非你去掉了 href 属性。你可以用点 JavaScript 做到。

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

组件对齐

使用 .pull-left 或者 .pull-right 类可以改变导航组件的对齐方式。

可堆砌

选项卡与 pills 默认会水平显示，再添加一个 .nav-stacked 类可以让它们堆砌在一起显示。

堆砌在一起的选项卡

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

堆砌在一起的 pills

<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="#">
        选项类型
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
    </ul>
  </li>
</ul>

带下拉菜单的 pills

<ul class="nav nav-pills">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        选择类型
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- 链接 -->
    </ul>
  </li>
</ul>

导航链接

创建导航链接组，每个链接组可以添加个标题。把这它们用在边栏上是不错的选择。

导航链接示例

找一个列表链接，添加一个 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 的 JavaScript 选项卡插件，你可以控制选项卡的位置：项部（默认），右边，底部，左边。

示例

让选项卡可以切换显示，用一个拥有唯一 id 的 .tab-pane 类元素来包装 .tab-content 类的元素。

I'm in Section 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

<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>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

渐变的选项卡

为每个 .tab-pane 添加一个 .fade 类，可以添加一个渐变效果。

需要的 jQuery 插件

在 JavaScript 文档里学习一下选项卡插件的使用。

各种方向的选项卡

底部选项卡

翻转 HTML 的顺序，然后添加一个额外的 CSS 类，就可以把选项卡放在底部显示了。

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class="tabbable tabs-below">
  <div class="tab-content">
    ...
  </div>
  <ul class="nav nav-tabs">
    ...
  </ul>
</div>

左边选项卡

修改使用的 CSS 类，可以把选项卡放在左边显示。

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class="tabbable tabs-left">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

右边选项卡

修改使用的 CSS 类，可以让选项卡在右边显示。

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

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

你可以使用带简单 CSS 类的空白项目分隔导航。像这样：

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

表单

在导航栏上使用合适的样式和位置显示表单，可以添加下面这些 CSS 类。默认表单会包含 .navbar-form 类，对齐可以使用.pull-left 或者 .pull-right 。

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

搜索表单

添加 .navbar-search 到表单上，还有添加 .search-query 到 input 上，可以得到特别的样式。

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

组件对齐

对齐导航链接，搜索表单，或者得文字，可以使用 .pull-left 或者 .pull-right 类。这两个类可以添加特定的浮动方向。

使用下拉菜单

使用点标签再加上下拉菜单 JavaScript 插件，可以在导航菜单中添加下拉菜单。

<ul class="nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      帐户
      <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 类。不像 .navbar-fixed-top 类，你不需要给 body 添加额外的边距。

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

响应式的导航栏

把折叠后显示的按钮放在 .btn-navbar 类的元素里，再把导航栏内容用一个带有 .nav-collapse.collapse 类的 div 包装一下。

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar 用来切换显示被折叠的导航内容 -->
      <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>

      <!-- 想要显示的品牌名称 -->
        <a class="brand" href="#">项目名称</a>

      <!-- 940px 或以下要隐藏的东西，可以放在这里 -->
      <div class="nav-collapse collapse">
        <!-- .nav, .navbar-search, .navbar-form, 等等 -->
      </div>

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

提示！ 响应式导航栏需要用到折叠插件，还有响应式 Bootstrap 样式表。

暗色导航

修改导航栏的样式，可以添加一个 .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>

标准分页

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

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

成功

成功啦！ 你已经是宁皓网的会员了：）

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

下拉菜单 Dropdown menus

示例

代码

选项

对齐菜单

禁用菜单选项

下拉菜单里的子菜单

按钮组 Button groups

示例

单一按钮组

多按钮组

垂直按钮组

复选框和单选按钮

按钮组中的下拉菜单

按钮下拉菜单 Button dropdown menus

预览与示例

同样适用所有的按钮尺寸

需要 JavaScript

分离式带下拉菜单的按钮

尺寸

向上弹出的菜单

导航：选项卡，pills，链接

轻量化 相同的代码，不同的类

基本选项卡

基本 pills

禁用的状态

组件对齐

可堆砌

堆砌在一起的选项卡

堆砌在一起的 pills

下拉菜单

带下拉菜单的选项卡

带下拉菜单的 pills

导航链接

导航链接示例

水平分隔符

可以切换显示的选项卡

示例

渐变的选项卡

需要的 jQuery 插件

各种方向的选项卡

底部选项卡

左边选项卡

右边选项卡

导航栏 Navbar

基本的导航栏

导航栏组件

品牌

导航链接

表单

搜索表单

组件对齐

使用下拉菜单

文字

可选显示变化

固定在顶部

固定在底部

静态顶部导航栏

响应式的导航栏

暗色导航

面包屑 Breadcrumbs

示例

分页 Pagination 两种分页形式

标准分页

选项

禁用与激活状态

尺寸

对齐

小分页

默认示例

两端对齐

可选的禁用状态

标签与徽章 Labels and badges

标签

徽章

自动隐藏

排版组件 Typographic

Hero 单元

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

页头

轻量化相同的代码，不同的类

《帝国》对影片的评论

杂项实用小组件