Bootstrap響應式前端框架筆記七——下拉菜單

Bootstrap響應式前端框架筆記七——下拉菜單

    在Bootstrap的Css框架中，下拉菜單屬於組件。一個完整的下拉菜單應該有兩部分組成，一個觸發按鈕與一個選項列表。觸發按鈕dropdown-toggle類來建立，選項列表有drop-menu類來建立，這兩部分元素須要包裹在一個dropdown類元素中，才能正確組合，示例代碼以下：

<p>正常的下拉菜單樣式</p>
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle">
				下拉菜單
			<span class="caret"></span>
			</button>
			<ul class="dropdown-menu" >
				<li><a>白羊座</a></li>
				<li><a>金牛座</a></li>
				<li><a>摩羯座</a></li>
				<li><a>獅子座</a></li>
			</ul>
		</div>

默認建立的下拉菜單是隱藏的，爲了演示方便，能夠將ul的display屬性重設：

<style>
			ul{
				display: block !important;
			}
		</style>

效果以下圖：

使用dropdown-menu-left或者dropdown-menu-right能夠實現對菜單列表的左對齊或者右對齊。

    爲列表的li元素添加dropdown-header類能夠將此行設置爲頭信息行，示例以下：

<p>可使用dropdown-header類來進行菜單頭的設置</p>
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle">
				下拉菜單
			<span class="caret"></span>
			</button>
			<ul class="dropdown-menu" >
				<li class="dropdown-header">星座</li>
				<li><a>白羊座</a></li>
				<li><a>金牛座</a></li>
				<li class="dropdown-header">屬相</li>
				<li><a>猴</a></li>
			</ul>
		</div>

效果以下圖所示：

    爲li標籤設置divider類能夠將此行設置爲分割線，示例以下：

<p>可使用divider類能夠爲菜單設置分割線</p>
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle">
				下拉菜單
			<span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li class="dropdown-header">星座</li>
				<li>
					<a>白羊座</a>
				</li>
				<li>
					<a>金牛座</a>
				</li>
				<li class="divider"></li>
				<li class="dropdown-header">屬相</li>
				<li>
					<a>猴</a>
				</li>
			</ul>
		</div>

效果以下：

    能夠爲li設置disabled類來將此行選項設置爲禁用，設置禁用後，此行標籤也將沒法點擊，示例以下：

<p>可使用disabled類來禁用某些選項</p>
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle">
				下拉菜單
			<span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li class="dropdown-header">星座</li>
				<li class="disabled">
					<a>白羊座</a>
				</li>
				<li>
					<a>金牛座</a>
				</li>
				<li class="dropdown-header">屬相</li>
				<li>
					<a>猴</a>
				</li>
			</ul>
		</div>

   另外，本篇博客中全部的實例代碼及顯示效果，在以下地址中，須要的能夠自行對照學習。

http://zyhshao.github.io/bootStrapDemo/dropList.html。

前端學習新人，有志同道合的朋友，歡迎交流與指導，QQ羣:541458536