Bootstrap是Web开发人员中用于构建交互式网页设计的一种流行选择。 Bootstrap有了很长的路要走，发布了多个版本，每个新版本都丰富了内容。 Bootstrap具有广泛的社区，也提供了更新的软件包，这些软件包使使用Bootstrap的工作变得更加轻松。在本文中，我们将处理更改Bootstrap 4中拨动开关的背景颜色。Bootstrap4默认提供一个自定义开关类，用于创建拨动开关，而custom-control-input类则处理背景色。和开关的边框颜色。在Bootstrap 4中，拨动开关的背景颜色为蓝色。可以通过操作custom-control-input类来更改此颜色。还有另一种使用具有多种颜色类别的外部库来更改颜色的方法。我们将在下面的示例中讨论这两种方法。
第一种方法
这种方法使用预定义的定制开关类创建拨动开关，并通过在定制控制输入类中指定所需的颜色来更改颜色。此方法包括大量编码，因为必须为不同的颜色重复整个代码。这很麻烦。
代码实施
输出
第二种方法
第二种方法省去了第一种方法所需的额外工作，即为每个自定义控件输入类指定颜色更改。这是一种更好，更复杂的方法，因为它不包括冗长的编码。该方法利用了Github上提供的Bootstrap Switch Button程序包。它是一个开源库，可与所有Bootstrap 4组件一起使用。该库具有预定义的类，可帮助我们定义切换开关的颜色。输入标签的data-onstyle属性负责设置切换开关的颜色。可用的颜色选项类似于Bootstrap 4中的“按钮”。data-toggle属性指定复选框为切换按钮，而data-width属性指定切换按钮的宽度。 “ checked”属性表示在页面加载时已经检查了开关，可以根据需要取消选中该开关。
程式码执行
Toggle switch
输出
