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 验证上传图片大小[客户端]
Aug 01 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
浅谈Angular路由复用策略
Oct 04 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
php实现上传图片保存到数据库的方法
2015/02/11 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
Python正则表达式分组概念与用法详解
2017/06/24 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
理论讲解python多进程并发编程
2018/02/09 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
处理textarea中的换行和空格
2019/12/12 HTML / CSS
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
非常详细的C#面试题集
2016/07/13 面试题
QA工程师岗位职责
2013/11/20 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
创建文明城市标语
2014/06/16 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
法人代表证明书格式
2014/10/01 职场文书
2014年督导工作总结
2014/11/19 职场文书
婚宴来宾致辞
2015/07/28 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
Python 语言实现六大查找算法
2021/06/30 Python
HttpClient实现表单提交上传文件
2022/08/14 Java/Android