快捷導(dǎo)航

Bootstrap選項卡學(xué)習(xí)筆記分享

更新時間：2017年02月13日 14:25:57 作者：erdouzhang

這篇文章主要為大家詳細介紹了Bootstrap選項卡學(xué)習(xí)筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Bootstrap選項卡的學(xué)習(xí)筆記，供大家參考，具體內(nèi)容如下

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)面板內(nèi)容發(fā)現(xiàn)面板內(nèi)容</div>
      <div class="tab-pane fade in" id="pan2">搜索面板內(nèi)容搜索面板內(nèi)容</div>
      <div class="tab-pane fade" id="pan3">工具面板內(nèi)容工具面板內(nèi)容</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)面板內(nèi)容發(fā)現(xiàn)面板內(nèi)容</div>
      <div class="tab-pane" id="pan2">搜索面板內(nèi)容搜索面板內(nèi)容</div>
      <div class="tab-pane" id="pan3">工具面板內(nèi)容工具面板內(nèi)容</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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解如何在TypeScript中聲明全局變量
本文主要介紹了如何在 TypeScript 中聲明全局變量,在TypeScript中,可以使用declare關(guān)鍵字來聲明全局變量,這樣的聲明告訴編譯器該變量是在其他地方定義的,而不需要實際的實現(xiàn),文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下
2023-08-08
TypeScript判斷兩個數(shù)組的內(nèi)容是否相等的實現(xiàn)
本文主要介紹了TypeScript?判斷兩個數(shù)組的內(nèi)容是否相等，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-11-11
javascript實現(xiàn)拍照功能詳細示例代碼
這篇文章主要給大家介紹了關(guān)于javascript實現(xiàn)拍照功能的相關(guān)資料, 最近做項目,遇到一個正常但又少見的需求之拍照,文中給出了詳細的代碼示例,需要的朋友可以參考下
2023-07-07
深入理解JavaScript定時機制
JavaScript的setTimeout與setInterval是兩個很容易欺騙別人感情的方法,因為我們開始常常以為調(diào)用了就會按既定的方式執(zhí)行, 我想不少人都深有同感
2010-10-10
小程序?qū)崿F(xiàn)搜索框
搜索框無論是在電商網(wǎng)站還是小程序中都很常見，這篇文章主要就為大家詳細介紹了小程序如何實現(xiàn)搜索框，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
bootstrap表單按回車會自動刷新頁面的解決辦法
這篇文章主要介紹了bootstrap表單按回車會自動刷新頁面的問題及解決辦法，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-03-03
微信小程序?qū)崿F(xiàn)簡單聊天室
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)簡單聊天室，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-07-07
JS 退出系統(tǒng)并跳轉(zhuǎn)到登錄界面的實現(xiàn)代碼
這篇文章介紹了退出系統(tǒng)后跳轉(zhuǎn)到登陸頁面的簡單JS代碼，有需要的朋友可以參考一下
2013-06-06
使用flutter創(chuàng)建可移動的stack小部件功能
本文主要介紹我為桌面和 Web 設(shè)計的一個超級秘密 Flutter 項目使用了畫布和可拖動節(jié)點界面。本教程將展示我如何使用堆棧來使用小部件完成可拖動功能,需要的朋友可以參考下
2021-10-10
bootstrap使用validate實現(xiàn)簡單校驗功能
這篇文章主要為大家詳細介紹了bootstrap使用validate實現(xiàn)簡單校驗功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12