首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
JavaScript异步操作中串行和并行
Nov 20 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
S400(1) 山进(2) PL990(2) ATS-909X(1) ICF-SW07(1) SANGEAN(1) S500(1) S700(1) H-501(1) Grundig(1)
You might like
php学习之function的用法
2012/07/14 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
javascript入门教程基础篇
2015/11/16 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
浅谈微信JS-SDK 微信分享接口开发（介绍版）
2018/08/15 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
python网络编程学习笔记(二)：socket建立网络客户端
2014/06/09 Python
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
Python自动连接ssh的方法
2015/03/07 Python
Python tkinter事件高级用法实例
2018/01/31 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用，基于对象的跨表查询】
2019/12/12 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
Python字典实现伪切片功能
2020/10/28 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
Kate Spade澳大利亚官方网站：美国设计师手袋品牌
2019/09/10 全球购物
出纳员岗位责任制
2014/02/11 职场文书
高中军训感言1000字
2014/03/01 职场文书
初中英语课后反思
2014/04/25 职场文书
群众路线领导对照材料
2014/08/23 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书