当前位置: 首页 > 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.gsyq.cn/news/148852.html

相关文章:

  • SQL INSERT INTO 语句详解
  • Hive调优
  • 拒绝转圈圈!AI Ping 注入 Coze,带你瞬发体验限免版 GLM-4.7 与 MiniMax-M2.1
  • Omdia发布《2025全球企业级MaaS市场分析》,火山引擎居全球第三
  • Bootstrap4 创建一个网页
  • 干货盘点|新电脑装机必备的 10 个 Windows 软件,不然用起来太难受!
  • WinCC Unified V19 ES/RT 安装
  • Perl POD 文档
  • DC-1 复现
  • 2026 年沃尔玛购物卡回收全攻略 - 京顺回收
  • 实用指南:群晖 NAS 变私人影院?Nastool+cpolar 让影音资源随心看
  • jEasyUI 窗口与布局
  • Java毕设选题推荐:基于Java的师生实验报告管理系统的设计与实现基于SpringBoot和Vue的实验报告管理系统的设计与实现【附源码、mysql、文档、调试+代码讲解+全bao等】
  • 【课程设计/毕业设计】基于SpringBoot和Vue的实验报告管理系统的设计与实现基于springboot的实验报告管理系统的设计与实现【附源码、数据库、万字文档】
  • 【ROS2】ROS2+Qt6+WebRTC程序依赖库
  • 开源工具包repomix提取代码框架信息
  • AI Ping最新上线了,现在来免费用!MiniMax-M2.1、GLM-4.7,手把手教学部署与运用
  • 反向海淘火了!它到底解决了海淘的哪些痛点?
  • 基于PLC的交通灯控制系统设计红绿灯控制博图组态仿真
  • pq|dfs|快排
  • NX ①添加GC工具箱 ②制图绘制中心线 ③制图倒斜角标注C ④更新重量
  • 前端 | 一篇搞懂CSS盒模型核心:padding、margin、border与box-sizing、border-radius
  • 基于springboot服装商店管理与分析系统(毕设源码+文档)
  • 基于SpringBoot高校迎新管理系统(毕设源码+文档)
  • 当AI Agent学会“打电话“——微软Agent Framework的A2A与AGUI协议深度解析
  • fanxiudlg
  • YOLOv8改进 - 注意力机制 | SEAM (Spatially Enhanced Attention Module) 空间增强注意力模块提升遮挡目标特征学习能力
  • 事后诸葛分析
  • 模具设计 | UG软件官方正式版下载与安装教程指南
  • python+vue网约车在线打车拼车管理系统