Question

我需要一个有两层的导航栏。因此，第一级可能有三个条目“狗”“猫”“鸟”。选定的“狗”将显示第二层菜单，可能有“牧羊犬”“梗”“约克”等等。

我无法使用此功能，也无法在网络上找到示例。我并不喜欢导航棒，任何有效的东西都会很棒。

<!DOCTYPE html>
<html lang="en">

<head>
<title>Example of Bootstrap 3 Responsive Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">

</style>
</head> 

<body>


 <div class="container"> 
<nav class="navbar navbar-inverse">
 <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Company</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#page1">Page 1</a></li>
      <li><a href="#page2">Page 2</a></li> 
    </ul>
    </div>
</nav>
<nav class="navbar navbar-inverse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#page1">Page 1</a></li>
            <li><a href="#page2">Page 2</a></li> 
        </ul>
    </nav>
      <div id="page1" class="page-header">
        <h1>Page 1 Nav</h1>
      </div>  
</div>
     </body>
    </html>

如何在Bootstrap3中创建两级导航菜单

0 个答案: