<!-- nav 导航的基础样式 --> <div> <div> <ul> <li><a href="#">雪碧图</a></li> <li><a href="#">可乐</a></li> <li><a href="#">coffee</a></li> </ul> </div> <!-- 胶囊式 nav-pills--> <div> <ul> <li><a href="#">雪碧图</a></li> <li><a href="#">可乐</a></li> <li><a href="#">coffee</a></li> </ul> </div> <!-- 竖着排 nav-stacked--> <div> <ul> <li><a href="#">雪碧图</a></li> <li><a href="#">可乐</a></li> <li><a href="#">coffee</a></li> </ul> </div> <!-- 两端对齐 nav-justified--> <div> <ul> <li><a href="#">雪碧图</a></li> <li><a href="#">可乐</a></li> <li><a href="#">coffee</a></li> </ul> </div> <!-- 导航中放下拉菜单--> <div> <ul> <li><a href="#">雪碧图</a></li> <li><a href="#">可乐</a></li> <li><a href="#">coffee</a></li> <li> <a href="#" data-toggle="dropdown">绿茶 <span></span> </a> <ul> <li><a href="#">html</a></li> <li><a href="#">css</a></li> <li><a href="#">js</a></li> </ul> </li> </ul> </div> </div>
效果图：
选项卡：
<!-- 1.导航对应的所有内容需要放在一个class为tab-content的层里； 2.对应的每个内容块都要加上tab-pane的class，且激活的内容块加上active的class 3.给每一个导航的a标签添加data-toggle="tab"； 4.给每一个内容块添加一个id，和选项卡的锚点对应 --> <div> <div> <ul> <li><a href="#tab1" data-toggle="tab">雪碧图</a></li> <li><a href="#tab2" data-toggle="tab">可乐</a></li> <li><a href="#tab3" data-toggle="tab">coffee</a></li> </ul> <div> <div>html</div> <div>css</div> <div>js</div> </div> </div> </div>
效果图：
