Bootstrap5 btn-info按钮样式异常：蓝底黑字而非蓝底白字

原因分析 #

你遇到的是Bootstrap 5版本差异导致的样式预期不符：Bootstrap 5.0.x系列中，btn-info的默认文本颜色为深色（黑色），背景色为浅蓝，这是该版本对info主题色对比度优化的结果；而你参考的官方demo可能基于Bootstrap 4或Bootstrap 5.3及以上的更新版本，这些版本中btn-info采用了蓝底白字的样式。

解决方案 #

方案1：自定义CSS覆盖样式 #

在项目的自定义CSS中添加以下代码，强制将btn-info改为蓝底白字：

.btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

方案2：升级Bootstrap版本 #

将当前使用的Bootstrap 5.0.2升级到5.3及以上的稳定版本，新版本已调整btn-info的默认样式为蓝底白字。

在HTML页面中（项目内容里） #

使用<img>标签替代<a>标签来展示图片，示例：

<!-- 错误：仅显示图片链接 -->
<a href="图片地址">查看图片</a>
<!-- 正确：直接渲染图片 -->
<img src="图片地址" alt="图片描述文本">

在Markdown文档中（如项目说明、笔记） #

使用Markdown图片语法替代链接语法，示例：

<!-- 错误：显示文字链接 -->
[图片链接文本](图片地址)
<!-- 正确：直接显示图片 -->
![图片描述文本](图片地址)

内容的提问来源于stack exchange，提问作者Feather Piano