如何避免在构建html主题时重复使用引导程序类

Question

我想创建html主题，所以使用bootstrap 4。

但是我应该在某些地方重复bootstrap类，例如

<div class="row border border-top-0 mt-2 p-2 bg-info">One</div>
<div class="row border border-top-0 mt-2 p-2 bg-info">example 2</div>
<div class="row border border-top-0 mt-2 p-2 bg-info">some thing</div>

我是否可以将引导程序类聚合为一个名称，例如：

myclass="row border border-top-0 mt-2 p-2 bg-info"

然后用这个？

<div class="myclass">One</div>
<div class="myclass">example 2</div>
<div class="myclass">some thing</div>

注意:复制和粘贴是不好的，使用复制和粘贴，然后如果需要添加另一个类，则应该添加到所有类中

Answer 1

我还没有读过所有的BS4文档，也许可以下载源代码并篡改/修改它。但我建议你不要这么做。

我真的不明白你为什么要这样做，但是你可以使用javaScript来做这件事。声明一个包含所需类的字符串，并将其添加到所需的元素中，或用它覆盖现有类。

这样，当您想要向列表中添加另一个类时，只需将其添加到已声明的字符串( myClass )中

简单的例子：

​

const myClass = 'row border margin-top'
document.querySelectorAll('.my-row').forEach(row => row.className += ` ${myClass}`)

div {
  height:100px;
  width:100px;
  margin:5px;
}

.border {
  background:red;
}

<div class="my-row"></div>
<div class="my-row"></div>
<div class="my-row"></div>

​

选项2。不推荐使用。

从bootstrap下载源文件并将其加载到您的项目中，而不是加载bs4的url。

然后，在这些文件中，您应该可以找到它们声明每个类的样式的位置，并使用SASS ( bs4也是用sass编写的)来创建您自己的自定义类，用于扩展bs4类的样式

.myclass {
  @extend .row;
  @extend .border;
  @extend .mt-2;
  /* here you can add styles that are only specific to myclass */
}

Answer 2

编写自己的css

例如

.myclass { border: 1px solid #888; border-top: 0px; margin-top:2px; padding: 2px; background-color: #ccc;}