Bootstrap学习之表单格局与字体图标

本篇文章就给大家介绍BootStrap中的列表组组件，面板组件，响应式嵌入组件。有必然的参照 价值，有需要的伴侣可以参照 一下，但愿对你们有所帮忙。假如大家想要学习和猎取更多的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 潜藏起来

一个简便的登陆框

		<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学习之表单格局与字体图标的具体内容，更多请关注百分百源码网其它相关文章！