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使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
自己做的模拟模态对话框实现代码
May 23 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
基本DOM节点操作
Jan 17 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 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
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
Javascript算符的优先级介绍
2013/03/20 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
python先序遍历二叉树问题
2017/11/10 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
浅析Django中关于session的使用
2019/12/30 Python
python如何爬取网页中的文字
2020/07/28 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
大学生求职简历的自我评价
2013/10/14 职场文书
中学生自我评价范文
2014/02/08 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
医生见习报告范文
2014/11/03 职场文书
财务总监岗位职责
2015/02/03 职场文书
员工辞职信怎么写
2015/02/27 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
公司借款担保书
2015/09/22 职场文书
vue实现滑动解锁功能
2022/03/03 Vue.js
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
mysql sock 文件解析及作用讲解
2022/07/15 MySQL