Bootstrap表单控件学习使用       这篇文章教大家学习使用Bootstrap表单控件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。
Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

 form role="form" 
 div 
 label for="name" 标签 /label 
 input type="text" id="name" placeholder="文本输入" 
 /div 
 /form 

文本框（Textarea）

当您需要进行多行输入的时，则可以使用文本框 textarea。
必要时可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。（超过这个值就会产生滚动条）

 form role="form" 
 div 
 label for="name" 文本框 /label 
 textarea id="name" rows="3" /textarea 
 /div 
 /form 

复选框（Checkbox）和单选框（Radio）

（1）复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。
（2）当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。
（3）对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

 label for="name" 默认的复选框和单选按钮的实例 /label 
 div 
 label 
 input type="checkbox" value="" 选项1
 /label 
 /div 
 div 
 label 
 input type="checkbox" value="" 选项2
 /label 
 /div 
 div 
 label 
 input type="checkbox" value="" 选项3
 /label 
 /div 
 div 
 label 
 input type="radio" name="optionsRadios" id="optionsRadio1" value="options1" checked 选项1
 /label 
 /div 
 div 
 label 
 input type="radio" name="optionsRadios" id="optionsRadio2" value="options2" checked 选项2- 选择它将会取消选择选项 1
 /label 
 /div 

 label for="name" 内联的复选框和单选按钮的实例 /label 
 div 
 label 
 input type="checkbox" value="" 选项1
 /label 
 label 
 input type="checkbox" value="" 选项2
 /label 
 label 
 input type="checkbox" value="" 选项3
 /label 
 label 
 input type="radio" name="optionsRadios" id="optionsRadio1" value="options1" checked 选项1
 /label 
 label 
 input type="radio" name="optionsRadios" id="optionsRadio2" value="options2" checked 选项2
 /label 
 /div 

选择框（Select）
（1）当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。
（2）使用 select 展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。
（3）使用 multiple=”multiple” 允许用户选择多个选项。

 form role="form" 
 div name" 选择列表 /label 
 select 
 option 1 /option 
 option 2 /option 
 option 3 /option 
 option 4 /option 
 option 5 /option 
 /select 
 label for="name" 可多选的选择列表 /label 
 select multiple 
 option 1 /option 
 option 2 /option 
 option 3 /option 
 option 4 /option 
 option 5 /option 
 /select 
 /div 
 /form 

静态控件

需要在一个水平表单内的表单标签后放置纯文本时，请在 p 上使用 class .form-control-static。

 form role="form" 
 div 
 label Email /label 
 div 
 p email /p 
 /div 
 /div 
 div 
 label for="inputPassword" 密码 /label 
 div 
 input type="password" id="inputPassword" placeholder="请输入密码" 
 /div 
 /div 
 /form 

表单控件状态

（1）除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。
（2）输入框焦点：当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。
（3）禁用的输入框 input：如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。
（4）禁用的字段集 fieldset：对 fieldset 添加 disabled 属性来禁用 fieldset 内的所有控件。
（5）验证状态：Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .ess）即可使用验证状态。

 form role="form" 
 div 
 label 聚焦 /label 
 div 
 input id="focusedInput" type="text" value="该输入框获得焦点..." 
 /div 
 /div 
 div 
 label for="inputPassword" 禁用 /label 
 div 
 input id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled 
 /div 
 /div 
 fieldset disabled 
 div 
 label for="disabledTextInput" 禁用输入（Fieldset disabled） /label 
 div 
 input type="text" id="disabledTextInput" placeholder="禁止输入" 
 /div 
 /div 
 div 
 label for="disabledSelect" 禁用选择菜单（Fieldset disabled） /label 
 div 
 select id="disabledSelect" 
 option 禁止选择 /option 
 /select 
 /div 
 /div 
 /fieldset 
 div 
 label for="ess" 输入成功 /label 
 div 
 input type="text" id="ess" 
 /div 
 /div 
 div 
 label for="inputWarning" 输入警告 /label 
 div 
 input type="text" id="inputWarning" 
 /div 
 /div 
 div 
 label for="inputError" 输入错误 /label 
 div 
 input type="text" id="inputError" 
 /div 
 /div 
 /form 

表单控件大小

可以分别使用 class .input-lg 和 .col-lg-* ( input )来设置表单的高度和宽度。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。

• 上一篇：微信报名小程序_详谈javascript精度问题与调整
• 下一篇：没有了