编程 Javascript

很棒的Bootstrap选项卡切换效果

Posted in Javascript onJuly 01, 2016

今天学习了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选项卡切换效果

- Author -

super_yang_android

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery 1.4 15个你应该知道的新特性(译)

Jan 24 Javascript

JavaScript判断表单提交时哪个radio按钮被选中的方法

Mar 21 Javascript

javascript函数特点实例分析

May 14 Javascript

jQuery中设置form表单中action值的实现方法

May 25 Javascript

AngularJS ng-style中使用filter

Sep 21 Javascript

AngularJS入门教程之Helloworld示例

Dec 25 Javascript

json2.js 入门教程之使用方法与实例分析

Sep 14 Javascript

在Vue中用canvas实现二维码和图片合成海报的方法

Jun 10 Javascript

小程序实现分类页

Jul 12 Javascript

layui写后台表格思路和赋值用法详解

Nov 14 Javascript

vue实现户籍管理系统

May 29 Javascript

详解vue组件之间的通信

Aug 30 Javascript

AngularJS优雅的自定义指令

Jul 01 #Javascript

如何解决手机浏览器页面点击不跳转浏览器双击放大网页

Jul 01 #Javascript

再谈Javascript中的基本类型和引用类型(推荐)

Jul 01 #Javascript

JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法

Jul 01 #Javascript

Bootstrap编写一个兼容主流浏览器的受众门户式风格页面

Jul 01 #Javascript

JS跨域交互(jQuery+php)之jsonp使用心得

Jul 01 #Javascript

Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面

Jul 01 #Javascript