Bootstrap表单及表单布局

r囧r小猫 2023-09-24 16:57 62阅读 0赞

Bootstrap4 支持二种表单布局方式：堆叠表单（垂直方向），内联表单（水平方向）。

# 示例1（堆叠表单） #

![在这里插入图片描述][b614b269291b45daac1f3a3ae83fbb3a.png]  
![在这里插入图片描述][51279cf846574e10afbc46d48e2e63c5.png]

# 示例2（内联表单） #

![在这里插入图片描述][b9ce53c655e842f9b9e37cefc61f1cc1.png]  
![在这里插入图片描述][86afed40b2bb4bd7a618c3d415ecfd58.png]

**如果不满意上面的表单布局，可以通过网格（grid）或者表格（table）进行布局；**  
1、label标签不是必须的，只是为了点击该标签则输入框获得焦点；  
2、样式form-group也不是必须的，只是让段落之间距离增大15px 更好看；  
3、样式form-control作用：宽度100%，圆角，得失焦点后的阴影效果等等。

# 表单控件 #

Bootstrap 支持的表单控件：主要是 input、textarea、checkbox、radio 和 select。  
其中“文本框input”支持的类型相当丰富：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color  
![在这里插入图片描述][5b2692b252bf4579a3037d6acf4a259d.png]

# 表单示例 #

![在这里插入图片描述][71a2b980a29d4b11933174f539c12a83.png]  
![在这里插入图片描述][f0116d149c5940fba6e0fe574c682609.png]

[b614b269291b45daac1f3a3ae83fbb3a.png]: https://img-blog.csdnimg.cn/b614b269291b45daac1f3a3ae83fbb3a.png
[51279cf846574e10afbc46d48e2e63c5.png]: https://img-blog.csdnimg.cn/51279cf846574e10afbc46d48e2e63c5.png
[b9ce53c655e842f9b9e37cefc61f1cc1.png]: https://img-blog.csdnimg.cn/b9ce53c655e842f9b9e37cefc61f1cc1.png
[86afed40b2bb4bd7a618c3d415ecfd58.png]: https://img-blog.csdnimg.cn/86afed40b2bb4bd7a618c3d415ecfd58.png
[5b2692b252bf4579a3037d6acf4a259d.png]: https://img-blog.csdnimg.cn/5b2692b252bf4579a3037d6acf4a259d.png
[71a2b980a29d4b11933174f539c12a83.png]: https://img-blog.csdnimg.cn/71a2b980a29d4b11933174f539c12a83.png
[f0116d149c5940fba6e0fe574c682609.png]: https://img-blog.csdnimg.cn/f0116d149c5940fba6e0fe574c682609.png