单行输入框,常见的文本输入框,也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的。
为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”,如:
<form role="form"><div class="form-group"><inputtype="email"class="form-control" placeholder="Enter email"></div></form>
运行的结果
表单控件(下拉选择框select)
Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格。
<form role="form"><div class="form-group"><select class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div><div class="form-group"><select multiple class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div></form>
运行结果 :
表单控件(文本域textarea)
文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
<form role="form"><div class="form-group"><textarea class="form-control" rows="3"></textarea></div></form>