#每日技术学习# Bootstrap学习：进度条、媒体对象、列表
Date | 2018-11-03
一、进度条
1.1 基本样式
Bootstrap框架中对于进度条提供了一个基本样式，一个100%宽度的背景色，然后个高亮的色表示完成进度。
Bootstrap框架提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。使用方法非常的简单：
<div class="progress">
<div class="progress-bar" style="width:61.8%">61.8%</div>
</div>
基本进度条
1.2 彩色进度条
Bootstrap框架根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条，其主要包括以下四种：
☑ progress-bar-info：表示信息进度条，进度条颜色为蓝色
☑ progress-bar-success：表示成功进度条，进度条颜色为绿色
☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色
☑ progress-bar-danger：表示错误进度条，进度条颜色为红色
具体使用代码：
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>
1.3 条纹进度条
Bootstrap框架中的条纹进度条只需要在 进度条的容器 .progress基础上增加类名.progress-striped。
如果你要让你的进度条条纹像彩色进度一样，具有彩色效果，你只需要在进度条上增加相应的颜色类名，如前面的彩色进度条所讲，例如：
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
条纹进度条
1.4 动态条纹进度条
在进度条progress progress-striped两个类的基础上再加入.active类名。如下代码：
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
1.5 层叠进度条
Bootstrap框架可以将不同状态的进度条放置在一起，按水平方式排列。具体使用如下：
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>
层叠进度条
如图，可以有条纹的和无条纹的进度条层叠在一起。
1.6 带Label的进度条
实现方法：
只需要在进度条中添加你需要的值，如：
<div class="progress">
<div class="progress-bar progress-bar-success"
role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
style="width:20%">20%</div>
</div>
带Label的进度条
二、媒体对象
什么是媒体对象
在Web页面或者说移动页面制作中，常常看到这样的效果，左边居左（或居右），内容居右（或居左）排列，如下图所示：
媒体对象
这样的效果称为媒体对象。
2.1 默认媒体对象
媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分：
☑ 媒体对像的容器：常使用.media类名表示，用来容纳媒体对象的所有内容
☑ 媒体对像的对象：常使用.media-object表示，就是媒体对象中的对象，常常是图片
☑ 媒体对象的主体：常使用.media-body表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容
☑ 媒体对象的标题：常使用.media-heading表示，就是用来描述对象的一个标题，此部分可选
如下图所示：
默认媒体对象
除了上面四个部分之外，在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的 对象 浮动方式。
具体使用：
<div class="media">
<a class="pull-left" href="#">
<img class="media-object"
src="http://img.mukewang.com/170.jpg"
alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">系列：十天精通CSS3</h4>
<div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>
</div>
</div>
2.2 媒体对象的嵌套
在评论系统中，常常能看到下图的效果：
媒体对象的嵌套
在Bootstrap框架中的媒体对象也具备这样的功能，只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”
2.3 媒体对象列表
媒体对象的嵌套仅是媒体对象中一个简单应用效果之一，在很多时候，我们还会碰到一个列表，每个列表项都和媒体对象长得差不多，同样用评论系统来说事：
媒体对象列表
具体使用
Bootstrap框架提供了一个列表展示的效果，在写结构的时候可以使用ul，并且在ul上添加类名“media-list”，而在li上使用“media”，示例代码如下：
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src=" " alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media Header</h4>
<div>…</div>
</div>
</li>
<li class="media">…</li>
<li class="media">…</li>
</ul>
三、列表组
列表组是Bootstrap框架新增的一个组件，可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。
3.1 基础列表组
基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分：
☑ list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素
☑ list-group-item：列表项，常用的是li元素，当然也可以是div元素
例如：
<ul class="list-group">
<li class="list-group-item">性能优化之PHP优化</li>
<li class="list-group-item">Canvas绘图详解</li>
<li class="list-group-item">玩转Bootstrap</li>
<li class="list-group-item">基于Bootstrap的网页开发</li>
</ul>
基础列表组
3.2 带徽章的列表组
带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单，只需要在“list-group-item”中添加徽章组件“badge”：
<ul class="list-group">
<li class="list-group-item">
<span class="badge">13</span>揭开CSS3的面
</li>
<li class="list-group-item">
<span class="badge">1290</span>CSS3文本
</li>
</ul>
带标签的列表组
3.3 带链接的列表组
带链接的列表组，其实就是每个列表项都具有链接效果。
在Bootstrap框架中，采用了另一种实现方式。就是将ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换。这样就可以达到需要的效果：
<div class="list-group">
<a href="##" class="list-group-item">图解CSS3</a>
<a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
<a href="##" class="list-group-item">玩转Bootstrap</a>
</div>
3.4 列表项的状态设置
Bootstrap框架也给组合列表项提供了状态效果，特别是链接列表组。比如当前状态和禁用状态等。实现方法和前面介绍的组件类似，在列表组中只需要在对应的列表项中添加类名：
☑ active：表示当前状态
☑ disabled：表示禁用状态
例如：
<div class="list-group">
<a href="##" class="list-group-item active">
<span class="badge">5902</span>图解CSS3
</a>
<a href="##" class="list-group-item">
<span class="badge">59020</span>慕课网
</a>
<a href="##" class="list-group-item disabled">
<span class="badge">0</span>Sass中国
</a>
</div>
列表项的状态
3.5 多彩列表组
列表组组件和警告组件一样，Bootstrap为不同的状态提供了不同的背景颜色和文本色，可以使用这几个类名定义不同背景色的列表项。
☑ list-group-item-success：成功，背景色绿色
☑ list-group-item-info：信息，背景色蓝色
☑ list-group-item-warning：警告，背景色为黄色
☑ list-group-item-danger：错误，背景色为红色
如果你想给列表项添加什么背景色，只需要在“list-group-item”基础上增加对应的类名：
<div class="list-group">
<a href="##" class="list-group-item active">
<span class="badge">5902</span>图解CSS3</a>
<a href="##" class="list-group-item list-group-item-success">
<span class="badge">15902</span>W3cplus</a>
<a href="##" class="list-group-item list-group-item-info">
<span class="badge">59020</span>慕课网</a>
<a href="##" class="list-group-item list-group-item-warning">
<span class="badge">0</span>Sass中国</a>
<a href="##" class="list-group-item list-group-item-danger">
<span class="badge">10</span>Mobile教程</a>
</div>
多彩列表组
