bootstrap如何讓dropdown menu按鈕式下拉框長度一致
bootstrap框架提供了下拉菜單組件(dropdown),即點擊一個元素或按鈕,觸發(fā)隱藏的列表顯示出來。
1、基本代碼和頁面展示
按鈕和菜單需要包裹在.dropdown 的容器里,而作為被點擊的元素按鈕需要設置
data-toggle="dropdown"
才能有效。對于菜單部分,設置 class="dropdown-menu"
才能
自動隱藏并添加固定樣式。設置 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" >首頁</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" >產品</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> </ul> </div>
2、使用進階和dropdown-menu長度問題
在解決這個問題之前,先記錄bootstrap的按鈕組功能(btn-group),可以將一組按鈕集成在一個容器里,且相互之前沒有間隔。直接貼代碼和顯示效果。
<span style="white-space:pre"> </span><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">下拉框 <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" >首頁</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" >首頁</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> </ul> </div> </div>
代碼解析與總結:
首先嵌套了<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);">三角圖標,使用<span>也可以。 </span>
data-toggle="dropdown"
是html5的標簽屬性,指以什么事件觸發(fā),常用的如:modal,popover,tooltips。這里指該button按鈕用于下拉按鈕。并且親測在html4中使用該屬性,雖然IDE會發(fā)出警告,但是仍然可以實際運行,此特性作用于html5的其他新屬性,如input標簽的placeholder。
<ul class="dropdown-menu" style="min-width:100%;">
min-width:100%屬性用于將下拉框長度與按鈕長度保持一致,因為bootstrap并沒有設置這一點。原始效果如下:
以上所述是小編給大家介紹的bootstrap如何讓dropdown menu按鈕式下拉框長度一致,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
- 詳解bootstrap用dropdown-menu實現上下文菜單
- Bootstrap下拉菜單Dropdowns的實現代碼
- Bootstrap CSS組件之下拉菜單(dropdown)
- Bootstrap中的Dropdown下拉菜單更改為懸停(hover)觸發(fā)
- JQuery組件基于Bootstrap的DropDownList(完整版)
- 創(chuàng)建基于Bootstrap的下拉菜單的DropDownList的JQuery插件
- 基于Bootstrap里面的Button dropdown打造自定義select
- Bootstrap模塊dropdown實現下拉框響應
- JS組件Bootstrap dropdown組件擴展hover事件
- Bootstrap 下拉菜單.dropdown的具體使用方法
相關文章
JS操作select下拉框動態(tài)變動(創(chuàng)建/刪除/獲取)
動態(tài)創(chuàng)建及刪除select、添加及刪除選項option、獲得選項option的值、獲得選項option的文本等等,感興趣的朋友可以參考下哈2013-06-06js+flash實現的5圖變換效果廣告代碼(附演示與demo源碼下載)
這篇文章主要介紹了js+flash實現的5圖變換效果廣告代碼,涉及JavaScript結合flash調用圖片實現幻燈廣告效果,并附帶演示與demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04用javascript動態(tài)調整iframe高度的代碼
用javascript動態(tài)調整iframe高度的代碼...2007-04-04基于Echarts 3.19 制作常用的圖形(非靜態(tài))
這篇文章主要介紹了基于Echarts 3.19 制作常用的圖形(非靜態(tài))的相關資料,需要的朋友可以參考下2016-05-05