登录  /  注册

Bootstrap下拉菜单实例详解

零下一度
发布: 2017-07-03 11:03:28
原创
1273人浏览过

前面的话

  网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,bootstrap默认提供了用于显示链接列表的可切换、有上下文的菜单。而且在各种交互状态下的菜单展示需要和javascript插件配合才能使用。本文将详细介绍bootstrap下拉菜单

 

使用方法

  在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。当然,如果使用的是未编译版本,在js文件夹下能找到一个名为“dropdown.js”的文件,也可以调用这个js文件

  因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.js之前一定要先加载jquery.js才会产生效果

nbsp;html&gt;<meta><title>Document</title><link><script></script><script></script>
登录后复制

 

基本用法

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

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

<div></div>
登录后复制

  2、使用了一个

<button></button>
登录后复制

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

登录后复制
登录后复制
登录后复制
      
      
      ActionAnother actionSomething else here
    登录后复制

      4、通过为下拉菜单的父元素设置 .dropup 类,可以让菜单向上弹出(默认是向下弹出的)

    <div>
      <button>Dropup<span></span>
      </button>
      <ul>
    <li><a>Action</a></li>
    <li><a>Another action</a></li>
    <li><a>Something else here</a></li>
      </ul>
    </div>
    登录后复制

     

    原理分析

      Bootstrap框架中的下拉菜单组件,其下拉菜单项默认是隐藏的,因为“dropdown-menu”默认样式设置了“display:none”;当用户点击父菜单项时,下拉菜单将会被显示出来;当用户再次点击时,下拉菜单将继续隐藏

    .dropdown-menu {
      position: absolute;/*设置绝对定位,相对于父元素div.dropdown*/
      top: 100%;/*让下拉菜单项在父菜单项底部,如果父元素不设置相对定位,该元素相对于body元素*/
      left: 0;
      z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/
      display: none;/*默认隐藏下拉菜单项*/
      float: left;
      min-width: 160px;
      padding: 5px 0;
      margin: 2px 0 0;
      font-size: 14px;
      list-style: none;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ccc;
      border: 1px solid rgba(0, 0, 0, .15);
      border-radius: 4px;
      -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
      box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    }
    登录后复制

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

    .open &gt; .dropdown-menu {
      display: block;
    }
    登录后复制

     

    扩展用法

    【分隔线】

      在Bootstrap框架中的下拉菜单提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的

  • ,并且给这个
  • 添加类名“divider”来实现添加下拉分隔线的功能
    .dropdown-menu .divider {
      height: 1px;
      margin: 9px 0;
      overflow: hidden;
      background-color: #e5e5e5;
    }
    登录后复制
    登录后复制
    登录后复制
    登录后复制
  • <div>
      <button>Dropdown<span></span>
      </button>
      <ul>
    <li><a>Action</a></li>
    <li><a>Another action</a></li>
    <li><a>Something else here</a></li>
    <li>
    <li><a>Separated link</a></li>
      </ul>
    </div>
    登录后复制

    【菜单标题】

      在任何下拉菜单中均可通过添加标题来标明一组动作 

    登录后复制
    登录后复制
    登录后复制
  • Dropdown header
  • .dropdown-header {
      display: block;
      padding: 3px 20px;
      font-size: 12px;
      line-height: 1.42857143;
      color: #999;
    }
    登录后复制
    <div>
      <button>Dropdown<span></span>
      </button>
      <ul>
    <li>第一部分菜单头部</li>
    <li><a>下拉菜单项</a></li>
    <li><a>下拉菜单项</a></li>
    <li>
    <li>第二部分菜单头部</li>
    <li><a>下拉菜单项</a></li>
      </ul>
    </div>
    登录后复制

    【对齐方式】

      Bootstrap框架中下拉菜单默认是左对齐,如果想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“dropdown-menu-right”类名 

    .dropdown-menu-right {
      right: 0;
      left: auto;
    }
    登录后复制

      由于

    以上就是Bootstrap下拉菜单实例详解的详细内容,更多请关注php中文网其它相关文章!

    智能AI问答
    PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    热门推荐
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号