Bootstrap（补）form表单与input的具体学习

这篇blog是对第二章的补充：如题。

废话不多说，从代码开始分析：

<form class="form-inline">
		<div class="form-group has-success">
			<label class="control-label">这是一个输入框：</label>
			<input type="text" class="form-control input-sm" name="" placeholder="这是一个输入框">
		</div>
		<div class="form-group has-warning">
			<label class="control-label">这是一个选择框：</label>
			<select class="form-control">
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
			</select>
		</div>
		<div class="form-group has-error">
			<label class="control-label">这是一个输入框：</label>
			<input type="text" class="form-control" name="">
		</div>
		<div class="form-group has-danger">
			<label class="control-label">这是一个输入框：</label>
			<textarea class="form-control"></textarea>
		</div>
	</form>

 

上述是全部代码，效果图如下：可以在上图看到，总共使用了4个组件，各个组件的颜色各不相同:

开始：

 

<form class="form-inline">

一个完整的form表单由<form></form>标签起始，bootstrap对表单的样式做了定义，这里使用了form-inline的类作为约束，意思是将form中的各个组件置于一行之内（目前我接触到了这一种）。一般来说，form中的属性有如下几种

<form class="form-inline" method=“post” action=“{URL}”>

method是约束表单的提交方式为post，action是制定一个URL，可以用于连接后台处理文件例如PHP，进行数据提交处理。

普通文本输入框：

<div class="form-group has-success">
    <label class="control-label">这是一个输入框：</label>
    <input type="text" class="form-control input-sm" name="" placeholder="这是一个输入框">
</div>

代码里的type中的类型是text，class中的样式有这么几种：form-control 字面意思是表单控制，约束了基本的input的表单内的input样式，基本的样式是点击输入框，输入框变为蓝色发光。其中的 的label标签为提示标签。在这段代码中，首先由一个div将所有元素包裹，其中div的class包括两个类，form-group 和 has-success。form-group 将此div定义为form表单中的元素，has-success定义了div中所有元素为success样式，因此input的样式为绿色，而其中的input-sm定义的是small类型的输入框，即小框的输入框。在label标签中，class为control-label，意味着使label标签可控，可以跟随着外层div样式进行改变，所以我们可以看到，label和input都为绿色。

select选择框：

<div class="form-group has-warning">
    <label class="control-label">这是一个选择框：</label>
    <select class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
</div>

在select的div中，和上述的div一样，使用的是has-warning（警告）,同样，label也是用的是control-label 

以下相同。