BootStrap响应式网格布局学习笔记

Bootstrap：

HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

4层class：xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

简单、灵活地用于搭建Web页面的HTML，CSS，JavaScript的工具集。

Creating Your Own CSS Grid System：

Sometimes using a framework is overkill if all you really need is a grid.

基本网格包括：

1.一个容器 a container：用于设置整个网格的宽度。容器的宽度通常是100%，也可以为更大的设备设置一个最大宽度 max-width 。

2.行 rows：the purpose of the row element is to keep the columns inside it from ovflowing onto other rows.

To achieve this, we'll use the clearfix hack （清除浮动）to make sure everything inside the row stays inside the row.    .row:before, .row:after { content: ""; display:table; clear: both; }

3. columns：有多种方法在CSS中给columns定位（浮动，inline-block, display-table, display-flex）。

最不容易出错并且广泛使用的是浮动float方法：如果columns是空的，那么floated columns 会在每个的顶部堆叠。所以在浮动时，要给每个column一个最小高度，{

 float: left;

min-height: 1px; }

Column Width：用 容器的宽度 / columns的总数。 

4. gutters：设置容器的 box-sizing: border-box ，使得为元素设定的宽度和高度决定元素的边框盒。