bootstrap(7)关于进度条，列表，面板
一：进度条
首先我们可以看到进度条如下：
这种效果是如何实现的呢？
进度条代码如下：
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
进度条格式：
progress>progress-bar>sr-only
我们可以看到，
最外面是progross,显示的是全部的宽度，而progress-bar这是显示的进度条的宽度，因为这里面嵌套了一个 sytle="width:60%",也就说完成的进度占总进度的60%
当我们去掉后面的span元素的时候，进度条会显示出进度的百分比来
效果如下：
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0 " style="width:60%;">60%</div>
可以在 class为 progress-bar上添加 min-width:2em来实现较小宽度下的显示百分比
（1）在 progress-bar后面添加不同的信息来实现不同提示信息的进度条，
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
<span class="sr-only">40%</span>
</div>
效果如下：
（2）在progress-bar 后面添加 progress-bar-striped来实现条纹效果
（3）在 progress-bar progress-bar-striped 后面添加 .active类来实现动画效果
添加了动画效果之后，条纹好似向右滚动
（4）将多个 progress-bar 放到同一个 progress内可以实现堆叠效果
二：列表组
最简单的列表组是一个带有多个列表条目的无序列表
列表代码如下：
<ul class="list-group">
<li class="list-group-item">
我是列表项1
</li>
<li class="list-group-item">
我是列表项2
</li>
<li class="list-group-item">
我是列表项3
</li>
</ul>
效果如下：
分析：
代码结构 ul(class="list-group") >li(class="list-group-item")
向li元素中加入徽章标签，徽章组件会被自动放到右边
例如代码：
<ul class="list-group">
<li class="list-group-item">
<span class="badge">21</span>
我是带有徽章的列表项
</li>
</ul>
实现效果如下：
1，我们可以把列表项变为链接或者按钮来显示
代码例如：
<a href="#" class="list-group-item">我是链接列表项</a>
或者按钮的情况：
<button type="button" class="list-group-item">我是按钮列表项</button>
注意：当我们将连接或者按钮作为列表项的时候，我们要将列表项的父元素<ul>
变为 div元素
<div class="list-group">
.......
</div>
2,可以给列表项添加 class为 .disabled表示禁用效果
通过添加class为 .active类表示现在的状态
3，添加情景
还是和上面的一样存在 list-item-success list-item-info list-item-warning list-iten-danger
显示效果：
代码如下：
<ul class="list-group">
<li class="list-group-item list-group-item-danger">
我是列表项1 danger
</li>
<li class="list-group-item list-group-item-info">
我是列表项2 info
</li>
<li class="list-group-item list-group-item-warning">
我是列表项3 warning
</li>
<li class="list-group-item list-group-item-success">
我是列表项4 success
</li>
</ul>
4,我们可以给list中添加任何html内容
三：面板
实现一个基本的面板代码如下：
<div class="panel panel-default">
<div class="panel-heading">
Panel heading
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
1,给面板添加情景类效果
| panel-primary | panel-success | panel-info | panel-warning | panel-danger |
例如：
代码如下：
<div class="panel panel-danger">
<div class="panel-heading">
Panel heading
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
我们可以发现
在panel-head的部分继承了面板的样式
而对于panel-footer的部分，保持灰色
效果图如下：
2，我们可以给面板添加表格或者列表组
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>.......</p>
</div>
<ul class="list-group">
<li class="list-group-item"></li>
<li class="list-group-item"></li>
<li class="list-group-item"></li>
<li class="list-group-item"></li>
</ul>
</div>
结语：
对于bootstrap的学习就告一段落了，下面开始要开始毕业论文，vue ng.js的学习，最好在做个项目，学习ps,加油，加油
哪怕未来多么泥泞，我也要一步一步的走！
手机有毒，我能戒掉手机吧！
