Bootstrap learning form format and font icons

This article will introduce you to the list group component, panel component, and responsive embedded component in BootStrap. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. If you want to learn and get more bootstrap related video tutorials, you can also visit: bootstrap tutorial!

Form format

.form-group: Form group (label labels and input boxes should be surrounded by this class as much as possible)

.form-control : For input, textarea and select elements, the width attribute will be set to width:100% by default. Rounded border

.form-inline: Inline form is set for the form tag, so that the box inside Become a horizontal arrangement of values ​​

.form-horizontal: For a form that is arranged horizontally, by adding the .form-horizontal class to the form and using Bootstrap's preset grid class, the label labels and control groups can be grouped horizontally Layout side by side. Doing this will change the behavior of .form-group so that it behaves as a row in the grid system, so there is no need to add an additional .row

.sr-only: It is mainly used for label To set, hide the label

A simple login box

		<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>

The control-label here is the style for label synchronization input

Font Icons

For performance reasons, all icons require a base class and a class corresponding to each icon. Put the following code and it will work fine anywhere. Note that in order to set correct padding, be sure to add a space between the icon and the text. For specific font icons, please visit the Bootstrap Chinese website (https://v3.bootcss.com/components/).

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of Bootstrap learning form format and font icons. For more information, please follow other related articles on the PHP Chinese website!