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

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

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

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

tab選項(xiàng)卡

<body>
  <div class="container">
    <!-- tab選項(xiàng)卡 -->
    <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>

膠囊選項(xiàng)卡

<body>
  <div class="container">
    <!-- 膠囊選項(xiàng)卡 -->
    <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>

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

您可能感興趣的文章:

相關(guān)文章

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