(2) Bootstrap 5 筆記

表格 (Tables)

  • 要有 thead
  • 要有 tbody 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td colspan="2">Larry the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
</table>

Flex 與網格系統介紹

基礎格線觀念

會以 960px 為基準，也是因為早期電腦螢幕通常為1024px，960px 的設計是最為剛好。

而 12 欄則是較多數字的公倍數。

  • Total Width 總寬度
  • Column Width
  • Gutter Width 欄跟欄之間的空間

Bootstrap 5 還有

  1. 預設包含 12 欄
  2. 除了預設欄以外，亦可使用等比欄位劃分
  3. 包含 5 種預設 Gutter 寬度
  4. 提供欄、列的組合形式

Gutter on outside 佔 10px 的寬度。

響應式中斷點

Bootstrap 是行動版優先，所以需要反過來思考。

運用情景:

  • Display 通用類別，可以控制在甚麼大小下，特定區塊不要出現。例如：行動為隱藏(預設)，桌面版顯示。

  • Text 通用類別，例如：文字獄設事靠左排列，行動版則是置中。

不管如何，先思考行動版，再補桌面版。

格線容器

Bootstrap 的 container Class 主要是用來定義最外層的容器，在使用上分為兩大類：

Container

  1. 滿版寬度 container-fluid
  2. 階段固定寬度 container

如果網頁內容不需要嚴謹的定義最大寬度，就可以使用 container-fluid，因為他是使用width-auto，對於網頁內容寬度的階段美感都很要求且需要最大寬度的限制可以使用 container。

欄

預設12欄。

  1. 一定要在外層加上 container，否則會出現水平卷軸。
  2. 然後是 row。

row > col-6 + col-6 (左右兩大欄)

  • 只使用 col 不帶入數字的話，會直接在空間做平均分配。
  • col-auto 根據內容調整空間，假如只有五個字，他就只會有五個字的長度。
  • 可以巢狀使用，row > column + row > column。

情境 1：

行動版xs： 2 欄
平板md： 3 大欄
桌面版xl： 4 大欄

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="container">
    <div class="row">
        <div class="col-6 col-md-4 col-xl-3 mb-3">
            <div class="box"></div>
        </div>
        <div class="col-6 col-md-4 col-xl-3 mb-3">
            <div class="box"></div>
        </div>
        <div class="col-6 col-md-4 col-xl-3 mb-3">
            <div class="box"></div>
        </div>
        <div class="col-6 col-md-4 col-xl-3 mb-3">
            <div class="box"></div>
        </div>
    </div>
</div>

情境 2：

行動版xs： 單欄
平板以上為 md： ３大欄

當有其他 col 中斷點，可以不加入 col-12 ，一樣可以達成效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
    <div class="row">
        <div class="col-12 col-md-4">
            <div class="box"></div>
        </div>
        <div class="col-12 col-md-4">
            <div class="box"></div>
        </div>
        <div class="col-12 col-md-4">
            <div class="box"></div>
        </div>
    </div>
</div>

推移 offset

目前大多會透過 flex 特性推移，offset 的運用情境較少。

1
2
3
4
5
6
7
<div class="container">
    <div class="row">
        <div class="col-4 offset-4">
            <div class="box"></div>
        </div>
    </div>
</div>
  1. 格線系統結構由外而內為 .container,.row,.col-**
  2. class=”row” 內層建議使用 class=”col-xx”
  3. 最外層，在幫他補一個 class=”container”
  4. Bootstrap 5 可以不使用 .col-* 在內層，但為求穩定性，還是建議出學者使用 .col-* 在內的結構。

欄與欄的距離：Gutter

Gutter on outside 就是 Gutter 的一半。

Gutter 的應用：

  • 使用 gx-{ 1-5 } 調整水平間距離。
  • 使用 gy-{ 1-5 } 調整垂直距離。
  • 使用 g-{ 1-5 } 可以同時調整。
  • 移除 gutter，使用 gx-0。
  • 響應式 g-{中斷點}-{ 1-5 }。
1
2
<div class="row gx-5">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--row-cols-3，直接變成三欄的-->
<div class="row row-cols-3 g-3">
    <div class="col">
        <div class="box"></div>
    </div>
    <div class="col">
        <div class="box"></div>
    </div>
    <div class="col">
        <div class="box"></div>
    </div>
    <div class="col">
        <div class="box"></div>
    </div>
    <div class="col">
        <div class="box"></div>
    </div>
</div>

情境 1：

桌面板xl：4 大欄
平板md：3 大欄
行動版xs：2 大欄

先考慮行動版，再處理桌面板。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3">
    <div class="col">
        <div class="box"></div>
    </div>
    <div class="col">
        <div class="box"></div>
    </div>
    <div class="col">
        <div class="box"></div>
    </div>
    <div class="col">
        <div class="box"></div>
    </div>
    <div class="col">
        <div class="box"></div>
    </div>
</div>

Utilities 通用類別：間隔 Spacing

對於 xs 使用固定格式 {property}{sides}-{size} 命名，對於 sm、md、lg、xl 和 xxl，使用格式 {property}{sides}-{breakpoint}-{size} 命名。

sides 設定

t - top
b - bottom
s（start） - left（LTR）right（RTL）
e（end） - right（LTR）left（RTL）
x - 同時設定 *-left 和 *-right
y - 同時設定 *-top 和 *-bottom

sizes 設定

$space 預設是 16px。

0 - margin、padding 為 0
1 - $spacer * .25（預設）
2 - $spacer * .5（預設）
3 - $spacer（預設）
4 - $spacer * 1.5（預設）
5 - $spacer * 3（預設）
auto - margin 為 auto

例如：

  • mx-auto，水平置中。
  • 負值的運用。注意：此功能預設是被關閉的，需要調整設定檔案才會開啟。

Utilities 通用類別：Flex

flex 包含行內及區塊兩種（大多實戰以區塊為主，行內則較少使用）

  • d-flex
  • d-inline-flex，少用到。

使用 .flex-row 來設定水平的方向(瀏覽器預設值)，或是使用 .flex-row-reverse 來作水平方向的反轉。

使用 .flex-column 設置垂直方向，或者使用 .flex-column-reverse 作垂直方向的反轉。

Justify content

包含以下的 Justify content 運用方式

  • justify-content-start
  • justify-content-end
  • justify-content-center
  • justify-content-between
  • justify-content-around
  • justify-content-evenly

Align items

包含以下 align-items 運用方式

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch

Align self

內層元素的對齊方式

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch

Auto margins（重要技巧）

me-auto，ms-auto。將單個item推出去。

1
2
3
4
5
<div class="d-flex mb-3 box">
    <div class="me-auto p-2 box">Flex item</div>
    <div class="p-2 box">Flex item</div>
    <div class="p-2 box">Flex item</div>
</div>

mb-auto，將一個 item 往下推。

1
2
3
4
5
<div class="d-flex align-items-start flex-column mb-3 outer" style="height: 200px;">
    <div class="mb-auto p-2 box">Flex item</div>
    <div class="p-2 box">Flex item</div>
    <div class="p-2 box">Flex item</div>
</div>

Wrap

使用 .flex-nowrap 完全不換行 (瀏覽器預設)，使用 .flex-wrap 進行換行，或使用 .flex-wrap-reverse 進行反向換行

Order

order 只能使用從 0 到 5 的整數值，任何額外值則需要自定義的 CSS

1
2
3
4
5
<div class="d-flex flex-nowrap box">
    <div class="order-3 p-2 box">First flex item</div>
    <div class="order-1 p-2 box">Second flex item</div>
    <div class="order-2 p-2 box">Third flex item</div>
</div>

Align content

注意！ 此特性對於單行的 Flex 項目沒有作用。

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-around
  • .align-content-stretch

Media object

加入 flex-row-reverse 為區塊反轉。

格線系統與 Utilities 的混合運用

  • 單一元素垂直置中
    • align-self-center
  • order 排序
    • order-1,2,3
  • Spacing 運用
    • ms-auto
  • 換行間距（使用 utilities margin）
    • mb-3

通用類別 Utilities 與 工具 Helpers

Background

  • bg-primary，情境色均可套用在背景色上，另外還包含額外幾種背景專屬色彩。
  • bg-gradient，另外可加上 bg-gradient 套用漸層色。注意：此功能預設不會開啟，需要調整變數才能啟用。
Bootstrap
#HTML&CSS
(2) Bootstrap 5 筆記
https://phoebeho.com/Bootstrap/20220403/758747755/
作者
Phoebe
發布於
2022年4月3日
許可協議