玩转Bootstrap（基础）--（5.下拉菜单）
1.在使⽤Bootstrap框架的下拉菜单时，必须调⽤Bootstrap框架提供的bootstrap.js⽂件。当然，如果你使⽤的是未编译版本，在js⽂件夹下你能到⼀个名为“dropdown.js”的⽂件。你也可以调⽤这个js⽂件。不过在我们的教程中，我们统⼀调⽤压缩好
的“bootstrap.min.js”⽂件。
特别声明：因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使⽤bootstrap.min.js之前⼀定要先加载jquery.min.js才会⽣效果。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8">
<title>下拉菜单</title>
<link rel="stylesheet"href="//maxcdn.bootstrapcdn/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"href="style.css">
</head>
<body>
<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"><a role="menuitem"tabindex="-1"href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem"tabindex="-1"href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem"tabindex="-1"href="#">下拉菜单项</a></li>
</ul>
</div>
<script src="libs.baidu/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
2.下拉菜单的原理分析
现在我们来分析⼀下实现原理，⾮常简单，通过js技术⼿段，给⽗容器“div.dropdown”添加或移除类名“
js导航栏下拉菜单open”来控制下拉菜单显⽰或隐藏。也就是说，默认情况，“div.dropdown”没有类名“open”，当⽤户第⼀次点击时，“div.dropdown”会添加类名“open”；当⽤户再次点击时，“div.dropdown”容器中的类名“open”⼜会被移除。
3.下拉菜单（下拉分隔线）
3.下拉菜单（菜单标题）
4.实现下拉菜单的左右对其
Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于⽗容器右对齐时，可以在“dropdown-menu”上添加⼀个“pull-right”或者“dropdown-menu-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" role ="menu" aria-labelledby ="dropdownMenu1">
<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"><a role ="menuitem" tabindex ="-1" href ="#">下拉菜单项</a ></li >
<li role ="presentation" class ="divider"></li > <!--加上class 为divider 的类名就能实现下拉分隔符的功能-->
<li role ="presentation"><a role ="menuitem" tabindex ="-1" href ="#">下拉菜单项</a ></li >
</ul >
</div >
<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 ><!--加上dropdown-header 的类名就好了-->
<li role ="presentation"><a role ="menuitem" tabindex ="-1" href ="#">下拉菜单项</a ></li >
</ul >
</div >
5.下拉菜单（菜单项状态）
下拉菜单项的默认的状态（不⽤设置）有悬浮状态（:hover）和焦点状态（:focus）。
下拉菜单项除了上⾯两种状态，还有当前状态（.active）和禁⽤状态（.disabled）。这两种状态使⽤⽅法只需要在对应的菜单项上添加对
应的类名。
6.按钮（按钮组）
按钮组和下拉菜单组件⼀样，需要依赖于button.js插件才能正常运⾏。不过我们同样可以直接只调⽤bootstrap.js⽂件。因为这个⽂件已集成了button.js插件功能。
对于结构⽅⾯，⾮常的简单。使⽤⼀个名为“btn-group”的容器，把多个按钮放到这个容器中
7.按钮（按钮⼯具栏）
那么Bootstrap框架按钮⼯具栏也提供了这样的制作⽅法，你只需要将按钮组“btn-group”按组放在⼀个⼤的容器“btn-toolbar”中，
如下所⽰：
<div class ="btn-group">
<button type ="button" class ="btn btn-default"><span class ="glyphicon glyphicon-step-backward"></span ></button >
<button type ="button" class ="btn btn-default"><span class ="glyphicon glyphicon-fast-backward"></span ></button >
<button type ="button" class ="btn btn-default"><span class ="glyphicon glyphicon-backward"></span ></button >
<button type ="button" class ="btn btn-default"><span class ="glyphicon glyphicon-play"></span ></button >
<button type ="button" class ="btn btn-default"><span class ="glyphicon glyphicon-pause"></span ></button >
<button type ="button" class ="btn btn-default"><span class ="glyphicon glyphicon-stop"></span ></button >
<button type ="button" class ="btn btn-default"><span class ="glyphicon glyphicon-forward "></span ></button >
<button type ="button" class ="btn btn-default"><span class ="glyphicon glyphicon-fast-forward"></span ></button >
<button type ="button" class ="btn btn-default"><span class ="glyphicon glyphicon-step-forward"></span ></button >
</div >
8.按钮（嵌套分组）
很多时候，我们常把下拉菜单和普通的按钮组排列在⼀起，实现类似于导航菜单的效果。如下所⽰：
使⽤的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同⼀级.
9.按钮（垂直分组）
前⾯看到的⽰例，按钮组都是⽔平显⽰的。但在实际运⽤当中，总会碰到垂直显⽰的效果。在Bootstrap框架中也提供了这样的风格。我们
只需要把⽔平分组的“btn-group”类名换成“btn-group-vertical”即可。如下所⽰：
10.按钮（等分按钮）
等分按钮的效果在移动端上特别的实⽤。整个按钮组宽度是容器的100%，⽽按钮组⾥⾯的每个按钮平
分整个容器宽度。例如，如果你按钮组⾥⾯有五个按钮，那么每个按钮是20%的宽度，如果有四个按钮，那么每个按钮是25%宽度，以此类推。
等分按钮也常被称为是⾃适应分组按钮，其实现⽅法也⾮常的简单，只需要在按钮组“btn-group”上追加⼀个“btn-group-justified”类名，如下所⽰：
<div class ="btn-group">
<button class ="btn btn-default" type ="button">⾸页</button >
<button class ="btn btn-default" type ="button"></button >
<div class ="btn-group">
<button class ="btn btn-default dropdown-toggle" data-toggle ="dropdown" type ="button">关于我们<span class ="caret"></span ></button >
<ul class ="dropdown-menu">
<li ><a href ="##">公司简介</a ></li >
<li ><a href ="##">客服服务</a ></li >
</ul >
</div >
</div >
<body >
<div class ="btn-wrap">
<div class ="btn-group btn-group-justified">
<a class ="btn btn-default" href ="#">⾸页</a >
<a class ="btn btn-default" href ="#"></a >
</div >
</div >
11.按钮下拉菜单
按钮下拉菜单仅从外观上看和上⼀节介绍的下拉菜单效果基本上是⼀样的。不同的是在普通的下拉菜单的基础上封装了按钮（.btn）样式效果。简单点说就是点击⼀个按钮，会显⽰隐藏的下拉菜单。
按钮下拉菜单其实就是普通的下拉菜单，只不过把“<a>”标签元素换成了“<button>”标签元素。唯⼀不同的是外部容器“div.dropdown”换成了“div.btn-group”。如下所⽰：
12.按钮的向下向上三⾓形
有的时候我们的下拉菜单会向上弹起（接下来⼀个⼩节会介绍），这个时候我们的三⾓⽅向需要朝上显⽰，实现⽅法：需要在“.btn-group”类上追加“dropup”类名（这也是做向上弹起下拉菜单要⽤的类名）。
上⾯代码中可以看出，向上三⾓与向下三⾓的区别：其实就是改变了⼀个border-bottom的值。
<div class="btn-group dropup">
<button class="btn btn-default dropdown-toggle"data-toggle="dropdown"type="button">按钮下拉菜单<span class="caret"></span></button> <ul class="dropdown-menu">
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
</ul>
</div>
13.导航（基础样式）
导航对于⼀位前端⼈员来说并不陌⽣。可以说导航是⼀个⽹站重要的元素组件之⼀.
导航基础样式
Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外⼀个样式才会有效，⽐如“nav-tabs”、“nav-pills”之类。⽐如右侧代码编辑器中就有⼀个tab导航条的例⼦，他的实现⽅法就是为ul标签加⼊.nav和nav-tabs 两个类样式。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论