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

Well组件

可以实现简单地嵌入效果

Well 是一种会引起内容凹陷显示或插图效果的容器 div中，为了创建 Well，只需要简单地把内容放在带有 class .well 的div中即可

<!-- Well组件:嵌入效果 -->
<div class="well">一辈子很长</div>
<div class="well well-lg">要跟有趣的人</div>
<div class="well well-sm">在一起</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;width:0%">0%</div>
</div>
<!-- 结合情景的进度条 -->
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:60%;min-width:20px;">60%</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width:60%;min-width:20px;">60%</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width:60%;min-width:20px;">60%</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width:60%;min-width:20px;">60%</div>
</div>
<!-- 条纹状,IE10+支持 -->
<div class="progress">
    <div class="progress-bar progress-bar-striped" style="width:50%;min-width:20px;">50%</div>
</div>
<!-- 动画效果 -->
<div class="progress">
    <div class="progress-bar progress-bar-striped active" style="width:60%;min-width:20px;">60%</div>
</div>
<!-- 堆叠效果 -->
<div class="progress">
    <div class="progress-bar progress-danger" style="width:30%;">30%</div>
    <div class="progress-bar progress-bar-warning" style="width:40%;">40%</div>
    <div class="progress-bar progress-bar-success" style="width:30%;">30%</div>
</div>

效果图如下：

媒体对象组件

媒体对象可以包含图片、视频或者音频等媒体，以达到对象和文本组合显示的样式效果。
这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。

<!-- 基本实例 -->
<div class="media">
    <div class="media-left">
        <img src="../img/2.png" alt="" class="media-object">
    </div>
    <div class="media-body">
        <h4 class="media-heading">标题</h4>
        <p>一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。</p>
    </div>
</div>

<!-- 媒体对象在右边 -->
<div class="media">
    <div class="media-body">
        <h4 class="media-heading">标题</h4>
        <p>一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。</p>
    </div>
    <div class="media-right">
        <img src="../img/2.png" alt="" class="media-object">
    </div>
</div>

效果图如下：

媒体对象列表：如论坛或者博客的评论、回复

<!-- 媒体对象列表 -->
<ul class="media-list">
    <li class="media">
        <div class="media-left">
            <img src="../img/2.png" alt="" class="media-object">
        </div>
        <div class="media-body">
            <h4 class="media-heading">标题</h4>
            <p>一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。</p>
            <div class="media">
                <div class="media-left">
                    <img src="../img/2.png" alt="" class="media-object">
                </div>
                <div class="media-body">
                    <h4 class="media-heading">标题</h4>
                    <p>一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。</p>
                    <div class="media">
                        <div class="media-left">
                            <img src="../img/2.png" alt="" class="media-object">
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">标题</h4>
                            <p>一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="media">
                <div class="media-left">
                    <img src="../img/2.png" alt="" class="media-object">
                </div>
                <div class="media-body">
                    <h4 class="media-heading">标题</h4>
                    <p>一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。</p>
                </div>
            </div>
        </div>
    </li>
    <li class="media">
        <div class="media-left">
            <img src="../img/2.png" alt="" class="media-object">
        </div>
        <div class="media-body">
            <h4 class="media-heading">标题</h4>
            <p>一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。</p>
        </div>
    </li>
</ul>

效果图如下：