bootstrap4 網格系統
bootstrap 提供了一套響應式、移動裝置優先的流式網格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多 12 列。
bootstrap 4 的網格系統是響應式的，列會根據螢幕大小自動重新排列。
網格類
bootstrap 4 網格系統有以下 5 個類:
.col- 針對所有裝置
.col-sm- 平板 - 螢幕寬度等於或大於 576px
.col-md- 桌面顯示器 - 螢幕寬度等於或大於 768px)
.col-lg- 大桌面顯示器 - 螢幕寬度等於或大於 992px)
.col-xl- 超大桌面顯示器 - 螢幕寬度等於或大於 1200px)
網格系統規則
bootstrap4 網格系統規則:
class
="row"
>
class
="col-*-*"
>
div>
div>
class
="row"
>
class
="col-*-*"
>
div>
class
="col-*-*"
>
div>
class
="col-*-*"
>
div>
div>
class
="row"
>
class
="col"
>
div>
class
="col"
>
div>
class
="col"
>
div>
div>
第乙個例子：建立一行(class
="row"
>
)。然後， 新增是需要的列( .col-*-* 類中設定)。
第乙個星號 (*) 表示響應的裝置: sm, md, lg 或 xl,
第二個星號 (*) 表示乙個數字, 同一行的數字相加為 12。
第二個例子: 不在每個 col 上新增數字，
讓 bootstrap 自動處理布局，同一行的每個列寬度相等：
兩個 "col" ，每個就為 50% 的寬度。
三個 "col"每個就為 33.33% 的寬度，
四個 "col"每個就為 25% 的寬度，
以此類推。同樣，你可以使用 .col-sm|md|lg|xl 來設定列的響應規則。
class
="row"
>
class
="col"
>
.coldiv
>
class
="col"
>
.coldiv
>
class
="col"
>
.coldiv
>
div>
class
="col-sm-3"
>
.col-sm-3div
>
class
="col-sm-3"
>
.col-sm-3div
>
class
="col-sm-3"
>
.col-sm-3div
>
class
="col-sm-3"
>
.col-sm-3div
>
class
="row"
>
class
="col-sm-4"
>
.col-sm-4div
>
class
="col-sm-8"
>
.col-sm-8div
>
div>
以下例項演示了在桌面裝置的顯示器上兩個列的寬度各佔 50%，如果在平板端則左邊的寬度為 25%，右邊的寬度為 75%, 在移動手機等小型裝置上會堆疊顯示。
class
="container-fluid"
>
class
="row"
>
class
="col-sm-3 col-md-6"
>
>
p>
div>
class
="col-sm-9 col-md-6"
>
>
p>
div>
div>
div>
以下例項在平板、桌面、大桌面顯示器、超大桌面顯示器的寬度比例為分別為：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, 在移動手機等小型裝置上會堆疊顯示。
class
="container-fluid"
>
class
="row"
>
class
="col-sm-3 col-md-6 col-lg-4 col-xl-2"
>
>
p>
div>
class
="col-sm-9 col-md-6 col-lg-8 col-xl-10"
>
>
p>
div>
div>
div>
偏移列通過 offset- - 類來設定。第乙個星號( * )可以是 sm、md、lg、xl，表示螢幕裝置型別，第二個星號( * )可以是 1 到 11 的數字。
為了在大螢幕顯示器上使用偏移，請使用 .offset-md-* 類。這些類會把乙個列的左外邊距（margin）增加 * 列，其中 * 範圍是從 1 到 11。
例如：.offset-md-4 是把.col-md-4 往右移了四列格。
class
="row"
>
class
="col-md-4"
>
.col-md-4div
>
class
="col-md-4 offset-md-4"
>
.col-md-4 .offset-md-4div
>
div>
class
="row"
>
class
="col-md-3 offset-md-3"
>
.col-md-3 .offset-md-3div
>
class
="col-md-3 offset-md-3"
>
.col-md-3 .offset-md-3div
>
div>
class
="row"
>
class
="col-md-6 offset-md-3"
>
.col-md-6 .offset-md-3div
>
div>
Bootstrap4 網格系統
col 第乙個 是裝置型別，第二個 是控制項寬度的佔比 螢幕被等分為12，col 1寬度是1 12，col 6寬度是50 col 12寬度是100 給應用了class的element，新增上style background color red 通過背景色可以比較方便地看出效果。bootstrap 4...
BootStrap4 基礎模版
新建 html 頁面，複製下方 粘入 bootstrap4 基礎模版 doctype html en utf 8 viewport content width device width,initial scale 1,shrink to fit no stylesheet href hello,wo...
Bootstrap4教程導航
bootstrap4 教程 bootstrap4 安裝使用 bootstrap4 網格系統 bootstrap4 文字排版 bootstrap4 顏色 bootstrap4 bootstrap4 影象形狀 bootstrap4 jumbotron bootstrap4 資訊提示框 bootstrap...