一：进度条

首先我们可以看到进度条如下：

这种效果是如何实现的呢？

进度条代码如下：

     
  
      
    
       60% Complete  
      
     
　　　　

进度条格式：

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后面添加不同的信息来实现不同提示信息的进度条，

     
           
      40%
     
　　

效果如下：

（2）在progress-bar 后面添加 progress-bar-striped来实现条纹效果

（3）在 progress-bar   progress-bar-striped 后面添加 .active类来实现动画效果

添加了动画效果之后，条纹好似向右滚动

（4）将多个 progress-bar 放到同一个 progress内可以实现堆叠效果

 二：列表组

最简单的列表组是一个带有多个列表条目的无序列表

列表代码如下：

     
    
      
        我是列表项1    
    
      
        我是列表项2    
    
      
        我是列表项3    
     

　　

 

效果如下：

分析：

代码结构 ul(class="list-group") >li(class="list-group-item") 

向li元素中加入徽章标签，徽章组件会被自动放到右边

例如代码：

     
    
      
          21          我是带有徽章的列表项    
     
　　

　　

实现效果如下：

1，我们可以把列表项变为链接或者按钮来显示

代码例如：

我是链接列表项 　　

或者按钮的情况：

我是按钮列表项　　

注意：当我们将连接或者按钮作为列表项的时候，我们要将列表项的父元素<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

显示效果：

代码如下：

     
    
      
        我是列表项1  danger    
    
      
        我是列表项2  info    
    
      
        我是列表项3  warning    
    
      
        我是列表项4  success    
     

　4,我们可以给list中添加任何html内容

三：面板

实现一个基本的面板代码如下：

     
      
      
                   Panel   heading      
      
      
      
                     Panel  content       
      
      
      
                    Panel  footer      
      
     

1,给面板添加情景类效果

panel-primary

panel-success

panel-info

panel-warning

panel-danger

例如：

代码如下：

     
    
      
               Panel   heading    
      
    
      
               Panel  content    
      
    
      
               Panel  footer    
      
     
　　

我们可以发现

在panel-head的部分继承了面板的样式

而对于panel-footer的部分，保持灰色

效果图如下：

2，我们可以给面板添加表格或者列表组

     
           
      
       Panel heading
      
           
      
               
       
.......
           
      
           
      
                 
       
                 
       
                 
       
                 
       
           
      
     

　　

结语：

对于bootstrap的学习就告一段落了，下面开始要开始毕业论文，vue  ng.js的学习，最好在做个项目，学习ps,加油，加油

哪怕未来多么泥泞，我也要一步一步的走！

手机有毒，我能戒掉手机吧！