前端工程师
前端入门如同写字，如果你不知道从哪开始，那就选择前端（含Vue3.x，React17,TS）
前面介绍的都是使用Bootstrap框架制作一级导航，但很多时候，在Web页面中是离不开二级导航的效果。那么在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul，使用前面介绍下拉菜单的方法就可以：
<ul class="nav nav-pills">
<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="##">CSS3</a></li>
…
</ul>
</li>
<li><a href="##">关于我们</a></li>
</ul>
运行效果如下：
通过浏览器调试工具，不难发现，点击有二级导航的菜单项，会自动添加“open”类名，再次点击就会删除添加的“open”类名：
简单点来说，就是依靠这个类名来控制二级导航显示与否，并且设置了背景色和边框：
/*源码查看bootstrap.css文件第3479行～3484行*/
.nav .open > a,
.nav .open >a:hover,
.nav .open >a:focus {
background-color: #eee;
border-color: #428bca;
}
大家回忆一下，在制作下拉菜单时，可以用分隔线，那么在二级导航中是否可以呢？我们一起来看看：
不用再说太多，只需要添加“<li class=”nav-divider”></li>”这样的一个空标签就可以了。
运行效果如下：
/*源码请查看bootstrap.css文件第3485行～第3490行*/
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
我来试试;完成下面任务
编写代码实现“tab型二级导航”，效果图如下：
备注:这一小节没有正确性验证，请查看结果窗口与任务所给的结果图片是否一致，从而判断输入代码是否正确。
参考代码：
<ul class="nav nav-tabs">
<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="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li class="nav-divider"></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
</li>
<li><a href="##">关于我们</a></li>
</ul>
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报