1、输入框input
bootstrap通过对input标签的type属性进行识别,得到相应的格式,所以input标签一定要对type进行指定。另外,还需通过form-control对输入框进行规范统一,此外,可以用placeholder对框内内容进行初始化。
<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
<input type="text" class="form-control" placeholder="Enter userName">
</div>
</form>
2、下拉选择框
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"> //多行选择multiple
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
3、文本域(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>
网友评论