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">發(fā)現(xiàn)</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">發(fā)現(xiàn)面板內容發(fā)現(xiàn)面板內容</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">發(fā)現(xiàn)</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">發(fā)現(xiàn)面板內容發(fā)現(xiàn)面板內容</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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js禁止表單重復提交
這篇文章主要介紹了js禁止表單重復提交的方法，避免重復記錄帶來的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
微信小程序仿RadioGroup改變樣式的處理方案
本文給大家分享一段簡單的代碼來實現(xiàn)微信小程序仿RadioGroup改變樣式的方法，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
2018-07-07
使用js實現(xiàn)數(shù)據(jù)格式化
這篇文章主要介紹了使用javascript實現(xiàn)數(shù)據(jù)格式化為字符串，非常的實用，這里推薦給有相同需求的小伙伴。
2014-12-12
前端精度丟失問題解決之后端Long類型到前端的處理策略
這篇文章主要介紹了前端精度丟失問題解決之后端Long類型到前端的處理策略,在Web開發(fā)中前后端數(shù)據(jù)類型不匹配尤其是Long類型數(shù)據(jù)到前端可能導致精度丟失,文章探討了此問題并提供三種解決方法,需要的朋友可以參考下
2024-09-09
詳解小程序緩存插件(mrc)
這篇文章主要介紹了詳解小程序緩存插件(mrc)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
原生js封裝的一些jquery方法(詳解)
下面小編就為大家?guī)硪黄鷍s封裝的一些jquery方法(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09
javascript 文章截取部分無損html顯示實現(xiàn)代碼
近在做一些內容搜索的工作，搜索出來的內容為html格式，列表部分需要顯示每項內容的一部分。
2010-05-05
js微信分享API
這篇文章主要為大家詳細介紹了js微信分享實現(xiàn)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-07-07
深入理解JavaScript Promise鏈式調用與錯誤處理機制
在JavaScript的異步編程中,Promise是一個非常重要的概念,它允許我們以鏈式的方式處理異步操作,使得代碼更加清晰和易于管理,本文將通過一系列代碼示例,深入探討Promise的鏈式調用和錯誤處理機制,需要的朋友可以參考下
2024-09-09
JavaScript實現(xiàn)原型封裝輪播圖
這篇文章主要為大家詳細介紹了JavaScript原型封裝輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12