bootstrap基础

bootstrap基础：

 bootstrap基于jQuery的，所以在使用js时，需要先引入jQuery.js文件。

很多框架实现的内容都是差不多的，不过有的实现的功能和特性有一点区别，没有必要全部学完，最好有针对性的学习，先打牢基础在观察主要的技术栈。

先下载bootstrap(内容非常小的)

可以在中文网中学习less教程。

另外它还有sass版本的。

 

dist 版本是已经编译完的。

可以下载不是dist文件，来学习bootstrap

 

界面的样式在bootstrap-min-css中

动作在bootstrap-min-js中

 

在bootstrap中默认的盒子模型是border-box

已经设置了

box-sizing:border-box;

 

使用的重置样式是normalize.css，可以在github上选择下载源码；

还有一个是reset.css

可以去cssreset.com中下载；

 

 容器：

流体容器：

container-fluid:占满屏幕width:auto

 

固定容器

container:

阈值：    width

小于768时      auto（auto 加padding向内凹，不居中，100%则加在盒子（两边）外围，居中）

大于等于768px    750px   （720px+槽宽）

大于等于992px   970px（940+槽宽）

大于等于1200px     1170px（1140+槽宽）

 

栅格布局：

row设置一行

col设置一列（默认分成12列）

col-lg-4占据四列

col-lg-8占据八列

 

lg是一个标识，当随着页面的宽度的增加，达到1200px之后才会显示被划分的内容。

之前按照占据一行来计算。

 

栅格源码：

在源码中：

媒体查询的顺序是不能变动的。

它是可以通过达到标准的媒体，覆盖之前达到基准值的媒体。

 

流体容器和固定容器的固定样式

margin-left:auto;

margin-right:auto;

margin-top:15px