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>

按钮

表单

 

posted @ 2018-06-26 18:09  高圈圈  阅读(311)  评论(0编辑  收藏  举报