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>

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

Javascript 相关文章推荐
一些相见恨晚的 JavaScript 技巧
Apr 25 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
微信小程序url与token设置详解
Sep 26 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 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
德生1994机评
2021/03/02 无线电
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
python调用其他文件函数或类的示例
2019/07/16 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
python实现五子棋程序
2020/04/24 Python
python如何进行矩阵运算
2020/06/05 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
C# Debug和Testing相关面试题
2015/10/25 面试题
中英双版中文教师求职信
2013/10/27 职场文书
毕业生自荐信的主要内容
2013/10/29 职场文书
教育局长自荐信范文
2013/12/22 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
Nginx报404错误的详细解决方法
2022/07/23 Servers