(4) Bootstrap 5 筆記

前言

藉由實作來加強對Bootstrap的熟悉度

簡介、導覽列、首圖背景

知識點

Spacing 間距

  • t - 設定 margin-top 或是 padding-top 的類別
  • b - 設定 margin-bottom 或是 padding-bottom 的類別
  • s - 在 LTR 設定 margin-left 或是 padding-left， RTL 設定 margin-right 或是 padding-right
  • e - 在 LTR 設定 margin-right or padding-right， RTL 設定 margin-left 或是 padding-left
  • x - 同時設定 *-left 和 *-right
  • y - 同時設定 *-top 和 *-bottom
  • 讓字體變成 h2
  • 覆蓋超連結的原始色 link-dark
  • 去除超連結的底線 text-decoration-none

overflow

想要行動版以水平為卷軸的形式，overflow-auto

  1. class="nav"
  2. flex-wrap
  3. text-nowrap，避免中文變成垂直
  4. 選項使用 <a> ，class="nav-link"

實作【導覽列】

1
2
3
4
5
<!-- y 是上下距離 -->
<header class="py-3 text-center border-bottom">
    <!-- 更改超連結顏色、去除底線 -->
    <a href="#" class="h2 link-dark text-decoration-none">Test Blog</a>
</header>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 想要行動版以水平為卷軸的形式，1. overflow-auto -->
<div class="overflow-auto py-1">
    <!-- justify-content-between 希望等距排列 -->
    <!-- 2. flex-nowrap，避免她換行。3. 中文字不垂直 -->
    <nav class="nav justify-content-between flex-nowrap text-nowrap">
        <!-- link-secondary 更改連結顏色 -->
        <a class="nav-link link-secondary href="#">HTML</a>
        <a class="nav-link link-secondary href="#">CSS</a>
        <a class="nav-link link-secondary href="#">JavaScript</a>
        <a class="nav-link link-secondary href="#">JavaScript</a>
        <a class="nav-link link-secondary href="#">JavaScript</a>
        <a class="nav-link link-secondary href="#">JavaScript</a>
        <a class="nav-link link-secondary href="#">JavaScript</a>
        <a class="nav-link link-secondary href="#">Backend</a>
        <a class="nav-link link-secondary href="#">社群</a>
    </nav>
</div>

知識點

style

因為banner的圖片只用到一次，所以直接加在 style 上就好。

padding

  • 行動版的 padding 為 4，p-4
  • 桌面板的 padding 為 5，p-md-5

text

更改文字顏色，text-white

rounded

圖片圓角，rounded-3

圖片設定

1
2
3
4
5
6
.bg-cover {
    /* 讓背景圖至於中央 */
    background-position: center center;
    /* 以覆蓋的形式，蓋滿整個區塊 */
    background-size: cover;
}

column

在螢幕斷點 ≥768px 時，會使用的效果，col-md-6。

Font

控制文字大小，display-4 。
讓文字斜體，fst-italic。
前導主題，lead 文字方法。

實作【首圖背景】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 因為此圖片只用到一次，所以直接加上style就好 -->
<!-- p-4 p-md-5，行動版的padding只有4，桌面板為5 -->
<!-- text-white 更改文字顏色，rounded-3 圖片圓角 -->
<div class="p-4 p-md-5 mb-4 text-white rounded-3 bg-cover"
    style="background-image: url(https://images.unsplash.com/photo-
    1576259386470-4621035503c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx
    8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);">
    <!-- 沒有要使用到其他版型，所以不用增加 row -->
    <div class="col-md-6">
        <!-- display-4 控制文字大小， fst-italic 讓文字斜體 -->
        <h1 class="display-4 fst-italic">你絕對想不到深海的我創造了什麼</h1>
        <!-- lead 文字大小 -->
        <p class="lead my-3">是心藝景不分。首臺帶成他又請是續健現通清物報住處一詩難
        ；自人近加，入的行利去前為力打非準高些有如他這。
        </p>
        <p class="lead mb-0"><a href="#" class="text-white">繼續閱讀</a></p>
    </div>
</div>

水平卡片排版技巧

知識點

隔線系統

1
<div class="row row-cols-1 row-cols-lg-2 mb-4">
  • 行動版為單欄式排版
  • 桌面板為雙欄
1
<div class="col">
  • 不管版型，一直為雙欄

Card

h-100 不管內容如何，卡片都可以等高。

font

文字變暗，text-muted

display

  • d-none，行動版不顯示
  • d-lg-block，桌面版就顯示。

因為 Bootstrap 5 是由小到大，所以一開始就設定none。

實作【水平卡片排版】

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
30
31
32
33
34
35
36
37
38
39
40
<!-- 行動版為單欄式排版，桌面板為雙欄 -->
<div class="row row-cols-1 row-cols-lg-2 mb-4">
    <div class="col">
        <!-- 加上卡片的元素，卡片預設 flex-direction:cloumn -->
        <!-- flex-row 改變卡片的指向 -->
        <!-- h-100 不管內容如何，卡片都可以等高 -->
        <div class="card row g-0 flex-row h-100">
            <!-- 文字內容 -->
            <div class="col">
                <!-- 想要將繼續閱讀推到左右一樣高時，外層的也要加上h-100 將高度設定為 100%，讓元素可以伸展到與父層等高 -->
                <div class="p-4 d-flex flex-column h-100">
                    <strong class="d-inline-block mb-2 text-primary">藝術</strong>
                    <h3 class="mb-0">創造力不等於想像力</h3>
                    <div class="mb-1 text-muted">三月 12 日</div>
                    <p class="card-text mb-auto">的不是也有作了在被一個，的那個有問題坐在心挑戰，名其時候我頭髮我一起不住。</p>
                    <a href="#" class="stretched-link ">繼續閱讀</a>
                </div>
            </div>
            <!-- 卡片，bg-cover 將圖片調整成合適的大小-->
            <!-- d-none，行動版不顯示。d-lg-block，桌面版就顯示。 -->
            <div class="col-4 d-none d-lg-block bg-cover" 
            style="background-image: url(https://images.unsplash.com/);"></div>
        </div>
    </div>
    <div class="col">
        <div class="card row g-0 flex-row h-100">
            <div class="col">
                <div class="p-4 d-flex flex-column h-100">
                    <strong class="d-inline-block mb-2 text-primary">藝術</strong>
                    <h3 class="mb-0">創造力不等於想像力</h3>
                    <div class="mb-1 text-muted">三月 12 日</div>
                    <p class="card-text mb-auto">的不是也有作了在被一個，的</p>
                    <a href="#" class="stretched-link">繼續閱讀</a>
                </div>
            </div>
            <div class="col-4 d-none d-lg-block bg-cover" 
            style="background-image: url(https://images.unsplash.com);"></div>
        </div>
    </div>
</div>

內文及側邊欄的安排

知識點

Gutter

在螢幕寬度為 ≥768px 時，加上寬度。

sticky-top

想要將側邊欄一直定位在右側，就可以使用 sticky-top。

rounded

為 div 加上圓角。

list-unstyled

去除掉 list 前面的點點。

實作【水平卡片排版】

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="row g-md-5">
    <div class="col-md-8">
        <!-- 部落格的文章本體 -->
        <article>
            文章
        </article>
    </div>
        <!-- 測欄，行動版不顯示，桌面板顯示 -->
    <div class="col-md-4 d-none d-md-block">
        <!-- 在桌面板時，可以一直出現在右方 -->
        <div class="sticky-top" style="top: 16px">
            <div class="p-4 bg-light rounded">
                <h4>關於我</h4>
                <!-- 去除向下的空間 -->
                <p class="mb-0">Lorem ipsum dolor sit amet consectet</p>
            </div>
            <div class="p-4">
                <h4>封存</h4>
                <ol class="list-unstyled">
                    <li><a href="#">2021年1月</a></li>
                    <li><a href="#">2021年2月</a></li>
                    <li><a href="#">2021年3月</a></li>
                    <li><a href="#">2021年4月</a></li>
                    <li><a href="#">2021年5月</a></li>
                    <li><a href="#">2021年6月</a></li>
                    <li><a href="#">2021年7月</a></li>
                    <li><a href="#">2021年8月</a></li>
                    <li><a href="#">2021年9月</a></li>
                    <li><a href="#">2021年10月</a></li>
                </ol>
            </div>
            <div class="p-4">
                <h4>追蹤我</h4>
                <ul class="list-unstyled">
                    <li><a href="#">Github</a></li>
                    <li><a href="#">FaceBook</a></li>
                    <li><a href="#">Twitter</a></li>
                </ul>
            </div>
        </div>
        </div>
    </div>
</div>

Footer製作

知識點

  • 背景顏色，bg-light
  • border-top
  • py-4
  • mt-5
  • text-center
1
2
3
4
5
6
<footer class="bg-light border-top py-4 mt-5 text-center">
    <p>Bootstrap 5 練習作業</p>
    <p>
        <a href="#">Back to Top</a>
    </p>
</footer>
Bootstrap
#HTML&CSS
(4) Bootstrap 5 筆記
https://phoebeho.com/Bootstrap/20220406/2070099437/
作者
Phoebe
發布於
2022年4月6日
許可協議