0

0

完全深入学习Bootstrap表单

高洛峰

高洛峰

发布时间:2016-12-03 16:38:27

|

1782人浏览过

|

来源于php中文网

原创

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

一、基础表单

具体解释: 

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

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

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

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

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

具体解释: 

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

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

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

PHP 网络编程技术与实例(曹衍龙)
PHP 网络编程技术与实例(曹衍龙)

PHP网络编程技术详解由浅入深,全面、系统地介绍了PHP开发技术,并提供了大量实例,供读者实战演练。另外,笔者专门为本书录制了相应的配套教学视频,以帮助读者更好地学习本书内容。这些视频和书中的实例源代码一起收录于配书光盘中。本书共分4篇。第1篇是PHP准备篇,介绍了PHP的优势、开发环境及安装;第2篇是PHP基础篇,介绍了PHP中的常量与变量、运算符与表达式、流程控制以及函数;第3篇是进阶篇,介绍

下载

四、表单的基本元素 

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

(1)基本输入框

(2)比基本大的输入框

(3)比基本小的输入框

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