Bootstrap 组件特效
Bootstrap 把常用组件（模态框、轮播、下拉、手风琴 Collapse、选项卡 Tab）做成“类名 + data 属性”就能用的组件库，底层由它自己的 JS 驱动。不写一行 JS 也能有完整交互。
用法：引入 bootstrap.min.css + bootstrap.bundle.min.js，给元素加 data-bs-toggle="modal" data-bs-target="#id" 即可。移动优先、响应式断点齐全，适合后台与营销页快速搭建。
- data-bs-toggle / data-bs-target 属性即组件（零 JS 代码）
- .modal / .collapse / .carousel 是最常用的三个交互组件
- 本质仍是 JS 驱动，可手动用 API 控制（如 Modal.show()）
HTML
<style> .boot { text-align: center; padding: 20px 0; } .boot button { padding: 9px 20px; border: none; border-radius: 6px; background: #7952b3; color: #fff; cursor: pointer; } .boot .modal-demo { margin-top: 12px; padding: 18px; border-radius: 10px; display: none; background: #f8f5ff; box-shadow: 0 10px 26px rgba(0,0,0,.12); } .boot .modal-demo.show { display: block; animation: tabIn .3s ease; } @keyframes tabIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } } </style> <div class="boot"> <button id="bsBtn">Bootstrap 风格模态框（data 属性触发）</button> <div class="modal-demo" id="bsModal"> 💜 这就是 Bootstrap Modal 的外观与行为：出现/消失有过渡，点遮罩或按钮关闭。<br><br> <button onclick="document.getElementById('bsModal').classList.remove('show')">关闭</button> </div> </div> <script> // Bootstrap 原生写法：data-bs-toggle="modal" data-bs-target="#bsModal" // 这里用等价原生实现演示行为 document.getElementById('bsBtn').addEventListener('click', function () { document.getElementById('bsModal').classList.add('show'); }); document.addEventListener('click', function (e) { if (e.target.id === 'bsModal') e.target.classList.remove('show'); }); </script>
本节要点Bootstrap 组件 = 类名 + data 属性零配置；引入 CSS+JS 即可用，快速建站首选。
