Bootstrap3.3.7.min.css 打破禁用按钮答案

【问题标题】：Bootstrap3.3.7.min.css breaks disabled buttonsBootstrap3.3.7.min.css 打破禁用按钮
【发布时间】：2018-09-13 07:11:38
【问题描述】：

我在我的网站中使用以下外部文件：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

<button disabled>Disabled</button><br>
<button>Not Disabled</button>

在添加 bootstrap+bootbox 之前，我的按钮按预期工作，禁用时显示为灰色。但现在我的所有按钮看起来总是一样的，无论是启用还是禁用。
我注意到我的按钮视觉效果再次起作用，如果我不包括 bootstrap3.3.7.min.css。但这也完全破坏了任何基于引导程序的自定义弹出窗口。
根据bootbox website，我使用的是兼容的库版本，所以我不知道是什么导致了这种行为。

【问题讨论】：

标签： css twitter-bootstrap-3 bootbox

【解决方案1】：

如果您正在使用引导程序，您将需要使用 btn 类，以便在禁用时可以在视觉上禁用按钮。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

<button class="btn" disabled>Disabled</button><br>
<button class="btn">Not Disabled</button>

【讨论】：