(十)进度条媒体对象和 Well 组件

一.Well 组件 

  • 有 lg 和 sm 两种可选值 
<div class="well well-lg"> Bootstrap </div>

二.进度条组件 

 

//基本进度条
<div class="progress">
    <div class="progress-bar" style="width: 60%;">60%</div>
</div>
//最低值进度条
<div class="progress">
    <div class="progress-bar" style="min-width:20px">0%</div>
</div>
//结合情景的进度条
<div class="progress">
    <div class="progress-bar progress-bar-success" style="min-width:20px;width:60%">60%</div>
</div>
//条纹状,IE10+支持
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" style="min-width:20px;width:60%">60%</div>
</div>
//动画效果
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped active" style="min-width:20px;width:60%">60%
    </div>
</div>
//堆叠效果
<div class="progress">
    <div class="progress-bar progress-bar-success" style="min-width:20px;width:35%">35%</div>
    <div class="progress-bar progress-bar-warning" style="min-width:20px;width:20%">20%</div>
    <div class="progress-bar progress-bar-danger" style="min-width:20px;width:45%">45%</div>
</div>

 

 三.媒体对象组件 

 媒体对象可以包含图片、视频或音频等媒体,以达到对象和文本组合显示的样式效果。 

 1、基本实例

<div class="media">
    <div class="media-left"><img src="<%=path%>/img/small.png" alt="" class="media-object"></div>
    <div class="media-body"><h4 class="media-heading">标题</h4>
        <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17
            种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;
            羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p></div>
</div>

2、媒体对象在右边 

<div class="media">
    <div class="media-body"><h4 class="media-heading">标题</h4>
        <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17
            种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;
            羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p></div>
    <div class="media-right"><img src="<%=path%>img/small.png" alt="" class="media-object"></div>
</div>

 

 3、模仿帖子回复功能

<div class="media">
    <div class="media-left"><img src="<%=path%>/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="<%=path%>/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="<%=path%>/img/small.png" alt="" class="media-object"></div>
                    <div class="media-body"><h4 class="media-heading">标题</h4>
                        <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p></div>
                </div>
            </div>
        </div>
        <div class="media">
            <div class="media-left"><img src="<%=path%>/img/small.png" alt="" class="media-object"></div>
            <div class="media-body"><h4 class="media-heading">标题</h4>
                <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p>
            </div>
        </div>
    </div>

</div>

 

posted @ 2018-06-14 22:15  shyroke、  阅读(181)  评论(0编辑  收藏  举报
作者:shyroke 博客地址:http://www.cnblogs.com/shyroke/ 转载注明来源~