<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-8">
<-! Ie rendered in accordance with the version ->
<Meta HTTP-equiv = "the X-UA-Compatible-" = Content "IEs = Edge">
<-! set window size ->
<Meta name = "the viewport" Content = "width = width-device, Initial-Scale =. 1">
<-! bis browser core according to speed mode (Google kernel) rendering ->
<Meta name = "renderer" Content = "WebKit">
<title> drop-down menu </ title>
<Link rel = "stylesheet" href = "../ CSS / bootstrap.css ">
</ head>
<body>
<-!
. 1, for the use of drop-down menus, pull-down menu in the .dropdown coupled to.
2, by adding to the .dropdown-menu.
pull-right pull-down menu to the right to align 3, dropdown-header can be used to add a title tag area of the pull-down menu.
------ ------
.dropdown designated drop-down menus, drop-down menus are wrapped in .dropdown in
.dropdown-menu drop-down menu created
.dropdown-menu-right pull-down menu right justified
.dropdown-header added drop-down menu heading
.dropup specified upward pull down menu
to disable the pull-down menu item .disabled
.divider dividing line pull-down menu
->
<div class = "DropDown">
<Button type = "Button" class = "BTN-DropDown Toggle" ID = "dropdownMenu1" Data-Toggle = "DropDown"> theme
<span class = "caret"> </ span>
</ Button>
<UL class = "DropDown-MENU" Role = "MENU" Aria-The labelledby = "dropdownMenu1">
<Li Role = "Presentation">
<A Role = "MenuItem" tabIndex = "-. 1" the href = "#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<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>
<!--
———— 按钮组 ————
-->
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<button type="button" class="btn btn-default">按钮 3</button>
</div>
<!--按钮工具栏-->
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<button type="button" class="btn btn-default">按钮 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 4</button>
<button type="button" class="btn btn-default">按钮 5</button>
<button type="button" class="btn btn-default">按钮 6</button>
</div>
</div>
<!- <Button type = "Button" class = "btn btn-default"> button 1 </ button><div class = "BTN-Group">.btn-Group-Vertical: vertical arrangement ->
nesting another button within a button group Group ---- ----
<button type="button" class="btn btn-default">按钮 2</button>
<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">
<li><a href="#">下拉链接 1</a></li>
<li><a href="#">下拉链接 2</a></li>
</ul>
</div>
</div>
<script src="../js/jquery-1.11.3.js"></script>
<script src="../js/bootstrap.js"></script>
</body>
</html>
bootstrap framework drop-down menu button +
Guess you like
Origin www.cnblogs.com/ZXH-null/p/12122624.html
Recommended
Ranking