Bootstrap4 自定义表单
Bootstrap4 自定义表单技术文档
Bootstrap4 是一种出色的框架，它的自定义表单给开发人员带来了很多便利。下面我们就来详细介绍如何使用Bootstrap4自定义表单。
开始使用
要想使用Bootstrap4自定义表单，必须在代码中添加下面的代码段来引入Bootstrap4的样式表表单：
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css">
除此之外，还需要在代码中添加下面的代码段来引入Bootstrap4的相关脚本：
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
在这些都准备好后，就可以开始创建自定义表单了。
创建表单
要创建一个表单，必须先定义一个表单元素。可以使用下面的代码段来定义一个基本的表单：
<form>
<!-- 表单内容 -->
</form>
下面我们来看一下表单中可以添加哪些内容。
表单内容
输入框
使用Bootstrap4可以非常方便地创建输入框。你可以创建单行输入框、多行输入框、密码输入框等等。下面是一些基本的输入框：
<!-- 文本类型的输入框 -->
<input type="text" class="form-control" placeholder="请输入文本">
<!-- 密码类型的输入框 -->
<input type="password" class="form-control" placeholder="请输入密码">
<!-- 多行输入框 -->
<textarea class="form-control" rows="3"></textarea>
<!-- 表单校验 -->
<div class="invalid-feedback">
请输入内容
</div>
下拉框
使用Bootstrap4，你可以非常方便地创建下拉框。下面是一些基本的下拉框：
<!-- 单选下拉框 -->
<select class="form-control">
<option value="1">选项1</option>
<option value="2">选项2</option>
</select>
<!-- 多选下拉框 -->
<select class="form-control" multiple>
<option value="1">选项1</option>
<option value="2">选项2</option>
</select>
选择框
使用Bootstrap4，你可以非常方便地创建复选框和单选框：
<!-- 单选框 -->
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
选项1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
选项2
</label>
</div>
<!-- 复选框 -->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
复选框1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
复选框2
</label>
</div>
按钮
使用Bootstrap4，你可以非常方便地创建按钮，以便用户提交或者取消表单内容的输入：
<!-- 提交按钮 -->
<button type="submit" class="btn btn-primary">提交</button>
<!-- 取消按钮 -->
<button type="reset" class="btn btn-secondary">取消</button>
表单组
在Bootstrap4中，表单组是指包含一组可选项的表单元素。下面是一些基本的表单组：
<!-- 单选表单组 -->
<div class="form-group">
<label for="exampleFormControlSelect1">下拉框</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
</div>
<!-- 多选表单组 -->
<div class="form-group">
<label for="exampleFormControlSelect2">多选框</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
</div>
样式调整
使用Bootstrap4，你可以随意调整表单的样式以满足业务需求。下面是一些常用的调整技巧。
增加行间距
以下代码示例展示了如何增加表单行的行间距：
<form class="form-row">
<div class="col-12 mb-2">
<input type="text" class="form-control" placeholder="文本">
<!-- .mb-2 表示添加下外边距 -->
</div>
<div class="col-12">
<input type="text" class="form-control" placeholder="文本">
</div>
</form>
暗色背景
以下代码示例展示了如何将表单背景颜色改为暗色：
<form class="bg-dark p-2">
<div class="form-group">
<label for="exampleInputEmail1">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="邮箱">
<small id="emailHelp" class="form-text text-light">我们绝不会共享您的电子邮件地址。</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label text-light" for="exampleCheck1">我同意条款和条件</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
水平布局
以下代码示例展示了如何使用水平布局：
<form class="form-inline">
<div class="form-group mb-2">
<label for="staticEmail2" class="sr-only">电子邮件</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword2" class="sr-only">密码</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="密码">
</div>
<button type="submit" class="btn btn-primary mb-2">提交</button>
</form>
结语
以上是使用Bootstrap4自定义表单的几种技巧，通过这些技巧，你可以轻松创建任何类型的表单。