一.Well 组件
这个组件可以实现简单的嵌入效果。
<!-- //嵌入效果 --> <div class="well">Bootstrap</div> <!-- //有 lg 和 sm 两种可选值 --> <div class="well well-lg">Bootstrap</div> <div class="well well-sm">Bootstrap</div>
二.进度条组件
进度条组件为当前工作流程或动作提供时时反馈。
//基本进度条
<div class="progress"> <div class="progress-bar" style=" 60%;">60%</div> </div>
//最低值进度条
<div class="progress"> <div class="progress-bar" style="min- 20px">0%</div> </div>
//结合情景的进度条
<!-- //结合情景的进度条 --> <div class="progress"> <div class="progress-bar progress-bar-success" style="min- 20px; 60%">60%</div> </div>
//条纹状,IE10+支持
<!-- //条纹状,IE10+支持 --> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" style="min- 20px; 60%">60%</div> </div>
//动画效果
<!-- //动画效果 --> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" style="min- 20px; 60%">60%</div> </div>
//堆叠效果
<!-- //堆叠效果 --> <div class="progress"> <div class="progress-bar progress-bar-success" style="min- 20px; 35%">35%</div> <div class="progress-bar progress-bar-warning" style="min- 20px; 20%">20%</div> <div class="progress-bar progress-bar-danger" style="min- 20px; 10%">10%</div> </div>
三.媒体对象组件
媒体对象可以包含图片、视频或音频等媒体,以达到对象和文本组合显示的样式效果。
//基本实例
<div class="media"> <div class="media-left"> <img src="Bootstrap/img/small.png" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">标题</h4> <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p> </div> </div>
//媒体对象在右边
<!-- //媒体对象在右边 --> <div class="media"> <div class="media-body"> <h4 class="media-heading">标题</h4> <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p> </div> <div class="media-right"> <img src="Bootstrap/img/small.png" alt="" class="media-object"> </div> </div>
//媒体对象列表
<ul class="media-list"> <li class="media"> <div class="media-left"> <img src="Bootstrap/img/small.png" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">标题</h4> <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p> <div class="media"> <div class="media-left"> <img src="Bootstrap/img/small.png" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">标题</h4> <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p> <div class="media"> <div class="media-left"> <img src="Bootstrap/img/small.png" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">标题</h4> <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p> </div> </div> </li> <li class="media"> <div class="media-left"> <img src="Bootstrap/img/small.png" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">标题</h4> <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p> <div class="media"> <div class="media-left"> <img src="Bootstrap/img/small.png" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">标题</h4> <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p> <div class="media"> <div class="media-left"> <img src="Bootstrap/img/small.png" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">标题</h4> <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p> </div> </div> </li> </div> </ul>