bootstrap表单学习笔记3-1
2015-12-17 15:31
721 查看
表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包
括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同,而且不同的浏览器对
表单控件渲染的风格都各有不同。
同样,表单也是Bootstrap框架中的核心内容,下面向大家介绍Bootstrap框架中表单的***。
表单源码查询
Bootstrap框架的表单,其源码占据了大量的代码,同样的,根据不同的Bootstrap版本,你可以轻松获取相应的源码:
☑ LESS版本:对应源文件 forms.less
☑ Sass版本:对应源文件 _forms.scss
编译后的Bootstrap版本,可以查阅bootstrap.css文件第1630行~第1991行
不过在样式表中,还对表单做了一些初始化,详细代码可以查阅bootstrap.css文件第110行~第178行。
对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset、legend、label标签进行了定制。如:
/*源码请查阅bootstrap.css文件第1631行~第1652行*/
当然表单除了这几个元素之外,还有input、select、textarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。
1、宽度变成了100%
2、设置了一个浅灰色(#ccc)的边框
3、具有4px的圆角
4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
详细请查阅bootstrap.css文件第1690行~第1732行。
运行效果如下或查看右侧结果窗口:
括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同,而且不同的浏览器对
表单控件渲染的风格都各有不同。
同样,表单也是Bootstrap框架中的核心内容,下面向大家介绍Bootstrap框架中表单的***。
表单源码查询
Bootstrap框架的表单,其源码占据了大量的代码,同样的,根据不同的Bootstrap版本,你可以轻松获取相应的源码:
☑ LESS版本:对应源文件 forms.less
☑ Sass版本:对应源文件 _forms.scss
编译后的Bootstrap版本,可以查阅bootstrap.css文件第1630行~第1991行
不过在样式表中,还对表单做了一些初始化,详细代码可以查阅bootstrap.css文件第110行~第178行。
对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset、legend、label标签进行了定制。如:
/*源码请查阅bootstrap.css文件第1631行~第1652行*/
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; padding: 0; margin-bottom: 20px; font-size: 21px; line-height: inherit; color: #333; border: 0; border-bottom: 1px solid #e5e5e5; } label { display: inline-block; margin-bottom: 5px; font-weight: bold; }主要将这些元素的margin、padding和border等进行了细化设置。
当然表单除了这几个元素之外,还有input、select、textarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。
1、宽度变成了100%
2、设置了一个浅灰色(#ccc)的边框
3、具有4px的圆角
4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
详细请查阅bootstrap.css文件第1690行~第1732行。
运行效果如下或查看右侧结果窗口:
相关文章推荐
- Bootstrap Tooltip显示换行和左对齐
- bootstrap菜单、按钮及导航学习笔记5-3
- datetimepicker-bootstrap默认年份1899修改问题
- bootstrap菜单、按钮及导航学习笔记5-2
- bootstrap菜单、按钮及导航学习笔记5-1
- 【Boots学习笔记】Bootstrap学习
- bootstrap ace admin 整合java HTML5 全新高大尚后台框架
- bootstrap学习笔记-列偏移
- Angular - - angular.bind、angular.bootstrap、angular.copy
- 【SSM框架 SSM项目源码 SSM源码 下载】java框架整合Springmvc+mybatis+shiro+bootstrap
- bootstrap栅格系统学习笔记
- angular bootstrap
- 真当程序猿眼中只有美女和高薪?
- dart web 模板 ( 一 ) [基于 SB Admin2 Bootstrap]
- Bootstrap 笔记
- Stucts应用引起的OutOfMemoryError
- Bootstrap响应式图片的进一步处理
- Bootstrap Glyphicons 图标
- bootstrap table处理含有子集json的数据以及fastjson禁止循环引用的问题
- Django+Jquery+Bootstrap Modal+Iframe使用异步机制上传文件实现方法