编程 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 相关文章推荐

原生Js实现按的数据源均分时间点幻灯片效果(已封装)

Dec 28 Javascript

javascript实现跳转菜单的具体方法

Jul 05 Javascript

jquery cookie实现的简单换肤功能适合小网站

Aug 25 Javascript

javascript实现瀑布流加载图片原理

Feb 02 Javascript

js制作网站首页图片轮播特效代码

Aug 30 Javascript

ajax级联菜单实现方法实例分析

Nov 28 Javascript

input输入密码变黑点密文的实现方法

Jan 09 Javascript

jquery mobile实现可折叠的导航按钮

Mar 11 Javascript

element 结合vue 在表单验证时有值却提示错误的解决办法

Jan 22 Javascript

手把手教你用Node.js爬虫爬取网站数据的方法

Jul 05 Javascript

微信小程序人脸识别功能代码实例

May 07 Javascript

ES6的异步操作之promise用法和async函数的具体使用

Dec 06 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

fleaphp rolesNameField bug解决方法

2011/04/23 PHP

分析PHP中单双引号的误区和双引号小隐患

2016/07/19 PHP

PHP实现数组的笛卡尔积运算示例

2017/12/15 PHP

从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解

2019/04/03 PHP

一款Jquery 分页插件的改造方法（服务器端分页）

2011/07/11 Javascript

js通过googleAIP翻译PHP系统的语言配置的实现代码

2011/10/17 Javascript

可在线编辑网页文字效果代码(单击)

2013/03/02 Javascript

基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果分享

2013/06/24 Javascript

js图片处理示例代码

2014/05/12 Javascript

js中style.display=""无效的解决方法

2014/10/30 Javascript

jquery.mobile 共同布局遇到的问题小结

2015/02/10 Javascript

angularjs自定义ng-model标签的属性

2016/01/21 Javascript

javascript html5移动端轻松实现文件上传

2020/03/27 Javascript

javascript RegExp 使用说明

2016/05/21 Javascript

微信小程序模板（template）使用详解

2018/01/31 Javascript

用JS实现根据当前时间随机生成流水号或者订单号

2018/05/31 Javascript

解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题

2019/04/10 jQuery

[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09

2020/12/12 DOTA

编写Python脚本把sqlAlchemy对象转换成dict的教程

2015/05/29 Python

在Django的视图(View)外使用Session的方法

2015/07/23 Python

django框架如何集成celery进行开发

2017/05/24 Python

Python实现的堆排序算法示例

2018/04/29 Python

Python 保存加载mat格式文件的示例代码

2020/08/04 Python

Python实现淘宝秒杀功能的示例代码

2021/01/19 Python

用css3制作纸张效果(外翻卷角)

2013/02/01 HTML / CSS

印度排名第一的蛋糕、鲜花和礼品送货：Winni

2019/08/02 全球购物

图库照片、免版税图片、矢量艺术、视频片段：Depositphotos

2019/08/02 全球购物

自我评价正确写法范文

2013/12/10 职场文书

服装电子商务创业计划书

2014/01/30 职场文书

数学系毕业生求职信

2014/05/29 职场文书

演讲稿开场白台词

2014/08/25 职场文书

要账委托书范本

2014/09/15 职场文书

庆祝国庆节演讲稿2014

2014/09/19 职场文书

离婚起诉书范文2015

2015/05/19 职场文书

2015秋季开学典礼新闻稿

2015/07/17 职场文书

go语言中http超时引发的事故解决

2021/06/02 Golang