本文介绍了Bootstrap中关于表单的几种关键样式和布局，包括.form-group用于包裹label和输入框，.form-control用于设置输入框样式，.form-inline和.form-horizontal分别实现内联和水平排列的表单。.sr-only用于隐藏label，但保持其对于屏幕阅读器的可见性。同时，文章提到了Bootstrap的字体图标使用方法，并建议读者访问Bootstrap中文网获取更多图标信息。
表单格式
.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/)查询。
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。
本文转载自中文网
扫一扫
1169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
