很棒的Bootstrap选项卡切换效果

今天学习了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插件使用教程

以上是 很棒的Bootstrap选项卡切换效果 的全部内容, 来源链接: utcz.com/z/320396.html

回到顶部