全面解析Bootstrap表单使用方法（表单控件状态）

2023年6月10日下午8:04 • JavaScript

下面是全面解析Bootstrap表单使用方法的完整攻略，包含表单控件状态和两条示例说明。

一、什么是Bootstrap表单

在Web应用程序设计中，表单是非常重要的一部分，可以使用表单来获取用户输入并与服务器进行交互。Bootstrap是一个非常受欢迎的开源前端框架之一，它提供了大量的CSS、JavaScript组件和工具，可以帮助您快速地构建现代化的Web应用程序。Bootstrap中提供了多种方式来创建表单，并提供了丰富的表单控件和状态样式，可以大大简化表单的设计工作。

二、Bootstrap表单状态

使用表单控件时，我们经常需要表示不同的状态，比如输入框中的内容是否合法、是否已经填充、是否处于活动状态等等，这些状态对应的不同样式在Bootstrap中有专门的类来表示。下面是几个常见的表单状态：

Default（默认）：默认表单控件样式。
Active（激活）：当表单控件获得焦点时的样式。
Disabled（禁用）：当表单控件被禁用时的样式。
Valid（合法）：当表单控件值合法时的样式。
Invalid（无效）：当表单控件值无效时的样式。

三、Bootstrap表单控件状态

接下来我们会详细讲解Bootstrap中各个表单控件的不同状态样式。

1. 文本框

Bootstrap提供的文本框有如下状态样式：

Default（默认）：默认状态。
Active（激活）：鼠标点击文本框后的状态。
Disabled（禁用）：文本框被禁用后的状态。
Valid（合法）：输入内容合法时的状态。
Invalid（无效）：输入内容不合法时的状态。

示例代码：

<div class="form-group">
    <label for="exampleInputName">姓名</label>
    <input type="text" class="form-control" id="exampleInputName" placeholder="请输入姓名">
</div>

2. 下拉框

Bootstrap提供的下拉框有如下状态样式：

Default（默认）：默认状态。
Active（激活）：鼠标点击下拉框后的状态。
Disabled（禁用）：下拉框被禁用后的状态。
Valid（合法）：选择内容合法时的状态。
Invalid（无效）：选择内容不合法时的状态。

示例代码：

<div class="form-group">
    <label for="exampleFormControlSelect1">城市</label>
    <select class="form-control" id="exampleFormControlSelect1">
        <option>北京</option>
        <option>上海</option>
        <option selected>广州</option>
        <option>深圳</option>
    </select>
</div>

3. 单选框

Bootstrap提供的单选框有如下状态样式：

Default（默认）：默认状态。
Disabled（禁用）：单选框被禁用后的状态。

示例代码：

<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">
        选项一
    </label>
</div>

4. 多选框

Bootstrap提供的多选框有如下状态样式：

Default（默认）：默认状态。
Disabled（禁用）：多选框被禁用后的状态。

示例代码：

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
    <label class="form-check-label" for="defaultCheck1">
        默认选项
    </label>
</div>

四、如何使用状态样式

Bootstrap提供了一些CSS类来设置表单的状态样式，下面是一些常用的CSS类名：

.form-control：设置表单控件的基础样式。
.form-control:focus：设置激活状态样式。
.form-control:disabled：设置禁用状态样式。
.is-valid：设置合法状态样式。
.is-invalid：设置无效状态样式。

示例代码：

<style>
    .my-form .form-control {
        border: none;
        border-radius: 0px;
        border-bottom: 1px solid #ccc;
    }

    .my-form .form-control:focus {
        border-bottom: 2px solid #2196F3;
        box-shadow: none;
    }

    .my-form .form-control:disabled {
        background-color: #eee;
    }

    .my-form .is-valid {
        border-bottom: 2px solid #4CAF50;
        box-shadow: none;
    }

    .my-form .is-invalid {
        border-bottom: 2px solid #F44336;
        box-shadow: none;
    }
</style>

<div class="my-form">
    <div class="form-group">
        <label for="exampleInputName">姓名</label>
        <input type="text" class="form-control" id="exampleInputName" placeholder="请输入姓名">
    </div>

    <div class="form-group">
        <label for="exampleFormControlSelect1">城市</label>
        <select class="form-control" id="exampleFormControlSelect1">
            <option>北京</option>
            <option>上海</option>
            <option selected>广州</option>
            <option>深圳</option>
        </select>
    </div>

    <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">
            选项一
        </label>
    </div>

    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
        <label class="form-check-label" for="defaultCheck1">
            默认选项
        </label>
    </div>
</div>