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

Question

要使用Twitter的Bootstrap库创建主按钮,您需要使用两个CSS类,如下所示:class="btn btn-primary".

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

Answer 1

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

默认按钮为灰色.

Answer 2

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

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

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