本章將說明如何使用 Bootstrap class 為按鈕新增下拉式選單。若要為按鈕新增下拉式選單,只需要簡單地在一個 .btn-group 中放置按鈕和下拉式選單。您也可以使用 f092556db850dedfd562431d5552770054bdf357c58b8a65c66d7c19c8e4d114 來指示按鈕作為下拉式選單。
下面的實例示範了一個基本的簡單的按鈕下拉選單:
實例
<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" role="menu"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一个功能</a> </li> <li> <a href="#">其他</a> </li> <li class="divider"></li> <li> <a href="#">分离的链接</a> </li> </ul></div><div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一个功能</a> </li> <li> <a href="#">其他</a> </li> <li class="divider"></li> <li> <a href="#">分离的链接</a> </li> </ul></div>
在使用Bootstrap框架中的下拉式選單組件時,其結構運用的正確與否非常的重要,如果結構和類別名稱未使用正確,直接影響組件是否能正常運用
1、使用一個名為“dropdown”的容器包裹了整個下拉選單元素
c0a838506a57d6efb82c3faebdcfa64e16b28748ea4df4d9c2150843fecfba68
2、使用了一個bb9345e55eb71822850ff156dfde57c8按鈕做為父選單,並且定義類別名稱「dropdown-toggle」和自訂「data-toggle」屬性,且值必須和最外容器類別名稱一致
8af15fa9ce0b1cee92d5ee57b078822f
3、下拉式選單項目使用一個ul列表,並且定義一個類別名為「dropdown-menu」
ae363fd8bc2e4ee3b3446338ba23f464
ActionAnother actionSomething else here
4、透過為下拉式選單的父元素設定 ## 4、透過為下拉式選單的父元素設定
14481b0d0ba7c394e2501a352872843d 1172180f0ea09fa48126f1bf9c16d1a6Dropupa11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114 65281c5ac262bf6d81768915a4a77ac0 c5f7c33631c7deafd5f3bd6bcd1eea2f25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Another action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Something else here5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68
原理分析
.dropdown-menu { position: absolute;/*设置绝对定位,相对于父元素div.dropdown*/ top: 100%;/*让下拉菜单项在父菜单项底部,如果父元素不设置相对定位,该元素相对于body元素*/ left: 0; z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/ display: none;/*默认隐藏下拉菜单项*/ float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }
.open > .dropdown-menu { display: block; }
擴充用法
【分隔線】
.dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; }
9aa02a4f45fec1ec76777df05ea7dcabbed06894275b65c1ab86501b08a632eb
c0a838506a57d6efb82c3faebdcfa64e 1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114 65281c5ac262bf6d81768915a4a77ac0 c5f7c33631c7deafd5f3bd6bcd1eea2f25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Another action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Something else here5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb9aa02a4f45fec1ec76777df05ea7dcabbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Separated link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68
c220632b5e888796ad159d12fa43bfcbDropdown headerbed06894275b65c1ab86501b08a632eb
.dropdown-header { display: block; padding: 3px 20px; font-size: 12px; line-height: 1.42857143; color: #999; }
c0a838506a57d6efb82c3faebdcfa64e 1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114 65281c5ac262bf6d81768915a4a77ac0 f2d98710ffe286210bb25d6dcee36a5c53aee3cf423ceaf51d11d60f48002773第一部分菜单头部bed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb34180452588631f7294f6e20e4d7d79ebed06894275b65c1ab86501b08a632eb53aee3cf423ceaf51d11d60f48002773第二部分菜单头部bed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68
.dropdown-menu-right { right: 0; left: auto; }由於c015d0f164ad1b1988b34ffbc5d30df0預設是區塊級元素,撐滿父級寬度。這裡,需要為此元素設定inline-block和margin-left,使其內容撐開寬度,且距離左側有一定距離
display: inline-block; margin-left: 60px;
bc237f0a329903d1c97cfadcb81fa83a 1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114 65281c5ac262bf6d81768915a4a77ac0 0e067206866e68769a13ad0253578a2717107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb34180452588631f7294f6e20e4d7d79ebed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #262626; text-decoration: none; background-color: #f5f5f5; }
下拉選單項目除了上面兩種狀態,還有當前狀態(.active)和停用狀態(.disabled)。這兩種狀態使用方法只需要在對應的選單項目上新增對應的類別名稱
c0a838506a57d6efb82c3faebdcfa64e 1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114 65281c5ac262bf6d81768915a4a77ac0 f2d98710ffe286210bb25d6dcee36a5c556e13e9c9f7f01f9fb88f9dc143761412127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb34180452588631f7294f6e20e4d7d79ebed06894275b65c1ab86501b08a632eb9e19533ed9cabe256346eae338ee3b4412127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68###
以上是Bootstrap下拉選單的實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!