脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap选项卡

Bootstrap选项卡学习笔记分享

 更新时间：2017年02月13日 14:25:57   作者：erdouzhang  
这篇文章主要为大家详细介绍了Bootstrap选项卡学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Bootstrap选项卡的学习笔记，供大家参考，具体内容如下

tab选项卡

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

胶囊选项卡

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 详解如何在TypeScript中声明全局变量

    详解如何在TypeScript中声明全局变量

    本文主要介绍了如何在 TypeScript 中声明全局变量,在TypeScript中,可以使用declare关键字来声明全局变量,这样的声明告诉编译器该变量是在其他地方定义的,而不需要实际的实现,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • TypeScript判断两个数组的内容是否相等的实现

    TypeScript判断两个数组的内容是否相等的实现

    本文主要介绍了TypeScript 判断两个数组的内容是否相等，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-11-11
  • javascript实现拍照功能详细示例代码

    javascript实现拍照功能详细示例代码

    这篇文章主要给大家介绍了关于javascript实现拍照功能的相关资料, 最近做项目,遇到一个正常但又少见的需求之拍照,文中给出了详细的代码示例,需要的朋友可以参考下
    2023-07-07
  • 深入理解JavaScript定时机制

    深入理解JavaScript定时机制

    JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感
    2010-10-10
  • 小程序实现搜索框

    小程序实现搜索框

    搜索框无论是在电商网站还是小程序中都很常见，这篇文章主要就为大家详细介绍了小程序如何实现搜索框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • bootstrap表单按回车会自动刷新页面的解决办法

    bootstrap表单按回车会自动刷新页面的解决办法

    这篇文章主要介绍了bootstrap表单按回车会自动刷新页面的问题及解决办法，非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-03-03
  • 微信小程序实现简单聊天室

    微信小程序实现简单聊天室

    这篇文章主要为大家详细介绍了微信小程序实现简单聊天室，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07
  • JS 退出系统并跳转到登录界面的实现代码

    JS 退出系统并跳转到登录界面的实现代码

    这篇文章介绍了退出系统后跳转到登陆页面的简单JS代码，有需要的朋友可以参考一下
    2013-06-06
  • 使用flutter创建可移动的stack小部件功能

    使用flutter创建可移动的stack小部件功能

    本文主要介绍我为桌面和 Web 设计的一个超级秘密 Flutter 项目使用了画布和可拖动节点界面。本教程将展示我如何使用堆栈来使用小部件完成可拖动功能,需要的朋友可以参考下
    2021-10-10
  • bootstrap使用validate实现简单校验功能

    bootstrap使用validate实现简单校验功能

    这篇文章主要为大家详细介绍了bootstrap使用validate实现简单校验功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论