您的位置：首页 > Web前端 > BootStrap

Bootstrap笔记13—进度条、媒体对象

2017-03-09 11:08 387 查看

1.基础进度条



要写在
<div class="progress"></div>
里面。

<div class="col-md-6">
<div class="progress">
<div class="progress-bar" style="width:30%;"></div>
</div>
</div>


2.多彩进度条



<div class="col-md-6">
<div class="progress">
<div class="progress-bar" style="width:30%;"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:40%;"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:50%;"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:60%;"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:70%;"></div>
</div>
</div>


3.条纹状进度条



在类
progress
基础上添加类
progress-striped
如下：

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


4. 进度条动画样式



给进度条添加类
active
，如下：

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


5.堆叠式进度条



都写在一个
progress
内，如下：

<div class="progress">
<div class="progress-bar progress-bar-success" style="width:10%;"></div>
<div class="progress-bar progress-bar-warning" style="width:20%;"></div>
<div class="progress-bar progress-bar-info" style="width:30%;"></div>
</div>


6.媒体对象



媒体对象就是图文混排。左边可以是图片、视频。右边是对其描述。

<div class="col-md-6">
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="img/02.jpg" alt="">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">我是标题</h2>
<p>这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容</p>
</div>
</div>
</div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  bootstrap
相关文章推荐
新的分享
章节导航