檢驗前端的乙個基本功就是考查他的布局。很久之前聖杯布局風靡一時，這裡就由聖杯布局開始，到最流行的bootstrap柵格布局。
聖杯布局
聖杯布局是一種三列布局，兩邊定寬，中間自適應：
聖杯布局的原理就是當子元素處於浮動狀態時，設定負margin，子元素會疊蓋到兄弟元素之上。
那麼能否用現在想要將其中藍色區域再次劃分成三個區域，相信有很多種辦法。但能否通過巢狀的方式實現呢？我們可以試一下：
可以看到藍色區域已被劃分成三個區域。這個過程是不是很像bootstrap中的柵格巢狀？誠然，利用聖杯布局我們可以實現一套簡單的柵格系統，詳情請看這篇文章：
雙飛翼布局介紹-始於**ued 裡面介紹的雙飛翼布局實際上就是聖杯布局的變體。但柵格布局就是簡單的巢狀出來的嗎，很明顯答案是否定的。柵格設計系統（又稱網格設計系統、標準尺寸系統、程式版面設計、瑞士平面設計風格、國際主義平面設計風格），是一種平面設計的方法與風格。運用固定的格仔設計版面布局，其風格工整簡潔，已成為今日出版物設計的主流風格之一。那麼如何來設計柵格系統呢？我們往下看
柵格系統的原理
假設：flowline的寬度為w，column的寬度為c，gutter的寬度為g，margin的寬度為m，柵格列數為n
w = c*n + g*(n-1) + 2m；g的寬度通常為m的兩倍，所以：
w = (c+g) * n；把c+g記為c，得：
w = c * n;
大部分的柵格系統都是此公式的變體。
bootstrap的柵格系統
下面我們將一起來看一下常見的柵格布局的設計和bootstrap中的設計實現。bootstrap中合理的使用柵格布局，必須將列放入row中，而row必須放入container中。container類在布局中主要有兩個作用：
在不同的寬度區間內（響應式斷點）提供寬度限制。當寬度變化時，採用不同的寬度。
提供乙個padding，阻止內部內容觸碰到瀏覽器邊界。
bootstrap中使用padding代替上文中的margin。大小為15px，如下圖所示，粉紅色為padding大小。
row是column的容器，每個row中的column之和必須為12，不過我們可以通過巢狀的方式擴充套件。row的左右margin都為-15px，用來抵消container中的padding，如下圖藍色部分所示：
row的這種設計主要為了方便巢狀，後文中會提到。
colomn是柵格系統的主角，每個column左右padding都為15px，上文中row的負margin抵消了container的padding，所以為每個column設定padding就是為了防止內容直接觸碰邊界，同時不同的column之間擁有30px的卡槽（gutter）。如下圖黃色部分所示：
現在想想上文中提到的公式：w = c * n;
上文提到row的負margin設計主要為了巢狀，如果要在column中巢狀column首先要把被巢狀的column放到row中，把row放到作為容器的column中，而不需要在放置乙個container。如下圖中藍色所示，是放入column中的row的負margin區域。
現在將被巢狀的column放入row中，如下圖所示，上層column便是起到了container的作用。
如此我們便看到了bootstrap柵格系統的精妙所在。
css筆記 bootstrap柵格系統布局原理
你們知道bootstrap柵格系統布局的原理嗎？今天突然被老大問了一下，有點記憶混淆了，特此記錄 如果你是第一次接觸bootstrap，你一定會為他的柵格化布局感到敬佩，他為我們提供了一套響應式的布局方案。簡單地講 1 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕裝置或視...
2 柵格布局
字進行頁面開發,最頭疼的問題在於 頁面寫完了,發現換個瀏覽器不支援了 顯示風格瞬間改變 如果要真想實現柵格,那麼就必須有乙個可以容納第乙個柵格的行,而多個柵格行最終就組成了乙個頁面.在整個bootstrap之中最多隻能夠存在有12個柵格 如果現在是乙個寬容器的視窗,那麼整個柵格都會按照寬螢幕的方式完...
Bootstrap柵格布局
bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。柵格系統用於通過一系列的行 row 與列 column 的組合來建立頁面布局，你的內容就...