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>