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

一．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="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+支持

<!-- //条纹状，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: 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>