本文实例为大家分享了bootstrap导航和选项卡的具体代码，供大家参考，具体内容如下
导航：
nav 导航的基础样式 div div li a href="#" 雪碧图 /a /li li a href="#" 可乐 /a /li li a href="#" coffee /a /li /ul /div !-- 胶囊式 nav-pills-- div li a href="#" 雪碧图 /a /li li a href="#" 可乐 /a /li li a href="#" coffee /a /li /ul /div !-- 竖着排 nav-stacked-- div li a href="#" 雪碧图 /a /li li a href="#" 可乐 /a /li li a href="#" coffee /a /li /ul /div !-- 两端对齐 nav-justified-- div li a href="#" 雪碧图 /a /li li a href="#" 可乐 /a /li li a href="#" coffee /a /li /ul /div !-- 导航中放下拉菜单-- div li a href="#" 雪碧图 /a /li li a href="#" 可乐 /a /li li a href="#" coffee /a /li a href="#" data-toggle="dropdown" 绿茶 span /span 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 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 id="tab1" html /div div id="tab2" css /div div id="tab3" js /div /div /div /div效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。