如何使 css 类代码像 Bootstrap 一样可重用答案

【问题标题】：How to make css class code reusable like Bootstrap如何使 css 类代码像 Bootstrap 一样可重用
【发布时间】：2020-06-13 00:33:37
【问题描述】：

我正在尝试了解引导程序的工作原理，现在我对响应式功能的工作原理不感兴趣，我只对向元素添加类将如何改变其外观感兴趣。

例如添加 class="checkbox-inline" 到这样的标签

<label class="checkbox-inline">

会给你这个形状

我正在尝试使用 css 和 jQuery 做同样的事情，但问题是我需要多个 div 来做到这一点

<div class="buttoun-toggle">
    <div id="line"></div>
    <div id="circle"></div>
</div>

加上一些css，它会给我这个形状

我也使用 jQuery 制作了动画（当你点击它时，它会移动）。

所以我所做的就是这么简单，创建带有圆边的圆形和方形来制作我的按钮...

不，问题是这段代码不可重用，因为我不能只使用

<label class="buttoun-toggle">

再次创建这个按钮，这主要是因为它有三个 div。那么我需要知道 Bootstrap 如何具有这种代码可重用性以及我如何在这里做同样的事情，这意味着我如何调用 class 并调用所有这些 div？

【问题讨论】：

Bootstrap 使用了随着时间的推移而开发的多种技术。您可能感兴趣的其中之一（但没有完全回答问题）是伪元素
好吧，bootstrap给你提供了一个很好的例子，你看Bootstrap CSS的代码是不是有什么不明白的地方？
bootstrap 是怎么做的？右键单击，检查，查看 css 面板。

标签： javascript html jquery css bootstrap-4

【解决方案1】：

您通常会使用before 和after 等伪元素来完成与一个类相关的元素组合：

.toggle-button {
  position: relative;
  content: "";
  display: block;
  width: 40px;
  height: 14px;
  border-radius: 3px;
  background-color: #CECECE;
  float: left;
}

.toggle-button::after{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  float: right;
  margin-left: -20px;
  border-radius: 100%;
  margin-top: -3px;
}

.toggle-button-red::after {
  background-color: red;
}

.toggle-button-blue::after {
  background-color: blue;
}

<div class="toggle-button toggle-button-red"></div>
<div class="toggle-button toggle-button-blue"></div>

【讨论】：