Question

在CSS中，我习惯于为button { /* style stuff */ }

等所有元素全局定义样式

有没有办法将所有按钮设置为bootstraps btn btn-sm btn-default而无需为每个元素显式设置类？

例如

button {
  btn btn-sm btn-default
}

Answer 1

如果您熟悉LESS，则可以编辑引导核心，并在每个.btn前加button，然后.btn, button，并重新编译less。 buttons.less是您要查看的文件。

或者，只需执行搜索并替换“.btn {”，并将其替换为编译后的引导程序css中的“.btn, button {”。虽然你必须多次这样做并且要非常小心，因为bootstrap中有很多子类（.btn-default，.btn-primary等等。）

Answer 2

如果您没有使用LESS或任何其他CSS扩展，我会说您可以创建一个单独的样式表（我们称之为custom.css - 除了框架样式表之外，我们大多数人都使用自定义样式表）并添加那里的风格。例如：

button {
  // Here what ever is inside bootstraps btn-sm and btn-default and even set the styles with !important so they will over write the bootstrap defaults for sure
}

然后将其设置为文档中的最后一个样式表，例如：

<link href="bootstrap.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

这样你的所有按钮都应该具有所需的样式，你仍然可以使用bootstrap CSS的其他功能。

Answer 3

在其他方面，您可以使用jquery为所有按钮添加类。

$(document).ready(function () {
     $('button').addClass('btn btn-sm btn-default');
})

Bootstrap - 我是否必须将该类添加到每个元素？

3 个答案: