bootstrap中的表单

一、最普通最简单的表单形式，代码如下：

1.<label>标签用于标识需要输入内容的名称类别，其中placeholder 属性提供可描述输入字段预期值的提示信息。通过在<label>中添加class="sr-only",<label>标签内的内容可隐藏。将 label 元素包裹在 .form-group 中可以获得最好的排列。
2.<input>标签用于盛装用户输入内容，在该标签中加入class="form-control"，边框会出现圆角的效果，会好看一些。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。通过type属性规定输入类型。
效果图为

3.若将表单设置为内联表单（内联就是放在html页面内部的样式表，外联就是与html页面分离的外部样式表。内联的直接写在页面里，外联的需要引入）只需在<form>中添加class="form-inline"
效果图为

二.最常见的水平表单形式，代码如下：

与上面代码比较一下便知，其实就是将<form>标签中的class更改为class="form-horizontal"，变为水平表单，即<label>标签的内容和输入框是水平方向的。效果图为

由上图可知，输入框不对称不好看，下面我们利用bootstrap提供的栅格系统将它们重定位，代码如下：

我们知道，整个屏幕能承载的栅格是12个单元。在这里我们给<label>分配了两个单元，即class="col-lg-2"（针对于手机是"col-xs-2"，针对于pad是"col-sm-2"，针对于小型显示器是"col-md-2"，针对于大型显示器是"col-lg-2"）我们给<input>盛装在<div>中，分配10个单元，即class="col-lg-10"。上述代码对应的效果图为

我们在加上复选框和一个登录按钮，代码如下：

通过设置class="col-lg-offset-2 col-lg-10"将占有10个单元的栅格向右移动两个单元，这样就可以与上面输入框对齐了。效果图为