1. 程式人生 > >BootStrap之下拉選單

BootStrap之下拉選單

普通下拉選單:

<div class="btn-group">
	<button class="btn btn-default" data-toggle="dropdown">
		    下拉選單<span class="caret"></span>
	</button>
	<ul class="dropdown-menu pull-right">
	    <li>dropdown-menu1</li>
		<li>dropdown-menu2</li>
		<li>dropdown-menu3</li>
		<li>dropdown-menu4</li>
		<li>dropdown-menu5</li>
	</ul>
</div>
<div class="btn-group">
	<button class="btn btn-default" data-toggle="dropdown">
			下拉選單<span class="caret"></span>
	</button>
	<ul class="dropdown-menu pull-right">
		<li>dropdown-menu1</li>
		<li>dropdown-menu2</li>
		<li>dropdown-menu3</li>
		<li>dropdown-menu4</li>
		<li>dropdown-menu5</li>
		</ul>
</div>
<div class="btn-group">
	 <button class="btn btn-default" data-toggle="dropdown">
			  下拉選單<span class="caret"></span>
	</button>
	<ul class="dropdown-menu pull-right">
		<li>dropdown-menu1</li>
		<li>dropdown-menu2</li>
		<li>dropdown-menu3</li>
		<li>dropdown-menu4</li>
		<li>dropdown-menu5</li>
	</ul>
</div>

效果圖:

二級下拉選單:

<div class="dropdown">
<!--data-toggle屬性ysyuubdsxwlajs控控制,首先隱藏dropwown-menu,class包含的列表元素,點選時open-->
	<button class="btn btn-default" data-toggle="dropdown">
			下拉選單<span class="caret"></span>
	</button>
    <ul class="dropdown-menu">
	<!--dropdown-header把內容設定為disable-->
	    <li class="dropdown-header">分類1</li>
	    <li<a href="javascript:void(0)">html5</a></li>
	    <li<a href="javascript:void(0)">css3</a></li>
	    <li class="dropdown-header">分類2</li>
	    <li<a href="javascript:void(0)">javascript</a></li>
	    <li<a href="javascript:void(0)">jqeray</a></li>
    </ul>
</div>

效果圖: