完全深入学习Bootstrap表单

前端之家收集整理的这篇文章主要介绍了完全深入学习Bootstrap表单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言:由于表单的元素比较多,因此将Bootstrap的表单单独做个总结,表单作为Bootstrap的核心内容,主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

一、基础表单

具体解释:

(1)对于form标签的role属性,只是为了增强语义性,并无其他作用;

(2)给div设定.form-group类名,是为了让每个输入框上下间隔一定的距离,不然两个就会挨着;

(3)还有label的for属性和input的id必须同名,是为了标识它俩是一组,且当鼠标点击label标签时,光标会自动锁定到输入框,不用for属性时也可这样写:

(4)给form添加.form-control类: 1.宽度100%显示; 2.设置了一个浅灰色(#ccc)的边框; 3.具有4px的圆角; 4.设置阴影效果,并且元素得到聚焦时,阴影和边框效果会有所变化;

二、水平表单(标签在左,输入框在右)

具体解释:

在form标签上使用类.form-horizontal主要有以下作用: 1、设置表单控件padding和margin值; 2、改变“form-group”的表现形式,类似于网格系统的“row”; 在使用时必须和网格系统配合使用,才能实现水平方向的效果,对于不同宽度的设备显示不同的布局,使用时可以调节浏览器的大小看不同的效果,当浏览器大小小于某个值就会呈垂直显示

三、内联表单(表单控件都在一行显示

具体解释: 有时我们会用到在网页顶部的导航栏输入用户名和密码,这时就需要在一行显示,此时给form标签添加.form-inline类就可轻而易举的实现;同时当改变显示设备大小时就会自动发生换行,呈普通表单的样式。

四、表单的基本元素

1、input元素:加上类.form-control就可以实现最基本的输入框样式

(1)基本输入框

(2)比基本大的输入框

(3)比基本小的输入框

2、 textarea元素:加上类.form-control可以不用设置cols属性值,此时标签宽度为100%

3.、select元素:与原始一致,作为下拉选择框,可以实现多行选择和单行选择,加上.form-control类只是为了同一风格

222

4.、复选框checkBox和单选按钮radio

(1)给checkBox和radio专门写了.checkBox和.radio这两个类,是为了解决对齐问题,下面的代码是垂直显示

Box">
Box">
dio">
dio">
`

(2)复选框和单选框水平显示,此时不需要.checkBox和.radio类,但是要配合.form-group类同时使用,给label标签加上.check-inline或.radio-inline类即可

Box-inline"> Box" value="option1">游戏
dio-inline"> dio" value="option1" name="sex">男性

五、表单的验证

Feedback">
Feedback">
Feedback"> 错误状态"> 错误的 Feedback">

具体解释: 给div加上不同的类,如.has-warning警告状态,显示为黄色,.has-error错误状态,显示为红色,.has-success成功状态,显示为绿色;第一个span的.help-block为提示信息;第二个span加上后面的一长串类名,是为了在输入框后面提示不同的图标,其中.form-control-Feedback必须和div的.has-Feedback一同使用,不然图标不能显示在输入框内部。

总结:以上介绍了表单的不同显示样式,以及表单的具体的一些标签,个人觉得作为框架,最主要的是它的嵌套结构,在用时需要知道哪个标签里嵌套哪个标签。想要不同的风格,可以加入自己的css样式,总之灵活运用吧!

原文链接:https://www.f2er.com/bootstrap/44104.html

猜你在找的Bootstrap相关文章