Bootstrap教程(9)--使用表单控件

向右看齐 2022-10-31 04:06 14阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 概述
 *  2. 基本输入控件
 *  3. 调整表单控件的大小
 *  4. 表单控件的特殊用法
 *   *  4.1 单选框用法
     *  4.2 复选框用法
 *  5. 小结

# 1. 概述 #

表单控件用来获取表单中输入的信息，HTML5提供了各种不同的表单控件，而在Bootstrap中这些控件的样式得到了进一步的加强。

# 2. 基本输入控件 #

在Bootstrap中，只需为基本输入控件添加`.form-control`类，即可将控件的样式设置为Bootstrap提供的预设样式。接下来我们用一个实例来展示下常用的输入控件。

<div class="col-md-12">
                    <form action="#" class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-md-3">文本框:</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">密码框:</label>
                            <div class="col-md-9">
                                <input type="password" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">单选框:</label>
                            <div class="col-md-9">
                                <input type="radio" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">复选框:</label>
                            <div class="col-md-9">
                                <input type="checkbox" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">文本域:</label>
                            <div class="col-md-9">
                                <textarea rows="10" class="form-control"></textarea>
                            </div>
                        </div>
                    </form>
                </div>

对应效果如下，可见Bootstrap对样式进行了优化，但是对功能是没啥影响的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]

# 3. 调整表单控件的大小 #

有时候我们需要手工调整控件的大小，主要是设置控件的宽度和高度。

一般我们为了提供响应式的实现效果，对宽度的调节是通过调节`.col-md-*`网格类实现的。

而对于高度的调节，除了默认的大小，BootStrap还提供了`.input-lg`、`.input-sm`类，来提供大号、小号的显示效果。

代码如下：

<div class="col-md-12">
                    <form action="#" class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-md-3">正常:</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">大号:</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control input-lg">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">小号:</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control input-sm">
                            </div>
                        </div>
                    </form>
                </div>

效果如下：  
![在这里插入图片描述][20210221085240416.png_pic_center]

# 4. 表单控件的特殊用法 #

Bootstrap还针对单选框、复选框提供了特殊用法，使这些控件使用起来更加符合用户习惯。

## 4.1 单选框用法 ##

在上面的示例中，单选框的描述文字在左侧，单选按钮在右侧。

而在实际使用场景中，一般是单选框在左侧，而相应的描述文字在右侧，所以Bootstrap提供了`.radio`样式，用于包裹单选按钮及其描述。代码如下：

还可使用`.radio-inline`样式创建内联的单选框组，代码如下：

上述两段代码效果如下：![在这里插入图片描述][20210221092917608.png_pic_center]

## 4.2 复选框用法 ##

复选框的用法与单选框类似，Bootstrap提供了`.checkbox`和`.checkbox-inline`样式用来设置复选框的样式。代码如下：

对应效果如下：

![在这里插入图片描述][20210221093154556.png_pic_center]

# 5. 小结 #

Bootstrap为表单控件提供了几个样式，使表单控件的显示更加规范且符合用户习惯，简单且优雅，极具实用和借鉴价值。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/aeb294538972481388f27fff644ca004.png
[20210221085240416.png_pic_center]: /images/20221024/20432f61d72c49fca90d239a897a7859.png
[20210221092917608.png_pic_center]: /images/20221024/ae68a031bfe74a3faf84ac328f6030ae.png
[20210221093154556.png_pic_center]: /images/20221024/9a68f2c570324bd2922cee76dc040008.png