bootstrap --- 标签页切换
生活随笔
收集整理的這篇文章主要介紹了
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類
導航欄的頭部做好了,下面做顯示部分.注意href中#對應的是id
附上完整的代碼:
<!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
總結
以上是生活随笔為你收集整理的bootstrap --- 标签页切换的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux命令行提示符居中,linux命
- 下一篇： js实现爬取QQ群管理页面所有QQ群成员