为什么Twitter Bootstrap需要多个按钮类？

Question

要使用Twitter's Bootstrap library制作主按钮，您需要使用两个CSS类：class="btn btn-primary"。

为什么他们以这种方式设计API，当他们可以使btn-primary包含btn包含的所有CSS时？是纯粹为了节省代码重复，因此文件大小还是存在更复杂的原因？

Answer 1

因为btn-primary不是默认按钮。它是额外的CSS，将其变为蓝色，就像btn-success将其变为绿色一样。

默认按钮为灰色。

Answer 2

这是因为OOCSS原则。从元素中分离某些样式可以更好地重用代码和样式，并且可以更快速地修改css中的任何对象。例如，您的主.btn类使用默认的灰色调为您的按钮设置样式，因此具有.btn类的所有按钮将具有相同的样式，但是使用预定义样式可以扩展相同的按钮class，支持多种不同的颜色方案，而无需反复编写默认的.btn属性，因此更易于维护。如果您查看.btn-warning和所有其他按钮状态类的css，您可以看到它们只是定义了按钮的颜色和样式，并且无需再次重写按钮类;

.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
    background-color: #F89406;
}

这样可以更容易阅读，更简洁，更清晰的样式表。