BootStrap 教程 之 布局组件（03）

布局组件的实现主要是通过 JS 代码实现的。常见的引用文件是：bootstrap.min.css、jquery.min.js 和 bootstrap.min.js。

字体图标，即为胶囊内字段周围的小图标，使用需要下载 Bootstrap 3.x 版本，相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。字体图标可以变换颜色，添加阴影效果。

示例：
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>
完整使用示例：
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html

下拉菜单。可以变换菜单颜色、移动对齐该元素。
通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu">

按钮组。横向、水平按钮组，按钮组合的集合。

输入框。带前缀和后缀的输入框，带下拉菜单、按钮的输入框。

导航元素以及导航栏。横向纵向导航元素、禁用导航元素、胶囊状导航元素。
含文本、文本框、按钮、链接、下拉框的导航栏。
导航栏的颜色、位置（顶部、底部）、随页面滚动导航栏以及面包屑导航栏。

分页，分页标签、前向后向按钮。

标签，不同颜色和大小的span的设定。

徽章，字段后的徽章和字段同一区域的徽章设计。

超大屏幕（Jumbotron）。注意 container 和 超大屏幕（Jumbotron）所属 div 之间的相对位置、

页面标题（Page Header）。它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如需使用页面标题（Page Header），可以把标题放置在带有 class .page-header 的 <div> 中。

缩略图，使用 Bootstrap 创建缩略图的步骤如下：1.在图像周围添加带有 class .thumbnail 的 <a> 标签。2.这会添加四个像素的内边距（padding）和一个灰色的边框。3.当鼠标悬停在图像上时，会动画显示出图像的轮廓。
有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：
1.把带有 class .thumbnail 的 <a> 标签改为 <div>。
2.在该 <div> 内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。
3.如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。

警告，颜色可调、是否关闭、搭载链接的设计。

进度条，条纹显示、多色显示等。

多媒体对象（Media Object）
.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

列表组，可变色，带徽章。创建一个基本的列表组的步骤如下：
向元素 <ul> 添加 class .list-group。
向 <li> 添加 class .list-group-item。

面板（Panels），面板组件用于把 DOM 组件插入到一个盒子中。添加面板标题，添加面板脚注，变色面板和带表格面板。


Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可。可以使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小。这两个类是与 .well 类结合使用的。这两个类会影响内边距（padding），根据使用的类，Well 会显示得更大或者更小。