Bootstrap教程（1）轮播图

一、先准备材料

基础模板（就像搭积木前要有个底板）：

<!DOCTYPE html>
<html>
<head>
    <!-- 引入 Bootstrap 的样式文件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- 轮播图的积木块放在这里 -->
    
    <!-- 引入 Bootstrap 的 JS 文件（带所有功能） -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

（就像手机需要充电才能用，网页需要这两个文件才能让轮播图动起来）

二、搭轮播图的骨架

想象轮播图就是个能自动翻页的相册，我们分三步搭：

相册外壳（装所有东西的大框）：

<div id="myAlbum" class="carousel slide" data-bs-ride="carousel">
  <!-- 页码小圆点、照片、左右箭头都放这里 -->
</div>

id="myAlbum"：给这个相册起个名字，方便后面操作
data-bs-ride="carousel"：告诉浏览器自动翻页

页码小圆点（显示现在到第几页）：

<ol class="carousel-indicators">
  <li data-bs-target="#myAlbum" data-bs-slide-to="0" class="active"></li>
  <li data-bs-target="#myAlbum" data-bs-slide-to="1"></li>
  <li data-bs-target="#myAlbum" data-bs-slide-to="2"></li>
</ol>

（就像书签，第一个小圆点默认是亮着的）

照片区（每张照片占一页）：

<div class="carousel-inner">
  <!-- 第一张照片 -->
  <div class="carousel-item active">
    <img src="photo1.jpg" class="d-block w-100">
    <div class="carousel-caption">
      <h5>我家狗狗</h5>
      <p>这是它一岁生日拍的</p>
    </div>
  </div>
  
  <!-- 第二张照片 -->
  <div class="carousel-item">
    <img src="photo2.jpg" class="d-block w-100">
  </div>
</div>

active：表示默认显示这张
w-100：让照片撑满宽度

左右翻页箭头：

<button class="carousel-control-prev" data-bs-target="#myAlbum" data-bs-slide="prev">
  <span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" data-bs-target="#myAlbum" data-bs-slide="next">
  <span class="carousel-control-next-icon"></span>
</button>

（就像相册的左右翻页按钮）

三、调样式（让相册更好看）

/* 让相册高度占满屏幕的 60% */
#myAlbum {
  height: 60vh;
}

/* 让照片像手机壁纸一样自动填充 */
.carousel-item img {
  object-fit: cover;
  height: 100%;
}

/* 把页码小圆点调大点 */
.carousel-indicators [data-bs-slide-to] {
  width: 15px;
  height: 15px;
}

（就像给照片加滤镜，调整显示效果）

四、常用功能设置

改翻页速度（默认 5 秒翻一页）：

<div id="myAlbum" class="carousel slide" data-bs-interval="3000">

（改成 3 秒翻页，单位是毫秒）

鼠标放上去暂停：

<div id="myAlbum" class="carousel slide" data-bs-pause="hover">

禁止循环播放：

<div id="myAlbum" class="carousel slide" data-bs-wrap="false">

五、常见问题解决指南

问题1：图片显示不全

表现：图片被裁剪或只显示中间部分
解决方法：
1️⃣ 设置容器高度：

<!-- 给轮播图容器固定高度 -->  
<div id="myCarousel" style="height: 400px;">  
  ...  
</div>

（就像给相框定个尺寸，图片才有地方放）

2️⃣ 添加图片填充模式：

.carousel-item img {  
  object-fit: cover; /* 像手机壁纸一样填满区域 */  
  height: 100%;     /* 继承容器高度 */  
}

（可选模式：contain显示全图但可能有留白，cover填满但可能裁剪）

问题2：自动播放失效

表现：轮播图静止不动，不会自动切换
检查步骤：

查电源：确认引入了最新JS文件

<!-- 正确引入方式 -->  
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

（老版本可能用 bootstrap.min.js + 单独引入 Popper.js）

查开关：检查属性是否写对

<!-- 正确写法 -->  
<div class="carousel" data-bs-ride="carousel">  
<!-- 易错写法 -->  
<div class="carousel" data-ride="carousel"> <!-- 老版本写法失效! -->

查冲突：
如果页面有其他JavaScript报错，可能导致功能失效（就像电器短路整个插座没电）

问题3：手机显示文字太小

表现：移动端文字挤在一起看不清
解决方案：
1️⃣ 响应式隐藏文字：

<div class="carousel-caption d-none d-md-block">  
  <h5>电脑显示的大标题</h5>  
  <p>电脑显示的描述文字</p>  
</div>

（d-none默认隐藏，d-md-block中屏幕以上显示）

2️⃣ 手机专用文字：

<div class="carousel-caption d-block d-md-none">  
  <h6>手机专用小标题</h6>  
  <p class="small">手机精简文字</p>  
</div>

（电脑隐藏，手机显示精简版）

3️⃣ 全局调整字体（CSS）：

@media (max-width: 768px) {  
  .carousel-caption h5 {  
    font-size: 1rem !important; /* 手机标题调小 */  
  }  
}

其他实用调试技巧

浏览器检查工具：
- 按F12打开开发者工具 ➜ Elements标签
- 检查元素高度是否生效（如图片容器高度是否为0）
最小化测试：
新建空白HTML文件，只保留轮播图代码，逐步添加功能排查问题
版本核对：
访问 Bootstrap 官方示例
对比代码差异（不同版本写法可能有变）

六、升级玩法（选做）

加背景音乐：

<audio id="bgm" loop>
  <source src="music.mp3" type="audio/mpeg">
</audio>

<script>
// 翻页时播放音乐
document.getElementById('myAlbum').addEventListener('slid.bs.carousel', function() {
  document.getElementById('bgm').play();
})
</script>

显示当前页码：

<div class="carousel-counter">
  第 <span id="currentPage">1</span> 张 / 共 3 张
</div>

<script>
// 翻页时更新数字
document.getElementById('myAlbum').addEventListener('slid.bs.carousel', function(e) {
  document.getElementById('currentPage').textContent = e.to + 1;
})
</script>

（就像给相册加了进度条和背景音乐）

总结：Bootstrap 轮播图就像个智能相册框架，我们只需要：

准备好基础文件（充电宝）
按结构搭积木（相册页）
调样式（加滤镜）
根据需求改设置（调播放速度）

遇到问题先检查基础设置，大部分情况都是文件没引全或者类名写错了。动手试几次就会发现其实很简单~