BootStrap栅格系统

Boostrap 

---

1.使用Bootstrap  优点:   效率高 ,跨平台.....

一   栅格系统  定义 :  一系列行和列组成的页面布局 会随着屏幕放大,最多展示12个列

  container: 容器  网页上所有内容都放入容器中  Bootstrap定义的容器类 container

 使用Bootstrap

首先引用文件  

<script src="Bootstrap/jquery-3.1.1.js"></script>
    <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="Bootstrap/js/bootstrap.min.js"></script>

Bootstrap  容器的两种布局

1.固定布局  :                      container

2.流式布局  ：                    container-fluid 占满整个页面

创建行       class="row"

栅格参数 列布局：

col-lg-3  lg, large（屏幕>=1200px） PC 大屏幕

col-md-3: md, middle (992px-1200px)  

col-sm-3: sm ,small(768px-992px) 小平板

col-xs-3 (小于758px)  手机