最近需要寫乙個既適應pc端 又適應手機端 ，最重要的是還要支援手機橫屏
！！！所以用到了布局神器-----
bootstrap 柵格系統
先放效果圖：
pc端：
我的需要適應pc、手機、以及橫屏，所以類名這裡是這樣寫的：
響應式網格系統隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。（row）
解釋：col-xs- 對應超小裝置（螢幕<768 px ）手機
col-sm- 對應小型裝置（螢幕》768 px 螢幕<992 px ）平板電腦
col-md- 對應中型裝置（螢幕》992 px 螢幕<1200 px ）台式電腦
col-lg- 對應大型裝置（螢幕》1200 px）台式電腦
1、col-xs-12就是在螢幕小於768px時，會在橫向上充滿，佔據整個div
2、在col-xs-0 col-sm-2 col-md-2 這個div內，我什麼都沒寫，但是在螢幕大於768px的時候，這個div會佔據一部分大小。可以理解為就是乙個有一定大小的空的div（就是用來佔位置的）
3、因為既要適應手機端，還有電腦端，就把這幾個類名都寫在一起，在螢幕大小改變的時候，會自動調到對應的樣式
柵格最最最最核心！！！！
@media
@media screen and (max-width: 992px) and (min-width: 768px)
}
@media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。
col-xs- 、col-sm- 、 col-md-......這些類名背後對應的樣式就是通過@media來實現的！！！！！
Bootstrap 柵格系統
目錄 1 簡介 2 柵格選項 3 列偏移 4 巢狀列 5 列排序 1 簡介 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕裝置或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義classe，還有強大的mixin用於生成更具語義的布局。2...
Bootstrap柵格系統
bootstrap基本模板 bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。頁面中的一行，比例可以自己定義，但必須保證是12列，如果缺少...
bootstrap 柵格系統
cdn 網路 託管 優點 減少伺服器請求 柵格系統的容器 固定寬居中 container 0 768移動端 768 992pad端 992 1200pc端 1200 pc端寬屏 xs sm md lg 100 750 970 1170 全屏 百分百 container fluid 注意 子元素若要實...