Bootstrap中nav nav-list的使用

简介

Bootstrap是一个流行的前端框架，其中包含了许多常用的UI组件。其中，nav和nav-list两个组件可以用于创建导航菜单。

• nav：可以用于创建水平和垂直的导航菜单。
• nav-list：可以用于创建列表式的导航菜单。

在本文中，主要介绍nav-list的用法。

基本用法

首先，需要在HTML文档中引入Bootstrap的样式文件和JavaScript文件。

<!-- 引入Bootstrap样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- 引入jQuery和Bootstrap的JavaScript文件 -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

然后，在HTML文档中创建一个列表，并加上 nav 和 nav-list 的class。

<ul class="nav nav-list">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

效果如下所示：

• Home
• Profile
• Messages

通过添加不同的class，可以实现不同的样式效果。

添加图标

可以使用Font Awesome或Glyphicons等图标库，为导航菜单添加图标。

例如，添加一个Font Awesome的图标：

<ul class="nav nav-list">
  <li class="active"><a href="#"><i class="fa fa-home"></i> Home</a></li>
  <li><a href="#"><i class="fa fa-user"></i> Profile</a></li>
  <li><a href="#"><i class="fa fa-envelope"></i> Messages</a></li>
</ul>

效果如下所示：

• 首页
• 我的
• 消息

禁用和激活状态

可以通过 active 和 disabled class，设置导航菜单项的激活和禁用状态。

例如：

<ul class="nav nav-list">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li class="disabled"><a href="#">Messages</a></li>
</ul>

效果如下所示：

• Home
• Profile
• Messages

总结

以上就是关于Bootstrap中nav nav-list的基本用法，通过添加不同的class，可以实现不同的样式效果，如添加图标、禁用和激活状态等。感谢阅读！