第七章之菜單按鈕圖標(biāo)組件
Bootstrap,來自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發(fā)更加快捷。
學(xué)習(xí)要點(diǎn):
1.小圖標(biāo)組件
2.下拉菜單組件
3.按鈕組組件
4.按鈕式下拉菜單
本節(jié)課我們主要學(xué)習(xí)一下 Bootstrap 的三個(gè)組件功能:小圖標(biāo)組件、下拉菜單組件和各種按鈕組件。
一.小圖標(biāo)組件
Bootstrap 提供了免費(fèi)的 263 個(gè)小圖標(biāo)(數(shù)了兩次),具體可以參考中文官網(wǎng)的組件鏈接:
http://v3.bootcss.com/components/#glyphicons。
部分圖標(biāo)如下:
可以使用<i>或<span>標(biāo)簽來配合使用,具體如下:
//使用小圖標(biāo) <i class="glyphicon glyphicon-star"></i> <span class="glyphicon glyphicon-star"></span> //也可以結(jié)合按鈕 <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>
二.下拉菜單組件
下拉菜單,就是點(diǎn)擊一個(gè)元素或按鈕,觸發(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="#">關(guān)于</a> </li> </ul> </div>
按鈕和菜單需要包裹在.dropdown 的容器里,而作為被點(diǎn)擊的元素按鈕需要設(shè)置data-toggle="dropdown"才能有效。對于菜單部分,設(shè)置 class="dropdown-menu"才能自動(dòng)隱藏并添加固定樣式。設(shè)置 class="caret"表示箭頭,可上可下。
//設(shè)置向上觸發(fā) <div class="dropup"> //菜單項(xiàng)居右對齊,默認(rèn)值是 dropdown-menu-left <ul class="dropdown-menu dropdown-menu-right"> //設(shè)置菜單的標(biāo)題,不要加超鏈接 <li class="dropdown-header">網(wǎng)站導(dǎo)航</li> //設(shè)置菜單的分割線 <li class="divider"></li> //設(shè)置菜單的禁用項(xiàng) <li class="disabled"><a href="#">產(chǎn)品</a></li> //讓菜單默認(rèn)顯示 <div class="dropdown open">
三.按鈕組組件
按鈕組就是多個(gè)按鈕集成在一個(gè)容器里形成獨(dú)有的效果。
//基本格式 <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> //將多個(gè)按鈕組整合起來便于管理 <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> //設(shè)置按鈕組大小 <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"> //嵌套一個(gè)分組,比如下拉菜單 <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="#">關(guān)于</a> </li> </ul> </div> </div>
注意:這里<div>中并沒有實(shí)現(xiàn) class="dropdown",通過源碼分析知道嵌套本身已經(jīng)有定位就不需要再設(shè)置。而右邊的圓角只要多加一個(gè) class="dropdown-toggle"即可。
//設(shè)置按鈕組垂直排列 <div class="btn-group-vertical"> //設(shè)置兩端對齊按鈕組,使用<a>標(biāo)簽 <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>標(biāo)簽,則需要對每個(gè)按鈕進(jìn)行群組 <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>
四.按鈕式下拉菜單
這個(gè)下拉菜單其實(shí)和第二個(gè)知識點(diǎn)一樣,只不過,這個(gè)是在群組里,不需要<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="#">關(guān)于</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="#">關(guān)于</a> </li> </ul> </div> //向上彈出式 <div class="btn-group dropup">
以上內(nèi)容是小編給大家介紹的BootStrap組件之菜單按鈕圖標(biāo)組件,希望對大家有所幫助!
- extjs 的權(quán)限問題 要求控制的對象是 菜單,按鈕,URL
- jQuery EasyUI API 中文文檔 - MenuButton菜單按鈕使用介紹
- 單擊按鈕顯示隱藏子菜單經(jīng)典案例
- js使用DOM設(shè)置單選按鈕、復(fù)選框及下拉菜單的方法
- js+css實(shí)現(xiàn)有立體感的按鈕式文字豎排菜單效果
- jQuery EasyUI 菜單與按鈕之創(chuàng)建簡單的菜單和鏈接按鈕
- 輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建菜單與按鈕
- 基于Android實(shí)現(xiàn)點(diǎn)擊某個(gè)按鈕讓菜單選項(xiàng)從按鈕周圍指定位置彈出
- javascript+css3 實(shí)現(xiàn)動(dòng)態(tài)按鈕菜單特效
- Bootstrap入門書籍之(四)菜單、按鈕及導(dǎo)航
相關(guān)文章
uniapp開發(fā)h5項(xiàng)目引入第三方j(luò)s(sdk)兩種方法
這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)h5項(xiàng)目引入第三方j(luò)s(sdk)的兩種方法,在Uniapp中引入JS文件是一項(xiàng)常見的操作,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02webpack是如何實(shí)現(xiàn)模塊化加載的方法
這篇文章主要介紹了webpack是如何實(shí)現(xiàn)模塊化加載的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11JavaScript實(shí)現(xiàn)圖片自動(dòng)加載的瀑布流效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片自動(dòng)加載的瀑布流效果的相關(guān)資料,需要的朋友可以參考下2016-04-04表單元素值獲取方式j(luò)s及java方式的簡單實(shí)例
下面小編就為大家?guī)硪黄韱卧刂但@取方式j(luò)s及java方式的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10JavaScript實(shí)現(xiàn)三級聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)三級聯(lián)動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07JavaScript進(jìn)階之前端文件上傳和下載示例詳解
這篇文章主要為大家介紹了JavaScript進(jìn)階之前端文件上傳和下載示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09