Bootstrap5 排版
陳信嘉
學習資料來源
Bootstrap
Bootstrap 5
中文手冊 (翻譯 by 六角學院)
Grid System
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| X-Small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
網頁寬度的分斷點
用 container 包覆網頁
<div class="container">
<!-- Content here -->
</div><div class="container-fluid">
...
</div>container
container-fluid
全寬度
三層式組成網頁
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>container
row
col
-
Auto-layout columns
-
Equal-width
-
Setting one column width
-
Variable width conten
-
全寬度劃分成 12 等分
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
3
3
2
4
4
4
6
6
12
RWD 排版
多欄位的排版
Grid System
平板及手機
Text
僅為概念說明
Responsive Web Design
desktop
tablet
phone