BootStrap下拉菜单

最新推荐文章于 2022-06-06 23:25:30 发布

秋城落叶

最新推荐文章于 2022-06-06 23:25:30 发布

阅读量416

点赞数 1

本文链接：https://blog.csdn.net/qq_40861561/article/details/105217357

版权

本文详细介绍了Bootstrap框架中的下拉菜单功能，包括如何在导航栏、标签页、胶囊式导航菜单和按钮中实现下拉菜单的交互，以及如何创建不可点击的标题和分隔线。

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

Bootstrap 下拉菜单将具体讲解下拉菜单的交互,使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单

菜单div 
<div class="dropdown">
菜单li
<li class="dropdown">
下拉按钮，id用来给下拉菜单指向用的

<button type="button" class="btn dropdown-toggle" id="dropdownMenu" data-toggle="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b></a>

<span class="caret"></span>下拉图标

菜单列表，aria-labelledby="dropdownMenu" 就是用来指向哪个菜单，因为有可能有多个菜单

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">

<ul class="dropdown-menu">
菜单项

<li><a href="#">HTML</a></li> 
//标题不可点击
    <li class="dropdown-header">
           标题
        </li>
//分割线
<li class="divider"></li>

通过 JavaScript：通过 JavaScript 调用下拉菜单切换
$('.dropdown-toggle').dropdown()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
            <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="dropdown">
   <button type="button" class="btn dropdown-toggle"   id="bropdownMenu" data-toggle="dropdown">
         下拉菜单      
    <span class="caret">    
    </span>
       </button>
       <ul class="dropdown-menu"  role="menu" aria-labelledby="bropdownMenu">
        <li>
       <a href="#">HTML</a>     
        </li>
            <li role="menus&