时间戳

首页 > 解决方案 > 如何使 css 类代码像 Bootstrap 一样可重用

javascript - 如何使 css 类代码像 Bootstrap 一样可重用

问题描述

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

例如添加 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 都被调用？

标签： javascripthtmljquerycssbootstrap-4

解决方案

您通常会使用伪元素，例如，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>

推荐阅读