首页
所有分类
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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
js运动动画的八个知识点
Mar 12 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
深入理解Node module模块
Mar 26 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 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
OutputStream(1) 高动态范围(1) kafka(2) 曝光融合(1) Vue3(1) vuex(1) InputStream(1) axios(1) HDR(1) 连接器(1)
You might like
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
ThinkPHP缓存方法S()概述
2014/06/13 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
python线程锁(thread)学习示例
2013/12/04 Python
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
python中pika模块问题的深入探究
2018/10/13 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
python opencv如何实现图片绘制
2020/01/19 Python
python实现交并比IOU教程
2020/04/16 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
生产厂厂长岗位职责
2013/12/25 职场文书
消防安全宣传口号
2014/06/10 职场文书
市场营销专业自荐书
2014/06/10 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
2015年共青团工作总结
2015/05/15 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
PostgreSQL存储过程实用脚本(二)：创建函数入门
2021/04/05 PostgreSQL
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技