使用bootstrap实现选项卡动态切换，要求如下。选项卡中包括首页，垃圾分类，关于作者; 9首页使用轮播图实现， 6点击垃圾分类，显示不垃圾分类的图片;关于作者，写上考生本人的“班级-学号-姓名”
时间: 2023-08-02 18:06:15 浏览: 31
以下是一个使用 Bootstrap 实现选项卡动态切换的示例代码，满足您的要求：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡动态切换示例</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">选项卡示例</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#home" data-toggle="tab">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#garbage" data-toggle="tab">垃圾分类</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#author" data-toggle="tab">关于作者</a>
</li>
</ul>
</div>
</nav>
<div class="tab-content">
<div class="tab-pane fade show active" id="home">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x400?text=Slide+1" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400?text=Slide+2" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400?text=Slide+3" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="tab-pane fade" id="garbage">
<img src="https://via.placeholder.com/800x400?text=Garbage" class="d-block w-100" alt="...">
</div>
<div class="tab-pane fade" id="author">
<p>班级：XXX</p>
<p>学号：XXX</p>
<p>姓名：XXX</p>
</div>
</div>
</body>
</html>
```
说明：
- 使用 Bootstrap 的导航菜单和选项卡组件实现选项卡效果。
- 首页使用了 Bootstrap 的轮播图组件，图片使用了 placeholder.com 提供的占位图。
- 垃圾分类选项卡中显示了一张图片。
- 关于作者选项卡中写上了考生本人的班级、学号和姓名，可以根据实际情况修改。
最新推荐
全面解析Bootstrap中tab（选项卡）的使用方法
主要为大家全面解析Bootstrap中tab（选项卡）的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap实现图片自动轮播
bootstrap图片自动轮播效果图： 代码实现： <!DOCTYPE html> <html lang="zh-CN"> <head> <link rel="stylesheet" href="bootstrap.min.css" /> <link rel="stylesheet" href=...
全面解析多种Bootstrap图片轮播效果
分享了三种Bootstrap图片轮播效果，相信总有一款你满意的！ 第一种效果：Bootstrap简单轮播 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title...
基于Bootstrap实现tab标签切换效果
本文实例为大家分享了Bootstrap实现tab标签切换效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link...
使用BootStrap建立响应式网页——通栏轮播图（carousel）
1、bootstrap提供了js插件——轮播图 我们还是照旧，直接拿过来用，需要改的地方再说。 2、修改 小屏幕看小图，大屏图看大图：这个可以利用自定义属性（data-XXX）data-img-lg（保存大图）和data-img-xs（保存小...
基于51单片机的usb键盘设计与实现(1).doc
基于51单片机的usb键盘设计与实现(1).doc
"海洋环境知识提取与表示：专用导航应用体系结构建模"
对海洋环境知识提取和表示的贡献引用此版本：迪厄多娜·察查。对海洋环境知识提取和表示的贡献：提出了一个专门用于导航应用的体系结构。建模和模拟。西布列塔尼大学-布雷斯特，2014年。法语。NNT：2014BRES0118。电话：02148222HAL ID：电话：02148222https://theses.hal.science/tel-02148222提交日期：2019年HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire论文/西布列塔尼大学由布列塔尼欧洲大学盖章要获得标题西布列塔尼大学博士（博士）专业：计算机科学海洋科学博士学院对海洋环境知识的提取和表示的贡献体系结构的建议专用于应用程序导航。提交人迪厄多内·察察在联合研究单位编制（EA编号3634）海军学院
react中antd组件库里有个 rangepicker 我需要默认显示的当前月1号到最后一号的数据 要求选择不同月的时候 开始时间为一号 结束时间为选定的那个月的最后一号
你可以使用 RangePicker 的 defaultValue 属性来设置默认值。具体来说，你可以使用 moment.js 库来获取当前月份和最后一天的日期，然后将它们设置为 RangePicker 的 defaultValue。当用户选择不同的月份时，你可以在 onChange 回调中获取用户选择的月份，然后使用 moment.js 计算出该月份的第一天和最后一天，更新 RangePicker 的 value 属性。
以下是示例代码：
```jsx
import { useState } from 'react';
import { DatePicker } from 'antd';
基于plc的楼宇恒压供水系统学位论文.doc
基于plc的楼宇恒压供水系统学位论文.doc
"用于对齐和识别的3D模型计算机视觉与模式识别"
表示用于对齐和识别的3D模型马蒂厄·奥布里引用此版本：马蒂厄·奥布里表示用于对齐和识别的3D模型计算机视觉与模式识别[cs.CV].巴黎高等师范学校，2015年。英语NNT：2015ENSU0006。电话：01160300v2HAL Id：tel-01160300https://theses.hal.science/tel-01160300v22018年4月11日提交HAL是一个多学科的开放获取档案馆，用于存放和传播科学研究文件，无论它们是否已这些文件可能来自法国或国外的教学和研究机构，或来自公共或私人研究中心。L’archive ouverte pluridisciplinaire博士之路博士之路博士之路在获得等级时，DOCTEURDE L'ÉCOLE NORMALE SUPERIEURE博士学校ED 386：巴黎中心数学科学Discipline ou spécialité：InformatiquePrésentée et soutenue par：马蒂厄·奥布里le8 may 2015滴度表示用于对齐和识别的Unité derechercheThèse dirigée par陪审团成员équipe WILLOW（CNRS/ENS/INRIA UMR 8548）慕尼黑工业大学（TU Munich�