Bootstrap 学习展示与交流

Hello，大家好。好久没写了，最近心情不错，在2016年的最后一天脱单了。再也不是一个孤单的代码狗了。女朋友最近换了个李宇春式的发型，走在路上总感觉像兄弟，而不是情侣。（笑抽中）
最近敲代码略带拖延，还不是很适应用sublime text 3，编写网页。如有不足和错误之处，请大家多多批评指正，大家一起学习交友，代码之路你我一起奋斗，拒绝孤独感。
同为初学者建议：多去模仿别人的网页，重点在于看清结构，还有一些命名方式，相信很多人都有这种感受：当要自己编写某一部分代码的时候，就会为如何命名犯困（哈哈）。加油！！！
好了，不说废话，直接上码》》》
第一块式关于分类的学习：

    
    
    
    
    
    
    
    
    
    


    
    I am header.
    
 
     
  
      Primary Pagination
      

   
1
   
2
   
3
   
4
   
5
      
      Active Pagination
      
在其中的一个li中添加类：active
      

   
1
   
1
   
1
   
1
   
1
      
      Disabled Pagination
      
使分页无法使用
      

   
1
   
2
   
3
   
4
   
5
      
  
  
      大分页
      

   
1
   
1
   
1
   
1
   
1
      
      

      小分页
      

   
1
   
1
   
1
   
1
   
1
      
  
  
      面包屑导航 breadcrumb
      

   
Home
   
Home Page
   
Home Page Viewers
   
Vacation
      
  
     
 
    

第二块代码关于 badges 和 Label 的

    
    
    
    
    
    
    
    
    
    



    
 learning of Badges
 News 5
 Comments 10
 Updates 5
 

 Recent News 7
    
    Label 类的练习
    
 HelloNews
 HelloNews
 HelloNews
 HelloNews
 HelloNews
 HelloNews
 Ice CreamYES!
    

第三块代码是关于 progressbar的

    
    
    
    
    
    
    
    
    
    


    
 
     
  Primary progressBar
  
      70%
  
     
     
  隐藏进度参数的进度条
  
      
      50% Complete
  
     
 
 
     多色彩进度条
     
  
      40%(primary)
  
     
     

     
  
      50%(info)
  
     
     

     
  
      60%(warning)
  
     
     

     
  
      70%(danger)
  
     
 
    
    
 
     
  
      斑马线进度条
      
只要给类加上 progress-bar-striped，这个写法和table添加斑马线极其相似
      
   
50%
   
      
      

      
   
60%
   
      
      

      
   
70%
   
      
      

      
   
80%
   
      
  
  
      动态斑马线 
      
只要给类加上active即可
      
   
80%
   
      
      

      
   
50%
   
      
      

      
   
60%
   
      
      

      
   
70%
   
      
  
  
      创建一个混合的进度条
      
   
   
   
      
  
     
 
    
    
 
     复习 进度条
     
  
      50% Complete
  
     
     
  
  
  
     
 
    

最后一块是一个实操，模仿某个知名网页的footer，也是我学bootstrap后，想要做的自己创建的公益群官网。

    
    
    
    

    
    
    
    
    
    

a{
    color: #555555;
    text-decoration: none;
}

.main-footer{
    background: #202020;
    padding: 35px 0 0;
    color: #959595;
}
.widget{
    padding: 0px 30px;
}
.widget .title{
    font-size: 1.5em;
    color: #fff;
    margin-top: 0;
    padding-bottom: 7px;
    border-bottom: 1px solid #959595 ;
    margin-bottom: 21px;
    position: relative;
}
.widget .title:after{
    content: "";
    width: 90px;
    height: 1px;
    background: #f4645f;
    position: absolute;
    left: 0;
    bottom: -1px;
}
.recent_sigle_post {
    margin: 20px  0;
    padding-bottom: 20px;
    border-bottom: 1px dashed #303030;  
}
.recent_sigle_post .date{
    margin-top: 8px;
}

.widget .tag-clound a{
    
    border: 1px solid #303030;
    padding: 2px 7px;
    color: #959595;
    line-height: 1.5em;
    display: inline-block;
    margin: 0 7px 7px 0;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;

}
.widget .friend-link a{
    border: none;
}
.friend-link hr{
    border: 0;
    border-top: 1px dashed #303030;
}
.widget .tag-clound a:hover{
    background:#f4645f;
    color: #fff;
    text-decoration: none;
}
.copyright{
    background: #111;
    font-size: 13px;
    text-align: center;
    color: #555555;
    padding-top: 28px;
    padding-bottom: 28px;
    border-top: 1px solid #303030;
}
.copyright span a{
    text-decoration: none;
}