製作一個 使用Bootstrap的網站

成品:

成品網址

成品功能:

  1. 點擊漢堡會有下拉是選單跳出(並且可以開關)
  2. 中間有大圖呈現slide 效果並且點擊或是等待都可以讓slide移動
  3. 呈現一個三欄位/兩欄位的文章區塊
  4. 中間有圖片固定的區域並且點擊按鈕會有跳出視窗
  5. 插頭符號也可以跳出區塊顯示圖片
  6. jumbotron 區域展示顏色變化以及一段文字及按鈕
  7. 最後是footer區域顯示social icon

介紹使用到的Bootstrap 4 元素

margin, padding

範例

使用 mr-lg-3
代表margin-right: 1rem並且breakpoint在lg

  • container
    這邊使用的是預設的版本，所有會有四個breadkpoint(觸發RWD的點)，並且置中

  • col-12
    使用的是bootstrap內部的gird系統，主要分為12格，這邊這樣使用會有滿版的效果

  • text-right
    讓文字往右，其中也有搭配RWD的作法，ex.使用text-lg-right 可以讓文字在lg的breadkpoint時取消文字定位

  • navbar
    使用navbar系列的功能必須先使用這個關鍵字包覆住

  • bg-light
    讓背景呈現淺色

  • navbar-light
    讓文字配合淺色背景

  • navbar-expand-lg
    讓navbar RWD的關鍵，不使用的話會預設滿版

  • navbar-brand
    使用在公司名稱的部分或是logo

  • 下拉式選單標準作法
    button是漢堡的部分
    collapse navbar-collapse的部分是會被隱藏的選單部分

1
2
3
4
5
6
7
8
<button class="navbar-toggler">
        
        <span class="navbar-toggler-icon" type="button" data-toggle="collapse" data-target="#navbarResponsive"></span>
</button>

<div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">

  • ml-auto
    使物件靠右

  • nav-item nav-link
    在navbar中的物件使用

使用到的CSS

為了要蓋掉bootstrap原生的顏色要使用 !important

1
2
3
4
5
6
7
8
9
.nav-link {
  /* 加上驚嘆號去取代bootstrap內建的顏色 */
  color: #5b5555 !important;
}

.nav-link.active,
.nav-link:hover {
  color: #4981b3 !important;
}
  • 必須安裝 util.js. 這包boostrap的內容才可以使用

使用範例

data-interval的部分是 換張投影片的間隔時間(ms毫秒)

1
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="6500">

  • carousel-inner
    針對投影片區域的圖片區域做包裹的動作

  • carousel-item
    主要放在carousel-inner裡面，內部設置投影片的內容(圖片文字等等)，並且有active的item為預設值

  • carousel-caption
    使用在幻燈片如果需要標題時可以嵌入

  • carousel-control-prev(next)
    選取#carousel後嵌入範例即可使用
    上一張/下一張 功能並且搭配fontawesome的箭頭作範例

1
2
3
<a href="#carousel" class="carousel-control-prev" role="button" data-slide="prev">
      <span class="fas fa-chevron-left fa-2x"></span>
</a>

Emoji Navbar 區域

這兩個區域點擊會觸發下面四個圖片的縮放

主要使用了

  • a tag的部分
    href部分抓取#emoji也就是要出現部分的id，並且使用data-toggle="collapse"

  • 下方圖片toggle處 使用 class = collapse 以及設置id = emoji

這部分比較特別的地方是插頭的部分在css選取器上，比較特別要去google inspect裡面看才知道

fixed img 內部的跳出視窗功能

點擊下方藍色跟紅色按鈕會出現的圖片

使用modal做到跳出視窗的效果

  • 針對按鈕的部分加入
    data-toggle="modal" data-target="#modal1"

  • 跳出圖片的部分
    設置被抓取的id = modal1
    並在內容處設置 modal-dialog

Jumbotron 區域

一個簡單並且滿版的區域並且對內部文字按鈕有基本裝飾跟定位

  • Jumbotron

html程式碼:

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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML5 Website with Bootstrap | Responsive Website Design</title>
    <link rel="shortcut icon" href="img/favicon.ico" />
    <!-- Bootstrap 4.5 CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <!-- Style CSS -->
    <link rel="stylesheet" href="css/style.css" />
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap"
      rel="stylesheet"
    />
  </head>

  <body>
    <!-- Top Bar -->
    <div class="top-bar">
      <div class="container">
        <!-- 這邊col-12代表延續整個頁面 -->
        <div class="col-12 text-right">
          <!-- 因為bootstrap的關係 a 的文字會直接顯示藍色 -->
          <p><a href="tel:+999123888"> Call us at 1 (800) HTML - CSS</a></p>
        </div>
      </div>
    </div>
    <!-- End Top Bar -->

    <!-- Navigation -->
    <nav class="navbar bg-light navbar-light navbar-expand-large">
      <div class="container">
        <a href="index.html" class="navbar-brand"
          ><img src="img/logo.png" alt="logo" title="logo"
        /></a>
        <button class="navbar-toggler">
          <!-- 加入bootstarp js library讓漢堡選單可以使用 -->
          <span
            class="navbar-toggler-icon"
            type="button"
            data-toggle="collapse"
            data-target="#navbarResponsive"
          ></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a href="index.html" class="nav-link active">Home</a>
            </li>
            <li class="nav-item"><a href="" class="nav-link">About</a></li>
            <li class="nav-item"><a href="" class="nav-link">Services</a></li>
            <li class="nav-item"><a href="" class="nav-link">Projects</a></li>
            <li class="nav-item"><a href="" class="nav-link">Contact Us</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- End Navigation -->

    <!-- Image Carousel -->
    <!-- 加入bootstarp js library讓slide可以動 -->
    <div
      id="carousel"
      class="carousel slide"
      data-ride="carousel"
      data-interval="6500"
    >
      <!-- Carousel Content -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <!-- 這邊使用w-100會讓圖片吃到其父母層的100%寬度 -->
          <img src="img/carousel/1.jpg" alt="" class="w-100" />
          <div class="carousel-caption">
            <div class="container">
              <div class="row justify-content-center">
                <div class="col-8 bg-custom d-none d-md-block py-3 px-0">
                  <h1>Bootstrap</h1>
                  <div class="border-top border-primay w-50 mx-auto my-3"></div>
                  <h3 class="pb-3">Complete Website Design</h3>
                  <a href="#" class="btn btn-danger btn-lg mr-2">View Demo</a>
                  <a href="#" class="btn btn-primary btn-lg ml-2">Start Now</a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="carousel-item">
          <img src="img/carousel/2.jpg" alt="" class="w-100" />
          <div class="carousel-caption">
            <div class="container">
              <div class="row justify-content-end text-right">
                <div class="col-5 bg-custom d-none d-lg-block py-3 px-0 pr-3">
                  <!-- lead會使用font-weight=300 -->
                  <p class="lead pb-3">
                    Lorem ipsum dolor sit amet consectetur.
                  </p>
                  <a href="#" class="btn btn-danger btn-lg mr-2">See PHone</a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="carousel-item">
          <img src="img/carousel/3.jpg" alt="" class="w-100" />
          <div class="carousel-caption">
            <div class="container">
              <div class="row justify-content-center text-left">
                <div class="col-7 bg-custom d-none d-lg-block py-3 px-0 pl-3">
                  <h3 class="pb-3">Lorem, ipsum dolor.</h3>
                  <p class="lead">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                  </p>
                  <a href="#" class="btn btn-primary btn-lg ml-2">Start Now</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- End Carousel Content -->

      <!-- Previous & Next Buttons -->
      <a
        href="#carousel"
        class="carousel-control-prev"
        role="button"
        data-slide="prev"
      >
        <span class="fas fa-chevron-left fa-2x"></span>
      </a>

      <a
        href="#carousel"
        class="carousel-control-next"
        role="button"
        data-slide="next"
      >
        <span class="fas fa-chevron-right fa-2x"></span>
      </a>
      <!-- End Previous & Next Buttons -->
    </div>
    <!-- End Image Carousel -->

    <!-- Main Page Heading -->
    <div class="col-12 text-center mt-5">
      <h1 class="text-dark pt-4">Built With Ease</h1>
      <div class="border-top border-primay w-25 mx-auto my-3"></div>
      <p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
    </div>

    <!-- Three Column Section -->
    <div class="container">
      <div class="row my-5">
        <div class="col-md-4 my-4">
          <img src="img/1.jpg" alt="" class="w-100" />
          <h4 class="my-4">Lorem, ipsum.</h4>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit.
            Aspernatur, iure!
          </p>

          <a href="#" class="btn btn-outline-dark btn-md">Our Story</a>
        </div>

        <div class="col-md-4 my-4">
          <img src="img/2.jpg" alt="" class="w-100" />
          <h4 class="my-4">Lorem, ipsum.</h4>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit.
            Aspernatur, iure!
          </p>
          <a href="#" class="btn btn-outline-dark btn-md">Our Story</a>
        </div>

        <div class="col-md-4 my-4">
          <img src="img/3.jpg" alt="" class="w-100" />
          <h4 class="my-4">Lorem, ipsum.</h4>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit.
            Aspernatur, iure!
          </p>
          <a href="#" class="btn btn-outline-dark btn-md">Our Story</a>
        </div>
      </div>
    </div>
    <!-- End Three Column Section -->

    <!-- Emoji Navbar First -->
    <a
      class="navbar bg-primary sticky-top emoji"
      href="#emoju"
      role="button"
      data-toggle="collapse"
    ></a>

    <!-- Start Fixed Background IMG -->
    <div class="fixed-background">
      <div class="row text-light py-5">
        <div class="col-12 text-center">
          <h1>Advance to Next Level</h1>
          <h3>..see what's on the other side</h3>
          <!-- 這邊使用modal library可以達到跳出視窗的效果 -->
          <button
            type="button"
            data-toggle="modal"
            data-target="#modal1"
            class="btn btn-primary btn-lg mr-2"
          >
            Blue pill
          </button>
          <button
            type="button"
            data-toggle="modal"
            data-target="#modal1"
            class="btn btn-danger btn-lg ml-2"
          >
            Red pill
          </button>
        </div>
      </div>
      <div class="fixed-wrap">
        <div class="fixed"></div>
      </div>
    </div>
    <!-- End Fixed Background IMG -->

    <!-- Emoji Navbar Second -->
    <a
      class="navbar bg-primary sticky-top emoji"
      href="#emoji"
      role="button"
      data-toggle="collapse"
      ><i class="fas fa-plug"></i
    ></a>
    <div class="collapse" id="emoji">
      <div class="container">
        <div class="row">
          <div class="col-sm-6 col-md-3">
            <img src="img/emoji/panda.gif" alt="" class="w-100" />
          </div>
          <div class="col-sm-6 col-md-3">
            <img src="img/emoji/poo.gif" alt="" class="w-100" />
          </div>
          <div class="col-sm-6 col-md-3">
            <img src="img/emoji/unicorn.gif" alt="" class="w-100" />
          </div>
          <div class="col-sm-6 col-md-3">
            <img src="img/emoji/chicken.gif" alt="" class="w-100" />
          </div>
        </div>
      </div>
    </div>
    <!-- Modal Popup -->
    <!-- modal連接處 -->
    <div class="modal fade" id="modal1">
      <div class="modal-dialog">
        <img src="img/emoji/poo.gif" alt="" class="w-100" />
      </div>
    </div>
    <!-- Start Two Column Section -->
    <div class="container my-5">
      <div class="row py-4">
        <div class="col-lg-4 mb-4 my-lg-auto">
          <h1 class="text-dark font-weight=bold mb-3">We've Expecting YOu</h1>
          <p class="mb-4">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente
            tenetur minus illum excepturi beatae neque at numquam a nam
            voluptas!
          </p>
          <a href="#" target="_blank" class="btn btn-outline-dark btn-lg"
            >The Agency THeme</a
          >
        </div>

        <div class="col-lg-8">
          <img src="img/code.jpg" alt="" class="w-100" />
        </div>
      </div>
    </div>
    <!-- End Two Column Section -->

    <!-- Start Jumbotron -->
    <div class="jumbotron py-5 mb-0">
      <div class="container">
        <div class="row">
          <div class="col-md-7 col-lg-8 col-xl-9 my-auto">
            <h4>Lorem ipsum dolor sit amet.</h4>
          </div>

          <div class="col-md-5 col-lg-4 col-xl-3 pt-4 pt-md-0">
            <a href="#" class="btn btn-primary btn-lg">Contact US</a>
          </div>
        </div>
      </div>
    </div>
    <!-- End Jumbotron -->

    <!-- Start Footer -->
    <footer>
      <div class="container">
        <div class="row text-light text-center py-4 justify-content-center">
          <div class="col-sm-10 col-md-8 col-lg-6">
            <img src="img/logo-white.png" alt="" />
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto
              laudantium culpa voluptates repellat! Hic rerum error facilis
              sequi natus voluptates enim tenetur. Provident iusto laborum minus
              aliquam, eum placeat?
            </p>
            <ul class="social pt-3 m-auto">
              <li>
                <a href="#"><i class="fab fa-facebook"></i></a>
              </li>
              <li>
                <a href="#"><i class="fab fa-twitter"></i></a>
              </li>
              <li>
                <a href="#"><i class="fab fa-instagram"></i></a>
              </li>
              <li>
                <a href="#"><i class="fab fa-youtube"></i></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
    <!-- End Footer -->

    <!-- Start Socket -->
    <div class="socket text-light text-center py-3">
      <p>&copy; <a href="#">123.com</a></p>
    </div>
    <!-- End Socket -->

    <!-- Script Source Files -->
    <!-- jQuery -->
    <script src="js/jquery-3.5.1.min.js"></script>
    <!-- Bootstrap 4.5 JS -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Popper JS -->
    <script src="js/popper.min.js"></script>
    <!-- Font Awesome -->
    <script src="js/all.min.js"></script>
    <!-- End Script Source Files -->
  </body>
</html>

CSS:

CSS完整程式碼

CSS 原始碼