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

ejs v9 javascript模板系统

Mar 21 Javascript

密码强度检测效果实现原理与代码

Jan 04 Javascript

javascript如何操作HTML下拉列表标签

Aug 20 Javascript

纯JavaScript代码实现文本比较工具

Feb 17 Javascript

javascript self对象使用详解

Oct 18 Javascript

Bootstrap基本样式学习笔记之表格(2)

Dec 07 Javascript

jquery获取select,option所有的value和text的实例

Mar 06 Javascript

微信小程序实战之自定义抽屉菜单（7）

Apr 18 Javascript

js链表操作(实例讲解)

Aug 29 Javascript

JS实现简单获取最近7天和最近3天日期的方法

Apr 18 Javascript

Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)

Oct 28 Javascript

Angular短信模板校验代码

Sep 23 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

You might like

在PHP中利用wsdl创建标准webservice的实现代码

2011/12/07 PHP

php遍历目录输出目录及其下的所有文件示例

2014/01/27 PHP

PHP pear安装配置教程

2016/05/14 PHP

PHP最常用的正则表达式

2017/02/13 PHP

php使用curl模拟浏览器表单上传文件或者图片的方法

2018/11/10 PHP

一文掌握PHP Xdebug 本地与远程调试(小结)

2019/04/23 PHP

javascript之典型高阶函数应用介绍二

2013/01/10 Javascript

现代 JavaScript 开发编程风格Idiomatic.js指南中文版

2014/05/28 Javascript

asp.net中oracle 存储过程（图文）

2015/08/12 Javascript

JavaScript编程学习技巧汇总

2016/02/21 Javascript

Javascript的比较汇总

2016/07/25 Javascript

jquery对所有input type=text的控件赋值实现方法

2016/12/02 Javascript

jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题

2017/04/04 jQuery

详解angular用$sce服务来过滤HTML标签

2017/04/11 Javascript

Vuex之理解Store的用法

2017/04/19 Javascript

PWA介绍及快速上手搭建一个PWA应用的方法

2019/01/27 Javascript

vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法

2019/04/17 Javascript

react+redux仿微信聊天界面

2019/06/21 Javascript

Nodejs监听日志文件的变化的过程解析

2019/08/04 NodeJs

Vue数据绑定实例写法

2019/08/06 Javascript

如何基于javascript实现贪吃蛇游戏

2020/02/09 Javascript

Js图片点击切换轮播实现代码

2020/07/27 Javascript

[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2

2018/06/03 DOTA

windows上安装Anaconda和python的教程详解

2017/03/28 Python

用pandas中的DataFrame时选取行或列的方法

2018/07/11 Python

Python3.6使用tesseract-ocr的正确方法

2018/10/17 Python

浅谈Python编程中3个常用的数据结构和算法

2019/04/30 Python

详解HTML5 window.postMessage与跨域

2017/05/11 HTML / CSS

html5清空画布方法（三种）

2017/10/16 HTML / CSS

俄罗斯珠宝市场的领导者之一：Бронницкий ювелир

2019/10/02 全球购物

产品销售员岗位职责

2013/12/18 职场文书

刑事辩护授权委托书范本

2014/10/17 职场文书

优秀班集体事迹材料

2014/12/25 职场文书

爱牙日宣传活动总结

2015/02/05 职场文书

django注册用邮箱发送验证码的实现

2021/04/18 Python

python区块链持久化和命令行接口实现简版

2022/05/25 Python