[Day 12 - Bootstrap] Bootstrap一下，快速建立響應式網站 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 12

Modern Web

Follow me! 來一場前端技能樹之旅系列第 12 篇

[Day 12 - Bootstrap] Bootstrap一下，快速建立響應式網站

13th鐵人賽前端技能 bootstrap modern web

May

2021-09-25 15:09:56

1989 瀏覽

分享至

為什麼要使用Bootstrap？

現在的網頁為了能夠適應不同裝置，會進行響應式設計；並且大多考量到使用者經驗設計(User Experience)，使用一致性的設計元素。因此我們會需要針對每個元素去設定重複的樣式，以及在不同螢幕大小上的樣子。

Bootstrap 是一套由 HTML、CSS 和 JavaScript 組成的工具，讓你只要配合對應的 HTML 架構，加上 Bootstrap Class，就能夠快速建立響應式網站，並且輕鬆設計出保有一致性的介面，使網頁開發更容易。

導入 Bootstrap

如何在專案中導入 Bootstrap？在官網的安裝教學有介紹各種導入方式，而其中一個方式就是透過 Bootstrap 的 CDN，直接從網路存取它的 CSS 和 JavaScript 的內容。

HTML

<head>
    <!-- Bootstrap CSS 要放在其他自定義 CSS 前面-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
    ...
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>

預設統一樣式

Bootstrap 會預先設定一些 HTML 元素基本的樣式，包括文字排版、圖片和表格等等。若這些樣式並非是你想要的，Bootstrap 也允許你使用 Sass 去自定義、擴展它的基本設定；或是你也可以直接透過建立 CSS 檔案，在 Bootstrap 框架的基礎上再去微調樣式。

<h1>Bootstrap h1</h1>
<h2>Bootstrap h2</h2>
<h3>Bootstrap h3</h3>

Sass 是一種 CSS 預處理器(CSS Preprocessor)，能夠以簡潔、維護性高的方式撰寫 CSS，提升開發效率。

排版佈局

斷點 (Breakpoints)

Bootstrap中的斷點(Breakpoints)一樣是用於控制網頁在不同裝置上進行響應式的排版變化，採用的是 Mobile first 的設計方式，預設使用六個斷點如下：

Breakpoint	Class infix	Dimensions
X-Small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

網格系統 (Grid system)

另外它還基於 Flexbox 建立了一套 Grid system，使用容器、行列來佈局，row 包住 column ，每一行會有12欄，可以指定每個元素的欄位數量。

<div class="container">
  <div class="row">
    <!-- 兩個元素平分12欄 -->
    <div class="col">1</div>
    <div class="col">2</div>
  </div>
  <div class="row">
    <!-- >=768px：6格 / <768px：8格 -->
    <div class="col-8 col-md-6">3</div>
    <!-- 平分剩下的欄位 -->
    <div class="col">4</div>
    <div class="col">5</div>
  </div>
</div>

通用類別

針對 CSS 樣式屬性設定出一些基本的模板，比如 Color、Border、Position ...等，讓我們能夠在 Class 屬性運用這些類別，快速設計出元素樣式，對於設計出一套一致性UI非常有用。

Color

Bootstrap 預設的顏色樣式，可以在文字、背景中使用。

<!-- 設定文字是primary顏色 -->
<p class="text-danger">...</p>

Spacing

Bootstrap 預設的 margin、padding，有基於基礎尺寸設定的幾種 size。

<div class="mx-0">margin-left and margin-right are 0</div>
<div class="pt-0">padding-top is 0</div>

元件 Component

而 Bootstrap 最方便的是，它事先建立了一些網頁常用的UI元件，同時做好響應式設計，讓你透過使用它寫好的程式碼就可以快速建立出想要的元件。

Button

<button type="button" class="btn btn-primary">Primary</button>

Navbar

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Current page</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Page2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Page3</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

小結

今天介紹了幾個 Bootstrap 的功能，除了排版佈局的部分建議你先進一步完整學習之外，其實剛開始使用不太需要清楚知道 Bootstrap 各個設定、組件的細節，只要知道它大概提供了哪些功能，了解 Bootstrap 官方文件的架構後，依據你想要的組件、樣式去查詢套用方法，基於框架再擴展自定義的樣式，就能很好的利用 Bootstrap 加速開發。

下一篇文章會來講到工程師必備的技能 — Git，運用它進行專案的版本控管，那我們就下章再見囉！

如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱❤️