Bootstrap中如何制作下拉菜单

 时间:2026-02-14 19:01:10

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

Bootstrap中如何制作下拉菜单

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

Bootstrap中如何制作下拉菜单

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

Bootstrap中如何制作下拉菜单

4、下拉菜单代码:

<div 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中如何制作下拉菜单

  • 如何他用powerdesigner中的SQL语句创建数据表
  • css如何定义标题底部下划线宽度
  • HTML中的box如何定义上边距
  • HBuilderX如何在命令窗口中打开目录#校园分享#
  • 如何制作一个jsp动态网站
  • 热门搜索
    被子怎么洗 中学生怎么赚钱 绿豆芽怎么炒好吃 烙饼怎么做又软又好吃 王者荣耀苹果怎么充值 韩非子五蠹怎么读 怎么买火车票 温度计怎么用 雪是怎么形成的 和珅怎么死的