简介
Bootstrap-submenu 是一个基于 Bootstrap 框架的下拉菜单扩展，可以为子菜单添加功能，如箭头、分割线等。本文将提供使用 bootstrap-submenu 的详细教程，并通过示例代码演示其用法。
安装
安装 bootstrap-submenu 非常简单。首先，在你的项目中使用 npm 安装：
npm install bootstrap-submenu --save
然后，在你的 HTML 文件中引入样式表和脚本文件：
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="node_modules/bootstrap-submenu/dist/css/bootstrap-submenu.min.css"> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src="node_modules/bootstrap-submenu/dist/js/bootstrap-submenu.min.js"></script>
以上代码中，bootstrap.min.css 和 bootstrap.min.js 分别是 Bootstrap 样式表和脚本文件，jquery.min.js 是 jQuery 库，bootstrap-submenu.min.css 和 bootstrap-submenu.min.js 则是 bootstrap-submenu 的样式表和脚本文件。
使用
基本用法
使用 bootstrap-submenu 的基本步骤如下：
- 在你的 HTML 文件中添加一个下拉菜单。
- 为菜单添加
data-submenu属性并设置为"."，表示该菜单有子菜单。 - 在子菜单中添加下拉菜单项。
示例代码如下：
-- -------------------- ---- -------
---- -----------------
------- ---------- ----------- ---------------- ------------- ----------------------- ---------------------- -------------------- ----------------------
-------- ------
---------
--- --------------------- ------------------------------------ ---------------------------------
------ --------------------- ------------------------
------ --------------------- ---------------- ---------------
--- -------------------------
-- --------------------- --------------------
--- ----------------------
------ --------------------- ---------------- ---------------
------ --------------------- ---------------- ------- ---------------
-----
-----
------ --------------------- ------------------ ---- -------------
-----
------上述代码中，data-submenu=".dropdown-submenu" 表示该下拉菜单有子菜单，并使用 .dropdown-submenu 作为子菜单的选择器。
自定义子菜单样式
bootstrap-submenu 提供了多种可自定义的子菜单样式。例如可以为子菜单添加箭头、分割线等。以下是一些常用的样式：
data-submenu-arrow：为子菜单添加箭头。data-submenu-end：在子菜单的最后一个选项后添加分割线。data-submenu-divide：在子菜单的每个选项后添加分割线。
下面是一个例子：
-- -------------------- ---- -------
---- -----------------
------- ---------- ------------- ---------------- ------------- ----------------------- ---------------------- -------------------- ----------------------
-------- ------
---------
--- --------------------- ------------------------------------ ---------------------------------
------ --------------------- ------------------------
------ --------------------- ---------------- ---------------
--- ------------------------ -------------------
-- --------------------- ---------------- ---- ---------
--- ----------------------
------ --------------------- ---------------- ---------------
------ --------------------- ---------------- ------- ---------------
----
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------