Bootstrap4 自定义表单学习笔记
Bootstrap4 是一个流行的前端框架，提供了许多组件和工具，可以加快 Web 开发速度。其中，自定义表单是 Bootstrap4 提供的一种强大的组件，它允许用户通过自定义样式和布局来创建美观的表单。本文将介绍 Bootstrap4 自定义表单的基本用法，并通过示例代码演示介绍。
基本用法
引入 CSS 和 JS 文件
创建自定义表单之前，需要先引入 Bootstrap4 的 CSS 和 JS 文件。在 HTML 中通过如下代码引入：
Copy Code<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
创建表单元素
在 HTML 中创建自定义表单元素非常简单，只需要添加相应的 class 或属性即可。以下列举了一些常用的自定义表单元素：
色彩
Bootstrap4 提供了许多颜色选择器，例如 input[type="color"] 和 .custom-range。
滑块
滑块控件是 Bootstrap4 自定义表单中的一个特色元素。可以通过添加 .custom-range class 来创建滑块：
Copy Code<input type="range" class="custom-range">
开关
开关控件可以用来实现二元选择，例如开/关状态。可以通过添加 .custom-switch class 来创建开关：
Copy Code<input type="checkbox" class="custom-switch">
单选框和复选框
Bootstrap4 中的自定义表单也提供了美观的单选框和复选框。可以通过添加 .custom-radio 和 .custom-checkbox class 来创建：
Copy Code<div class="custom-control custom-radio">
<input type="radio" id="radio1" name="radio" class="custom-control-input">
<label class="custom-control-label" for="radio1">选项1</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" id="checkbox1" name="checkbox" class="custom-control-input">
<label class="custom-control-label" for="checkbox1">选项1</label>
</div>
示例代码
下面是一个使用 Bootstrap4 自定义表单创建的示例代码：
Copy Code<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap4 自定义表单学习笔记</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
<div class="form-group">
<label for="color">颜色选择器</label>
<input type="color" class="form-control" id="color">
</div>
<div class="form-group">
<label for="range">滑块控件</label>
<input type="range" class="form-control-range" id="range">
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch">
<label class="custom-control-label" for="switch">开关控件</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="radio1" name="radio" class="custom-control-input">
<label class="custom-control-label" for="radio1">单选框 1</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="radio2" name="radio" class="custom-control-input">
<label class="custom-control-label" for="radio2">单选框 2</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" id="checkbox1" name="checkbox" class="custom-control-input">
<label class="custom-control-label" for="checkbox1">复选框 1</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" id="checkbox2" name="checkbox" class="custom-control-input">
<label class="custom-control-label" for="checkbox2">复选框 2</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
以上就是关于 Bootstrap4 自定义表单的基本用法和示例代码。希望对你的学习有所帮助！