bootstrap中的表单

1、最普通最简单的表单形式,代码以下:
图片描述
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个单元的栅格向右移动两个单元,这样就能够与上面输入框对齐了。效果图为
图片描述html

相关文章
相关标签/搜索