Bootstrap3 CSS样式基本用法总结_html/css_WEB-ITnose

出于学习需要，自觉得把基本的bootstrap用法自己敲一遍，对每个用法有个较清晰的印象，所以做了本篇总结，这也是一个巩固的学习过程。

可点击左边的目录，方便速查。

按钮

a,input,button都可以设置为按钮

a标签按钮 button标签按钮

        a标签按钮        button标签按钮   

预置样式

default样式 primary样式 success样式 info样式 warning样式 danger样式 link样式

        default样式        primary样式        success样式        info样式        warning样式        danger样式        link样式

按钮大小

大按钮btn-lg 默认按钮 小按钮btn-sm 超小按钮btn-xs

        大按钮btn-lg        默认按钮        小按钮btn-sm        超小按钮btn-xs

块级按钮-btn-block

块级按钮，与父元素等宽 块级按钮，与父元素等宽

        块级按钮，与父元素等宽        块级按钮，与父元素等宽

禁用状态 class="disabled"

被禁用的按钮

        被禁用的按钮

激活状态 class="active"

激活状态的按钮

        激活状态的按钮

图片

响应式图片-img-responsive

图片的三种形状

表格

基本表格 .table

表格标题 表格标题 表格标题

表格单元	表格单元	表格单元
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元

表格标题	表格标题	表格标题
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元

斑马线表格 .table .table-striped

表格标题 表格标题 表格标题

表格单元	表格单元	表格单元
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元

表格标题	表格标题	表格标题
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元

带边框表格 .table .table-bordered

表格标题 表格标题 表格标题

表格单元	表格单元	表格单元
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元

表格标题	表格标题	表格标题
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元

鼠标悬停表格 .table .table-hover

表格标题 表格标题 表格标题

表格单元	表格单元	表格单元
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元

表格标题	表格标题	表格标题
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元

紧凑表格 .table .table-condensed

表格标题 表格标题 表格标题

表格单元	表格单元	表格单元
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元

表格标题	表格标题	表格标题
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元

响应式表格 .table .table-responsive

表格标题 表格标题 表格标题

表格单元	表格单元	表格单元
表格单元	表格单元	表格单元
表格单元	表格单元	表格单元

      
        


表格标题
              
表格标题
              
表格标题
            


表格单元
              
表格单元
              
表格单元
            

表格单元
              
表格单元
              
表格单元
            

表格单元
              
表格单元
              
表格单元
            


 
    
状态类
    
         
       表格标题 表格标题 表格标题      



状态active
       
状态active
       
状态active
      

状态success
       
状态success
       
状态success
      

状态info
       
状态info
       
状态info
      

状态warning
       
状态warning
       
状态warning
      

状态danger
       
状态danger
       
状态danger
      

         
        


表格标题
              
表格标题
              
表格标题
            


状态active
              
状态active
              
状态active
            

状态success
              
状态success
              
状态success
            

状态info
              
状态info
              
状态info
            

状态warning
              
状态warning
              
状态warning
            

状态danger
              
状态danger
              
状态danger
            


 
    
表单
    
基本表单-.from-control 和.from-group搭配
    
         
      用户名     
     
      密码     
     
      记住密码     
 确定        
         
        
            
              用户名              
            
              密码              
            
                              记住密码                          
            确定          
        

内联表单-.from-inline

用户名

密码

记住密码

确定

用户名

密码

记住密码

确定