BootStrap栅格系统
Boostrap
1.使用Bootstrap 优点: 效率高 ,跨平台.....
一 栅格系统 定义 : 一系列行和列组成的页面布局 会随着屏幕放大,最多展示12个列
container: 容器 网页上所有内容都放入容器中 Bootstrap定义的容器类 container
使用Bootstrap
首先引用文件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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) 手机