Bootstrap一下，快速建立響應式網站

###### tags: `前端技能樹` # Bootstrap一下，快速建立響應式網站 ### 為什麼要使用Bootstrap？現在的網頁為了能夠適應不同裝置，會進行響應式設計；並且大多考量到使用者經驗設計(UX，User Experience)，使用一致性的設計元素。因此我們會需要針對每個元素去設定重複的樣式，以及在不同螢幕大小上的樣子。 **Bootstrap 是一套由 HTML、CSS 和 JavaScript 組成的工具**，讓你只要配合對應的 HTML 架構，加上 Bootstrap Class，就能夠**快速建立響應式網站，並且輕鬆設計出保有一致性的介面**，使網頁開發更容易。 ## 導入 Bootstrap 如何在專案中導入 Bootstrap？在[官網的安裝教學](https://getbootstrap.com/docs/5.1/getting-started/download/)有介紹各種導入方式，而其中一個方式就是透過 Bootstrap 的 CDN，直接從網路存取它的 CSS 和 JavaScript 的內容。 HTML ```html= <head>  <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> ...  <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 框架的基礎上再去微調樣式。 ```html= <h1>Bootstrap h1</h1> <h2>Bootstrap h2</h2> <h3>Bootstrap h3</h3> ``` ![](https://i.imgur.com/FYolyLp.png) > 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欄，可以指定每個元素的欄位數量。 ```html= <div class="container"> <div class="row">  <div class="col">1</div> <div class="col">2</div> </div> <div class="row">  <div class="col-8 col-md-6">3</div>  <div class="col">4</div> <div class="col">5</div> </div> </div> ``` ![](https://i.imgur.com/GvThdss.gif) ## 通用類別針對 CSS 樣式屬性設定出一些基本的模板，比如 Color、Border、Position ...等，讓我們能夠透過運用這些類別，快速設計出元素樣式，對於設計出一套一致性UI非常有用。 ### Color Bootstrap 預設的顏色樣式，可以在文字、背景中使用。 ![](https://i.imgur.com/qV5OnZ3.png) ```html=  <p class="text-danger">...</p> ``` ### Spacing Bootstrap 預設的 ```margin```、```padding```，有基於基礎尺寸設定的幾種 ```size```。 ```html= <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 ![](https://i.imgur.com/zVAFRIV.png) ```html <button type="button" class="btn btn-primary">Primary</button> ``` ### Navbar ```html= <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> ``` ![](https://i.imgur.com/8Cf2Rms.gif) ## 小結今天介紹了幾個 Bootstrap 的功能，除了排版佈局的部分建議你先進一步完整學習之外，其實剛開始使用不太需要清楚知道 Bootstrap 各個設定、組件的細節，**只要知道它大概提供了哪些功能，了解 Bootstrap 官方文件的架構後，依據你想要的組件、樣式去查詢套用方法**，基於框架再擴展自定義的樣式，就能很好的利用 Bootstrap 加速開發。下一篇文章會來講到工程師必備的技能 — Git，運用它進行專案的版本控管，那我們就下章再見囉！如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱❤️ ### 參考資料 - [Bootstrap - Document](https://getbootstrap.com/)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.