【Bootstarp】詳解下拉選單元件
阿新 • • 發佈:2018-12-15
文章目錄
下拉框
1.引入js
@*1、Jquery元件引用*@ <script src="~/Scripts/jquery-1.10.2.js"></script> @*2、bootstrap元件引用*@ <script src="~/Content/bootstrap/bootstrap.js"></script> <link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" />
官網上的示例:
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">下拉選單 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉選單項</a> </li> … <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">下拉選單項</a> </li> </ul> </div>
詳解:
1、使用一個名為dropdown的容器包裹了整個下拉選單元素
<div class="dropdown"></div>
2、使用了<button>按鈕作為父選單,並且定義類名dropdown-toggle和自定義data-toggle屬性,且值必須和最外容器類名一致
data-toggle="dropdown"
3、下拉選單項使用了一個ul列表,並且定義一個類名為dropdown-menu
<ul class="dropdown-menu"></ul>
bootstrap中的下拉選單項預設是隱藏的,dropdown-menu設定了display:none
.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);
}
當用戶點選父級選單時,下拉選單會顯示出來,再次點選時下拉選單將繼續隱藏
詳解:
通過js給父級容器div.dropdown新增或一處open來控制下拉選單顯示或隱藏,也就是說,預設情況,div.dropdown沒有類名open,當用戶第一次點選時,div.dropdown會新增類名open,當用戶再次點選時,div.dropdown容器中的類名會被移除
.open > .dropdown-menu { display: block; }
下拉分隔線
假設下拉選單有兩個組,那麼組與組之間可以通過新增一個空的<li>,並且給這個li新增類名.dividerl來實現新增下拉分隔線的功能
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
選單標題
為了讓這個分組更明顯,還可以給每個組新增一個頭部標題。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">下拉選單
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"class="dropdown-header">第一部分選單頭部</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">下拉選單項</a>
</li>
…
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">第二部分選單頭部</li>
…
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">下拉選單項</a>
</li>
</ul>
</div>
css樣式:
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #999;
}
bootstrap框架中下拉選單預設是左對齊,如果要下拉選單相對於父級容器右對齊,可以在dropdown-menu上新增一個類.dropdown-menu-right,注意,從v3.1.0版本開始,不再建議對下拉選單使用.pull-right類
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉選單
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
…
</ul>
</div>
css樣式:
.dropdown-menu-right {
right: 0;
left: auto;
}
.dropdown{float: left; }
選單項狀態
下拉選單的預設狀態有懸浮狀態:hover和焦點狀態:focus
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
下拉選單還有當前狀態和禁用狀態,這兩種狀態使用方法只需要在對應的選單項上新增對應的類名
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉選單
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"class="active">
<a role="menuitem" tabindex="-1" href="#">下拉選單項</a>
</li>
….
<li role="presentation" class="disabled">
<a role="menuitem" tabindex="-1" href="#">下拉選單項</a>
</li>
</ul>
</div>
CSS:
.dropdown-menu >
.active > a,
.dropdown-menu >
.active > a:hover,
.dropdown-menu >
.active > a:focus {
color: #fff;
text-decoration: none;
background-color: #428bca;
outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus
{
color: #999;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus
{
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}