小程序商城如何制作_bootstrap导航、选项卡完成代码

bootstrap导航、选项卡实现代码       这篇文章主要为大家详细介绍了bootstrap导航、选项卡的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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 

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关阅读