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>

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

# Bootstrap # 选项卡 # 全面解析Bootstrap中tab（选项卡）的使用方法 # BootStrap tab选项卡使用小结 # bootstrap选项卡使用方法解析 # bootstrap实现tab选项卡切换 # 简单实现bootstrap选项卡效果 # bootstrap导航、选项卡实现代码 # bootstrap选项卡扩展功能详解 # Bootstrap选项卡与Masonry插件的完美结合 # 浅谈bootstrap源码分析之tab(选项卡) # BootstrapVue选项卡标题增加关闭按钮的方法 # 大家分享 # 具体内容 # 大家多多 # 学习笔记 # xhtml # brush # pre # class # lt # div # container # body # gt # center # pill # pills # tabs # strong

返回目录在线咨询

上一篇：用xampp怎么打开php文件_XAMPP打开php文件步骤【详解】
下一篇：网站制作配图软件,如何生成图片网址？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

Bootstrap选项卡学习笔记分享

您的项目需求