bootstrap --- 標簽頁切換

很多時候,我們希望寫一個簡單的標簽頁.以下使用bootstrap來實現…

首先導入bootstrap的依賴:jquery的依賴、bootstrap的依賴
注意: jquery的依賴要在bootstrap依賴的前面導入,原因是:bootstrap的某些功能是在jquery的基礎上實現的

在 https://www.bootcdn.cn/jquery/ 導入jquery的CDN

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

在 https://v3.bootcss.com/getting-started/ 導入bootstrap的依賴

https://v3.bootcss.com/getting-started/

依賴導入完成后,還需要了解幾個bootsrap中封裝好的概念:
nav nav-tabs: 這個是bootstrap中封裝好的導航欄類,用于切換
data-toggle=“tab”: 指明是tab類

<ul class="nav nav-tabs"><li class="active"><a href="#home" data-toggle="tab">首頁</a></li><li><a href="#profile" data-toggle="tab">最新</a></li><li><a href="#message" data-toggle="tab">熱門</a></li><li><a href="#settings" data-toggle="tab">排行</a></li></ul>

導航欄的頭部做好了,下面做顯示部分.注意href中#對應的是id

<div class="tab-content"><div class="tab-pane active" id="home"><p> 我是首頁</p></div><div class="tab-pane" id="profile"><p> 我是最新 </p></div><div class="tab-pane" id="message"><p>我是熱門</p></div><div class="tab-pane" id="settings"><p>我是排行</p></div>
</div>

附上完整的代碼:

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body style="padding:5px;"><ul class="nav nav-tabs"><li class="active"><a href="#home" data-toggle="tab">首頁</a></li><li><a href="#profile" data-toggle="tab">最新</a></li><li><a href="#message" data-toggle="tab">熱門</a></li><li><a href="#settings" data-toggle="tab">排行</a></li></ul><div class="tab-content"><div class="tab-pane active" id="home"><p> 我是首頁</p></div><div class="tab-pane" id="profile"><p> 我是最新 </p></div><div class="tab-pane" id="message"><p>我是熱門</p></div><div class="tab-pane" id="settings"><p>我是排行</p></div></div></body>
</html>

參考《CSS高效開發實戰》 P182