bootstrap中的表单

667 查看

一、最普通最简单的表单形式,代码如下:

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个单元的栅格向右移动两个单元,这样就可以与上面输入框对齐了。效果图为