Bootstrap 4中.btn-default去哪了？如何恢复原默认按钮样式？

我刚好处理过类似的Bootstrap版本迁移问题，先直接给你明确几个关键点：

Bootstrap 4早期Alpha版本里的.btn-default确实在正式版中被彻底移除了——官方重构了整个颜色系统，把原默认按钮的样式拆分到了.btn-secondary和.btn-light里，但两者都没法1:1还原Bootstrap 3的.btn-default效果。

下面给你几个实用的解决方法，按需选择：

方法1：用自定义CSS直接还原.btn-default样式 #

如果不想改动项目的类名，直接写一段CSS覆盖，把Bootstrap 3的默认按钮样式搬过来就行：

/* 完全还原Bootstrap3 .btn-default的核心样式 */
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
}
.btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-default:focus, .btn-default.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(204, 204, 204, 0.5);
}
.btn-default:active, .btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

这样你可以继续在项目里用.btn-default类，完全适配原来的代码。

方法2：通过Sass变量重写（项目级定制推荐） #

如果你的项目是用Sass构建的，直接修改Bootstrap 4的变量会更优雅，能全局统一样式：

// 重写Bootstrap4的secondary按钮变量，对齐Bootstrap3默认按钮
$btn-secondary-color: #333;
$btn-secondary-bg: #fff;
$btn-secondary-border: #ccc;
$btn-secondary-hover-color: #333;
$btn-secondary-hover-bg: #e6e6e6;
$btn-secondary-hover-border: #adadad;
$btn-secondary-active-color: #333;
$btn-secondary-active-bg: #d4d4d4;
$btn-secondary-active-border: #8c8c8c;
$btn-secondary-focus-box-shadow: 0 0 0 0.2rem rgba(204, 204, 204, 0.5);

// 导入Bootstrap4核心Sass文件（确保这个变量定义在导入之前）
@import "bootstrap";

这样整个项目里的.btn-secondary就会变成Bootstrap 3默认按钮的样子，同时保留Bootstrap 4的组件特性。

方法3：同步调整下拉菜单等其他组件的默认主题 #

除了按钮，下拉菜单、表单控件这些组件的默认样式也需要对齐，同样用CSS或Sass变量处理：

下拉菜单示例（CSS方式） #

.dropdown-menu {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.dropdown-menu > li > a {
  color: #333;
  padding: 3px 20px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  background-color: #f5f5f5;
}

如果用Sass，直接修改$dropdown-bg、$dropdown-border-color、$dropdown-link-color这些变量即可，和按钮的思路一致。

总的来说，Bootstrap 4正式版确实砍掉了早期Alpha的.btn-default，但通过自定义CSS或Sass变量，完全可以还原Bootstrap 3的默认主题风格，根据你的项目构建方式选对应的方法就行。

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