PHP MySQL jquery HTML CSS
Bootstrap 5教程 表单 网格
入门 容器 网格基础 排版 颜色 表格 图像 Jumbotron 警告框 按钮 按钮组 徽章 进度条 加载器 分页 列表组 卡片 下拉菜单 折叠 导航 导航栏 轮播 模态 工具提示 弹出框 Toast Scrollspy Offcanvas 实用工具 Flex 表单 选择菜单 复选框和单选按钮 范围 输入组 浮动标签 表单验证 网格系统 堆叠/水平 网格 XSmall 网格 Small 网格 Medium 网格 Large 网格 XLarge 网格 XXL 网格实例

Bootstrap 5教程

入门 容器 网格基础 排版 颜色 表格 图像 Jumbotron 警告框 按钮 按钮组 徽章 进度条 加载器 分页 列表组 卡片 下拉菜单 折叠 导航 导航栏 轮播 模态 工具提示 弹出框 Toast Scrollspy Offcanvas 实用工具 Flex

表单

表单 选择菜单 复选框和单选按钮 范围 输入组 浮动标签 表单验证

网格

网格系统 堆叠/水平 网格 XSmall 网格 Small 网格 Medium 网格 Large 网格 XLarge 网格 XXL 网格实例
首页 > 大前端 > Bootstrap >Bootstrap 5教程

Bootstrap 5教程

收藏
分享
浏览11139
更新时间2025-08-11
Jumbotron 按钮

警告

Bootstrap 5 提供了一种创建预定义警告消息的简单方法：

警告框是使用 .alert 类创建的，后跟上下文类之一：

  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light
  • .alert-dark

实例

<div class="alert alert-success">
  <strong>成功！</strong>此警报框表示成功或积极的动作。
</div>

警告链接

将 .alert-link 类添加到警告框内的任何链接，可创建“匹配的彩色链接”：

实例

<div class="alert alert-success">
  <strong>成功！</strong>您应该<a href="#" class="alert-link">阅读这条消息</a>。
</div>

关闭警告

如需关闭警告消息，请将 .alert-dismissible 类添加到警告容器。然后将 class="btn-close" 和 data-bs-dismiss="alert" 添加到链接或按钮元素（当您单击它时，警告框将消失）。

实例

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>成功！</strong>此警报框表示成功或积极的动作。
</div>

警告框动画

.fade 和 .show 类在关闭警告消息时添加淡入淡出效果：

实例

<div class="alert alert-danger alert-dismissible fade show">

Jumbotron 按钮

相关视频

更多

免费

前端入门_HTML5
初级前端入门_HTML5

64.8万次学习

收藏

免费

30分钟学会网站布局
初级30分钟学会网站布局

24.6万次学习

收藏

免费

CSS视频教程-玉女心经版
初级CSS视频教程-玉女心经版

41.1万次学习

收藏

免费

JavaScript极速入门_玉女心经系列
初级JavaScript极速入门_玉女心经系列

76.4万次学习

收藏

科技资讯

更多
华为发布六大电力全球样板点，以AI与能源双向赋能驱动电力新未来
新方法、新组织、新工具：华为发布AI行业落地新路径
华为云企业级AI产品全面落地 做最开放的Agentic Cloud
以灵衢互联为核心，打造集群与超节点协同的新计算架构
华为发布全球首个采用NPO的超节点——昇腾960超节点
华为坤灵升级“4+10+N”场景化方案，发布“经纬计划”和50个样板点
佳能发布全画幅相机 EOS R8 Mark II：2420 万像素、新增支持机身防抖，9999 元
全球首款AI智能体手机正式上市！努比亚NaviX Ultra 5499元起
佳能发布Dual Pixel 3D Converter应用软件，可将照片生成3D模型

24小时阅读榜

更多

1

Fiber框架快速搭建Web服务具体步骤

2

为什么Oracle 12c中PDB拔插操作会导致DG备库同步中断

3

如何用Kubernetes部署Node.js项目

4

Hyperf2.2路由基础配置教程在哪学

5

GoLand代码自动保存机制怎么配

6

为什么CodeIgniter数据库配置项缺少驱动会导致崩溃

7

Oracle AWR中出现大量log file sync等待该如何优化

8

Nginx `worker_connections`怎么通过Prometheus Exporter实时监控

9

HTML中dialog标签动态加载内容的实现步骤

10

GoLand配置在保存时自动运行任意第三方静态扫描工具

11

H5 中怎么优化移动端 H5 页面中多重绝对定位元素的层叠上下文（Stacking Context）渲染性能

12

macOS 文件管理中怎么通过键盘快捷键瞬间新建一个空白文件夹

13

Linux 运维中怎么防止普通用户利用 sudo 提权到 root 的经典漏洞（如 CVE 漏洞利用）

14

ThinkPHP请求对象生命周期怎么理解

15

如何通过CSS制作极具科技感的HUD雷达扫描盘动画

精品课程

更多
PHP实战天龙八部之微信支付视频教程
PHP实战天龙八部之微信支付视频教程

共5课时

18万人学习

PHP实战天龙八部之仿爱奇艺电影网站
PHP实战天龙八部之仿爱奇艺电影网站

共49课时

82万人学习

前端入门_HTML5
前端入门_HTML5

共29课时

64.9万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

41.2万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

76.6万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

64.1万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

24.3万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

36.2万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

133.1万人学习

热门下载

更多
phpStudy 2018最新版
phpStudy 2018最新版

集成PHP7，16种组合，超全大合集

下载
vc9-vc14（32+64位）运行库合集（链接在下方）
vc9-vc14（32+64位）运行库合集（链接在下方）

phpStudy安装所需运行库集合下载

下载
VC9 32位
VC9 32位

VC9 32位 phpstudy集成安装环境运行库

下载
VC11 32位
VC11 32位

VC11 32位 phpstudy集成安装环境运行库​

下载
php程序员工具箱完整版
php程序员工具箱完整版

程序员工具箱 v1.0 php集成环境

下载
VC14 32位
VC14 32位

VC14 32位 phpstudy安装环境运行库

下载
SublimeText3汉化版
SublimeText3汉化版

中文版，非常好用

下载
Notepad++ Windows版
Notepad++ Windows版

Notepad++ 8.9.7 Windows版官方安装包，适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。

下载
phpStudy V8.1（Win64位）（已支持php8）
phpStudy V8.1（Win64位）（已支持php8）

Win64位，支持php多版本共存

下载
提交