<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
下拉菜单
在 Bootstrap 框架中的下拉菜单组件是一个独立的组件
,根据不同的版本,它对应的文件:
☑ LESS
版本:对应的源码文件为 dropdowns.less
☑ Sass
版本:对应的源码文件为 _dropdowns.scss
☑ 编译后的 Bootstrap 版本:查看 bootstrap.css
文件第 3004 行~第 3130 行
在使用 Bootstrap 框架的下拉菜单时,必须调用 Bootstrap 框架提供的 bootstrap.js
文件。当然,如果你使用的是未编译版本,在 js 文件夹下你能找到一个名为“dropdown.js
”的文件。你也可以调用这个 js 文件。不过在我们的教程中,我们统一调用压缩好的“bootstrap.min.js
”文件:
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
注意:因为 Bootstrap 的组件交互效果都是依赖于 jQuery 库写的插件
,所以在使用 bootstrap.min.js 之前一定要先加载 jquery.min.js 才会生效果
。
基本用法
在使用 Bootstrap 框架中的下拉菜单组件时,其结构运用的正确与否非常的重要,如果结构和类名未使用正确,直接影响组件是否能正常运用。
1.使用一个名为“dropdown
”的容器包裹了整个下拉菜单元素:
<div class="dropdown"></div>
2.使用了一个 <button>
按钮做为父菜单,并且定义类名“dropdown-toggl
e”和自定义“data-toggle
”属性,且值必须和最外容器类名一致:
data-toggle="dropdown"
3.下拉菜单项使用一个 ul
列表,并且定义一个类名为“dropdown-menu
”:
<ul class="dropdown-menu">
<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="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
原理分析
Bootstrap 框架中的下拉菜单组件,其下拉菜单项默认是隐藏的
。因为“dropdown-menu
”默认样式设置了“display:none
”。
当用户点击父菜单项时,下拉菜单将会被显示出来。当用户再次点击时,下拉菜单将继续隐藏。现在我们来分析一下实现原理,非常简单,