Bootstrap框架之表单格式与字体图标的用法

这篇文章主要介绍了Bootstrap框架之表单格式与字体图标的用法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

成都创新互联从2013年创立,是专业互联网技术服务公司,拥有项目网站设计制作、做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元涟水做网站,已为上家服务,为涟水各地企业和个人服务,联系电话:028-86922220

表单格式

.form-group :表单组(label 标签和输入框尽量使用这个类包围起来)

.form-control:给input,textarea 和 select 元素都将被默认设置宽度属性为width:100% 圆角边框

.form-inline :内联表单,是给 form 这个标签设置的,让里面的框变为值水平排列

.form-horizontal:水平排列的表单,通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了

.sr-only :它是主要给 label 来设置,将 label 隐藏起来

一个简单的登陆框

		
			
				
				用户名
				

密码 

是否同意

提交

这里的 control-label 是给 label 同步 input  的样式

字体图标

出于性能的考虑,所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格。具体字体图标,请访问Bootstrap中文网(https://v3.bootcss.com/components/)查询。

感谢你能够认真阅读完这篇文章,希望小编分享的“Bootstrap框架之表单格式与字体图标的用法”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


分享标题:Bootstrap框架之表单格式与字体图标的用法
标题链接:http://ybzwz.com/article/jhhdco.html