Bootstrap学习笔记——菜单、按钮及导航

最新推荐文章于 2024-06-03 20:31:46 发布

gengfu_AI

最新推荐文章于 2024-06-03 20:31:46 发布

阅读量1.7k

点赞数

分类专栏： html5 bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/gengfu_php/article/details/78157182

版权

1 下拉菜单功能

1.1 下拉菜单

在Bootstrap框架中的下拉菜单组件是一个独立的组件，根据不同的版本，它对应的文件：

LESS版本：对应的源码文件为 dropdowns.less
Sass版本：对应的源码文件为 _dropdowns.scss
编译后的Bootstrap版本：查看bootstrap.css文件第3004行～第3130行

在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。

如果你使用的是未编译版本，在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件。不过在我们的教程中，我们统一调用压缩好的“bootstrap.min.js”文件.

特别声明：因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。
即：

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>

两个JS文件调用顺序改变则bootstrap.js文件无法正常显示其效果。

代码实例

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>下拉菜单</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/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="#">下拉菜单项1</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项2</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项3</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项4</a></li>
          </ul>
    </div> 
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    </body>
</html>

这里写图片描述

在使用Bootstrap框架中的下拉菜单组件时，其结构运用的正确与否非常的重要，如果结构和类名未使用正确，直接影响组件是否能正常运用。

1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:

<div class="dropdown"></div>

使用了一个<button>按钮做为父菜单，并使用类名“dropdown-toggle”。同时添加自定义属性“data-toggle”，该属性值必须与最外容类名一致。

data-toggle="dropdown"

下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”。

<ul class="dropdown-menu">

1、dropdown-toggle 的作用是什么？

经过查询，其应该属于dropdown组件中的一部分。其相关内容网上非常少。再bootstrap官网中找dropdown组件信息，我们可以发现其属于js中的一部分内容。
http://v3.bootcss.com/javascript/#dropdowns

定位到Dropdowns dropdown.js—->Usage部分内容

通过数据属性data attributes或者JavaScript，切换父列表项中的.open类，实现下拉菜单的显示和隐藏。

注意：在应用层中，关闭下拉菜单依赖于属性 data-toggle=”dropdown” 所以一直使用它将是一个好主意。

Via data attributes

增加data-toggle=”dropdown” 的链接或按钮来切换下拉菜单

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

保持完整的URL链接按钮，使用属性data-target而不是href =“#”。

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Via JavaScript

通过JavaScript调用下拉菜单：

$('.dropdown-toggle').dropdown()

但是data-toggle="dropdown"依然被请求
不管您是通过JavaScript调用下拉菜单，还是使用数据API，当触发下拉菜单元素时data-toggle="dropdown"属性会被请求。

不难发现dropdown-toggle是经由Via js实现下拉菜单效果时才有用，而实例代码中是通过Via data attributes实现下拉菜单效果的（css）。所以本例中的dropdown-toggle没有存在效用。

1.2 下拉菜单（原理分析）

Bootstrap框架中的下拉菜单组件通过在类”dropdown-menu“设置默认样式“display:none”，让下拉菜单项默认为隐藏的（详细源码请查看bootstrap.css文件第3010行～第3029行）。
当用户点击父菜单项时，下拉菜单将会被显示出来，继续点击则下拉菜单继续隐藏。

现在我们来分析一下实现原理，非常简单，通过js技术手段，给父容器“div.dropdown”添加或移除类名“open”来控制下拉菜单显示或隐藏。也就是说，默认情况，“div.dropdown”没有类名“open”，当用户第一次点击时，“div.dropdown”会添加类名“open”；当用户再次点击时，“div.dropdown”容器中的类名“open”又会被移除。我们可以通过浏览器的firebug查看整个过程：

1.3 下拉菜单（下拉分隔线）

下拉菜单中的分割线（下拉菜单的组间分割）可以通过添加带类名”divider“的<li>来实现。
/源码bootstrap.css文件第3034行～第3039行/

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

代码实例

<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" class="divider"></li>
    <li role="presentation"><

最低0.47元/天解锁文章

gengfu_AI

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习笔记——菜单、按钮及导航

1 下拉菜单在Bootstrap框架中的下拉菜单组件是一个独立的组件，根据不同的版本，它对应的文件：LESS版本：对应的源码文件为 dropdowns.lessSass版本：对应的源码文件为 _dropdowns.scss编译后的Bootstrap版本：查看bootstrap.css文件第3004行～第3130行在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的b
复制链接

扫一扫

专栏目录