目錄

• 導言
• 1.什么是柵格化布局
• 2.開始柵格化布局

@(Bootstrap)

導言

前面我們講了如何安裝使用bootstrap框架，下面我們將會學習bootstrap的各種框架結構，布局。在這篇文章中將講述如何使用柵格化布局

1.什么是柵格化布局

Bootstrap內置了一套響應式、移動設備優先的流式柵格系統，隨著屏幕設備或視口（viewport）尺寸的增加，系統會自動分為最多12列。
我在這里是把Bootstrap中的柵格系統叫做布局。它就是通過一系列的行（row）與列（column）的組合創建頁面布局，然后你的內容就可以放入到你創建好的布局當中。下面就簡單介紹一下Bootstrap柵格系統的工作原理：
網格系統的實現原理非常簡單，僅僅是通過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調整內外邊距，最后結合媒體查詢，就制作出了強大的響應式網格系統。Bootstrap框架中的網格系統就是將容器平分成12份。

2.開始柵格化布局

a創建一個容器

我們要先創建一個容器來存放我們的內容，這個容器的名字加containner,我們來看一下bootstrap文檔中的源碼，這個樣式在bootstrap.css文件中,下面是bootstrap中的源碼

.container {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto; } @media (min-width: 768px) {.container {width: 750px;} } @media (min-width: 992px) {.container {width: 970px;} } @media (min-width: 1200px) {.container {width: 1170px;}

margin-left和magin-right都設置為auto，文檔會居中顯示并適配各種設備

b.創建合適的柵格系統

我們看下bootstrap官網給的解釋

Three equal columns
Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

row代表行，bootstrap將劃分為12等分，用col-md-num表示，其中num是自己定義的最大為12，并且要保證自己設置的col總和不能超過12
下面我們給個實例，部分源碼

<h1>Hello,World!</h1> <div class="container"><div class="row"><div class="col-md-1">王</div><div class="col-md-1">文</div><div class="col-md-1">杜</div><div class="col-md-1">是</div><div class="col-md-1">個</div><div class="col-md-1">大</div><div class="col-md-1">傻</div><div class="col-md-1">逼</div><div class="col-md-1">嗎</div><div class="col-md-1">？</div><div class="col-md-1">是</div><div class="col-md-1">的</div></div> </div> <div class="container"> <div class="row"><div class="col-md-4">I</div><div class="col-md-4">LOVE</div><div class="col-md-4">YOU</div></div> </div>

下面為網頁效果

c.進行列的嵌套

例如我們已經創建一個num為8的列，我們可以在列里繼續嵌套列為6的列，這樣就為原來的3/8，官方解釋如下

d.單元格的其他類

　　　.c0l-xs-　　無論屏幕寬度如何，單元格都在一行，寬度按照百分比設置；試用于手機；
　　　.col-sm-　　屏幕大于768px時，單元格在一行顯示；屏幕小于768px時，獨占一行；試用于平板；
　　　.col-md-　　屏幕大于992px時，單元格在一行顯示；屏幕小于992px時，獨占一行；試用于桌面顯示器；
　　　.col-lg-　　屏幕大于1200px時，單元格在一行顯示；屏幕小于1200px時，獨占一行；適用于大型桌面顯示器

e.列偏移

5、列偏移
有的時候，我們不希望相鄰的兩個列緊靠在一起，但又不想使用margin或者其他的技術手段來。這個時候就可以使用列偏移（offset）功能來實現。使用列偏移也非常簡單，只需要在列元素上添加類名“col-md-offset-*”(其中星號代表要偏移的列組合數)，那么具有這個類名的列就會向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示該列向右移動4個列的寬度。

以上就是柵格化布局的內容

---

參考文檔：bootstrap官方文檔關于柵格化布局的參考
腳本之家：Bootstrap每天必學之柵格系統（布局）
Jerry_Tao的博客園

轉載于:https://www.cnblogs.com/yohann/p/6863414.html

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的Bootstrap学习之二：栅格化布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。