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 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
js电话号码验证方法
Sep 28 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
微信小程序如何再次获取用户授权的方法
May 10 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
构建一个JavaScript插件系统
Oct 20 Javascript
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
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
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php实现简单爬虫的开发
2016/03/28 PHP
PHP线程的内存回收问题
2016/07/08 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
JQueryDOM之样式操作
2019/03/27 jQuery
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
python调用shell的方法
2013/11/20 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
全民健身日活动方案
2014/01/29 职场文书
质量承诺书怎么写
2014/05/24 职场文书
储备店长岗位职责
2015/04/14 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
Python列表的索引与切片
2022/04/07 Python