Bootstrap4

1. 開發環境

使用工具

範例網站

https://webugm.github.io/bs4/

GitHub

HTML是網頁前端語言，不需伺服器，透過瀏覽器即可執行，但如果要讓別人觀看，放在網頁伺服器是最快速的方法。

這裡我們使用GitHub Pages來當我們的網頁伺服器，研習結果也要上傳至此。

官網：https://github.com/
註冊帳號
註冊完成須至電子信箱收驗證信
建立「repositoy」
設定GitHub pages：請參考 https://goo.gl/8Ncsnb

Git

官網：https://git-scm.com/
下載：https://git-scm.com/download/win
在下載頁面，會自動偵測適合版本的安裝版，建議取消，改用「攜帶版」安裝

使用

執行「PortableGit/git-bash.exe」
設定 config
git config --global user.name "tawan158"
git config --global user.email "tawan158@ugm.com.tw"
git config --global color.ui true
git config --list 查詢

請自行將紅字部份，換成自己的 GitHub帳號與 email
第一次「push」時，會要求「GitHub 帳號、密碼」

clone repository

在本機端建立資料夾「github」，用來放置專案。(此資料夾名稱不要有中文、空白，也不要放在中文目錄下)
Windows 指令
cd：改變目錄

clone repositoy
git clone https://github.com/帳號/數據庫名稱.git

上傳

git add .
git commit -m "訊息"
git push origin master

注意：

上傳時，注意工作目錄位置
第1次上傳，會要求輸入「GitHub帳密」
第2次以後，請使用「上、下鍵」

Bootstrap4

2. Bootstrap4 介紹

一、簡介

Bootstrap 是目前最流行的前端開發框架
Bootstrap 是一個用於開發 HTML、CSS 和 JS 的開源工具包
世界上最受歡迎的前端元件庫，建立響應式、行動優先的專案。
官網：https://getbootstrap.com/
中文：http://bootstrap.hexschool.com/

二、CSS框架

單位：rem
佈局：flexbox
基礎： sass
基於 jQuery 開發的插件來快速建構你的想法或是應用程式

三、安裝

下載Bootstrap至我們的專案並解壓縮：https://goo.gl/whweGy
下載JQuery：https://code.jquery.com/jquery-3.3.1.min.js
下載Popper：https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js

套用
將專案開啟至編輯器
新增一個檔案：index.html
注意js的順序
http://bootstrap.hexschool.com/docs/4.0/utilities/colors/

<!DOCTYPE html>
<html lang="zh-Hant-TW">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
 
    <title>Bootstrap 離線版</title>
  </head>
  <body>
 
  </body>
</html>

請用開發人員工具「F12」=> Network 檢查引入的Js、Css是否正確

CDN套用
新增一個檔案：cdn.html
注意：這裡的jquery是瘦身版(不含ajax、動畫效果)

<!doctype html>
<html lang="zh-Hant-TW">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <title>Bootstrap CDN</title>
  </head>
  <body>
   
  </body>
</html>

Bootstrap4

2-1 佈局頁面

一、嚮應式斷點：Bootstrap4 為行動優先的架構，所以預設的斷點為 (xs)

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

一、container(固定寬度)

最大寬度(xs-576)：540px
最大寬度(sm-768)：720px
最大寬度(md-992)：960px
最大寬度(lg-1200)：1140px

二、container-fluid(滿版寬度)

三、練習

codepen：https://codepen.io/ugm/pen/YaepqY
GitHub：https://webugm.github.io/bootstrap4/container.html

Bootstrap4

2-2 網格系統

一、介紹

container、container-fluid
row
col
Bootstrap為 12欄的網格系統
box-sizing：border-box

二、練習

GitHub：https://webugm.github.io/bootstrap4/grid.html

三、其他

加入 .w-100可以分隔列, 讓 Column 換行
https://codepen.io/ugm/pen/NYEweM

Bootstrap4

2-3 網格注意事項

最外層必需有「容器」container、container-fluid
col 外面須有 row、row裡面須有col，且可以巢狀
內容須放置在col內，不要直接放到col上，這樣才會有gutter(間距)

Bootstrap4

2-4 自動的平均分配欄寬

Bootstrap 4 因為使用了 CSS Flexbox，所以不輸入數字 = 平均分配欄寬。

一、Bootstrap 4 不需輸入數字就能根據 col 的數量分配欄寬

<div class="row">
  <div class="col-sm"></div>
  <div class="col-sm"></div>
  <div class="col-sm"></div>
</div>

https://codepen.io/ugm/pen/rdQYGo

二、設定其中一個欄寬，剩下的平均分配：

<div class="row">
  <div class="col-sm"></div>
  <div class="col-sm-6"></div>
  <div class="col-sm"></div>
</div>

三、動態調整欄寬

<div class="row">
  <div class="col-sm">a</div>
  <div class="col-sm-auto">bbbbbbbbbbbbbbbbbbbbbbbbbb</div>
  <div class="col-sm">c</div>
</div>

Bootstrap4

2-5 水平對齊

一、水平對齊： Bootstrap 4 一樣利用了 Flexbox 的特性實現水平對齊。

justify-content-start：靠左對齊(預設)
justify-content-center：置中對齊
justify-content-end：靠右對齊
justify-content-around：分散對齊(含左右)
justify-content-between：分散對齊(不含左右)

二、程式碼

https://codepen.io/ugm/pen/dmQZBp

<div class="container">  
  <div class="row justify-content-start my-5">
    <div class="col-2"><div class="cell">A</div></div>
    <div class="col-2"><div class="cell">B</div></div>
    <div class="col-2"><div class="cell">C</div></div>
  </div>
  <div class="row justify-content-center my-5">
    <div class="col-2"><div class="cell">A</div></div>
    <div class="col-2"><div class="cell">B</div></div>
    <div class="col-2"><div class="cell">C</div></div>
  </div>
  <div class="row justify-content-end my-5">
    <div class="col-2"><div class="cell">A</div></div>
    <div class="col-2"><div class="cell">B</div></div>
    <div class="col-2"><div class="cell">C</div></div>
  </div>
  <div class="row justify-content-around my-5">
    <div class="col-2"><div class="cell">A</div></div>
    <div class="col-2"><div class="cell">B</div></div>
    <div class="col-2"><div class="cell">C</div></div>
  </div>
  <div class="row justify-content-between my-5">
    <div class="col-2"><div class="cell">A</div></div>
    <div class="col-2"><div class="cell">B</div></div>
    <div class="col-2"><div class="cell">C</div></div>
  </div>  
</div>

.row{
  background: #aa0;
  border: 1px blue solid;
}
.cell{
  background: #ccc;
  padding: 10px;
}

Bootstrap4

2-6 垂直對齊

一、垂直對齊：Bootstrap 4 有使用 Flexbox 語法，所以我們可以利用 Flexbox 的特性，輕易的將 Column 置頂、置中，與置底對齊。(row)

align-items-start(預設)：置頂
align-items-center：置中
align-items-end：置底

程式碼：https://codepen.io/ugm/pen/LdXeyW

<div class="container">
  <div class="row align-items-start my-3">
    <div class="col-2"><div class="cell">A</div></div>
    <div class="col-2"><div class="cell">B</div></div>
    <div class="col-2"><div class="cell">C</div></div>
  </div>
  <div class="row align-items-center mb-3">
    <div class="col-2"><div class="cell">A</div></div>
    <div class="col-2"><div class="cell">B</div></div>
    <div class="col-2"><div class="cell">C</div></div>
  </div>
  <div class="row align-items-end mb-3">
    <div class="col-2"><div class="cell">A</div></div>
    <div class="col-2"><div class="cell">B</div></div>
    <div class="col-2"><div class="cell">C</div></div>
  </div>
</div>

css

.row{
  background: #aa0;
  border: 1px blue solid;
  height: 100px;
}
.cell{
  background: #ccc;
  padding: 10px;
}

二、單獨針對 Column 做對齊的動作(col)

align-self-start：置頂
align-self-center：置中
align-self-end：置底

程式碼：


  <h4>單獨</h4>  
  <div class="row my-3">
    <div class="col-2 align-self-start"><div class="cell">A</div></div>
    <div class="col-2 align-self-center"><div class="cell">B</div></div>
    <div class="col-2 align-self-end"><div class="cell">C</div></div>
  </div>

Bootstrap4

2-7 Column 排序

一、Column 排序

order-unordered：不排序
order-first：第一個
order-last：最後一個
order-1 ~ order-12
https://codepen.io/ugm/pen/EEOoeZ

Bootstrap4

3. 通用類別

Bootstrap4

3-1 Border

範例：https://webugm.github.io/bootstrap4/border.html

一、增加

全部 border
上邊 border-top
右邊 border-right
下邊 border-bottom
左邊 border-left

二、減少

全部 border-0
上邊 border-top-0
右邊 border-right-0
下邊 border-bottom-0
左邊 border-left-0

三、顏色

border-primary
border-secondary
border-success
border-danger
border-warning
border-info
border-light
border-dark
border-white

四、Border-radius

rounded
rounded-top
rounded-right
rounded-bottom
rounded-left
rounded-circle
rounded-0

Bootstrap4

3-2 Clearfix 清除浮動

一、浮動

float-left
float-right
float-none

二、清除浮動

通過對 父元素 增加.clearfix（清除浮動）以方便的清除float（浮動）。
範例：https://webugm.github.io/bootstrap4/clearfix.html

Bootstrap4

3-3 顏色

一、字型

字型顏色
範例：https://codepen.io/ugm/pen/QmzEor
範例：https://webugm.github.io/bootstrap4/color.html

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

情境色彩也提供 hover 和 focus 狀態，對於連結類型也同時能順利運行。注意，.text-white、.text-muted 沒有連結樣式。

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

二、背景

字型、背景可以搭配使用

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

Bootstrap4

3-4 間隔 (Spacing)

一、間隔 (Spacing)

Bootstrap 包括各種簡寫響應式 margin、padding 的通用類別，可用來修改一個元素的外觀。

二、使用

用於所有中斷點（從xs到xl）時，不需加入中斷點縮寫。這些 Class 將從 min-width: 0 及以上引用，不受 media query 的約束。但是其餘的就包含中斷點縮寫。對於 xs，使用固定格式 {property}{sides}-{size} 命名這些 Class，對於 sm、 md、lg 和 xl，使用格式 {property}{sides}-{breakpoint}-{size}。
屬性設定:

m - 這個 class 會設定 margin
p - 這個 class 會設定 padding

邊緣設定:

t - 這個 class 會設定 margin-top 或 padding-top
b - 這個 class 會設定 margin-bottom 或 padding-bottom
l - 這個 class 會設定 margin-left 或 padding-left
r - 這個 class 會設定 margin-right 或 padding-right
x - 這個 class 會設定 *-left 和 *-right
y - 這個 class 會設定 *-top 和 *-bottom
空白 - 如果邊緣 class 未加入則會設定 margin 或 padding 在元素的四個邊緣

尺寸設定:

0 - 這個 class 會設定 margin 或 padding 的樣式值為 0
1 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * .25
2 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * .5
3 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer
4 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * 1.5
5 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * 3
auto - 這個 class 會設定 margin 為 auto

Bootstrap4

4. 組件

Bootstrap4

4-1 圖片

一、響應式圖片

Bootstrap 中的圖片可利用 .img-fluid 設定為響應式。 max-width：100％; 和 height：auto; 也需一併使用，讓圖片可依父元素屬性進行縮放。

二、圖片縮略圖

除了邊框-圓角公用程式之外，你可以使用 .img-thumbnail 讓圖片有1px邊框的顯示。

Bootstrap4

5. 專案

fork => https://github.com/webugm/tncomu10701
git clone
付費樣板：https://wrapbootstrap.com/
免費樣板：https://startbootstrap.com/template-categories/all/

Bootstrap4

6. 表格

一、使用最基本的表格標記，以下是 Bootstrap 中 .table 的表格的樣式。Bootstrap 4.0 中繼承了全部的表格樣式，這就意味至為任何巢狀表格添加樣式的方式和外層表格相同。

也可以作反轉色彩，使用 .table-dark 在深色背景下放上淺色文本。

二、表格 head 選項

與預設和反轉樣式相似，使用如下兩個 .thead-light 或 .thead-dark 中的一個將 <thead> 顯示淺灰或深灰。

三、條紋行

使用 .table-striped 在 <tbody>中的任何表格行添加斑馬紋

四、帶框的表格

加入 .table-bordered 在表格和儲存格的四邊上添加邊框。

五、可滑入行

添加 .table-hover 以便在一個 <tbody> 中的表格行上啟用一個 hover 狀態。

六、小表格

添加 .table-sm 將儲存格 padding 縮減一半的方式讓表格更加精簡。

七、語意化 class

使用語意化 class 給表格列或單獨的儲存格上色。

<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>
  
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

Bootstrap4

6-1 表格寬度

在 table => row m-0
在 thead、tbody => col-12
在 tr => row
在 th、td => col-x

Bootstrap4

1. 開發環境

使用工具

範例網站

GitHub

Git

使用

clone repository

上傳

注意：

2. Bootstrap4 介紹

2-1 佈局頁面

2-2 網格系統

一、介紹

二、練習

三、其他

2-3 網格注意事項

2-4 自動的平均分配欄寬

一、Bootstrap 4 不需輸入數字就能根據 col 的數量分配欄寬

2-5 水平對齊

一、水平對齊： Bootstrap 4 一樣利用了 Flexbox 的特性實現水平對齊。

二、程式碼

2-6 垂直對齊

2-7 Column 排序

一、Column 排序

3. 通用類別

3-1 Border

3-2 Clearfix 清除浮動

3-3 顏色

3-4 間隔 (Spacing)

4. 組件

4-1 圖片

一、響應式圖片

二、圖片縮略圖

5. 專案

6. 表格

6-1 表格寬度

7. 學員名冊

編輯