(5) Bootstrap 5 筆記

環境設定

1
2
3
4
5
6
7
8
9
10
11
*
├─stylesheets	樣式		
├─components    元件	
│    ├─_deco-box.scss				
│    └─_utilities.scss	
├─helpers       放入自定義的參數
│    ├─_utilities.scss				
│    └─_variables.scss			
├─all.scss	    @import 的內容
├─index.html   
└─package.json

Header 首圖製作

  • min-vh-100，讓整個 div 滿版顯示。
  • position-relative，讓兩個框框絕對定位在 左上 和 右下。
  • bg-cover，圖片不管怎麼移動都在正中間。
    1
    2
    3
    4
    5
    6
    /* 圖片不管怎麼移動都在正中間 */
    .bg-cover{
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
  • bg-attachment-fixed，做出視差滾動的效果。
  • translate-middle、top-50、start-50，讓字體真的在中間。
  • mx-n3，開啟負值的margin，讓 <hr> 可以推出去。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<header class="min-vh-100 position-relative">
    <!-- 設定絕對位置: 左上、右下 -->
    <div class="deco-box position-absolute top-0 start-0"></div>
    <div class="deco-box position-absolute bottom-0 end-0"></div>
    
    <!-- 圖片固定在原位，做出滾動視差的效果 -->
    <div class="position-absolute bg-cover bg-attachment-fixed" 
    style="top:30px; left:30px; right:30px; bottom:30px; 
    background-image: url(https://images.unsplash.com/);"></div>
    
    <div class="position-absolute top-50 start-50 
    translate-middle text-center text-white">
        <h1 class="display-1 fw-bold">Test</h1>
        <!-- 開啟負值的 margin，讓 hr 可以凸出去 -->
        <hr class="mb-1 mx-n3">
        <h2>Test</h2>
        <p>愛、勇氣與永不放棄的心</p>
    </div>
</header>

自我介紹

  • gy-3，不希望文字與圖片太近
  • flex-md-row-reverse，在桌面版時，字跟圖片可以翻轉過來
  • class="w-100 object-fit-cover" height="500"，固定圖片大小用
  • col 4 + 5 + 3，就可以滿足 12 欄位。
  • button 的設定，w-100 讓按鈕寬度為100%。
    1
    2
    3
    <a href="#" class="btn btn-outline-primary mt-4 w-100">
        看更多我的冒險故事
    </a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="container py-5">
    <!-- 桌面版時，希望圖片在右，所以使用 flex-md-row-reverse -->
    <!-- 不希望文字與圖片太近，使用 gy-3 -->
    <div class="row gy-3 justify-content-center flex-md-row-reverse">
        <!-- 圖片 -->
        <div class="col-md-4">
            <!-- 固定圖片大小 -->
            <img src="https://images.unsplash.com/
            " class="w-100 object-fit-cover" height="500" alt="img">
        </div>
        <!-- 文字 -->
        <div class="col-md-5 d-flex align-items-center">
            <div>
                <h2 class="display-6">我的冒險故事：</h2>
                <p>你紙爸還上這可...</p>
                <p>上英灣媽？</p>
                <a href="#" class="btn btn-outline-primary mt-4 w-100">
                看更多我的冒險故事
                </a>
            </div>
        </div>
    </div>
</div>

三欄式卡片樣式調整

  • bg-light，背景淡淡的白色。
  • p-md-5 ，在桌面板時，增加 padding
  • row-cols-1，一般為一列
  • row-cols-lg-3，在 lg 為三列。
  • h-100，可以讓卡片等高，不管內容多少。（外層div要加，裡面的img也要加）
  • bg-dark-gradient，為圖片加上黑色的漸層。
  • stretched-link，可以讓滑鼠移到上面時才顯現。
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
<div class="bg-light p-md-5 py-5 m-md-5">
    <div class="container">
        <h2 class="display-4 text-center mb-4">
            我的實戰作品
        </h2>
        <!-- row-cols-1，手機版是一列。row-cols-lg-3，桌面版是三列 -->
        <div class="row row-cols-1 row-cols-lg-3 g-4">
            <div class="col">
                <!-- 加上 h-100 可以讓卡片等高 -->
                <div class="card text-white border-5 h-100">
                    <!-- img 也要加上 h-100 -->
                    <img src="https://images.unsplash.com/" alt="..." class="card-img h-100">
                    <div class="card-img-overlay top-auto bg-dark-gradient">
                        <h5 class="card-title">工整一致的設計規範</h5>
                        <p class="card-text">正看了和無是本。眾今少山！期美斯經已家更，兒死自神有根平度如進？就的由？座國式達推知上格到：訴校構人給開收個認是策元。</p>
                        <!-- 看作品的按鈕，stretched-link可以讓滑鼠移到上面時才顯現，w-100 按鈕的寬度 100% -->
                    <a class="btn btn-outline-light stretched-link w-100">看作品</a>
                    </div>
                </div>
            </div>
            <div class="col">
                ...
            </div>
            <div class="col">
                ...
            </div>
        </div>
    </div>
</div>

Footer製作及表單驗證樣式調整

  • bg-primary，以客製化顏色，所以會是紫色。
  • 因為旁邊需要留更多空間，所以可以只使用兩個 col-5 就好。
  • input 有許多不同的用法，可以至 w3s 查看更多的用法。
  • label 的 for 跟 input 的 id 要使用一樣的
  • 驗證 input 的 JS 可以至 Bootstrap 5 官方文件查看。
1
2
3
4
 <div class="col-md-6">
    <label for="validationServer01" class="form-label">姓氏 *</label>
    <input type="text" class="form-control" id="validationServer01" value="Mark" required>
</div>
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
44
45
46
47
48
49
50
51
52
53
54
<footer class="bg-primary p-5 text-white">
    <div class="container">
        <h2 class="display-4 text-center">做個朋友吧：</h2>
        <div class="row justify-content-center">
            <div class="col-md-5">
                <div class="col-md-5">
                    <p>遇見到世界上另一個地方的您相當開心</p>
                    <h3 class="h4">聯絡方式</h3>
                    <ul class="list-unstyled">
                        <li><i class="bi bi-envelope"></i> voluptati@email.com</li>
                        <li><i class="bi bi-telephone"></i> 0987-654-321</li>
                    </ul>
                    <h3 class="h4">社群關注</h3>
                    <ul class="list-unstyled">
                        <li><i class="bi bi-instagram"></i> voluptati</li>
                        <li><i class="bi bi-line"></i> fb.me/voluptati</li>
                        <li><i class="bi bi-facebook"></i> voluptati</li>
                    </ul>
                    <p>© 2022 by 陳六角. created with Bootstrap 5.</p>
                </div>
            </div>
            <!-- novalidate為還沒驗證的意思 -->
            <form class="col-md-5 needs-validation" novalidate>
                <div class="row g-2">
                    <div class="col-md-6">
                        <label for="validationServer01" class="form-label">姓氏 *</label>
                        <input type="text" class="form-control" id="validationServer01" value="Mark" required>
                    </div>
                    <div class="col-md-6">
                        <label for="validationServer02" class="form-label">名 *</label>
                        <input type="text" class="form-control" id="validationServer02" required>
                        <div class="valid-feedback">
                            Looks good!
                        </div>
                    </div>
                    <div class="mb-3 col-md-12">
                        <label for="exampleFormControlInput1" class="form-label">Email *</label>
                        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" required="">
                        <div class="invalid-feedback">
                            請輸入 Email，拜託
                        </div>
                    </div>
                    <div class="mb-3 col-12">
                        <label for="exampleFormControlTextarea1" class="form-label">留些訊息給我吧 *</label>
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" required=""></textarea>
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-outline-light">送出表單</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</footer>

整理 Sass 專案檔

將在 index.html 檔案裡面的 css 移到其他檔案裡

  1. 有更改圖片的就可以放到 components或 utilities 裡
  2. 然後再 import 進 all.scss

utilities 寫法是偏 JS，需要特別注意。

1
2
3
4
5
6
7
8
9
10
11
// custom
"bg-attachment":(
  property: background-attachment,
  class: "bg-attachment",
  value: fixed
),
"object-fit":(
  property: object-fit,
  class: "object-fit",
  value: cover
)
Bootstrap
#HTML&CSS
(5) Bootstrap 5 筆記
https://phoebeho.com/Bootstrap/20220407/1652032684/
作者
Phoebe
發布於
2022年4月7日
許可協議