技術類文章

金魚也能學會寫網頁-框架篇

據說金魚只有七秒的記憶力，那有沒有辦法讓金魚也能快速建置個人網頁呢? 答案是有的!!
Bootstrap是一個前端的網頁框架，框架內有各種已寫好的網頁元件，你只要做3件事，複製、貼上、拼拼圖(Component)，就能做出一個基本的前端網頁。👍

💡Hint: 文章內所使用的版本是 Bootstrap v4.6.x

⏳ Setting Environment

如果你已經有用習慣的網頁編寫工具，可以選擇略過此部分，下面以VS Code為例

💡 Step 1: 下載並安裝 VS Code

Download VS Code
👉基本上按照預設一直點下一步就行

💡 Step 2: 設定 VS Code 環境

  1. 設定Ctrl+滑鼠滾輪的程式碼縮放功能、自動儲存

  1. 安裝Live Server套件

💡 Step 3: 使用快捷鍵建立基本架構

  1. 開啟欲存放檔案的資料夾
  2. 右鍵新增.html檔案
  3. 在檔案內輸入 !+Enter 或 !+Tab 自動生成基本架構(如下方程式碼區塊)

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

💡 Step 4: 使用 Live Server 檢視網頁

  1. 點擊右下角 Go Live，此時瀏覽器應自動開啟並顯示網頁

💡 Hint: 1.若在右下角沒看到 Live Server，請在程式碼區塊內按滑鼠右鍵，點擊 Open with Live Server。 2.網頁預設路徑: 127.0.0.1:5500。

👇 檢視你的網頁!

成功完成基本環境設定! 😆

📝 Getting Started

💡 Step 1: 複製Bootstrap Template到你的編輯器中

Starter template

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
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

👇複製貼上模板程式碼後，網頁畫面如下:

接下來就是發揮拼圖的實力啦~XD ((ps.純白地獄真D可怕😨

💡 Step 2: 將適合的Bootstrap Component原始碼放入你的網頁中

👉 你的拼圖底加(Bootstrap Components)

👇 1. 以網頁導覽列 (nav bar) 為例




1
2
3
4
5
6
7
8
9
10
11
12
13
14
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

💡Hint: Bootstrap 已經預先定義元件的屬性，所以我們可以不用list-based的形式建立導覽列。

Because we use classes for our navs, you can avoid the list-based approach entirely if you like. —Bootstrap

👇 2. 複製到template

👇 3. Component在瀏覽器的外觀

相信做到這邊，你已經迫不及待的想開始拼出一個網頁了吧!
接下來我將介紹Bootstrap的Layout配置。😄

📝 Layout

Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes. — Bootstrap

💡Hint: 在Bootstrap裡，Container是用來放置Components的容器，同時它也關係到網頁在不同尺寸裝置上的外觀。

⭐ 主要有3種不同的Container (CSS Class) :

  • .container
    • 根據螢幕寬度利用媒體查詢 (Media Query) ，設定變化的斷點，階段性的改變寬度，當改變瀏覽器的大小，頁面將一個階段一個階段變化。
1
2
3
<div class="container">
  <!-- Content here -->
</div>
  • .container-fluid
    • 不考慮螢幕寬度，始終將寬度設定為auto，當縮放瀏覽器時，保持全屏大小(100%的寬度)。
1
2
3
<div class="container-fluid">
  ...
</div>
  • .container-{breakpoint}
    • 透過Bootstrap寫好的 Media Query 調整頁面
    • 如: .container-sm
1
2
3
4
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

👇 .container-{breakpoint} 細節

介紹完Container後，緊接著介紹Bootstrap的欄位配置 — Grid System 😉

📝 Grid System

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes. — Bootstrap

💡Hint: Bootstrap 以 Grid System 規範網頁的版面配置 (列 - 欄) ，而1列在Bootstrap中被預設劃分為12欄。

⭐ Setting Row & Column

👇 不設定的col-size情況下，3欄均分12個欄位大小 (3 X 4)

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
  <div class="row">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

⭐More Details

⬇️ 兩種主要col設定方式 (full size: 12):

  • col-size 主動配置欄位大小

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>
<!-- 只寫.col時，會根據.col的數量均分12欄 -->
  • col-{breakpoint}-size 根據螢幕大小調整欄位配置

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

💡Hint: 關於breakpoint的設定，請參照上方的 .container-{breakpoint} 細節。

最後，讓我們動手拼出一個網頁吧! GOGOGO~ 👊

📝 Web Page Implementation

💡 Step 1: 尋找要用到的Component放到Starter Template

我的規劃:

  • Nav Bar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
  • Carousel (原版沒有圖片，可以自行設定)

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
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/1200/300?random=18https://picsum.photos/1200/300?random=18" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/1200/300?random=19" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/1200/300?random=20" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
  • Breadcrumb

1
2
3
4
5
6
7
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>
  • List Group

1
2
3
4
5
6
7
<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>
  • Image Gallery (自行設計的Component)

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
55
56
57
58
59
60
61
62
<div class="col-12 col-md-9">
    <h1>title</h1>
    <p>List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.</p>
    <div class="row item-group">
        <div class="col-12 col-md-3">
            <div class="item">
                <img class="img-fluid" src="https://picsum.photos/300/200?random=8">
                <h3>title</h3>
                <p>List groups are a flexible and powerful component for displaying</p>
            </div>
        </div>
        <div class="col-12 col-md-3">
            <div class="item">
                <img class="img-fluid" src="https://picsum.photos/300/200?random=2">
                <h3>title</h3>
                <p>List groups are a flexible and powerful component for displaying</p>
            </div>
        </div>
        <div class="col-12 col-md-3">
            <div class="item">
                <img class="img-fluid" src="https://picsum.photos/300/200?random=4">
                <h3>title</h3>
                <p>List groups are a flexible and powerful component for displaying</p>
            </div>
        </div>
        <div class="col-12 col-md-3">
            <div class="item">
                <img class="img-fluid" src="https://picsum.photos/300/200?random=5">
                <h3>title</h3>
                <p>List groups are a flexible and powerful component for displaying</p>
            </div>
        </div>
        <div class="col-12 col-md-3">
            <div class="item">
                <img class="img-fluid" src="https://picsum.photos/300/200?random=38">
                <h3>title</h3>
                <p>List groups are a flexible and powerful component for displaying</p>
            </div>
        </div>
        <div class="col-12 col-md-3">
            <div class="item">
                <img class="img-fluid" src="https://picsum.photos/300/200?random=32">
                <h3>title</h3>
                <p>List groups are a flexible and powerful component for displaying</p>
            </div>
        </div>
        <div class="col-12 col-md-3">
            <div class="item">
                <img class="img-fluid" src="https://picsum.photos/300/200?random=34">
                <h3>title</h3>
                <p>List groups are a flexible and powerful component for displaying</p>
            </div>
        </div>
        <div class="col-12 col-md-3">
            <div class="item">
                <img class="img-fluid" src="https://picsum.photos/300/200?random=35">
                <h3>title</h3>
                <p>List groups are a flexible and powerful component for displaying</p>
            </div>
        </div>
    </div>
</div>
  • Pagination

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
  • Footer (自行設計的Component)

1
2
3
<div class="container-fluid main-footer text-center">
    &copy; copyright by QI-XIANG 2021
</div>

💡 Step 2: 將 Component 依序放進 Starter Template

👇 結果如下:

看起來還不錯，但還可以再做些調整，讓網頁更加美觀。😏

💡 Step 3 (Optional): 網頁細部調整

👇 請將下方程式碼複製到新檔案中

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
    </nav>
   

    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://picsum.photos/1200/300?random=18" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>First slide label</h5>
              <p>Some representative placeholder content for the first slide.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/1200/300?random=19" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>Second slide label</h5>
              <p>Some representative placeholder content for the second slide.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/1200/300?random=20" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>Third slide label</h5>
              <p>Some representative placeholder content for the third slide.</p>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item"><a href="#">Library</a></li>
          <li class="breadcrumb-item active" aria-current="page">Data</li>
        </ol>
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-12 col-md-3">
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">The current link item</a>
                    <a href="#" class="list-group-item list-group-item-action">A second link item</a>
                    <a href="#" class="list-group-item list-group-item-action">A third link item</a>
                    <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
                    <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
                </div>
            </div>
            <div class="col-12 col-md-9">
                <h1>title</h1>
                <p>List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.</p>
                <div class="row item-group">
                    <div class="col-12 col-md-3">
                        <div class="item">
                            <img class="img-fluid" src="https://picsum.photos/300/200?random=8">
                            <h3>title</h3>
                            <p>List groups are a flexible and powerful component for displaying</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="item">
                            <img class="img-fluid" src="https://picsum.photos/300/200?random=2">
                            <h3>title</h3>
                            <p>List groups are a flexible and powerful component for displaying</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="item">
                            <img class="img-fluid" src="https://picsum.photos/300/200?random=4">
                            <h3>title</h3>
                            <p>List groups are a flexible and powerful component for displaying</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="item">
                            <img class="img-fluid" src="https://picsum.photos/300/200?random=5">
                            <h3>title</h3>
                            <p>List groups are a flexible and powerful component for displaying</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="item">
                            <img class="img-fluid" src="https://picsum.photos/300/200?random=38">
                            <h3>title</h3>
                            <p>List groups are a flexible and powerful component for displaying</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="item">
                            <img class="img-fluid" src="https://picsum.photos/300/200?random=32">
                            <h3>title</h3>
                            <p>List groups are a flexible and powerful component for displaying</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="item">
                            <img class="img-fluid" src="https://picsum.photos/300/200?random=34">
                            <h3>title</h3>
                            <p>List groups are a flexible and powerful component for displaying</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="item">
                            <img class="img-fluid" src="https://picsum.photos/300/200?random=35">
                            <h3>title</h3>
                            <p>List groups are a flexible and powerful component for displaying</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#">2</a></li>
          <li class="page-item"><a class="page-link" href="#">3</a></li>
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
    </nav>

    <div class="container-fluid main-footer text-center">
        &copy; copyright by QI-XIANG 2021
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
    -->
  </body>
    <style type="text/css">
        .main-footer{
            padding: 20px 0;
            background-color: #000;
            color: white;
        }
        .item-group .item img{
            width: 100%; /* 在螢幕小的裝置上讓圖片滿版 */
        }
        .item-group .item{
            text-align: center;
        }
    </style>  
</html>

👇 結果如下:

調整後是不是變得有點專業呢? 😃

📝 Conclusion

💡 小結論

Bootstrap可以節省設計每個網頁區塊的時間，藉由Bootstrap預先定義的 .class，我們可以很快的調整區塊的一些屬性。但如果想要更客製化網頁的話，還是要套用到自己寫的CSS，此時要注意不要過度使用 !important 強制更改Bootstrap預先定義的CSS。

在學完 框架 (Framework) 的基礎知識後，相信你對寫網頁開始有那麼一點感興趣吧?😂在網頁的世界裡充斥著非常豐富的技術知識，例如: SEO、AJAX、Web Security等…，網頁這片無盡的大海，正在前方等著各位去探索!

🚀 BONUS 1: Lorem Picsum ( 產生假圖 )

說明:
寫網頁有時會遇到需要測試圖片的狀況，這時候假圖/隨機圖產生器就很重要了。Lorem Picsum 這個網站提供各式測試用圖片，你可以透過修改網址的方式，產生不同大小、外觀的圖片。

💡 Lorem Picsum

🚀 BONUS 2: CSS Box Model ( 盒子模型 )

定義:
The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.
簡單來說平常寫的<p>lorem...</p>，就可以看做是一個Box，而Box Model則規範Box在瀏覽器上的長相。

Box Model

在Chrome裡滑鼠右鍵 檢查 (F12)，可以在右方(Styles)看到如下畫面

  • Margin: box 的外部距離區域
  • Border: box 的邊界
  • Padding: box content 外的填充區域
  • Content: Content實際的寬 X 高

💡Hint: Chrome提供的檢查功能可以提升我們在網頁設計上的效率，比如:你寫出的網頁在不同尺寸的裝置上顯示的版面差異，方便我們做進一步的RWD (Responsive Web Design) 規劃。

分享到