![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=1739283594-0BDizmGN8969kQZJdKLWJOhU53qSWPgP-0-7aac725f7e88b6cf78416179605a7a15)
只要符合ul .nav>li .nav-item>a .nav-link这样的文档结构,就可以构建出一个顶部导航条,本例效果如图2.9所示。
![](https://epubservercos.yuewen.com/482A23/19549639808909106/epubprivate/OEBPS/Images/Figure-P30_12146.jpg?sign=1739283594-5uPhzqqWBRJnzR48MyglhYkWQgRfAZ9x-0-de5d0e02ce62128a33f0b51d3d9d4bf8)
图2.9 导航条效果