主页 / 网络编程 /

很棒的Bootstrap选项卡切换效果

网络编程 2021-07-04 19:59www.168986.cn编程入门
这篇文章主要为大家分享了一款很棒的Bootstrap选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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


实现代码

<!DOCTYPE html>
<html lang="zh-">
<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-suess 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个精彩的专题

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

上一篇：精彩的Bootstrap案例分享 重点在注释!(选项卡、栅 下一篇：AngularJS优雅的自定义指令

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by