导航 - 前端学习教程_ 前端_前端开发

在前面讲解的内容中，我们通过Bootstrap栅格系统已经实现了导航栏的页面结构，在实现时主要是用到了布局容器、列等类名。为了更加方便地实现页面中导航栏的页面结构，Bootstrap为我们提供了实现导航栏的组件，使用起来非常方便。下面通过例6-1演示导航栏的实现方式。

【例6-1】

创建C:\Bootstrap\chapter05\demo02.html文件，具体代码如下。

1  <!DOCTYPE html>
2  <html>
3  <head>
4   <meta charset="UTF-8">
5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
6   <title>Document</title>
7   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
8  </head>
9  <body>
10  <!-- 导航 -->
11  <ul class="nav">
12   <li class="nav-item">
13    <a class="nav-link active" href="#">首页</a>
14   </li>
15   <li class="nav-item">
16    <a class="nav-link" href="#">简介</a>
17   </li>
18   <li class="nav-item">
19    <a class="nav-link" href="#">详情</a>
20   </li>
21   <li class="nav-item">
22    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">联系电话</a>
23   </li>
24  </ul>
25 </body>
26 </html>

上述代码中，第7行代码引入bootstrap.min.css文件；第11行代码定义类名为.nav的ul元素，表示导航栏的最外层盒子；第12~23行代码在.nav的内部定义类名为.nav-item的li元素，表示导航栏中的导航列表，并在每一个.nav-item的内部定义类名为.nav-link的a标签，表示导航标签中的内容。

在浏览器中打开demo02.html文件，运行结果如图1所示。

图1 导航