12.20bootstap 基础

响应式布局

body{  //样式
        background:#444;
    }
@media screen and (max-width:500px){    //当屏幕小于500时，的css样式
    body{  //样式
        background:#fff;
    }
}

手机视口

使手机端可以正常显示，不被压缩

字体图标库 fontawesome.io 导入css文件即可用

bootstap 网站：http://v3.bootcss.com

table
加类名：table 自动设置表格样式
table-bordered 边框
table-hover 移入事件
table-condensed 紧凑
tr td 颜色：
加类名：
success
active
warning
info
danger

表单
实现基本的表单样式

//内联表单:
    
//has-error 错误状态,has-success 成功状态,has-warning 警告状态
        电子邮件
        
    
    

        密码
        
    
 

让表单内的元素保持水平排列

 //保持水平
    

        电子邮件
        
 //需要加div在外层
            
        
    
 

单选框、复选框

    

      
        
           Option one is this and that—be sure to include why it's great
      
    
//禁用
    

      
        
        Option two is disabled
      
    

//设置内联一行显示的复选框

    体育


    音乐

设置下拉列表

    1
    2
    3
    4
    5

文本框右侧内置文本图标

    电子邮件
    
    

** 栅栏布局 **

 //container-fluid全屏显示
      

       
        

          

            

            

            

          
        
        

        

        

      
  

图片

    ![](1.jpg)  
    ![](1.jpg) 
    ![](1.jpg) 
    
    ![](1.jpg)

按钮
按钮分组

  

     
       
      按钮 
       
    
  

Link
Button

预定义样式

• 样式 说明
  btn-default 默认样式
  btn-success 成功样式
  btn-info 一般信息样式
  btn-warning 警告样式
  btn-danger 危险样式
  btn-primary 首选项样式
  btn-link 链接样式

从大到小的尺寸

lg large
sm small
xs x-small
Button
Button
Button
Button

//块级换行

Button
Button

列表
//移出默认样式

Bootstrap 框架
Bootstrap 框架
Bootstrap 框架
Bootstrap 框架
Bootstrap 框架

//设置成内联

Bootstrap 框架
Bootstrap 框架
Bootstrap 框架
Bootstrap 框架
Bootstrap 框架

//设置英文文本大小写

Bootstrap 框架
 
Bootstrap 框架
 
bootstrap 框架

//缩略语

Bootstrap框架