编程 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 相关文章推荐

浅谈JavaScript编程语言的编码规范

Oct 21 Javascript

两种方法实现文本框输入内容提示消失

Mar 17 Javascript

jquery xMarquee实现文字水平无缝滚动效果

Apr 29 Javascript

jQuery判断当前点击的是第几个li的代码

Sep 26 Javascript

JavaScript实现的一个日期格式化函数分享

Dec 06 Javascript

理解AngularJs指令

Dec 10 Javascript

微信小程序动态的加载数据实例代码

Apr 14 Javascript

JavaScript比较同一天的时间大小实例代码

Feb 09 Javascript

jQuery幻灯片插件owlcarousel参数说明中文文档

Feb 27 jQuery

webpack优化的深入理解

Dec 10 Javascript

Javascript操作select控件代码实例

Feb 14 Javascript

vue 单页应用和多页应用的优劣

Oct 22 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