# Bootstrap 4 學習筆記 (一) : 環境配置
# Bootstrap 4 學習筆記 (二) : 網格與容器
# Bootstrap 4 學習筆記 (三) : 表格
# Bootstrap 4 學習筆記 (四) : 圖示與按鈕
# Bootstrap 4 學習筆記 (五) : 文字與圖片效果
# Bootstrap 4 學習筆記 (六) : 表單
# Bootstrap 4 學習筆記 (七) : 按鈕選單
# Bootstrap 4 學習筆記 (八) : 導覽頁籤
# Bootstrap 4 學習筆記 (九) : 導覽列
Bootstrap 教學文件參考 :
# 第 10 堂課 - 初探 bootstrap 網頁製作
# Bootstrap 初學介紹 #靜態篇
一. Alert (警示) :
此元件使用具有醒目背景色的 div 區塊來顯示重要訊息, 主要套用 alert 與下列五個樣式類別, 並指定 role="alert" 屬性 :
| 樣式類別 | 說明 |
| alert | 必要的警示區塊樣式 |
| alert-success | 背景為咖啡色之區塊 |
| alert-info | 背景為淡藍色之區塊 |
| alert-warning | 背景為黃色之區塊 |
| alert-danger | 背景為黃色之區塊 |
| alert-dismissible | 添加可關閉按鈕 (x) |
這些 div 外面再用 class="container" 的 div 區塊包起來, 基本結構如下 :
<div class="container">
<div class="alert alert-success" role="alert">
這是 alert-success 訊息！
</div>
</div>
例如 :
<!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">
<div class="alert alert-success" role="alert">
這是 alert-success 訊息！
</div>
<div class="alert alert-info" role="alert">
這是 alert-info 訊息！
</div>
<div class="alert alert-warning" role="alert">
這是 alert-warning 訊息！
</div>
<div class="alert alert-danger" role="alert">
這是 alert-danger 訊息！
</div>
</div>
</body>
</html>
結果如下 :
如果要建立可以關閉的警示, 需要添加 alert-dismissible 樣式類別, 並搭配一個有 close 樣式的 button 物件, 例如 :
<div class="alert alert-danger alert-dismissible" role="alert">
<button class="close" data-dismiss="alert">
<span>×</span>
</button>
這是 alert-danger 訊息！
</div>
完整範例如下 :
範例 1-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">
<div class="alert alert-success" role="alert">
這是 alert-success 訊息！
</div>
<div class="alert alert-info" role="alert">
這是 alert-info 訊息！
</div>
<div class="alert alert-warning" role="alert">
這是 alert-warning 訊息！
</div>
<div class="alert alert-danger" role="alert">
這是 alert-danger 訊息！
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
<button class="close" data-dismiss="alert">
<span>×</span>
</button>
這是 alert-danger 訊息！
</div>
</div>
</body>
</html>
結果如下 :
按後面那個 x 按鈕就可以關閉該條警示訊息了.
二. Panel (面板) :
面板也是像上面 alert 一樣的區塊, 但它除了主體 (body) 外還多出板首 (heading) 板尾 (footer) 兩部分, 不過首尾都是可有可無的. 基本結構由兩層 div 構成, 外層 div 需套用 panel 與下列四種背景色樣式類別 :
面板也是像上面 alert 一樣的區塊, 但它除了主體 (body) 外還多出板首 (heading) 板尾 (footer) 兩部分, 不過首尾都是可有可無的. 基本結構由兩層 div 構成, 外層 div 需套用 panel 與下列四種背景色樣式類別 :
| 面板背景色樣式類別 | 說明 |
| panel-default | 背景為灰色之預設面板 |
| panel-primary | 背景為藍色之面板 |
| panel-success | 背景為咖啡色之區塊 |
| panel-info | 背景為淡藍色之區塊 |
| panel-warning | 背景為黃色之區塊 |
| panel-danger | 背景為紅色之區塊 |
主體要套用 panel-body 樣式類別, 而板尾則套用 panel-footer 樣式類別, 基本結構如下 :
<div class="panel panel-default">
<div class="panel-heading">面板板首</div>
<div class="panel-body">面板主體</div>
<div class="panel-body">面板板尾</div>
</div>
例如 :
<!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">
<div class="panel panel-default">
<div class="panel-heading">面板板首 (default)</div>
<div class="panel-body">面板主體</div>
<div class="panel-body">面板板尾</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">面板板首 (primary)</div>
<div class="panel-body">面板主體</div>
<div class="panel-body">面板板尾</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">面板板首 (success)</div>
<div class="panel-body">面板主體</div>
<div class="panel-body">面板板尾</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">面板板首 (info)</div>
<div class="panel-body">面板主體</div>
<div class="panel-body">面板板尾</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">面板板首 (warning)</div>
<div class="panel-body">面板主體</div>
<div class="panel-body">面板板尾</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">面板板首 (danger)</div>
<div class="panel-body">面板主體</div>
<div class="panel-body">面板板尾</div>
</div>
</div>
</body>
</html>
結果如下 :
板尾部分若不需要可以去除.
三. Accordion (手風琴) :
所謂手風琴效果 (accordion) 就是將網頁內容上下堆疊, 一次只展開一部份, 其餘部分會自動縮合起來的呈現方式, 這種可縮合 (collapse) 結構是在上面介紹的面板 (panel) 上發展出來的, 主要是添加了 a 標籤的頁內錨點 (anchor) 與 panel-collapse, collapse 等樣式類別來控制面板主體區塊的展開與縮合, 基本結構如下 :
三. Accordion (手風琴) :
所謂手風琴效果 (accordion) 就是將網頁內容上下堆疊, 一次只展開一部份, 其餘部分會自動縮合起來的呈現方式, 這種可縮合 (collapse) 結構是在上面介紹的面板 (panel) 上發展出來的, 主要是添加了 a 標籤的頁內錨點 (anchor) 與 panel-collapse, collapse 等樣式類別來控制面板主體區塊的展開與縮合, 基本結構如下 :
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">標題</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">內容</div>
</div>
</div>
參考 :
可見此組件基本上就是一個加工後的面板, 主要是板首標題改用 a 標籤來控制本體 div 區塊中的錨點 (id='collapse1') 以使其展開或縮合, 並為 a 標籤添加 data-toggle="collapse" 屬性, 另外, 本體 div 區塊也要加上 panel-collapse 與 collapse 兩個樣式類別, 完整網頁碼如下例 :
範例 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">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">標題</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">內容</div>
</div>
</div>
</div>
</body>
</html>
結果如下 :
預設內容是收合起來的, 點標題才會展開.
如果預設要展開, 可在本體的 div 區塊添加 in 樣式類別 :
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">標題</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">內容</div>
</div>
</div>
例如 :
範例 3-2 : 可縮合展開的面板區塊 (預設展開) [看原始碼]
結果如下 :
手風琴 (Accordion) 就是以上面的可收合面板為基礎建構的, 將多個可縮合面板再用一個樣式類別為 panel-group 的 div 區塊包起來並指定一個 id, 每一個可縮合面板添加一個 data-parent 屬性指向此 id 即可, 基本結構 (兩個可收合面板) 如下 :
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">標題 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">內容 1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">標題 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">內容 2</div>
</div>
</div>
</div>
手風琴群組裡面的每個面板都可以各自指定板首的背景色樣式類別, 例如 panel-primary, panel-info 等, 如下列範例所示 :
範例 3-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">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">標題 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">內容 1 (default)</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">標題 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">內容 2 (primary)</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">標題 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">內容 3 (success)</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">標題 4</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">內容 4 (info)</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">標題 5</a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">內容 5 (warning)</div>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">標題 6</a>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">內容 6 (danger)</div>
</div>
</div>
</div>
</div>
</body>
</html>
注意, 其中面板 1 的主體區塊添加了 in 樣式類別, 所以面板 1 預設是展開的, 結果如下 :
可見每開啟一個面板, 其餘面板就會自動收合. 不過因板首的標題是 a 超連結, 所以會出現底線, 若不想出現底線可於每個板首 a 標籤添加 style="text-decoration:none;" 的樣式屬性, 或者於 head 標籤內的 style 標籤中, 統一規範所有超連結都步出現底線 :
a {text-decoration:none;}
沒有留言 :
張貼留言