Introduction
- Bootstrap是免費的網頁前端設計工具，包含HTML跟CSS為基礎的模組，可以快速的設計網頁，目前最新版本為Bootstrap 4。欲使用Bootstrap可選擇下載檔案或是自CDN(Content Delivery Network)將其納入(類似JQuery)。
- 欲下載檔案可至https://getbootstrap.com/根據其說明下載。
- 在此使用納入標頭檔方式，注意需同時納入JQuery的標頭檔。
- 接下來建立一個簡單的網頁測試一下，輸入以下程式碼:
- Bootstrap支援html與CSS性質，所以使用一樣html語法(html5應該可以省略部分標籤如<html>等)。
- 記得須將前述的標頭檔納入在<heas></head>內。
- 記得加入這個<meta>標籤，如此可符合使用的顯示工具大小，例如使用手機顯示。
- Boostrap需要將網頁內容放入容器內，容器有兩種類型，.container表示固定寬度(fixed width container)的容器，.container-fluid表示完全寬度(full width container)的容器。
- 使用瀏覽器開啟檔案並觀察顯示結果(按右鍵選檢視網頁原始碼也可看程式碼)。
- 網路上亦有Bootstrap的套裝軟體供使用。
boo1.html
Grid
- Bootstrap使用flexbox來建立grid system，且會根據螢幕大小自動修正。這樣的方式可以讓我們快速的配置版面。
- Grid layout的概念就是一次增加一個row，每一個row最多可以容許12個column，可以nested的形式進行容器分割，所有分割空間必須在一個container內。。
- 每加入一個row(<div class="row">)，可將其分割為最多12個column(class-xx-cc)，其中cc是數字表示column數，總和不得超過12。
- 而class-xx-cc中的xx表示螢幕大小，計有以下幾種:
- Row 3-Column 2內又加入一個row，併分割為兩個column，如此形成巢狀結構(Nested)。
boo1_Grid.html
| .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| extra small devices | small devices | medium devices | large devices | xlarge devices |
| screen width < 576px | screen width >= 576px | screen width >= 768px | screen width >= 992px | screen width >= 1200px |
Text
- Bootstrap對文字的預設值為16px，1.5倍行高。若是使用
則其margin-top:0且margin-bottom:1rem。
- $name: cookie名稱。
- 原則上HTML的標籤e.g.
h1~h6, small, mark, abbr, blockquote, dl(dt, dd), code, kbd, pre等皆可使用，且可能有特殊效果。 - Bootstrap也提供不同的class供使用:
- 可同時使用多個內建的class，e.g. <h6 class="font-italic font-weight-bold text-center">。
boo1_Text.html
| .font-weight-bold | .font-italic | .font-weight-light | .font-weight-normal | .lead |
| .small | .text-left | .text-*-left(*:sm,md,lg,xl) | .text-center | .text-*-center |
| .text-right | .text-*-right | .text-justify | .text-monospace | .text-nowrap |
| .text-lowercase | .text-uppercase | .text-capitalize | .initialism | .list-unstyled |
| .list-inline | .pre-scrollable |
Color
- 除了使用CSS自訂顏色，Bootstrap提供多個顏色的class供使用。
- 原則上Bootstrap希望藉由幾個不同顏色對應不同的情境或內容。
- 顏色相關的class如下:
- .text-可用於文字與link(<a>)，.bg-可用於背景顏色。
boo1_Color.html
| .text-muted | .text-primary | .text-success | .text-info | .text-warning |
| .text-danger | .text-secondary | .text-white | .text-dark | .text-body |
| .text-light | .text-black-50(opacity:50%) | .text-white-50(opacity:50%) | ||
| .bg-primary | .bg-success | .bg-info | .bg-warning | .bg-warning |
| .bg-secondary | .bg-dark | .bg-light |
Table
- Bootstrap提供數個table的模板供使用，僅需改變class name即可。
- 最基本的class為.table，若要加上其他變化再在table後加上-*，e.g. .table-striped。
boo1_Table.html
Images
- 對於圖片，Bootstrap一樣提供幾個簡單的class供修飾圖片。
- 使用class="img-fluid"可試著縮小視窗來觀察結果。
boo1_Image.html
Jumbotron & Alerts
- Jumbotron這個class會顯示灰色區域，Alerts可快速建立alert messages。
- Jumbotron用於div，Alerts可用於div, anchor(<a>)。
- 使用<div class="alert alert-success alert-dismissible">使alert可以關閉。
- 使用<div class="alert alert-info alert-dismissible fade show">使alert關閉時有fade out效果。
boo1_JumbotronAlerts.html