bootstrap初次使用

响应式布局

根据终端的屏幕尺寸的大小，改变页面的结构, 优点：大大降低了开发成本

实现响应式布局：  媒体查询 + 栅格系统

媒体查询

判断页面的大小，显示不同的效果

//当屏幕宽度小于1200px时,执行样式
@media screen and (max-width: 1200px) {
    body {
        background-color: red;
    }
}
//当屏幕宽度大于320px时,执行样式
@media screen and (min-width: 320px) {
    body {
        background-color: red;
    }
}

栅格系统：是一个概念 页面布局工整，有行有列

bootstrap的基本模板

    
    
    
    
    
    
    
    

    
    

    
    
    

    




    Launch demo modal




    

        

            

                ×
                
                
Modal title
            
            

                ...
            
            

                Close
                Save changes
            
        
    

bootstrap的布局容器

 栅格系统：
            1. 必须有一个容器盒子  .container  .container-fluid ,里面必须包含 .row
            2. .row（行）中有列 column，
            3. 内容在列中显示
            4. 列的类名   .col-xs-4  .col-sm-4  .col-md-4  .col-lg-4
            5. container容器设置了 padding-left=15,padding-right, row填充父容器的15px的左右内间距  margin-left
            6. 栅格系统中的列是通过指定1到12的值来表示其跨越的范围，例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
            7. 当列的占比大于 12  ，最后一列另起一行

            列： .col-*-*
            大屏设备： .col-lg-*
            中屏设备： .col-md-*
            小屏设备： .col-sm-*
            超小屏设备： .col-xs-*

            第三个值： 列占了多少分，一行可以分为12分，后面的值为多少就占多分

bootstrap的响应式工具：
        visible:可见的--------高版本建议不要使用
                3.2.0之前的用法：
                     visible-lg: 大屏显示，其他屏隐藏
                     visible-md: 中屏显示，其他屏隐藏
                     。。。
                3.2.0之后的用法：
                     visible-lg-block:  -inline   -inline-block
        hidden:隐藏的 --------在3.2.0版本之后，建议使用hidden
                hidden-lg:  大屏隐藏  其他屏显示
                hidden-md:  中屏隐藏  其他屏显示
                hidden-sm:  小屏隐藏  其他屏显示
                hidden-xs:  超小屏屏隐藏  其他屏显示