Bootstrap前端开发实例｜创建Bootstrap4风格的复选框

清华计算机学堂 2022-12-03

498

Bootstrap是Twitter开发的一套Web前端框架，Bootstrap可以简单地理解为：对CSS的再次封装，因此在大多数情况下，对Bootstrap的应用就是对该框架的相关调用。

本系列所有Bootstrap代码基于Bootstrap 4.3.1实现，在IntelliJ IDEA 2019.2.3环境中编写完成，在最新版的“搜狗高速浏览器”和“Google Chrome浏览器”上测试成功，因此建议读者在上述环境或条件下使用源代码。所有源代码不需要下载Bootstrap的其他文件，在使用时保持网络畅通即可。此外，本系列实例推文需要读者有一定的HTML、CSS和JavaScript的基础知识。

下面这个实例演示了创建Bootsrap4风格的复选框。

实例功能

此实例主要通过使用custom-control、custom-checkbox、custom-control-input、custom-control-label等类，创建Bootstrap4风格的复选框。当在浏览器中显示页面时，单击“创建默认风格的复选框”按钮，则默认风格的复选框效果如图1所示。

■ 图1