Bootstrap导航

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>