编程 Javascript

Bootstrap选项卡学习笔记分享

Posted in Javascript onFebruary 13, 2017

本文实例为大家分享了Bootstrap选项卡的学习笔记，供大家参考，具体内容如下

tab选项卡

Bootstrap选项卡学习笔记分享

<body>
  <div class="container">
    <!-- tab选项卡 -->
    <ul class="nav nav-tabs">
      <li class="active"><a href="#pan1" data-toggle="tab">发现</a></li>
      <li><a href="#pan2" data-toggle="tab">搜索</a></li>
      <li><a href="#pan3" data-toggle="tab">工具</a></li>
    </ul>
    <!-- 面板 -->
    <div class="tab-content">
      <div class="tab-pane active" id="pan1">发现面板内容发现面板内容</div>
      <div class="tab-pane fade in" id="pan2">搜索面板内容搜索面板内容</div>
      <div class="tab-pane fade" id="pan3">工具面板内容工具面板内容</div>
    </div>
  </div>

  <script src="lib/jquery/jquery.js"></script>
  <script src="lib/bootstrap/js/bootstrap.js"></script>
  <script src="js/main.js"></script>
</body>

胶囊选项卡

Bootstrap选项卡学习笔记分享

<body>
  <div class="container">
    <!-- 胶囊选项卡 -->
    <ul class="nav nav-pills">
      <li class="active"><a href="#pan1" data-toggle="pill">发现</a></li>
      <li><a href="#pan2" data-toggle="pill">搜索</a></li>
      <li><a href="#pan3" data-toggle="pill">工具</a></li>
    </ul>
    <!-- 面板 -->
    <div class="tab-content">
      <div class="tab-pane active" id="pan1">发现面板内容发现面板内容</div>
      <div class="tab-pane" id="pan2">搜索面板内容搜索面板内容</div>
      <div class="tab-pane" id="pan3">工具面板内容工具面板内容</div>
    </div>
  </div>

  <script src="lib/jquery/jquery.js"></script>
  <script src="lib/bootstrap/js/bootstrap.js"></script>
  <script src="js/main.js"></script>
</body>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap选项卡学习笔记分享

- Author -

erdouzhang

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

Javascript 相关文章推荐

可自己添加html的伪弹出框实现代码

Sep 08 Javascript

jquery模拟LCD 时钟的html文件源代码

Jun 16 Javascript

深入理解JavaScript系列（39）：设计模式之适配器模式详解

Mar 04 Javascript

详解JavaScript中的异常处理方法

Jun 16 Javascript

JS+CSS实现的经典圆角下拉菜单效果代码

Oct 21 Javascript

Web打印解决方案之普通报表打印功能

Aug 29 Javascript

ASP.NET jquery ajax传递参数的实例

Nov 02 Javascript

ES5 ES6中Array对象去除重复项的方法总结

Apr 27 Javascript

CheckBox多选取值及判断CheckBox选中是否为空的实例

Oct 31 Javascript

js根据json数据中的某一个属性来给数据分组的方法

Oct 08 Javascript

详解js加减乘除精确计算

Mar 19 Javascript

小程序实现自定义导航栏适配完美版

Apr 02 Javascript

jQuery Ajax全解析

Feb 13 #Javascript

jQuery中 bind的用法简单介绍

Feb 13 #Javascript

jquery实现轮播图效果

Feb 13 #Javascript

JS中解决谷歌浏览器记住密码输入框颜色改变功能

Feb 13 #Javascript

利用Javascript实现简单的转盘抽奖

Feb 13 #Javascript

简单实现js倒计时功能

Feb 13 #Javascript

基于node.js依赖express解析post请求四种数据格式

Feb 13 #Javascript

You might like

基于mysql的bbs设计（五）

2006/10/09 PHP

smarty内置函数config_load用法实例

2015/01/22 PHP

php如何获取文件的扩展名

2015/10/28 PHP

用PHP写的一个冒泡排序法的函数简单实例

2016/05/26 PHP

中高级PHP程序员应该掌握哪些技术?

2016/09/23 PHP

PHP文件后缀不强制为.php方法

2019/03/31 PHP

js控制表单不能输入空格的小例子

2013/11/20 Javascript

JQuery动态添加和删除表格行的方法

2015/03/09 Javascript

javascript实现控制浏览器全屏

2015/03/30 Javascript

纯js实现仿QQ邮箱弹出确认框

2015/04/29 Javascript

javascript实现仿IE顶部的可关闭警告条

2015/05/05 Javascript

JQuery+CSS实现图片上放置按钮的方法

2015/05/29 Javascript

jQuery中each()、find()和filter()等节点操作方法详解(推荐)

2016/05/25 Javascript

jQuery向父辈遍历的简单方法

2016/09/18 Javascript

微信小程序实战之上拉（分页加载）效果（2）

2017/04/17 Javascript

angularjs实现搜索的关键字在正文中高亮出来

2017/06/13 Javascript

实现图片首尾平滑轮播(JS原生方法—节流)

2017/10/17 Javascript

JS使用tofixed与round处理数据四舍五入的区别

2017/10/25 Javascript

vue项目中跳转到外部链接的实例讲解

2018/09/20 Javascript

JavaScript实现简单轮播图效果

2018/12/01 Javascript

详解VScode编辑器vue环境搭建所遇问题解决方案

2019/04/26 Javascript

[02:14]DOTA2英雄基础教程修补匠

2013/12/23 DOTA

Python命令行参数解析模块getopt使用实例

2015/04/13 Python

Python中方法链的使用方法

2016/02/23 Python

python用模块zlib压缩与解压字符串和文件的方法

2016/12/16 Python

python flask安装和命令详解

2019/04/02 Python

8种用Python实现线性回归的方法对比详解

2019/07/10 Python

python3下pygame如何实现显示中文

2020/01/11 Python

Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)

2020/03/10 Python

CSS3 滤镜 webkit-filter详细介绍及使用方法

2012/12/27 HTML / CSS

自我评价格式

2014/01/06 职场文书

大学拉赞助协议书范文

2014/09/26 职场文书

Python实战之实现康威生命游戏

2021/04/26 Python

python 实现图与图之间的间距调整subplots_adjust

2021/05/21 Python

MySQL数据库之内置函数和自定义函数 function

2022/06/16 MySQL

MySQL数据库实验之触发器和存储过程

2022/06/21 MySQL