js——bootstrap框架

前端开发框架，移动优先，响应式布局开发。

网址：www.bootcss.com

　　js有一个特性是阻塞加载，也就是说js文件如果没有加载完，不会进行后面的加载，所以例子中会把js文件写在body的最后一句，但是实际开发不会这样。

容器：

　　1.container：固定宽度

　　　　尺寸：1170、970、750、100%（这个要记住）

　　2.container-fluid：流体布局

bootstrap 栅格系统：

　　bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类型，这些样式类组成了一套响应式、移动设备优先的流式栅格系统

　　1.col-lg-

　　2.col-md-

　　3.col-sm-

　　4.col-xs-

bootstrap响应式查询区间：

　　1.>=768

　　2.>=992

　　3.>=1200

　　

deom1：(改变窗口大小逐渐变化)

<div class="container">
        <div class="row">
            <!--每个div占3等份，四个div就是12-->
            <div class="col-lg-3 col-md-4 col-sm-6"><div class="pic"></div></div>
            <div class="col-lg-3 col-md-4 col-sm-6"><div class="pic"></div></div>
            <div class="col-lg-3 col-md-4 col-sm-6"><div class="pic"></div></div>
            <div class="col-lg-3 col-md-4 col-sm-6"><div class="pic"></div></div>
        </div>
</div>

demo2:(列偏移)

    <div class="container">
        <div class="row">
            <div class="col-lg-3">01</div>
            <div class="col-lg-3 col-lg-offset-2">02</div>
            <div class="col-lg-3 col-lg-offset-1">03</div>
        </div>
    </div>

按钮

表单