- Bootstrap Web设计与开发实战
- 杨旺功
- 167字
- 2020-11-28 16:39:09
2.3 调用Bootstrap组件
除了添加class的方式外，在布局方面，只要符合约定的一些class命名和嵌套结构，我们就可以轻松地构建出一些通用组件，以导航条为例。
【代码2-4】（详见源代码ch02目录中ch02.loadNavbar.html文件）
01 <! DOCTYPE html>
02 <html lang="en">
03 <head>
04 <meta charset="UTF-8">
05 <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
06 <title>Bootstrap - Load Table Striped CSS</title>
07 </head>
08 <body>
09 <div class="navbar">
10 <div class="navbar-inner">
11 <a class="brand" href="#">Bootstrap - Navbar</a>
12 <ul class="nav">
13 <li class="active"><a href="#">Home</a></li>
14 <li><a href="#">News</a></li>
15 <li><a href="#">BBS</a></li>
16 <li><a href="#">About</a></li>
17 </ul>
18 </div>
19 </div>
20 <script src="../js/jquery.js"></script> <! --jQuery应该放在前面优
先加载-->
21 <script src="../bootstrap/js/bootstrap.js"></script>
22 </body>
23 </html>
24 <head>
只要符合div .navbar>div .navbar-inner>ul .nav>li这样的HTML文档结构，就可以构建出一个顶部导航条，本例效果如图2.9所示。
图2.9 导航条效果