Изучаю документацию Bootstrap
ссылка.
Пробовал на примере установить для body атрибут data-bs-no-jquery но все равно код исполняется .
События jQuery
Bootstrap обнаружит jQuery, если jQuery присутствует в объекте window и не установлен атрибут data-bs-no-jquery для body. Если jQuery найден, Bootstrap будет генерировать события благодаря системе событий jQuery. Поэтому, если вы хотите прослушивать события Bootstrap, вам придется использовать методы jQuery (.on, .one) вместо addEventListener.
Вроде после того как добавляешь атрибут код не должен работать но он работает .Почему?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Bootstrap Bundle JS (jsDelivr CDN) -->
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css" />
<title>Bootstrap Sass & ESM JS</title>
</head>
<body data-bs-no-jquery>
<div class="divs" >
<div class="d">1</div>
<div class="d">2</div>
<div class="d">3</div>
</div>
<div class="buttons">
<input type="button" id="start0" value="1">
<input type="button" id="start1" value="2">
<input type="button" id="start2" value="3">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
console.log('Готово!');
});
</script>
<script>
$(".buttons").on("click", clickHandler);
function clickHandler(e) {
var id = e.target.getAttribute("id");
if (!id) return;
for (var i = 0; i < 3; i++)
document.querySelectorAll(".divs .d")[i].style.display = i == id[5] ? "block" : "none";
}
</script>
<script type="module" src="js/main.js"></script>
</body>
</html>
.d { display: none; } 
Простой
Простой
Простой
