Bootstrap4.x學習筆記【二】
阿新 • • 發佈:2020-07-16
佈局系統
一、佈局介紹
1. 對於容器佈局,Bootstrap4.x 提供了.container 和.container-fluid 兩種;
2. 這兩種樣式是啟用佈局柵格系統最基本的要素;
3. .contianer 是固體自適應方式,.container-fluid 是流體 100%自適應方式;
4. 容器佈局可以巢狀,但一般來說,不推薦且很少使用到:
5. 自適應對應的響應式方式如下 media:
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
6. 從響應式的 media 可以看出,Bootstrap4 是以移動端為優先的。
二、柵格系統
柵格系統有點像田字格本子,大小整齊劃一。
1. Bootstrap4.x 的柵格系統是一個以移動為優先的網格系統;
2. 基於 12 列的佈局、5 種響應尺寸(面向不同螢幕裝置);
3. 完全使用 flexbox 流式佈局構建的,完全支援響應式標準;
4. 具體採用 div 容器的行、列和對齊內容來構建響應式佈局;
三、柵格系統展示
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>佈局系統</title> <!-- 引入Bootstrap CSS --> <link rel="stylesheet" href="../css/bootstrap.css"> <!-- 移動裝置優先 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 為了顯示的更加清楚,可以給行列加對比鮮明的 CSS 來觀察 --> <style> .row { border: dashed 1px red; } .col-sm,.col-sm-4,.col-sm-8,.col-sm-2 { border: solid 1px blue; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-sm">第一列</div> <div class="col-sm">第二列</div> <div class="col-sm">第三列</div> </div> </div> <br/> <!-- 採用.container-fluid,那麼會 100%佔用螢幕寬度 --> <div class="container-fluid"> <div class="row"> <div class="col-sm">第一列</div> <div class="col-sm">第二列</div> <div class="col-sm">第三列</div> </div> </div> <br/> <!-- sm是螢幕型別 之一--> <!-- 在.col-sm-*的星號位置,還可以強制設定每列所佔有的柵格列; --> <div class="container-fluid"> <div class="row"> <div class="col-sm-4">第一列</div> <div class="col-sm-4">第二列</div> <div class="col-sm-2">第三列</div> </div> </div> <br/> <div class="container-fluid"> <div class="row"> <div class="col-sm-8">第一列</div> <div class="col-sm-4">第二列</div> </div> </div> <!-- 引入jQuery檔案 --> <script src="../js/jquery-3.5.1.js"></script> <script src="../js/bootstrap.js"></script> </body> </html>
四、柵格等級
柵格系統中有五個柵格等級,具體如下表:
超小螢幕 <576px |
小螢幕 >=576px |
中等螢幕 >=768px |
大螢幕 >=992px |
超大螢幕 >=1200px |
|
字首 | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
列數 | 12列 |
如果同時是使用兩個或以上的級別,並且比例相同,則遵循移動端優先的原則;
使用.w-100 可以切割柵格欄位,進行分行操作;
<div class="container"> <div class="row"> <div class="c col">第一列</div> <div class="c col">第二列</div> <div class="w-100"></div> <div class="c col">第三列</div> <div class="c col">第四列</div> </div> </div>
如果強制設定了 col-3 數值,那切割後,將不會自動填充;
<div class="container"> <div class="row"> <div class="c col-sm-4 col-xl-12 col-lg-6">第一列</div> <div class="c col-sm-4 col-xl-12 col-lg-6">第二列</div> <div class="c col-sm-4 col-xl-12 col-lg-12">第三列</div> </div> </div>