Bootstrap教程(10)--使用输入组来组合控件

Dear 丶 2022-10-31 04:10 103阅读 0赞

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

### 本文目录 ###

*  1. 概述
 *  2. 使用输入组
 *  3. 调整输入组的大小
 *  4. 小结

# 1. 概述 #

Bootstrap还提供了一种组合使用表单控件的方式，即输入组。可以为输入控件添加前置、后置的补充内容。

注意补充内容可以是文本，也可以是其他表单控件。

# 2. 使用输入组 #

输入组的使用并不复杂，通过`.input-group`类修饰的元素包裹输入控件，然后在输入控件的前、后添加`.input-group-addon`类修饰的元素即可。

代码如下：

效果如下，可见使用输入组后，确实样式好看了许多。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]

# 3. 调整输入组的大小 #

输入组同样可以通过设置样式类，来调整整个输入组元素的大小。

代码如下，我们为输入组设置了`.input-group-lg`和`.input-group-sm`。

对比效果如下，左上角为默认尺寸，左下角为大号尺寸，右下角为小号尺寸。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 1]

# 4. 小结 #

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/66012477fbed48a68c9900b8d6db8c7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221024/d2b4241bc16a499b9e6367fe52d491ce.png