Bootstrap下拉菜单的使用(附源码文件)--Bootstrap

时间:2022-09-19 13:59:52

1、Bootstrap下拉菜单的使用,源代码如下:(如有不当之处,还望大佬们指出哈……)

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap下拉菜单</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>&nbsp;用户<!--glyphicon glyphicon-user是图标的css样式-->
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">这一项是标题</li>
<li><a href="#">普通菜单</a></li>
<li class="active"><a href="#">菜单激活状态</a></li>
<li class="disabled"><a href="#">禁用菜单</a></li>
<li class="divider"><a href="#">分隔线</a></li>
<li><a href="#">普通菜单</a></li>
</ul>
</div>
</div>
</body>
</html>

Effect Picture:

Bootstrap下拉菜单的使用(附源码文件)--Bootstrap

源码文件下载:Bootstrap下拉菜单.zip

2、以下内容列出的是各个类选择器设定的内容以及在标签起到的作用。

(1) Bootstrap中的下拉菜单需要用到jQuery.js和bootstrap.js,所以这两个文件都要引用进去。注意引用的先后顺序,需要先引用jQuery,再应用bootstrap.js。

Bootstrap下拉菜单的使用(附源码文件)--Bootstrap

如果先引用bootstrap.js后引用jQuery.js,就会出错,Console会输出错误提示信息:

Bootstrap下拉菜单的使用(附源码文件)--Bootstrap

(2) class="dropdown"&class="dropup"      <div></div>起到定位的效果

  .dropup,.dropdown {
    position: relative;
  }

(3) class="btn"、class="btn-denger"  <button></button>设置按钮样式,按钮颜色为红色

  .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
  }

  .btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
  }

(4) class="caret"   <span></span>设置(下拉小图标)图标

  .dropup .caret,
  .navbar-fixed-bottom .dropdown .caret {
    content: "";
    border-top: 0;
    border-bottom: 4px dashed;
    border-bottom: 4px solid \9;
  }

(5) class="dropdown-menu"         <ul></ul>可以隐藏ul,一开始是隐藏状态

  .dropup .dropdown-menu,
  .navbar-fixed-bottom .dropdown .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 2px;
  }

(6) class="dropdown-menu-right"

   class="dropdown-menu-left"     <ul></ul>设置ul相对<div class="dropdown"></div>的位置

  .dropdown-menu-right {
    right: 0;
    left: auto;
  }
  .dropdown-menu-left {
    right: auto;
    left: 0;
  }

(7) class="dropdown-header"  <li></li>(不用超链接)在下拉菜单中不能选中,代表标题

  .dropdown-header {
    display: block;
    padding: 3px 20px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #777;
    white-space: nowrap;  }

(8) data-toggle="dropdown"属性  <button><button>在按钮上这个属性可实现下拉显示子菜单

(9) class="disabled "         <li></li>使放在<a></a>上显示禁用图标

  .nav > li.disabled > a {

    color: #777;
  }
  .nav > li.disabled > a:hover,
  .nav > li.disabled > a:focus {
    color: #777;
    text-decoration: none;
    cursor: not-allowed;
    background-color: transparent;
  }

(10) class="active"    <li></li>使放在<a></a>上显示激活状态

  .nav-tabs > li.active > a,
  .nav-tabs > li.active > a:hover,
  .nav-tabs > li.active > a:focus {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
  }

(11) classs="divider "    <li></li>使放在<a></a>上显示分隔线

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

下拉菜单要注意的:{基本语法、对齐、标题、分隔线、禁用菜单}

文章系作者原创,转载请注明出处,感谢合作!