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.

基本網(wǎng)格包括：

1.一個容器 a container：用于設(shè)置整個網(wǎng)格的寬度。容器的寬度通常是100%，也可以為更大的設(shè)備設(shè)置一個最大寬度 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的總數(shù)。?

4. gutters：設(shè)置容器的 box-sizing: border-box ，使得為元素設(shè)定的寬度和高度決定元素的邊框盒。