Web前端 — Bootstrap（3）

Bootstrap本次知识点

1.表格

2.按钮

3.图片

1.表格

（1）基本表格

<table class="table">

（2）条纹表格

<table class="table table-striped">

（3）边框表格

<table class="table table-bordered">

（4）悬停表格

<table class="table table-hover">

（5）精简表格

<table class="table table-condensed">

（6）状态表格

状态表格有：active、success、info、warning、danger

  
  


   
   


    
    


     
     


    
    

    
    


     
     

      
      <div class="table-responsive">
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
    
      <table class="table">
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
        
      <caption>table基本样式
      </caption>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
        
      <thead>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
        
      <tr>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <th>学号
      </th>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <th>姓名
      </th>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <th>年龄
      </th>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <th>学历
      </th>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <th>学号
      </th>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <th>姓名
      </th>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <th>年龄
      </th>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <th>学历
      </th>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
        
      </tr>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
        
      </thead>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
        
      <tbody>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
        
      <tr class="active">
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>001
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>zs
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>20
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>大专
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
        
      </tr>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
        
      <tr class="success">
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>001
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>zs
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>20
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>大专
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
        
      </tr>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
        
      <tr class="danger">
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>001
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>zs
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>20
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>大专
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
        
      </tr>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
        
      <tr class="info">
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>001
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>zs
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>20
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>大专
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
        
      </tr>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
        
      <tr class="warning">
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>001
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>zs
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>20
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
            
      <td>大专
      </td>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
        
      </tr>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
        
      </tbody>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
    
      </table>
     
     

    
    

  
  

（7）隐藏某一行

<tr class="sr-only">

（8）响应式表格

<div class="table-responsive">

2.按钮

（1）按钮标签

  
  


   
   


    
    


     
     


    
    

    
    


     
     

      
      //转化成普通按钮
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
       
      <a href="###" class="btn btn-default">Link
      </a>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
       
      <button class="btn btn-default">Button
      </button>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     
       
      <input type="button" class="btn btn-default" value="input">
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

             注意：为了跨浏览器展现，尽量使用button
     
     

    
    

  
  

（2）按钮大小

.btn-ln:这会让按钮看起来比较大。

<button class="btn btn-default btn-lg">按钮</button>

.btn-sm:这会让按钮看起来比较小。

<button class="btn btn-default btn-sm">按钮</button>

.btn-xs:这会让按钮看起来特别小。

<button class="btn btn-default btn-xs">按钮</button>

（3）预定义样式

.btn-default:默认标准按钮

<button class="btn btn-default">按钮</button>

.btn-primary:首选项样式

<button class="btn btn-primary">主选项</button>

.btn-success:成功样式

<button class="btn btn-success">成功</button>

.btn-info:一般信息样式

<button class="btn btn-info">信息</button>

.btn-warning:警告样式

<button class="btn btn-warning">警告</button>

.btn-danger:危险样式

<button class="btn btn-danger">危险</button>

.btn-link:链接样式

<button class="btn btn-link">链接</button>

（4）块级按钮

.btn-block:块级按钮（拉伸至父元素的100%的宽度）

  
  


   
   


    
    


     
     


    
    

    
    


     
     

      
      <button class="btn btn-default btn-block">按钮</button>
     
     

    
    


   
   


    
    


     
     


    
    

    
    


     
     

      
      <button class="btn btn-default btn-block btn-lg">按钮
      </button>
     
     

    
    

  
  

（5）激活状态

<button class="btn active">Button</button>

（6）禁用状态

<button class="btn active disabled">Button</button>

3.图片

.img-rounded:圆角（IE8不支持）。

<img src="img/download.png" alt="" class="img-rounded"/>

.img-circle:圆角（IE8不支持）。

<img src="img/download.png" alt="" class="img-circle"/>

.img-thumbnail:缩略图功能。

<img src="img/download.png" alt="" class="img-thumbnail"/>

.img-responsive:图品响应式（将很好的扩展到父元素）。

<img src="img/002.jpg" alt="" class="img-responsive"/>

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/80352880

本文为Roger_CoderLife的原创文章，著作权归作者所有，转载请注明原文出处，欢迎转载！