BootStrap之下拉選單
阿新 • • 發佈:2018-12-19
普通下拉選單:
<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>
效果圖: