了解Bootstrap

1、Bootstrap简介：Bootstrap来自Twitter（推特），是目前最受欢迎的前端框架。

中文官网：Bootstrap中文网

       官网：Bootstrap · The most popular HTML, CSS, and JS library in the world.

2、框架：顾名思义就是构架，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制的样式库，组件和插件。使用者要按照框架所规定的某种规范进行开发。

3、Bootstrap致力于提供一个简介，优雅的基础，以此作为立足点。我们使用Reboot,把一系列元素特征的CSS修改放在一个文件里。

4、路线方针：系统重置建立新的规范化，只允许元素选择器向各个HTML元素提供了自有的风格，额外的样式只通过明确的.class类来规范。

• 重置浏览器默认值，使用rem作为尺寸对各单位，代替em用于指定可缩放的组件的间隔与缝隙。
• 最大化避免使用margin-top,防止使用它造成的垂直外排版（边距）混乱所造成之意想不到结果。更重要的是，一个单一方向的margin是一个简单的构思模型。
• 为了易于跨设备缩放，block块元素必须使用rem作为margin的单位。
• 保持font相关属性最小的声明，尽可能的使用inherit属性，不影响容器溢出。

5、Bootstrap使用四步：

• 创建文件夹结构

• 创建html骨架结构

• 引入相关样式文件

6、如何使用里面的内容：

• 直接拿Bootstrap预先定义好大样式来使用
• 修改Bootstrap原先的样式，注重权重问题
• 学号Bootstrap的关键在于知道它定义了那些样式，以及这些样式能实现什么样的效果。

7、布局容器：Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好了这个类，叫.container，它提供了两个作此用处的类。

8、container类：响应式布局的容器 固定高度

9、container-fluid类：

• 流式布局容器 百分百宽度
• 占据全部视口的容器
• 适用于单独做移动端开发

10、Bootstrap栅格系统：栅格系统英文为：“grid systems,”也有人翻译为“网格系统”。它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

11、Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加。系统会自动分为最多12列。宽度是固定的，但是在不同的屏幕下，再把它划分为12等份。

12、例如：

13、页面的矩形会随着缩放的大小改变而改变，矩形的像素大小也会改变。