第七章之菜單按鈕圖標組件
Bootstrap,來自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發(fā)更加快捷。
學習要點:
1.小圖標組件
2.下拉菜單組件
3.按鈕組組件
4.按鈕式下拉菜單
本節(jié)課我們主要學習一下 Bootstrap 的三個組件功能:小圖標組件、下拉菜單組件和各種按鈕組件。
一.小圖標組件
Bootstrap 提供了免費的 263 個小圖標(數(shù)了兩次),具體可以參考中文官網(wǎng)的組件鏈接:
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>
二.下拉菜單組件
下拉菜單,就是點擊一個元素或按鈕,觸發(fā)隱藏的列表顯示出來。
//基本格式 <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="#">產(chǎn)品</a> </li> <li> <a href="#">關于</a> </li> </ul> </div>
按鈕和菜單需要包裹在.dropdown 的容器里,而作為被點擊的元素按鈕需要設置data-toggle="dropdown"才能有效。對于菜單部分,設置 class="dropdown-menu"才能自動隱藏并添加固定樣式。設置 class="caret"表示箭頭,可上可下。
//設置向上觸發(fā) <div class="dropup"> //菜單項居右對齊,默認值是 dropdown-menu-left <ul class="dropdown-menu dropdown-menu-right"> //設置菜單的標題,不要加超鏈接 <li class="dropdown-header">網(wǎng)站導航</li> //設置菜單的分割線 <li class="divider"></li> //設置菜單的禁用項 <li class="disabled"><a href="#">產(chǎn)品</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"> </button> <button type="button" class="btn btn-default"> </button> <button type="button" class="btn btn-default"> </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="#">產(chǎn)品</a> </li> <li> <a href="#">關于</a> </li> </ul> </div> </div>
注意:這里<div>中并沒有實現(xiàn) class="dropdown",通過源碼分析知道嵌套本身已經(jīng)有定位就不需要再設置。而右邊的圓角只要多加一個 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="#">產(chǎn)品</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="#">產(chǎn)品</a> </li> <li> <a href="#">關于</a> </li> </ul> </div> //向上彈出式 <div class="btn-group dropup">
以上內容是小編給大家介紹的BootStrap組件之菜單按鈕圖標組件,希望對大家有所幫助!
- extjs 的權限問題 要求控制的對象是 菜單,按鈕,URL
- jQuery EasyUI API 中文文檔 - MenuButton菜單按鈕使用介紹
- 單擊按鈕顯示隱藏子菜單經(jīng)典案例
- js使用DOM設置單選按鈕、復選框及下拉菜單的方法
- js+css實現(xiàn)有立體感的按鈕式文字豎排菜單效果
- jQuery EasyUI 菜單與按鈕之創(chuàng)建簡單的菜單和鏈接按鈕
- 輕松學習jQuery插件EasyUI EasyUI創(chuàng)建菜單與按鈕
- 基于Android實現(xiàn)點擊某個按鈕讓菜單選項從按鈕周圍指定位置彈出
- javascript+css3 實現(xiàn)動態(tài)按鈕菜單特效
- Bootstrap入門書籍之(四)菜單、按鈕及導航
相關文章
uniapp開發(fā)h5項目引入第三方js(sdk)兩種方法
這篇文章主要給大家介紹了關于uniapp開發(fā)h5項目引入第三方js(sdk)的兩種方法,在Uniapp中引入JS文件是一項常見的操作,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02JavaScript實現(xiàn)圖片自動加載的瀑布流效果
這篇文章主要介紹了JavaScript實現(xiàn)圖片自動加載的瀑布流效果的相關資料,需要的朋友可以參考下2016-04-04JavaScript實現(xiàn)三級聯(lián)動效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)三級聯(lián)動效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07