31
2019
12

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类

20190409092848895.png

<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中#对应的是id20190409093247611.png

<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

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。