快捷導(dǎo)航

Bootstrap實(shí)現(xiàn)的標(biāo)簽頁(yè)內(nèi)容切換顯示效果示例

更新時(shí)間：2017年05月25日 10:50:13 作者：騎小豬追火車

這篇文章主要介紹了Bootstrap實(shí)現(xiàn)的標(biāo)簽頁(yè)內(nèi)容切換顯示效果,結(jié)合完整實(shí)例形式分析了基于Bootstrap實(shí)現(xiàn)的標(biāo)簽頁(yè)內(nèi)容切換顯示功能相關(guān)操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了Bootstrap實(shí)現(xiàn)的標(biāo)簽頁(yè)內(nèi)容切換顯示效果。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Bootstrap 實(shí)例 - 標(biāo)簽頁(yè)（Tab）插件</title>
  <link  rel="external nofollow" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
  <li class="active col-md-4"><a href="#dingcan" rel="external nofollow" data-toggle="tab">訂餐</a></li>
  <li class="col-md-4"><a href="#yonghu" rel="external nofollow" data-toggle="tab">用戶中心</a></li>
  <li class="col-md-4"><a href="#dingdan" rel="external nofollow" data-toggle="tab">訂單中心</a></li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade in active" id="dingcan">
   <p>訂餐</p>
  </div>
  <div class="tab-pane fade" id="yonghu">
   <p>用戶中心</p>
  </div>
  <div class="tab-pane fade" id="dingdan">
   <p>訂單中心</p>
  </div>
</div>
</body>
</html>

PS：關(guān)于bootstrap布局，這里再為大家推薦一款本站的在線可視化布局工具供大家參考使用：

在線bootstrap可視化布局編輯工具：
http://tools.jb51.net/aideddesign/layoutit

希望本文所述對(duì)大家基于bootstrap的程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js數(shù)組循環(huán)遍歷數(shù)組內(nèi)所有元素的方法
在js中數(shù)組遍歷最簡(jiǎn)單的辦法就是使用for然后再利用arr.length長(zhǎng)度作為for最大限度值即可解決了，下面我們來(lái)看看一些有用的實(shí)例
2014-01-01
一文教你用純JS實(shí)現(xiàn)一個(gè)五子棋游戲
實(shí)現(xiàn)一個(gè)五子棋游戲, 簡(jiǎn)要分析其原理, 頁(yè)面并沒(méi)有很花哨, 原理搞懂了, 后面的就是很輕松的事了,本文給大家介紹了如何用純JS實(shí)現(xiàn)一個(gè)五子棋游戲,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下
2023-12-12
JavaScript限定范圍拖拽及自定義滾動(dòng)條應(yīng)用（3）
這篇文章主要介紹了JavaScript限定范圍拖拽及自定義滾動(dòng)條應(yīng)用的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
js注入黑客之路必備！
這篇文章主要為大家詳細(xì)介紹了js注入，黑客之路必備！本文告訴大家什么是js注入，如何進(jìn)行js注入攻防，感興趣的小伙伴們可以參考一下
2016-09-09
layui使用label標(biāo)簽的方法
今天小編就為大家分享一篇layui使用label標(biāo)簽的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
深入解析Javascript閉包的功能及實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)解析Javascript閉包的功能及實(shí)現(xiàn)方法，感興趣的小伙伴們可以參考一下
2016-07-07
webpack文件打包錯(cuò)誤異常
這篇文章主要介紹了webpack文件打包錯(cuò)誤異常,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-07-07
webpack之基礎(chǔ)打包優(yōu)化的實(shí)現(xiàn)
本文主要介紹了webpack之基礎(chǔ)打包優(yōu)化的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下<BR>
2022-02-02
一文帶你了解小程序中的權(quán)限設(shè)計(jì)
我們?cè)谌粘Ｉ钪袩o(wú)論是坐公交還是點(diǎn)餐,都會(huì)接觸各種各樣的小程序,下面這篇文章主要給大家介紹了關(guān)于小程序中權(quán)限設(shè)計(jì)的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
JavaScript實(shí)現(xiàn)Fly Bird小游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)Fly Bird小游戲的制作方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12