bootstrap双重tab嵌套

最新推荐文章于 2024-08-20 11:50:43 发布

LeapMotion1

最新推荐文章于 2024-08-20 11:50:43 发布

阅读量4k

点赞数 4

分类专栏： bootstrap 文章标签： bootstrap 目录 tab组件

本文链接：https://blog.csdn.net/LeapMotion1/article/details/75116335

版权

在项目开发中遇到Bootstrap的双重tab嵌套问题，通过参考博客文章成功解决。文章分享了如何创建双层嵌套的目录结构，包括HTML文件的编写和CSS代码的应用。

摘要由CSDN通过智能技术生成

在做项目时，遇到双重嵌套的问题，看到了一篇博主的文章，非常简便，可以直接拿来用。
http://blog.csdn.net/qq_33988065/article/details/51690860

我又更新了一下，实现了双层嵌套的目录结构。
1.HTML文件

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="public/css/bootstrap.min.css">
    <link rel="stylesheet" href="public/css/bootstrap-tab.css">
    <title>bootstrap双重嵌套</title>
  </head>
  <body>
    <div class="container">
        <div class="row">
            <!-- 菜单展示 -->
            <div class="col-xs-3">
                <ul id="myTab" class="nav nav-tabs nav-stacked">
                    <li class="menu active">
                        <a href="#tab1" class="menu_1" data-toggle="tab">一级目录1</a>
                        <ul class="nav menu_2">
                            <li class="active">
                                <a href="#tab1-1"  data-toggle="tab">
                                <span class="fa fa-angle-double-right"></span>二级目录1-1
                                </a>
                            </li>
                            <li>
                                <a href="#tab1-2"  data-toggle="tab">
                                <span class="fa fa-angle-double-right"></span>二级目录1-2
                                </a>
                            </li>
                            <li>
                                <a href="#tab1-3"  data-toggle="tab">
                                <span class="fa fa-angle-double-right"></span>二级目录1-3
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu">