Bootstrap的alert组件用于快速创建语义化提示框，需正确引入CSS/JS资源，使用alert+颜色类定义样式，推荐添加带data-bs-dismiss的关闭按钮，并支持alert-link等辅助类优化交互与可访问性。

Bootstrap 的 alert 组件是快速创建醒目、语义化提示框的便捷方式，结合 HTML 使用非常简单，关键在于正确引入 Bootstrap 资源、使用标准类名，并注意可访问性与关闭功能。

引入 Bootstrap 资源

确保项目中已加载 Bootstrap 的 CSS 和 JS（含 Popper，用于某些交互）：

• 推荐使用 CDN：在 中引入 Bootstrap CSS，在 底部引入 JS（含 jQuery 若用旧版 v4；v5+ 不再依赖 jQuery）
• v5 示例（无 jQuery）：
  bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

基础警告提示框写法

使用

标签，添加 alert 基础类 + 语义化颜色类（如 alert-warning），内容直接写入：

• alert-primary / alert-secondary / alert-success / alert-danger / alert-warning / alert-info / alert-light / alert-dark
• 示例（黄色警告）：
  
  
    请检查您的输入格式是否正确。
  

添加关闭按钮（可选但推荐）

增强用户体验，需三要素：关闭按钮、data-bs-dismiss="alert" 属性、JS 支持（已含在 bootstrap.bundle.min.js 中）：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 按钮必须有 btn-close 类和 data-bs-dismiss="alert"
• 建议添加 aria-label="Close" 提升可访问性
• 示例：
  
  
    
    您的会话即将过期，请及时保存。
  

支持链接与额外样式

可在 alert 内嵌入链接，或组合其他工具类优化布局：

• 链接加 alert-link 类，自动适配当前 alert 颜色
• 常用辅助类：mb-0（取消下边距）、text-center（居中文字）、rounded-0（直角）
• 示例：
  
  
    操作失败：重试 或联系管理员。
  

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！