帮我写一个bootstarp下拉菜单,内容分别是 显示,关机,开机.关机按钮向左侧弹出node1/node0
时间: 2024-03-05 10:52:38 浏览: 20
好的,以下是一个简单的Bootstrap下拉菜单示例代码,包括显示、关机、开机三个选项,并且关机选项向左侧弹出了node1/node0。
```html
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
操作
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">显示</a>
<a class="dropdown-item" href="#">关机</a>
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
开机
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">node1</a>
<a class="dropdown-item" href="#">node0</a>
</div>
</div>
</div>
</div>
```
在这个示例代码中,我们使用Bootstrap提供的 `dropdown` 和 `dropdown-menu` 类来创建下拉菜单。`button` 元素用来触发下拉菜单的显示,`dropdown-menu` 元素中包含了所有选项。在关机选项中,我们嵌套了一个新的下拉菜单,并且添加了一个 `dropdown-toggle` 类来让它可以被点击。`data-toggle="dropdown"` 和 `aria-haspopup="true"` 属性用于告诉Bootstrap这是一个下拉菜单,并且 `aria-expanded="false"` 属性表示这个下拉菜单当前是关闭状态。在开机选项中,我们使用了和关机选项一样的HTML结构,只是在第二个下拉菜单中添加了两个选项。