当前位置: 首页 > news >正文

Day39bootstrap--组件

image

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bootstrap--组件</title><link rel="stylesheet" href="./bootstrap.min.css"><style>.bg-body-tertiary{background-color: pink !important;}</style>
</head>
<body><!-- 导航 --><nav class="navbar navbar-expand-lg bg-body-tertiary"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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" aria-current="page" href="#">首页</a></li><li class="nav-item"><a class="nav-link" href="#">课程</a></li><li class="nav-item"><a class="nav-link" href="#">课程资料</a></li><li class="nav-item"><a class="nav-link" href="#">视频</a></li></ul></div></div>
</nav><!-- 轮播图 --><div id="carouselExampleIndicators" class="carousel slide"><div class="carousel-indicators"><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button></div><div class="carousel-inner"><div class="carousel-item active"><img src="./banner_1.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="./banner_2.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="./banner_3.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="./banner_4.jpg" class="d-block w-100" alt="..."></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button>
</div>
<script src="./bootstrap.min.js"></script>
</body>
</html> 

image

http://www.jsqmd.com/news/135505/

相关文章:

  • 详细介绍:初识MySQL 库的操作
  • Hive调优
  • 生产级微服务应用全攻略:从骨架到运维的完整体系
  • bat文件中,提权,以管理员运行
  • Redis分布式锁全攻略:原理、陷阱与Redisson最佳实践
  • 拒绝转圈圈!AI Ping 注入 Coze,带你瞬发体验限免版 GLM-4.7 与 MiniMax-M2.1
  • SQL INSERT INTO 语句详解
  • Bootstrap4 创建一个网页
  • 工程师必备!AI Ping 平台 GLM-4.7 与 MiniMax M2.1 国产大模型实用指南
  • 京东e卡回收平台哪个才靠谱? - 京顺回收
  • 一文吃透 Nginx Server:多域名、网关、负载均衡
  • 干货盘点|新电脑装机必备的 10 个 Windows 软件,不然用起来太难受!
  • Minio的Docker部署
  • Perl POD 文档
  • WinCC Unified V19 ES/RT 安装
  • WinCC Unified V19 ES/RT 安装
  • Windows系统文件raschap.dll丢失损坏问题 下载修复
  • Java计算机毕设之基于Java+springboot的科研室实验报告管理系统的设计与实现基于SpringBoot和Vue的实验报告管理系统的设计与实现(完整前后端代码+说明文档+LW,调试定制等)
  • 2026 年沃尔玛购物卡回收全攻略 - 京顺回收
  • 实用指南:群晖 NAS 变私人影院?Nastool+cpolar 让影音资源随心看
  • jEasyUI 窗口与布局
  • 279. 完全平方数
  • Java毕设选题推荐:基于Java的师生实验报告管理系统的设计与实现基于SpringBoot和Vue的实验报告管理系统的设计与实现【附源码、mysql、文档、调试+代码讲解+全bao等】
  • Java毕设项目:基于SpringBoot和Vue的实验报告管理系统的设计与实现(源码+文档,讲解、调试运行,定制等)
  • 市场快评 · 今日复盘要点20251224
  • Windows系统软件缺少rchtxchs.dll问题 免费下载修复方法
  • C# 获取属性自定义特性报错:System.NotSupportedException:“泛型类型无效。
  • 【课程设计/毕业设计】基于SpringBoot和Vue的实验报告管理系统的设计与实现基于springboot的实验报告管理系统的设计与实现【附源码、数据库、万字文档】
  • Hive - Metastore Tables
  • 开源工具包repomix提取代码框架信息