1.折叠组件
位置
步骤
1.引入文件
2.创建container容器
3.粘贴折叠组件代码
4.把标题和内容改成自己的文本,class名不能改
代码
<!-- 1.引入文件 -->
<link rel="stylesheet" href="./bootstrap-5.1.3-dist/css/bootstrap.css">
<script src="./bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
</head>
<body>
<!-- 2.创建container容器 -->
<div class="container">
<div class="accordion" id="accordionExample">
<!-- 3.粘贴折叠组件代码 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<!-- 4.把标题和内容改成自己的文本,class名不能改 -->
第一栏
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>内容</strong> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
第一栏
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>内容</strong> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
第三栏
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>内容</strong> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</div>
</div>
</div>
</div>
</body>
结果
2.轮拨图组件
可以自己根据想要实现的功能复制相应的代码
2.1.只有播放功能的轮拨图
<div class="container">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../3.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>