iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Modern Web

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

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

  • 分享至 

  • xImage
  •  

為什麼要使用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 預設的 marginpadding,有基於基礎尺寸設定的幾種 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,運用它進行專案的版本控管,那我們就下章再見囉!

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

參考資料


上一篇
[Day 11 - JS] 互動吧網頁 — Javascipt的DOM 操作 / 事件
下一篇
[Day 13 - Git] Git版本控管,沒有它救不回來的專案
系列文
Follow me! 來一場前端技能樹之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言