BS3 Grid System
簡介
BS3 (Bootstrap 3) 是一種「自適應」或稱「響應式」(Responsive Web Design - RWD) 網站設計的前端工具。這種設計方式能依照裝置大小，而調整內容排版的方式。BS3 的這種能力來自所謂的媒體查詢 (Media Query)，用以偵測螢幕的大小，及 BS3 的網格系統 (Grid System)，用以在螢幕大小變更時，自行調整內容的排版格式。這篇談的是網格系統。BS3 透過 CSS 類別的方式進行網格的排版。
BS3 的網格系統將螢幕劃分為「容器」(container)、「列」(row)、「欄」(column) 三種元件。每一個網頁中可以包含一至數個容器，每個容器中可包含一至數個列，每一列寬則固定有 12 個欄。這三種元件都以 CSS 類別來定義。要注意的是 BS3 中對「列」的定義和一般定在視覺上所定義的「橫列」不同，BS3 中「列」也代表一種在排版時的容器，在流覽器中排版，一個 BS3 中的「列」在視覺上很可能是數個「橫列」。
在排版時，排版元件可以佔據一個欄寬或橫跨數個欄寬。每一橫列中所有排版元件所佔據的欄寬總和等於 12 個欄寬。不足 12 個欄寬時，剩餘欄寬留白；超過 12 個欄寬時，最後一個排版元件會自動下移，形成視覺上的另一個橫列，但還是在同一「列」的容器中。橫列高則預設以橫列中最高的排版元件的高度為準。此時，每個排版元件本身又自動形成一個容器，內中又可以包含列，從而形成一個巢狀結構。
上圖中有三個排版元件，在螢幕的尺寸為 large 時，左邊的排版元件佔據 4 個欄寬，中間的元件佔據 5 個欄寬，右邊的元件佔據 3 個欄寬，總和正好為 12 個欄寬。BS3 透過媒體查詢的技術將螢幕的尺寸分為 large, medium, small 及 extra small 四種尺寸，各以 lg, md, dm 及 xs 做為代碼，好在 CSS 類別中分別指定排版元件在不同螢幕尺寸中所要佔據的欄寬。排版元件應在 CSS 類別中，指定在不同螢幕大小時的，各要佔據多少欄寬。 例：
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></div>設定 <div> 元件在螢幕為 extra small 時佔據 12 個欄寬，small 時佔 6 個欄寬，medium 及 large 時，都佔 4 個欄寬。 如果沒有指定排版元件在某螢幕尺寸時所要佔據的欄位數時，則以較小一級之螢幕的設定為準，如果都沒有指定，預設為佔據一個欄位的寬度。
範例
範例中建立兩個列，第一個列中含有 6 個元件，第二個列中含有 3 個元件，但在第三個排版元件中又含有一個子列，子列中又包含三個元件，總共 6 個元件，形成巢狀式的結構。當改變流覽器大小時，便可看到 BS3 如何自行調整版面。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width: 1000px;
padding:20px;
}
.row div[class^="col"] {
border: 1px solid white;
background: coral;
font-size: 4em;
text-align: center;
}
.subrow div[class^="col"] {
border: 1px solid white;
background: lightgreen;
font-size: 1em;
text-align: center;
}
</style>
注意在 body{} 樣式中，在設定 body 寬度時，定義的是 max-width，而非 width。如果定義 width，body 限定等於 1000px 時，當螢幕寬度小於 1000px 時，排版就會出現錯誤。.row div[class^="col"{} 及 .subrow div[class^="col"{} 各定義列和子列的樣式。
HTML
<body>
1
2
3
4
5
6
1
2
1
2
3
</body>
HTML 中建立了一個 container 含有兩個 row，第二個 row 中的第三個元件則含有另一個包含了三個元件的 row。形成巢狀結構。
沒有留言:
張貼留言