Bootstrap 框架-下拉菜单

最新推荐文章于 2023-07-07 13:49:00 发布

「已注销」

最新推荐文章于 2023-07-07 13:49:00 发布

阅读量2.8k

点赞数 1

分类专栏：前端开发入门文章标签： Bootstrap下拉菜单

本文链接：https://blog.csdn.net/MoDuRooKie/article/details/81585255

版权

本文介绍了Bootstrap框架中下拉菜单的使用，包括基本用法、原理分析和样式设置。内容涉及如何创建下拉菜单结构，下拉菜单的显示与隐藏原理，以及设置下拉分隔线、菜单标题、对齐方式和菜单项状态等样式技巧。

摘要由CSDN通过智能技术生成

<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-toggle”和自定义“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”。

当用户点击父菜单项时，下拉菜单将会被显示出来。当用户再次点击时，下拉菜单将继续隐藏。现在我们来分析一下实现原理，非常简单，

最低0.47元/天解锁文章

「已注销」

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 框架-下拉菜单

&lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"&gt;下拉菜单在 Bootstrap 框架中的下拉菜单组件是一个独立的组件，根据不同的版本，它对应的文件：☑ LESS版本：对应的源码文件为 dropdowns.less☑ Sass...
复制链接

扫一扫

专栏目录