bootstrap如何讓dropdown menu按鈕式下拉框長(zhǎng)度一致
bootstrap框架提供了下拉菜單組件(dropdown),即點(diǎn)擊一個(gè)元素或按鈕,觸發(fā)隱藏的列表顯示出來(lái)。
1、基本代碼和頁(yè)面展示
按鈕和菜單需要包裹在.dropdown 的容器里,而作為被點(diǎn)擊的元素按鈕需要設(shè)置
data-toggle="dropdown"
才能有效。對(duì)于菜單部分,設(shè)置 class="dropdown-menu"
才能
自動(dòng)隱藏并添加固定樣式。設(shè)置 class="caret"表示箭頭,可上可下。
<div class="dropdown"> <button class="btn btn-default" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁(yè)</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >資訊</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >產(chǎn)品</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >關(guān)于</a></li> </ul> </div>
2、使用進(jìn)階和dropdown-menu長(zhǎng)度問(wèn)題
在解決這個(gè)問(wèn)題之前,先記錄bootstrap的按鈕組功能(btn-group),可以將一組按鈕集成在一個(gè)容器里,且相互之前沒(méi)有間隔。直接貼代碼和顯示效果。
<span style="white-space:pre"> </span><div class="btn-group"> <button type="button" class="btn btn-default">上一頁(yè)</button> <button type="button" class="btn btn-default">下一頁(yè)</button> <button type="button" class="btn btn-default">選擇頁(yè)數(shù)</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉框 <i class="caret"></i> </button> <ul class="dropdown-menu" style="min-width:100%;"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁(yè)</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁(yè)</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁(yè)</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁(yè)</a></li> </ul> </div> </div>
代碼解析與總結(jié):
首先嵌套了<div class="btn-group">
容器,用于在按鈕組中使用按鈕式下拉框,
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span style="font-size:14px; font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">中的dropdown-toggle的作用是讓按鈕式下拉框的也擁有btn-group的圓邊角。</span>
<i class="caret"> </i> <span style="font-size:14px; font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">三角圖標(biāo),使用<span>也可以。 </span>
data-toggle="dropdown"
是html5的標(biāo)簽屬性,指以什么事件觸發(fā),常用的如:modal,popover,tooltips。這里指該button按鈕用于下拉按鈕。并且親測(cè)在html4中使用該屬性,雖然IDE會(huì)發(fā)出警告,但是仍然可以實(shí)際運(yùn)行,此特性作用于html5的其他新屬性,如input標(biāo)簽的placeholder。
<ul class="dropdown-menu" style="min-width:100%;">
min-width:100%屬性用于將下拉框長(zhǎng)度與按鈕長(zhǎng)度保持一致,因?yàn)閎ootstrap并沒(méi)有設(shè)置這一點(diǎn)。原始效果如下:
以上所述是小編給大家介紹的bootstrap如何讓dropdown menu按鈕式下拉框長(zhǎng)度一致,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 詳解bootstrap用dropdown-menu實(shí)現(xiàn)上下文菜單
- Bootstrap下拉菜單Dropdowns的實(shí)現(xiàn)代碼
- Bootstrap CSS組件之下拉菜單(dropdown)
- Bootstrap中的Dropdown下拉菜單更改為懸停(hover)觸發(fā)
- JQuery組件基于Bootstrap的DropDownList(完整版)
- 創(chuàng)建基于Bootstrap的下拉菜單的DropDownList的JQuery插件
- 基于Bootstrap里面的Button dropdown打造自定義select
- Bootstrap模塊dropdown實(shí)現(xiàn)下拉框響應(yīng)
- JS組件Bootstrap dropdown組件擴(kuò)展hover事件
- Bootstrap 下拉菜單.dropdown的具體使用方法
相關(guān)文章
JS操作select下拉框動(dòng)態(tài)變動(dòng)(創(chuàng)建/刪除/獲取)
動(dòng)態(tài)創(chuàng)建及刪除select、添加及刪除選項(xiàng)option、獲得選項(xiàng)option的值、獲得選項(xiàng)option的文本等等,感興趣的朋友可以參考下哈2013-06-06防止按鈕在短時(shí)間內(nèi)被多次點(diǎn)擊的方法
一個(gè)按鈕可以在短時(shí)間內(nèi)多次點(diǎn)擊,那么有可能會(huì)被用戶(hù)惡意點(diǎn)擊,下面有個(gè)不錯(cuò)的方法可以有效制止,希望對(duì)大家有所幫助2014-03-03JavaScript設(shè)計(jì)模式之代理模式簡(jiǎn)單實(shí)例教程
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之代理模式,簡(jiǎn)單描述了代理模式的概念、功能、組成并結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript代理模式的定義與使用相關(guān)操作技巧,需要的朋友可以參考下2018-07-07微信小程序使用第三方庫(kù)Underscore.js步驟詳解
大家都知道Underscore.js是一個(gè) JavaScript 工具庫(kù),它提供了一整套函數(shù)式編程的實(shí)用功能,但是沒(méi)有擴(kuò)展任何 JavaScript 內(nèi)置對(duì)象。那么這篇文章我們就來(lái)學(xué)習(xí)下微信小程序如何使用第三方庫(kù)Underscore.js,有需要的可以參考學(xué)習(xí)。2016-09-09js+flash實(shí)現(xiàn)的5圖變換效果廣告代碼(附演示與demo源碼下載)
這篇文章主要介紹了js+flash實(shí)現(xiàn)的5圖變換效果廣告代碼,涉及JavaScript結(jié)合flash調(diào)用圖片實(shí)現(xiàn)幻燈廣告效果,并附帶演示與demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04用javascript動(dòng)態(tài)調(diào)整iframe高度的代碼
用javascript動(dòng)態(tài)調(diào)整iframe高度的代碼...2007-04-04js使用eval解析json實(shí)例與注意事項(xiàng)分享
eval函數(shù)在js中有不少用處了,下面我來(lái)給各位朋友介紹eval解析json的實(shí)例,基于這個(gè)實(shí)例我們引出來(lái)在eval處理json數(shù)據(jù)時(shí)的一些注意事項(xiàng),希望文章對(duì)各位同學(xué)會(huì)有所幫助2014-01-01基于Echarts 3.19 制作常用的圖形(非靜態(tài))
這篇文章主要介紹了基于Echarts 3.19 制作常用的圖形(非靜態(tài))的相關(guān)資料,需要的朋友可以參考下2016-05-05