Bootstrap中如何制作下拉菜单

2025-03-29 05:51:50

1、打开HBuilderX,鼠标右键,新建一个项目,名字自己取。

Bootstrap中如何制作下拉菜单

2、打开新建项目中的js中的index.html。

Bootstrap中如何制作下拉菜单

3、引入JQuery、Bootstrap等插件,这里以CDN方式引入。

Bootstrap中如何制作下拉菜单

4、下拉菜单代码:<d坡纠课柩iv class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> 书本 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Java</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">C#</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">winfrom</a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">计算机</a> </li> </ul> </div>

Bootstrap中如何制作下拉菜单

5、这里下拉菜单名叫“书名”,子菜单分别是名字。

6、Ctrl+S保存,Ctrl+R运行,在游览器中运行时这样子的:

Bootstrap中如何制作下拉菜单
Bootstrap中如何制作下拉菜单
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢