多平台统一管理软件接口，如何实现多平台统一管理软件接口
295
2023-07-17
Bootstrap所支持的表单控件实例详解
Bootstrap所支持的表单控件实例详解
Bootstrap所支持的表单控件如下所示：
Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。
输入框（Input）
最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。
结果如下所示：
文本框（Textarea）
当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性。
结果如下所示：
复选框（（Checkbox）和单选框（Radio）
复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。
当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。
对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。
下面的实例演示了这两种类型（默认和内联）：
fyUkm
value="option1" checked> 选项 1
value="option2">
选项 2 - 选择它将会取消选择选项 1
选项 1
选项 2
选项 3
value="option1" checked> 选项 1
value="option2"> 选项 2
结果如下所示：
复选框和单选按钮
当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。
使用
使用 multiple="multiple" 允许用户选择多个选项。
下面的实例演示了这两种类型（select 和 multiple）：
结果如下所示：
静态控件
当您需要在一个水平表单内的表单标签后放置纯文本时，请在 <http://;p> 上使用 class .form-control-static。
email@example.com
placeholder="请输入密码">
结果如下所示：
表单控件状态
除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。
输入框焦点
当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。
禁用的输入框 input
如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。
禁用的字段集 fieldset
对
验证状态
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
value="该输入框获得焦点...">
禁用
placeholder="该输入框禁止输入..." disabled>
禁用输入（Fieldset disabled）
placeholder="禁止输入">
禁用选择菜单（Fieldset disabled）
输入成功
输入警告
输入错误
结果如下所示：
表单控件大小
可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。下面的实例演示了这点：
placeholder=".input-lg">
placeholder=".input-sm">
结果如下所示：
我们给大家推荐相关专题：
BootStrap组fyUkm件操作技巧
Bootstrap 相关知识汇总
以上就是bootstrap所支持的表单控件。大家都看明白了，有任何疑问欢迎给我留言，会及时回复大家的，同时也非常感谢大家对我们网站的支持
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
暂时没有评论，来抢沙发吧~