警告栏 进度条 多媒体混排

警告栏

1.创建一个 div，并向其添加一个 .alert和四种类型之一（ .alert-success、.alert-info、.alert-warning、.alert-danger），警告框没有默认类，因为默认的灰色警告框并没有意义。
2.向 div元素class 添加 .alert-dismissable，添加一个关闭按钮button，button需要添加 data-dismiss="alert" 属性

<div class="alert alert-success alert-dismissable">
	<button type="button" class="close" data-dismiss="alert">
		&times;
	</button>
	成功！很好地完成了提交。
</div>

<div class="alert alert-info alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">
	    &times;
    </button>
    信息！请注意这个信息。
</div>

<div class="alert alert-warning alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">
	    &times;
    </button>
    警告！请不要提交。
</div>

<div class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">
	    &times;
    </button>
    错误！请进行一些更改。
</div>

进度条

默认样式

<div class="progress">
    <div class="progress-bar" style="width: 60%;">
        <span>60%</span>
    </div>
</div>

在展示很低的百分比时，为了友好的让文本提示能够清晰可见，可以为进度条style设置 min-width。
情境变化
进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。
也就是为内部div添加classprogress-bar-success或progress-bar-info或progress-bar-warning或progress-bar-danger。

条纹效果
为内部div添加classprogress-bar-striped可以实现进度条的条纹效果。
再次基础上，再添加.active可以实现动态条纹效果。

<div class="progress">
    <div class="progress-bar progress-bar-striped active" style="width: 60%;">
        <span>60%</span>
    </div>
</div>

多媒体混排

实现媒体对象（图片，音频，视频）与文字的组合，在一个内容块的左边或右边展示一个多媒体内容。
常用于论坛评论或文章列表。多媒体是区域独占，而不是文本环绕。
1.将一个组合内容放置于.media内
2.将文本内容放置于.media-body内，多媒体内容放置于.media-left内
3.文本内容题目添加.media-heading，多媒体添加.media-object

<!-- 左对齐 -->
<div class="media">
    <div class="media-left">
        <img src="1.png" class="media-object" style="width:60px">
    </div>
    <div class="media-body">
        <h4 class="media-heading">RUNOOB</h4>
        <p>这是一些示例文本...</p>
    </div>
</div>

<!-- 右对齐 -->
<div class="media">
    <div class="media-body">
        <h4 class="media-heading">RUNOOB</h4>
        <p>这是一些示例文本...</p>
    </div>
    <div class="media-right">
        <img src="1.png" class="media-object" style="width:60px">
    </div>
</div>

在class="media-left"div标签处也可以再添加media-top（默认）居上,media-middle居中,media-bottom居下。

媒体列表形式
1.将所有内容放置于ul标签内，添加class="media-list"类
2.将最外层的div改为li
3.将n个组合内容依次放置于另一个组合内容的div.media-body标签内，这样就可以实现嵌套。

<ul class="media-list">
	<li class="media">
		<div class="media-left">
            <img src="../7-4-7.png" class="media-object" style="width:40px">
        </div>
        <div class="media-body">
            <h4 class="media-heading">RUNOOB</h4>
            <p>这是一些示例文本...</p>

            <div class="media">
		        <div class="media-left">
                    <img src="../7-4-7.png" class="media-object" style="width:40px">
                </div>
                <div class="media-body">
                    <h4 class="media-heading">RUNOOB</h4>
                    <p>这是一些示例文本...</p>               
                </div>
	        </div>

        </div>
	</li>
</ul>