![Bootstrap 4 Web设计与开发实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/160/36862160/b_36862160.jpg)
上QQ阅读APP看书,第一时间看更新
2.3 调用Bootstrap组件
除了添加class的方式外,在布局方面,只要符合约定的一些class命名和嵌套结构,就可以轻松地构建出一些通用组件。以导航条为例,导航条是在应用或网站中作为导航页头的响应式基础组件,在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。
【代码2-4】(详见源代码ch02目录中ch02.loadNavbar.html文件)
![](https://epubservercos.yuewen.com/482A23/19549639808909106/epubprivate/OEBPS/Images/Figure-P29_20163.jpg?sign=1739285790-XrBvoQ3tLOtqbJfqcaQm8Cygsbj9c0AQ-0-e7e69fa68301cd5605ec750952a4cbfc)
只要符合ul .nav>li .nav-item>a .nav-link这样的文档结构,就可以构建出一个顶部导航条,本例效果如图2.9所示。
![](https://epubservercos.yuewen.com/482A23/19549639808909106/epubprivate/OEBPS/Images/Figure-P30_12146.jpg?sign=1739285790-I8Iik1Kt2UcEVWOnjvuiq7tf9O73EBAD-0-5f5833bb8a469109a7a421d5ec272aab)
图2.9 导航条效果