現在的網頁為了能夠適應不同裝置,會進行響應式設計;並且大多考量到使用者經驗設計(User Experience),使用一致性的設計元素。因此我們會需要針對每個元素去設定重複的樣式,以及在不同螢幕大小上的樣子。
Bootstrap 是一套由 HTML、CSS 和 JavaScript 組成的工具,讓你只要配合對應的 HTML 架構,加上 Bootstrap Class,就能夠快速建立響應式網站,並且輕鬆設計出保有一致性的介面,使網頁開發更容易。
如何在專案中導入 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,提升開發效率。
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 |
另外它還基於 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非常有用。
Bootstrap 預設的顏色樣式,可以在文字、背景中使用。
<!-- 設定文字是primary顏色 -->
<p class="text-danger">...</p>
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>
而 Bootstrap 最方便的是,它事先建立了一些網頁常用的UI元件,同時做好響應式設計,讓你透過使用它寫好的程式碼就可以快速建立出想要的元件。
<button type="button" class="btn btn-primary">Primary</button>
<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,運用它進行專案的版本控管,那我們就下章再見囉!
如果文章中有錯誤的地方,要麻煩各位大大不吝賜教;喜歡的話,也要記得幫我按讚訂閱❤️