# Bootstrap 4 學習筆記 (一) : 環境配置
# Bootstrap 4 學習筆記 (二) : 網格與容器
# Bootstrap 4 學習筆記 (三) : 表格
# Bootstrap 4 學習筆記 (四) : 圖示與按鈕
Bootstrap 教學文件參考 :
# 第 10 堂課 - 初探 bootstrap 網頁製作
# Bootstrap 初學介紹 #靜態篇
一. 色彩樣式類別 :
色彩主要是套用在容器或文字, 網頁中的色彩分前景與背景, Bootstrap 提供如下前景與背景色彩樣式類別 :
| 前景顏色樣式類別 | 說明 |
| text-muted | 設定文字前景色彩為黑色 (不重要) |
| text-primary | 設定文字前景色彩為深藍色 (重要) |
| text-success | 設定文字前景色彩為綠色 (表示成功) |
| text-info | 設定文字前景色彩為藍色 (表示訊息) |
| text-warning | 設定文字前景色彩為黃色 (表示警告) |
| text-danger | 設定文字前景色彩為紅色 (表示危險) |
| 背景顏色樣式類別 | 說明 |
| bg-primary | 設定文字背景色彩為深藍色 (重要) |
| bg-success | 設定文字背景色彩為綠色 (表示成功) |
| bg-info | 設定文字背景色彩為藍色 (表示訊息) |
| bg-warning | 設定文字背景色彩為黃色 (表示警告) |
| bg-danger | 設定文字背景色彩為紅色 (表示危險) |
範例 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">
<h2 class="text-muted">Hello World (text-muted)</h2>
<h2 class="text-primary">Hello World (text-primary)</h2>
<h2 class="text-success">Hello World (text-success)</h2>
<h2 class="text-info">Hello World (text-info)</h2>
<h2 class="text-warning">Hello World (text-warning)</h2>
<h2 class="text-danger">Hello World (text-danger)</h2>
</div>
</body>
</html>
瀏覽結果如下 :
感覺 text-warning 的黃色好像偏橘色. 下面範例為背景色測試 :
範例 2 : 色彩樣式測試 (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">
<h2 class="bg-primary">Hello World (bg-primary)</h2>
<h2 class="bg-success">Hello World (bg-success)</h2>
<h2 class="bg-info">Hello World (bg-info)</h2>
<h2 class="bg-warning">Hello World (bg-warning)</h2>
<h2 class="bg-danger">Hello World (bg-danger)</h2>
</div>
</body>
</html>
瀏覽結果如下 :
背景色 bg-warning 的黃色比較像黃色, 但偏淡了些.
二. 文字效果樣式類別 :
許多文字效果在 HTML5 都必須用 CSS 樣式去設定, Bootstrap 將許多常用的文字效果製作成方便好用的樣式類別如下表 :
| 文字效果樣式類別 | 說明 |
| text-left | 文字向左對齊 |
| text-center | 文字置中對齊 |
| text-right | 文字向右對齊 |
| text-nowrap | 文字超出容器寬度不跳行 |
| text-truncate | 文字超出容器寬度以 ... 取代 |
| text-lowercase | 英文字母全部轉換為小寫 |
| text-uppercase | 英文字母全部轉換為大寫 |
| text-capitalize | 英文字母每個字第一個字母大寫 |
| font-weight-bold | 文字以粗體顯示 |
| font-weight-normal | 文字以正常粗細顯示 |
| font-weight-light | 文字以細字體顯示 |
| font-italic | 文字以斜體顯示 |
不過實測結果, text-truncate 與最後面 4 個無效.
參考 :
# https://bootstrap.hexschool.com/docs/4.0/utilities/text/
範例 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">
<h2 class="text-left">Hello World (text-left)</h2>
<h2 class="text-center">Hello World (text-center)</h2>
<h2 class="text-right">Hello World (text-right)</h2>
<h2 class="text-nowrap">Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World (text-justify)</h2>
</div>
</body>
</html>
瀏覽結果如下 :
在 HTML 中字串太長超出容器寬度時預設會將多出的字串跳行顯示 (text-wrap), 若要停止跳行就要用 text-nowrap. 下面範例測試大小寫轉換 :
範例 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">
<h2 class="text-lowercase">Hello World (text-lowercase)</h2>
<h2 class="text-uppercase">Hello World (text-uppercase)</h2>
<h2 class="text-capitalize">heLLo woRLd (text-capitalize)</h2>
<h2 class="text-truncate">Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World (text-truncate)</h2>
</div>
</body>
</html>
瀏覽結果如下 :
可見 text-capitalize 只會將每個字的第一個字母改成大寫, 其餘字母不變. 但奇怪的是 text-truncate 卻無作用, why? 即使加上 display: block 等樣式也沒有用, 可能是 bug, 這只好回歸 CSS 用 text-overflow: ellipsis; 來解決, 參考 :
# Bootstrap 4 list item single line only (ellipsis not working)
下面範例測試文字的 font-weight 與 font-style :
範例 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">
<p class="font-weight-bold">Hello World (font-weight-bold)</p>
<p class="font-weight-normal">Hello World (font-weight-normal)</p>
<p class="font-weight-light">Hello World (font-weight-light)</p>
<p class="font-italic">Hello World (font-italic)</p>
</div>
</body>
</html>
但很奇怪, 不曉得為什麼, 瀏覽結果無效 :
三. 圖片樣式類別 :
在 HTML 中, 圖片放在 img 元素之中 (用 src 屬性指定圖片來源), 參考 :
# 網頁技術速學筆記 (一) : HTML 基礎
Bootstrap 提供了幾個常用的圖片樣式類別如下表 :
| 圖片樣式類別 | 說明 |
| img-responsive | 響應式圖片 (隨父元素寬度自動縮放) |
| img-rounded | 圓角圖片 |
| img-circle | 圓形圖片 |
| img-thumbnail | 縮圖圖片 |
| center-block | 圖片置中 |
套用 img-responsive 類別的圖片在不同螢幕大小的裝置中會自動縮放 (自適應或響應式 responsive), 避免需用捲軸捲動之困擾.
範例 6 : 圖片樣式測試 (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">
<img class="img-responsive" src="../html5/img/20190510-cat.jpg">
</div>
</body>
</html>
瀏覽結果如下, 將瀏覽器縮放時, 圖片也跟著縮放, 縮到圖片的解析度時, 高度部分才會出現捲軸 :
範例 7 : 圖片樣式測試 (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">
<img class="img-rounded" width="33%" src="../html5/img/20190510-cat.jpg">
<img class="img-circle" width="33%" src="../html5/img/20190510-cat.jpg">
<img class="img-thumbnail" width="33%" src="../html5/img/20190510-cat.jpg">
</div>
</body>
</html>
瀏覽結果如下 :
由於原圖片為長方形, 因此 img-circle 的效果變成橢圓形.
下面範例測試 center-block 類別的圖片置中效果 :
範例 8 : 圖片樣式測試 (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">
<img class="center-block" src="../html5/img/20190510-cat.jpg">
<h2 class="text-center">可愛的小咪<h2>
</div>
</body>
</html>
套用 center-block 類別後, 圖片就置中了, 瀏覽結果如下 :
哈哈哈, 我家小咪真可愛.
沒有留言 :
張貼留言