bootstarp里面的树形菜单写法
时间: 2024-01-15 22:04:31 浏览: 31
在Bootstrap中,可以使用以下HTML和CSS代码来创建树形菜单:
HTML代码:
```html
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">树形菜单</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">首页</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">产品 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">产品1</a></li>
<li><a href="#">产品2</a></li>
<li><a href="#">产品3</a></li>
</ul>
</li>
<li><a href="#">服务</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
```
CSS代码:
```css
.panel-heading {
background-color: #337ab7;
color: #ffffff;
}
.nav-pills>li>a {
border-radius: 0;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
background-color: #337ab7;
color: #ffffff;
}
.dropdown-menu>li>a {
color: #333333;
}
.dropdown-menu>li>a:hover {
background-color: #f5f5f5;
}
```
这里使用了Bootstrap提供的面板(panel)、导航(nav)和下拉菜单(dropdown)等组件来创建树形菜单。树形菜单中的每个节点都是一个链接,可以通过设置链接的href属性来跳转到相应的页面。同时,使用CSS样式来美化树形菜单的外观和交互效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)