3.6 Bootstrap 导航元素

**Bootstrap3.6 导航元素**

Bootstrap 是一个流行的前端框架，提供了许多便捷的组件和工具来帮助开发者快速构建响应式网页。导航元素是 Bootstrap 中的一个重要组成部分，它们用于定义页面中的导航菜单。

**导航类型**

Bootstrap 提供了多种类型的导航元素，包括：

* **顶部导航（Navbar）**
* **侧边导航（Sidebar）**
* **下拉菜单（Dropdown）**
* **分页导航（Pagination）**

在本文中，我们将重点讨论 Bootstrap3.6 中的顶部导航和侧边导航。

### 顶部导航（Navbar）

顶部导航是页面最上方的一个导航区域，通常包含 logo、菜单项等元素。Bootstrap 提供了一个简单的类来创建顶部导航：

html<nav class="navbar navbar-default">
 <div class="container-fluid">
 <!-- Brand and toggle get grouped for better mobile display -->
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">Brand</a>
 </div>

 <!-- Collect the nav links, forms, and other content for toggling -->
 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
 <li><a href="#">Link</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 </ul>
 </li>
 </ul>

 <!-- Right Side Of Navbar -->
 <div class="navbar-right">
 <ul class="nav navbar-nav">
 <li><a href="#">Right Nav Item</a></li>
 </ul>
 </div>
 </div><!-- /.navbar-collapse -->
 </div><!-- /.container-fluid -->
</nav>

html<div class="sidebar">
 <div class="sidebar-header">
 <h3>Brand</h3>
 </div>

 <ul class="nav nav-sidebar">
 <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
 <li><a href="#">Link</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 </ul>
 </li>
 </ul>

 <div class="sidebar-footer">
 <p>&copy;2023 Brand, Inc.</p>
 </div>
</div>

html<ul class="pagination">
 <li><a href="#" aria-label="Previous"><span aria-hidden="true">?</span></a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#" aria-label="Next"><span aria-hidden="true">?</span></a></li>
</ul>

html<div class="dropdown">
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 Dropdown button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 </ul>
</div>