使用bootstrap5.1.3所踩的坑（carousel，modal）

第九宫

于 2022-01-16 13:07:47 发布

阅读量1.2k

点赞数

文章标签： bootstrap jquery javascript

本文链接：https://blog.youkuaiyun.com/qq_43482325/article/details/122521920

版权

本文档探讨了在使用Bootstrap 5.1.3版本时遇到的carousel和modal问题，主要体现在data属性的变化上。作者发现新版本中data-target需改为data-bs-target才能正常工作。解决问题的关键在于查阅官方文档，以确保遵循最新的API规范。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、插件版本

bootstrap：5.1.3
jquery: 3.6.0

二、carousel，modal新旧对比

carousel和modal都存在这样的问题，下面只举carousel的例子。
旧版 bootstrap3.x.x都能行

<div id="slider" class="carousel slide" data-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-target="#slider" data-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-target="#slider" data-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-target="#slider" data-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner"</

最低0.47元/天解锁文章