BootStarp4實做入門
5. 容器應用
一、容器基本概念
- 凡是要用 BootStrap 的網格系統來排版，一定要使用容器（container）。
- 一個頁面中可以有多個容器。
- 容器也可以巢狀使用（容器中還有容器）
- 容器有兩種，一種是寬度有上限的容器：
<divclass="container">...</div> - 另一種是全螢幕容器：
<divclass="container-fluid">...</div> - 沒加容器之前。網頁內容會緊貼著邊緣，加上之後，預設就有邊距出現。
二、容器應用：滿版底色+有限寬度
- 在
.container之外多一層<div>並設想要的底色或底圖即可。<divstyle="background-color: #185252;"><divclass="container"></div></div>
BootStarp4實做入門
6. 網格系統
一、使用網格的注意事項
- BootStrap4的網格系統以 flexbox（CSS3）為基礎（取代 table、floats…），因此可以做到自動等寬等高的欄位 、自動平均欄位、垂直置中等以往很難做的功能。
- 同時也代表對 IE9（以下）不再支援，至少要用IE10才行。
- 網格系統必須在容器（
.container）中才有作用
二、指定欄寬用法
- 一般使用範例：
<divclass="container"><divclass="row"><divclass="col-sm-3">側邊三欄</div><divclass="col-sm-9">右邊九欄</div></div></div> .row代表一個橫列，以確保裡面的欄位可以對齊、排序。.col-sm式斷點前綴詞，後面接的是欄位寬度設定，預設滿版為12欄- 若超過12欄，則會自動新增一個
.row
三、自動等寬用法
- 在 BootStrap4 中也可以這樣使用等寬欄位：
<divclass="container"><divclass="row"><divclass="col">col 等寬 1/5</div><divclass="col">col 等寬 2/5</div><divclass="col">col 等寬 3/5</div><divclass="col">col 等寬 4/5</div><divclass="col">col 等寬 5/5</div></div><divclass="row"><divclass="col-sm">col-sm 等寬 1/5</div><divclass="col-sm">col-sm 等寬 2/5</div><divclass="col-sm">col-sm 等寬 3/5</div><divclass="col-sm">col-sm 等寬 4/5</div><divclass="col-sm">col-sm 等寬 5/5</div></div></div> - 上方的用法就是不管螢幕多大，都要分成五欄
- 下方的用法是當螢幕在 576 以上時，才分五欄，在 576 以下的時候，會自動調成單欄式。
小技巧：
輸入 .row>.col-sm*5 然後按 tab 鍵，可以快速產生以上語法
四、指定欄寬+自動欄寬
- 可以指定某幾欄的欄寬，其餘的自行自動平均
<divclass="container"><divclass="row"><divclass="col-sm">自動平均分配</div><divclass="col-sm-7">指定佔 7 欄</div><divclass="col-sm">自動平均分配</div></div></div>
五、根據內容多寡自動調整欄寬
- 若不確定該站多少欄寬，亦可讓電腦自行根據內容多寡來判斷：
<divclass="container"><divclass="row"><divclass="col-sm">自動平均分配</div><divclass="col-sm-auto">根據中間內容多多寡來判斷欄寬</div><divclass="col-sm">自動平均分配</div></div></div>
六、不同斷點的欄寬搭配
- 可以在同一個欄位根據不同斷點給予不同大小
<divclass="container"><divclass="row"><divclass="col">自動平均分配</div><divclass="col-sm-6 col-md-7 col-lg-8">根據不同螢幕大小來指定中間欄位欄寬</div><divclass="col">自動平均分配</div></div></div> - 如果是只有用col，那麼，任何裝置都會按照 col 設定來分欄位（不管螢幕多大多小）
- 可以同時用多個斷點，例如：
col-sm-4 col-md-3，意思就是用手機看時，該區域寬度佔4欄，用平板看時，該區域寬度佔3欄。 - 詳情：http://bootstrap.hexschool.com/docs/4.0/layout/grid/
BootStarp4實做入門
6-1 斷點
一、什麼是斷點？
- 還是不明白吧！（廢話）所謂斷點，在這裡指的是當螢幕尺寸符合斷點範圍時，才會根據斷點設定來實施網格系統（例如左邊9欄，右邊3欄），若是不符合斷點範圍，則自動調整為一欄式（通常是在手機瀏覽的情況下）。
- 詳情：http://bootstrap.hexschool.com/docs/4.0/layout/overview/#%E9%9F%BF%E6%87%89%E5%BC%8F%E6%96%B7%E9%BB%9E
二、BootStrap4 的斷點
sm >= 576 px
md >= 768 px
lg >= 992 px
xl >= 1200 px
- 如果寫：
.col-sm-3，意思就是當螢幕 >= 576px 時，就會將此區域的寬度設為螢幕的 3/12。 - 若同時寫：
col-sm-4 col-md-3。意思就是當螢幕 >= 768 px時，就會將此區域的寬度設為螢幕的 3/12，若螢幕 < 768 但 >= 576px 時，就會將此區域的寬度設為螢幕的 4/12。
BootStarp4實做入門
6-2 BootStrap3 及 BootStrap4 的斷點比較
- BootStrap4 的斷點前綴詞範圍和BootStrap3 不同：
- 最小斷點改為 575px，
- 又多了一個
col-xl前綴詞， - 並將
col-xs改為col-， - 此外，BootStrap3 一定要設寬度，例如
col-sm-3、col-sm-9，但在 BootStrap4 允許不設寬度，例如四組col-sm時，每個欄位會自動調為 25%，因此，可以輕鬆做到五欄、七欄、八欄...等效果。
- 斷點差異比較表：
575 px 以下 576 ~ 767 px 768 ~ 991 px 992 ~ 1199 px 1200 px 以上 BootStrap3 前綴 col-xs col-sm col-md col-lg BootStrap4 前綴 col- col-sm col-md col-lg col-xl 對應裝置 any 手機 平板 桌機螢幕 大螢幕
BootStarp4實做入門
6-3 欄位排序
- 最常見的例子是三欄式畫面（左側邊+主內容+右側邊），在手機觀看，變成單欄式時，希望變成：（主內容→左側邊→右側邊）的順序。
- 利用
.order就能調整：<divclass="container"><divclass="row"><divclass="col-sm-7 order-sm-2">在中間的主內容區</div><divclass="col-sm order-sm-1">在左邊的側邊欄</div><divclass="col-sm order-sm-3">在右邊的側邊欄</div></div></div> - 寫的時候，請依照在單欄式情況下，希望呈現的先後順序來寫，然後再利用 order 來調整位置。在三欄式時（未自適應前），就會按照 order 的順序來排，在單欄式時，就會忽略 order，依照語法順序來排。
- 範例：
BootStarp4實做入門
6-4 欄位推移
- BootStrap4 裡面已經沒辦法用
.col-offset-x或者.offset-sm-x來跳過幾欄。 - 可以利用
.mr-auto來將右邊剩下的空位謄出來。<divclass="container"><divclass="row"><divclass="col-2">col 等寬 1/3</div><divclass="col-2 mr-auto">col 等寬 2/3</div><divclass="col-2">col 等寬 3/3</div></div>ass="col-2">col 等寬 3/3</div></div></div> - 或者用
.mx-auto把空位平均分散到左右兩邊<divclass="container"><divclass="row"><divclass="col-2">col 等寬 1/3</div><divclass="col-2 mx-auto">col 等寬 2/3</div><divclass="col-2">col 等寬 3/3</div></div></div> - 或用
.ml-auto把空位放到左邊<divclass="container"><divclass="row"><divclass="col-2">col 等寬 1/3</div><divclass="col-2 ml-auto">col 等寬 2/3</div><divclass="col-2">col 等寬 3/3</div></div></div> - 範例：
BootStarp4實做入門
6-5 巢狀欄位
.row裡面還可以有.row，子.row會以父.row的寬度為依據來進行寬度調整- 例如：
<divclass="container"><divclass="row"><divclass="col-sm-8">主內容<divclass="row"><divclass="col-sm-3">欄</div><divclass="col-sm-6">欄</div><divclass="col-sm-3">欄</div></div></div><divclass="col-sm-4">側邊<divclass="row"><divclass="col-sm-3">欄</div><divclass="col-sm-6">欄</div><divclass="col-sm-3">欄</div></div></div></div></div> - 範例：
BootStarp4實做入門
6-6 Flexbox方向性
- 水平：
.flex-row（這是預設值） - 反向水平：
.flex-row-reverse - 垂直：
.flex-column - 反向垂直：
.flex-column-reverse - 範例：
BootStarp4實做入門
7. 間隔工具
- 間隔工具的組成為「屬性邊緣-尺寸」
- 屬性設定:
- m - 這個 class 會設定 margin
- p - 這個 class 會設定 padding
- 邊緣設定:
- t - 這個 class 會設定 margin-top 或 padding-top
- b - 這個 class 會設定 margin-bottom 或 padding-bottom
- l - 這個 class 會設定 margin-left 或 padding-left
- r - 這個 class 會設定 margin-right 或 padding-right
- x - 這個 class 會設定 *-left 和 *-right
- y - 這個 class 會設定 *-top 和 *-bottom
- 空白 - 如果邊緣 class 未加入則會設定 margin 或 padding 在元素的四個邊緣
- 尺寸設定:
- 0 - 這個 class 會設定 margin 或 padding 的樣式值為 0
- 1 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * .25
- 2 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * .5
- 3 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer
- 4 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * 1.5
- 5 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * 3
- 詳情：http://bootstrap.hexschool.com/docs/4.0/utilities/spacing/
後續內容省略......
【資料引用資訊】
google關鍵字:BootStarp4實做入門
沒有留言:
張貼留言