學習要點:
1.小圖示元件
2.下拉選單元件
3.按鈕組元件
4.按鈕式下拉選單
主講教師:李炎恢
本節課我們主要學習一下 Bootstrap 的三個元件功能:小圖示元件、下拉選單元件和各種按鈕元件。
一.小圖示元件
Bootstrap 提供了免費的 263 個小圖示(數了兩次),具體可以參考中文官網的元件連結:http://v3.bootcss.com/components/#glyphicons。
部分圖示如下:
可以使用<i>或<span>標籤來配合使用,具體如下:
//使用小圖示
<i class="glyphicon glyphicon-star"></i> <span class="glyphicon glyphicon-star"></span>
//也可以結合按鈕
<button class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star"></span> </button> <button class="btn btn-default btn"> <span class="glyphicon glyphicon-star"></span> </button> <button class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-star"></span> </button> <button class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-star"></span> </button>
二.下拉選單元件
下拉選單,就是點選一個元素或按鈕,觸發隱藏的列表顯示出來。
//基本格式
<div class="dropdown"> <button class="btn btn-default" data-toggle="dropdown"> 下拉選單 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="#">首頁</a> </li> <li> <a href="#">資訊</a> </li> <li> <a href="#">產品</a> </li> <li> <a href="#">關於</a> </li> </ul> </div>
按鈕和選單需要包裹在.dropdown 的容器裡,而作為被點選的元素按鈕需要設定data-toggle="dropdown"才能有效。對於選單部分,設定 class="dropdown-menu"才能自動隱藏並新增固定樣式。設定 class="caret"表示箭頭,可上可下。
//設定向上觸發
<div class="dropup">
//選單項居右對齊,預設值是 dropdown-menu-left
<ul class="dropdown-menu dropdown-menu-right">
//設定選單的標題,不要加超連結
<li class="dropdown-header">網站導航</li>
//設定選單的分割線
<li class="divider"></li>
//設定選單的禁用項
<li class="disabled"><a href="#">產品</a></li>
//讓選單預設顯示
<div class="dropdown open">
三.按鈕組元件
按鈕組就是多個按鈕整合在一個容器裡形成獨有的效果。
//基本格式
<div class="btn-group"> <button type="button" class="btn btn-default"> 左 </button> <button type="button" class="btn btn-default"> 中 </button> <button type="button" class="btn btn-default"> 右 </button> </div>
//將多個按鈕組整合起來便於管理
<div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default"> 左 </button> <button type="button" class="btn btn-default"> 中 </button> <button type="button" class="btn btn-default"> 右 </button> </div> <div class="btn-group"> <button type="button" class="btn btn-default"> 1 </button> <button type="button" class="btn btn-default"> 2 </button> <button type="button" class="btn btn-default"> 3 </button> </div> </div>
//設定按鈕組大小
<div class="btn-group btn-group-lg"> <div class="btn-group> <div class="btn-group btn-group-sm"> <div class="btn-group btn-group-xs">
//巢狀一個分組,比如下拉選單
<div class="btn-group"> <button type="button" class="btn btn-default"> 左 </button> <button type="button" class="btn btn-default"> 中 </button> <button type="button" class="btn btn-default"> 右 </button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉選單 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="#">首頁</a> </li> <li> <a href="#">資訊</a> </li> <li> <a href="#">產品</a> </li> <li> <a href="#">關於</a> </li> </ul> </div> </div>
注意:這裡<div>中並沒有實現 class="dropdown",通過原始碼分析知道巢狀本身已經有定位就不需要再設定。而右邊的圓角只要多加一個 class="dropdown-toggle"即可。
//設定按鈕組垂直排列
<div class="btn-group-vertical">
//設定兩端對齊按鈕組,使用<a>標籤
<div class="btn-group-justified"> <a type="button" class="btn btn-default">左</a> <a type="button" class="btn btn-default">中</a> <a type="button" class="btn btn-default">右</a> </div>
//如果需要使用<button>標籤,則需要對每個按鈕進行群組
<div class="btn-group-justified"> <div class="btn-group"> <button type="button" class="btn btn-default"> 左 </button> </div> <div class="btn-group"> <button type="button" class="btn btn-default"> 中 </button> </div> <div class="btn-group"> <button type="button" class="btn btn-default"> 右 </button> </div> </div>
四.按鈕式下拉選單
這個下拉選單其實和第二個知識點一樣,只不過,這個是在群組裡,不需要<div>宣告class="dropdown"。
//群組按鈕下拉選單
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown"> 下拉選單 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="#">首頁</a> </li> <li> <a href="#">資訊</a> </li> <li> <a href="#">產品</a> </li> <li> <a href="#">關於</a> </li> </ul> </div>
//分裂式按鈕下拉選單
<div class="btn-group"> <button type="button" class="btn btn-default"> 下拉選單 </button> <button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="#">首頁</a> </li> <li> <a href="#">資訊</a> </li> <li> <a href="#">產品</a> </li> <li> <a href="#">關於</a> </li> </ul> </div>
//向上彈出式
<div class="btn-group dropup">