一、巨幕组件(展示网站关键性区域)
<div class="jumbotron"> <div class="container"> <h3>网站标题</h3> <p>网站详细简介</p> <p><a href="#" class="btn btn-default">快速进入</a></p> </div> </div>
1、100%全屏，没有圆角 jumbotron > container
2、在固定的范围内，有圆角 container > jumbotron
二、页头组件（增加了上下距离，底部有灰色的条线）
<div class="page-header"> <h1>大标题 <small>小标题</small></h1> </div>
三、缩略图组件（配合响应式）
<div class="col-md-3 col-sm-4 col-xs-6"> <div class="thumbnail"> <img src="images/01.jpg" alt=""> <div class="caption"> <h3>图文标题</h3> <p>文字叙述的图文缩略</p> <p><a href="#" class="btn btn-default">点击进入</a></p> </div> </div> </div>
.thumbnail // 缩略图的class
.caption // 自定义的缩略图下的内容详情（定义了边距和文字颜色）
四、警告框组件
<div class="alert alert-success"> 警告框警告 请下载<a href="#" class="alert-link">最新版本</a> <button class="close" data-dismiss="alert" ><span>×</span></button> </div>
.alert // 基本的警告框
.alert-success // 成功提示
.alert-info // 信息提示
.alert-warning // 警告注意提示
.alert-danger // 错误提示
.alert-link // 警告中的超链接，匹配警告框的样式
.close // 关闭提示, 后缀 data-dismiss="alert" 配合使用， button><span>×</span>
五、well组件（时间简单的嵌入效果，内影响，带 padding 的 border框 ）
<div class="well well-lg"> Bootstrap </div> <div class="well well-sm"> Bootstrap </div>
.well // 嵌入效果
.well-lg // 变大
.well-sm // 变小
六、进度条组件（多用于上传）
<div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" style="min-20px; 50%">50%</div> </div> // 堆叠效果 <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-danger" style="min-20px; 30%">30%</div> <div class="progress-bar progress-bar-striped progress-bar-warning" style="min-20px; 30% ">30%</div> <div class="progress-bar progress-bar-striped progress-bar-success" style="min- 20px; 40%">40%</div> </div>
.progress // 定义基本进度条外框
.progress-bar // 定义基本进度条
min-width // 最低进度条
.progress-bar-success // 绿色进度条
.progress-bar-info // 蓝色进度条
.progress-bar-warning // 黄色进度条
.progress-bar-danger // 红色进度条
.progress-bar-striped // 条纹/斑马线进度条，IE10+支持
.active // 动画效果，必须是斑马线的才有动画效果
七、媒体对象组件（包含图片、视频、音频等媒体，达到对象和文本组合显示的样式效果，多用于论坛、回帖、楼层和评论）
<div class="media"> <div class="media-left"> <img src="images/01.jpg" alt="" class="media-object" width="100"> </div> <div class="media-body"> <h4 class="media-heading">内容标题</h4> <p> Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 </p> </div> <div class="media-right"> <img src="images/01.jpg" alt="" class="media-object" width="100"> </div> </div>
.media // 媒体
.media-left // 左侧，默认top对齐，非环绕
.media-body // 右侧主要内容
.media-heading // 内容标题
.media-right // 右侧的时候，连带着整个 div 一起放于右侧位置
.media-middle // 居中对齐
.media-bottom // 居底对齐
.media-list // 媒体对象列表
<ul class="media-list"> <li class="media"> //每个media 存放在 media-body 内 <div class="media-left"> <img src="images/01.jpg" alt="" class="media-object" width="100"> </div> <div class="media-body"> <h4 class="media-heading">内容标题</h4> <p> Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 </p>
// 开始复制黏贴 <div class="media"> <div class="media-left"> <img src="images/01.jpg" alt="" class="media-object" width="100"> </div> <div class="media-body"> <h4 class="media-heading">内容标题</h4> <p> Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 </p> </div> </div>
// 复制黏贴结束 </div> </li> </ul>