所以我试图理解引导程序是如何工作的，现在我对响应功能是如何工作的不感兴趣，我只对向元素添加class将如何改变它的外观感兴趣，例如向标签添加class=“checkbox-inline”，如下所示
<label class="checkbox-inline">
我会给你这个形状
现在我正在尝试使用css和jqury来做同样的事情，但问题是我需要多个div来做这件事
<div class="buttoun-toggle">
<div id="line"></div>
<div id="circle"></div>
</div>
用一些css就会给我这个形状
我还用jqury做了动画（当你点击它时，它会移动）
所以我做的很简单，创建圆形和圆形边缘的正方形来制作我的按钮
问题是这个代码不可重用，因为我不能仅仅使用来再次创建这个按钮，这主要是因为它有三个div。 那么，我需要知道的是，bootstrap如何具有代码的可重用性，以及我如何在这里做同样的事情，也就是说，o如何调用class和所有这些div？
您通常使用伪元素，如before和after来完成绑定到一个类的元素的组合:
null
.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>