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 隐藏起来

一个简单的登陆框

		p class="container">
    			form action="#" method="post" class="form-horizontal">
    				p class="form-group">
    				label for="user" class="col-lg-2 control-label">
    用户名/label>
    				p class="col-lg-10">
    input tyPE="text" name="user" id="user" value="" class="form-control" />
    /p>
    				/p>
    				p class="form-group">
    				label for="pd" class="col-lg-2 control-label">
    密码/label>
     				p class="col-lg-10">
    input type="password" name="pd" id="pd" value="" class="form-control" />
    /p>
    				/p>
    				p class="form-group col-lg-5 col-lg-offset-5">
    				p class="col-lg-5 col-lg-offset-5"">
    				input type="checkbox" name="" id="cx" value="" />
    				label for="cx">
    是否同意/label>
    				/p>
    				p class="col-lg-2 col-lg-offset-5">
    				button type="submIT" class="BTn btn-success">
    提交/button>
    				/p>
    			/form>
    		/p>
    

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

字体图标

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

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

以上就是Bootstrap学习之表单格式与字体图标的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！