Bootstrap选项卡学习笔记分享
更新时间:2017年02月13日 14:25:57 作者:erdouzhang
这篇文章主要为大家详细介绍了Bootstrap选项卡学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Bootstrap选项卡的学习笔记,供大家参考,具体内容如下
tab选项卡
<body> <div class="container"> <!-- tab选项卡 --> <ul class="nav nav-tabs"> <li class="active"><a href="#pan1" data-toggle="tab">发现</a></li> <li><a href="#pan2" data-toggle="tab">搜索</a></li> <li><a href="#pan3" data-toggle="tab">工具</a></li> </ul> <!-- 面板 --> <div class="tab-content"> <div class="tab-pane active" id="pan1">发现面板内容发现面板内容</div> <div class="tab-pane fade in" id="pan2">搜索面板内容搜索面板内容</div> <div class="tab-pane fade" id="pan3">工具面板内容工具面板内容</div> </div> </div> <script src="lib/jquery/jquery.js"></script> <script src="lib/bootstrap/js/bootstrap.js"></script> <script src="js/main.js"></script> </body>
胶囊选项卡
<body> <div class="container"> <!-- 胶囊选项卡 --> <ul class="nav nav-pills"> <li class="active"><a href="#pan1" data-toggle="pill">发现</a></li> <li><a href="#pan2" data-toggle="pill">搜索</a></li> <li><a href="#pan3" data-toggle="pill">工具</a></li> </ul> <!-- 面板 --> <div class="tab-content"> <div class="tab-pane active" id="pan1">发现面板内容发现面板内容</div> <div class="tab-pane" id="pan2">搜索面板内容搜索面板内容</div> <div class="tab-pane" id="pan3">工具面板内容工具面板内容</div> </div> </div> <script src="lib/jquery/jquery.js"></script> <script src="lib/bootstrap/js/bootstrap.js"></script> <script src="js/main.js"></script> </body>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
JavaScript正则表达式替换字符串中图片地址(img src)的方法
这篇文章主要介绍了JavaScript正则表达式替换字符串中图片地址(img src)的方法,结合实例形式分析了JS正则替换的常用技巧与注意事项,需要的朋友可以参考下2017-01-01Javascript promise.all的用法介绍(简洁易懂)
这篇文章主要给大家介绍了关于Javascript promise.all用法的相关资料,Promise.all()方法是一个Promise对象方法,可以将多个Promise实例包装成一个新的Promise对象,最终返回一个数组,需要的朋友可以参考下2023-07-07script标签中的async和defer详细说明与使用场景
这篇文章主要介绍了script标签中的async和defer详细说明与使用场景,需要的朋友可以参考下2023-02-02
最新评论