bootsrap(4)

QiaoG_

已于 2022-04-12 15:49:28 修改

阅读量70

点赞数

文章标签： bootstrap 前端

于 2022-04-08 16:21:22 首次发布

本文链接：https://blog.csdn.net/QiaoG_/article/details/124044455

版权

代码

<!doctype html>

<!-- Bootstrap 的 CSS 文件 -->
<link href="./css/bootstrap.min.css"  rel="stylesheet">

<title>首页</title>

		    </div>
		    <div class="carousel-inner">
		      <div class="carousel-item active" data-bs-interval="10000">
		        <img src="img/网络安全3.png" class="d-block w-100" alt="...">
		        <div class="carousel-caption d-none d-md-block">
		          <h5>网络安全</h5>
		          <p>Some representative placeholder content for the first slide.</p>
		        </div>
		      </div>
		      <div class="carousel-item" data-bs-interval="2000">
		        <img src="img/森林防火.jpg" class="d-block w-100" alt="...">
		        <div class="carousel-caption d-none d-md-block">
		          <h5>Second slide label</h5>
		          <p>Some representative placeholder content for the second slide.</p>
		        </div>
		      </div>
		      <div class="carousel-item">
		        <img src="img/地震1.jpg" class="d-block w-100" alt="...">
		        <div class="carousel-caption d-none d-md-block">
		          <h5>Third slide label</h5>
		          <p>Some representative placeholder content for the third slide.</p>
		        </div>
		      </div>
			  <div class="carousel-item">
			    <img src="img/火灾2.jpg" class="d-block w-100" alt="...">
			    <div class="carousel-caption d-none d-md-block">
			      <h5>Third slide label</h5>
			      <p>Some representative placeholder content for the third slide.</p>
			    </div>
			  </div>
		    </div>
			<div class="carousel-item">
			    <img src="img/火灾2.jpg" class="d-block w-100" alt="...">
			    <div class="carousel-caption d-none d-md-block">
			      <h5>Third slide label</h5>
			      <p>Some representative placeholder content for the third slide.</p>
			    </div>
			  </div>
			</div>
		    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" 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="#carouselExampleDark" data-bs-slide="next">
		      <span class="carousel-control-next-icon" aria-hidden="true"></span>
		      <span class="visually-hidden">Next</span>
		    </button>
		  </div>
		   
	  </div>
	  
	  
	  
	  
  </div>

<!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

<!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->

<!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.2/dist/umd/popper.min.js" integrity="sha384-q9CRHqZndzlxGLOj+xrdLDJa9ittGte1NksRmgJKeCV9DrM7Kz868XYqsKWPpAmn" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-YSu1vEueMOXZYSSiTgjRD6egOBAdWrKI6AQBdHjTtvftX42GZLCVzwlxm0RJuipa" crossorigin="anonymous"></script>
-->