
上QQ阅读APP看书,第一时间看更新
2.3 调用Bootstrap组件
除了添加class的方式外,在布局方面,只要符合约定的一些class命名和嵌套结构,就可以轻松地构建出一些通用组件。以导航条为例,导航条是在应用或网站中作为导航页头的响应式基础组件,在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。
【代码2-4】(详见源代码ch02目录中ch02.loadNavbar.html文件)

只要符合ul .nav>li .nav-item>a .nav-link这样的文档结构,就可以构建出一个顶部导航条,本例效果如图2.9所示。

图2.9 导航条效果