BootStarp栅格系统

Bootstrap

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

中文官网: Bootstrap中文网

下载安装包。

开发中，我们都是按需导入，简单理解，需要用到啥，我们复制那个文件，没有必要都放入，提高性能。

使用步骤：

1.复制css文件

：引入到html中

<link rel="stylesheet" href="./css/bootstrap.min.css">

2.复制字体图标文件夹

 

3.如果需要js，则复制js文件，并引入html文件中

<script src="./js/bootstrap.min.js"></script>

4.使用BootStarp内部预定义好的类即可。

<div class="container">内容</div>

栅格系统

栅格系统(gridsystems),也叫“网格系统，它就是通过一系列的行（row）与列（column）的组合创建页面布局。

简单说，栅格系统也是一种布局方式。 BootStrap 给咱们内置好了一套布局系统。

BootStrap3默认将网页分成12等份

关于BootStarp的屏幕大小


/* 超小屏幕（手机，小于等于 768px） */
/*  Bootstrap 中是默认的代码*/
.col-xs-
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
.col-sm-

/* 中等屏幕（桌面显示器，大于等