很棒的Bootstrap选项卡切换效果

时间：2021-05-18

今天学习了Bootstrap的选项卡，在这里分享一下，具体解释代码中都有，不再重复了。
先看一下效果图吧，显目一些！


实现代码：

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Bootstrap选项卡</title> <!-- 引入Bootstrap的样式表 --> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css"></head><body><h1 class="btn btn-success btn-large"><i class="icon-user icon-white"></i>Hello world!</h1><!-- nav 清除li的默认样式 --><!-- nav-tabs 定义选项卡的标题栏 --><!-- tab-content 定义了选项卡的内容栏 --><!-- 在内容栏中，每个子框都必须包含tab-pane类 --><!-- a标签中的href必须要和内容栏中的子框的id对应 --><!-- active表示活动中的标题栏和内容子框，且每个标签栏都必须对于一个data-toggle='tab' --><ul class="nav nav-tabs"> <li><a href="#tab1" data-toggle="tab">li1</a></li> <li><a href="#tab2" data-toggle="tab">li2</a></li> <li class="active"><a href="#tab3" data-toggle="tab">li3</a></li> <li><a href="#tab4" data-toggle="tab">li4</a></li></ul><div class="tab-content"> <div class="tab-pane" id="tab1"><img src="img/1.png"></div> <div class="tab-pane" id="tab2"><img src="img/2.png"></div> <div class="active tab-pane" id="tab3"><img src="img/3.png"></div> <div class="tab-pane" id="tab4"><img src="img/4.png"></div></div><!-- 引入Bootstrap的js文件 --><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><script type="text/javascript" src="js/bootstrap-tab.js"></script></body></html>

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章