# Bootstrap 4 學習筆記 (一) : 環境配置
# Bootstrap 4 學習筆記 (二) : 網格與容器
# Bootstrap 4 學習筆記 (三) : 表格
Bootstrap 教學文件參考 :
# 第 10 堂課 - 初探 bootstrap 網頁製作
# Bootstrap 初學介紹 #靜態篇
一. 圖示 (icon) :
圖示 (icon) 在 UI 設計上扮演非常重要的角色, 通常用在工具列或操作按鈕上. 設計良好的圖示可讓使用者第一眼就能了解按鈕或選項的功能. Bootstrap 提供了來自 Glyphicon Halsling 超過 250 種的文字圖示 (glyphicon), 參考 :
# https://getbootstrap.com/docs/3.3/components/
這些樣式類別名稱都是以 glyphicon- 開頭, 用法如下 :
- 必須以沒有內容的 HTML 元素為容器, 通常使用 span 元素.
- 必須先套用基礎類別 glyphicon 後再套用以 glyphicon- 開頭的類別.
- 文字圖示的容器 span 元素最好加上 aria-hidden="true" 屬性.
# 被忽視的HTML attribute aria-label、aria-hidden
文字圖示載體容器 (即 span 元素) 的相關樣式類別如下表 :
| glyphicon 樣式類別 | 說明 |
| glyphicon | 文字圖示的必要基礎類別 |
| glyphicon-圖示名稱 | 各種文字圖示 |
| form-control-feedback | 在表單群組中用來將文字圖示內嵌到控制項裡 |
其中 form-control-feedback 用在表單群組, 以便將群組內的文字圖示回應給控制項, 增進控制項之 UI 表達力, 例如在 search 搜尋框中嵌入一個放大鏡搜尋圖示等用途.
範例 1 : 文字圖示測試 (1) [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
<span class="glyphicon glyphicon-email" aria-hidden="true"></span>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
<span class="glyphicon glyphicon-print" aria-hidden="true"></span>
<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
<span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>
<span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
<span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span><br>
<span class="glyphicon glyphicon-volume-on" aria-hidden="true"></span>
<span class="glyphicon glyphicon-volume-off" aria-hidden="true"></span>
<span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
<span class="glyphicon glyphicon-volume-down" aria-hidden="true"></span>
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
<span class="glyphicon glyphicon-file" aria-hidden="true"></span>
<span class="glyphicon glyphicon-duplicate" aria-hidden="true"></span>
<span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span>
<span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>
<span class="glyphicon glyphicon-send" aria-hidden="true"></span>
<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
<span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span>
<span class="glyphicon glyphicon-open" aria-hidden="true"></span>
<span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
<span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
<span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span>
<span class="glyphicon glyphicon-circle-arrow-right" aria-hidden="true"></span>
<span class="glyphicon glyphicon-circle-arrow-up" aria-hidden="true"></span>
<span class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true"></span>
</div>
</body>
</html>
瀏覽結果如下 :
注意, span 元素不要有任何內容, 否則會顯示在圖示後面.
如果覺得預設圖示太小, 可以用 CSS 樣式更改 glyphicon 類別的 font-size 樣式, 例如在上面範例的 head 內添加如下之 style 樣式設定 :
<style>
.glyphicon {font-size: 30px;}
</style>
這樣每個圖示都會放大成 30 px * 30 px 的大小, 例如 :
範例 2 : 文字圖示測試 (2) 調整圖示大小 [看原始碼]
參考 :
# How Do I Make Glyphicons Bigger? (Change Size?)
二. 按鈕 (Button) :
HTML 元素中可用 a, input, 以及 button 來製作按鈕, 但其外觀普普, Bootstrap 提供了 btn 與以 btn- 開頭的一系列樣式類別, 只要在按鈕元素上套用這些類別, 就能讓普普的按鈕來個華麗轉身. 按鈕相關樣式如下表 :
| 按鈕相關之樣式類別 | 說明 |
| btn | 必要的基礎按鈕樣式 |
| btn-default | 預設按鈕樣式 |
| btn-primary | 深藍色按鈕 (表示主要功能) |
| btn-success | 綠色按鈕 (表示成功) |
| btn-info | 藍色按鈕 (表示訊息) |
| btn-warning | 黃色按鈕 (表示警告) |
| btn-danger | 紅色按鈕 (表示危險) |
| btn-link | 顯示白底藍色超連結 |
| btn-xs | 超小按鈕 |
| btn-sm | 小按鈕 |
| btm-lg | 大按鈕 |
| btn-block | 與父元素寬度相同的按鈕 |
| active | 啟用按鈕 |
| disabled | 停用按鈕 |
注意, 其中 btn 是必要的基礎預設類別, 在套用其他以 btn- 開頭的類別之前必須先套用 btn 才會有效果.
範例 3 : 按鈕測試 (1) 預設按鈕 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<a class="btn btn-default" role="button" href="#">a: role=button</a>
<input class="btn btn-default" type="button" value="input: button">
<input class="btn btn-default" type="submit" value="input: submit">
<input class="btn btn-default" type="reset" value="input: reset">
<button class="btn btn-default disabled">button: disabled</button>
<button class="btn btn-default active">button: active</button>
</div>
</body>
</html>
瀏覽結果如下, 可見 active 的按鈕顏色較深 :
下面範例是 5 種特定顏色的按鈕 :
範例 4 : 按鈕測試 (2) 按鈕顏色 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button class="btn btn-default">btn-default</button>
<button class="btn btn-primary">btn-primary</button>
<button class="btn btn-success">btn-success</button>
<button class="btn btn-info">btn-info</button>
<button class="btn btn-warning">btn-warning</button>
<button class="btn btn-danger">btn-danger</button>
<button class="btn btn-link">btn-link</button>
</div>
</body>
</html>
瀏覽結果如下 :
神奇的是, Bootstrap 居然把 button 元素利用 btn-link 類別換成超連結了.
最後來測試按鈕的尺寸設定類別 :
範例 5 : 按鈕測試 (3) 按鈕尺寸 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button class="btn btn-default">預設按鈕</button>
<button class="btn btn-default btn-xs">超小按鈕</button>
<button class="btn btn-default btn-sm">小按鈕</button>
<button class="btn btn-default btn-lg">大按鈕</button>
<button class="btn btn-default btn-block">與父元素同寬之按鈕</button>
</div>
</body>
</html>
瀏覽結果如下 :
此例最後一個按鈕套用 btn-block 類別, 其寬度與其父元素 (即 div 容器) 相同. 按鈕可以加上文字圖示 (glyphicon), 只要把圖示作為按鈕元件的內容即可, 因此有內容的 a 元素與 button 元素最適合, 例如 :
範例 6 : 按鈕測試 (4) 加上文字圖示 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button class="btn btn-info">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
<label>放入購物車</label>
</button>
<a class="btn btn-success">
<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
<label>聯絡客服</label>
</a>
</div>
</body>
</html>
此例分別使用 button 與 a 元素製作按鈕, 因為它們才有內容 (即 innerHTML 屬性), 瀏覽結果如下 :
加上文字圖示的按鈕可讀性就比較高了.
沒有留言:
張貼留言