Bootstrap 4 多级下拉导航栏教程

翟颢普Eddie

于 2024-08-15 10:10:27 发布

阅读量856

点赞数 12

本文链接：https://blog.csdn.net/gitblog_00168/article/details/141214103

版权

Bootstrap 4 多级下拉导航栏教程

bootstrap-4-multi-dropdown-navbarBootstrap 4 Multi level dropdown navigation 项目地址:https://gitcode.com/gh_mirrors/bo/bootstrap-4-multi-dropdown-navbar

项目介绍

Bootstrap 4 多级下拉导航栏是一个开源项目，旨在为开发者提供一个易于集成和使用的多级下拉菜单解决方案。该项目基于Bootstrap 4和jQuery，支持响应式设计，适用于桌面和移动设备。

项目快速启动

安装

首先，克隆项目仓库到本地：

git clone https://github.com/bootstrapthemesco/bootstrap-4-multi-dropdown-navbar.git

引入必要的文件

在HTML文件的<head>标签中引入必要的CSS和JS文件：

<link href="css/bootstrap-4-navbar.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

添加导航栏代码

在HTML文件中添加导航栏代码：

<div class="container">
  <div class="row">
    <nav class="navbar navbar-light navbar-expand-lg mainmenu">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              菜单
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">子菜单1</a>
              <a class="dropdown-item" href="#">子菜单2</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">子菜单3</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>