Javascript 如何使css类代码像引导一样可重用

我试图理解引导是如何工作的，现在我对响应功能的工作方式不感兴趣，我只对向元素添加类将如何改变其外观感兴趣

例如，将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？

您通常会使用伪元素，例如，

before

和

before

来完成绑定到一个类的元素的组合：

。切换按钮{
位置：相对位置；
内容：“；
显示：块；
宽度：40px；
高度：14px；
边界半径：3px；
背景色：#CECECE；
浮动：左；
}
.切换按钮：：之后{
内容：“；
显示：块；
宽度：20px；
高度：20px；
浮动：对；
左边距：-20px；
边界半径：100%；
利润上限：-3px；
}
.切换按钮红色：：后{
背景色：红色；
}
.切换按钮蓝色：：之后{
背景颜色：蓝色；
}

Bootstrap使用了随着时间的推移而发展起来的几种技术。其中一个可能会让你感兴趣（但不能完全回答问题）的是pseudo elementsWell，bootstrap为你提供了一个很好的例子，当你看bootstrap CSS的代码时，有什么你不明白的吗？bootstrap是如何做到的？右键单击，检查，查看css面板。