HTML导航条

Bootstrap响应式前端框架笔记十——导航栏相关组件

一笑奈何 提交于 2019-12-01 14:03:19
Bootstrap响应式前端框架笔记十——导航栏相关组件 Bootstrap中提供的导航栏分为两种模式,使用nav-tabs类可以创建页卡模式的导航栏,使用nav-pills类可以创建胶囊模式的导航栏,示例如下: <p>导航分为两种,页卡模式和胶囊模式</p> <p>页卡模式</p <ul class="nav nav-tabs"> <li class="active"><a>主页</a></li> <li><a>活动</a></li> <li><a>留言</a></li> </ul> <hr /> <p>胶囊模式</p> <ul class="nav nav-pills"> <li class="active"><a>主页</a></li> <li><a>活动</a></li> <li><a>留言</a></li> </ul> 效果如下图: 针对胶囊式导航,也可以设置其排列方向为堆叠,添加nav-stacked类即可,示例如下: <p>堆叠排列的胶囊导航</p> <ul class="nav nav-pills nav-stacked"> <li class="active"><a>主页</a></li> <li><a>活动</a></li> <li><a>留言</a></li> </ul> 效果如下: 导航中也可以进行下拉菜单的嵌套,示例如下: <p>导航中嵌套下拉菜单</p>