# Bootstrap 4 學習筆記 (一) : 環境配置
# Bootstrap 4 學習筆記 (二) : 網格與容器
# Bootstrap 4 學習筆記 (三) : 表格
# Bootstrap 4 學習筆記 (四) : 圖示與按鈕
# Bootstrap 4 學習筆記 (五) : 文字與圖片效果
# Bootstrap 4 學習筆記 (六) : 表單
Bootstrap 教學文件參考 :
# 第 10 堂課 - 初探 bootstrap 網頁製作
# Bootstrap 初學介紹 #靜態篇
Bootstrap 的按鈕選單由一個按鈕與 ul 項目清單元件, 外面再套一層 div 元件組成, 基本結構如下 :
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
</button>
<ul class="dropdown-menu">
<li class="dropdown-header"></li>
<li class="divider"></li>
<li></li>
</ul>
</div>
按鈕上的文字可加上文字圖示, 因為這個緣故, 通常使用 button 元素來製作按鈕 (因為 input 按鈕上的文字放在其 value 屬性, 要對按鈕文字加工或加上文字圖示都比較麻煩).
選單所需的樣式類別摘要如下表 :
| 按鈕選單樣式類別 | 說明 |
| dropdown | 套用於選單最上層 div 元素, 選單向下展開 |
| dropup | 套用於選單最上層 div 元素, 選單向上展開 |
| dropdown-toggle | 套用於選單按鈕元素, 作為選單展開縮合之用 |
| dropdown-menu | 套用於選單本體之 ul 元素 |
| dropdown-header | 套用於選單本體之 ui 元素, 做為選項群組之標頭 |
| divider | 套用於選單本體之 ui 元素, 做為選項群組間的分隔線 |
注意, 要讓選單按鈕按下時能彈出選單, 按鈕還必須加上 data-toggle="dropdown" 屬性才行, 例如 :
範例 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">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<label>網路書店</label>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">國外</li>
<li><a href="https://www.amazon.com/" target="_blank">亞馬遜書店</a></li>
<li><a href="https://www.barnesandnoble.com/" target="_blank">Barnes & Noble</a></li>
<li class="divider"></li>
<li class="dropdown-header">國內</li>
<li><a href="http://www.book.com.tw/" target="_blank">博客來書店</a></li>
<li><a href="http://www.eslite.com/" target="_blank">誠品書店</a></li>
<li><a href="http://www.kingstone.com.tw/" target="_blank">金石堂書店</a></li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
});
</script>
</body>
</html>
此例中最外層 div 元素套用 dropdown 樣式類別, 表示此為下拉式選單而非上拉式選單. 按鈕文字放在 label 元素中, 方便加上 style 屬性對按鈕文字進行樣式套用, 後面加上一個 caret (向下箭頭) 的文字圖示, 表示按下按鈕會有一個選單出現. 瀏覽結果如下 :
選單中的選項可以套用 active 來設定開啟選單時該選項以高亮度表示; 或套用 disabled 將該選項設為不可選擇, 例如 :
範例 2 : 按鈕選單測試 (2) 選項套用 active 與 disabled 樣式 [看原始碼]
<!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="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<label>網路書店</label>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">國外</li>
<li><a href="https://www.amazon.com/" target="_blank">亞馬遜書店</a></li>
<li class="disabled"><a href="https://www.barnesandnoble.com/" target="_blank">Barnes & Noble</a></li>
<li class="divider"></li>
<li class="dropdown-header">國內</li>
<li class="active"><a href="http://www.book.com.tw/" target="_blank">博客來書店</a></li>
<li><a href="http://www.eslite.com/" target="_blank">誠品書店</a></li>
<li><a href="http://www.kingstone.com.tw/" target="_blank">金石堂書店</a></li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
});
</script>
</body>
</html>
此例將邦諾書店的選項套上 disabled 樣式使其不可選; 將博客來書店選項套用 active 樣式類別使其預設為高亮度顯示, 瀏覽結果如下 :
按鈕選單也可以向上展開, 只要將最外層 div 元素套用 dropup 樣式類別即可, 其餘不變, 例如 :
範例 2 : 按鈕選單測試 (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 style="margin-bottom:250px;"></div>
<div class="dropup">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<label>網路書店</label>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">國外</li>
<li><a href="https://www.amazon.com/" target="_blank">亞馬遜書店</a></li>
<li><a href="https://www.barnesandnoble.com/" target="_blank">Barnes & Noble</a></li>
<li class="divider"></li>
<li class="dropdown-header">國內</li>
<li><a href="http://www.book.com.tw/" target="_blank">博客來書店</a></li>
<li><a href="http://www.eslite.com/" target="_blank">誠品書店</a></li>
<li><a href="http://www.kingstone.com.tw/" target="_blank">金石堂書店</a></li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
});
</script>
</body>
</html>
此例為了能完整顯示向上展開的選單, 在按鈕選單最外層 div 上添加了一個 div 元素, 並將其 margin-bottom 樣式設為 250px, 這樣按鈕選單就會往下移 250px, 瀏覽結果如下 :
不過, 向上展開選單使用的機會應該不多, 通常網頁操作習慣都是用向下展開比較自然. 透過 class 設定簡簡單單就弄出美美的選單, Bootstrap 真是好棒棒, 我越來越喜歡了!
沒有留言 :
張貼留言