深入学习Bootstrap表单

发布时间：2020-12-18 00:45:52 所属栏目：安全来源：网络整理

导读：本文知识点借鉴来自，里面写的比较详细还给出了例子，这里总结一下重点方便记忆。一、表单布局 1.垂直表单（默认）向父元素添加 role="form"。把标签和控件放在一个带有 class .form-group 的中。这是获取最佳间距所必需的。向所有的文本元素、和添

本文知识点借鉴来自，里面写的比较详细还给出了例子，这里总结一下重点方便记忆。

一、表单布局

1.垂直表单（默认）

向父

元素添加 role="form"。把标签和控件放在一个带有 class .form-group 的

中。这是获取最佳间距所必需的。向所有的文本元素、

和 <select> 添加 class .form-control。
</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<form action="#" role="form"> 
  <div class="form-group"> 
   <lable>姓名：<input class="form-control" type="text"/></lable> 
   <lable>性别：<input class="form-control" type="text"/></lable> 
  </div> 
 </form> 
</pre>
</div>
<p><span style="color: #800000"><h3>2.内联表单
</h3></p>
<p>向 <form> 标签添加 class .form-inline； 
默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。
使用 class .sr-only，您可以隐藏内联表单的标签。</p>
<p><span style="color: #800000"><h3>3.水平表单
</h3></p>
<p> 向父 <form> 元素添加 class .form-horizontal。 
 把标签和控件放在一个带有 class .form-group 的 <div> 中。 
 向标签添加 class .control-label。
</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<form action="#" role="form" class="form-horizontal"> 
  <div class="form-group"> 
   <lable class="control-label col-lg-2">姓名：</lable> 
   <div class=" col-lg-10"><input class="form-control" type="text"/></div> 
<p><lable class="control-label col-lg-2">性别：</lable><br />
<div class="col-lg-10"><input class="form-control " type="text"/></div> </p>
</div> 
 </form> 
</pre>
</div>
<p><h3>二、支持的表单控件
</h3></p>
<p><h3><span style="color: #800000">1.输入框（Input）
</h3></p>
<p><lable>姓名：<input class="form-control" type="text"/></lable> 
</p>
<p><span style="color: #800000"><h3>2.文本框（Textarea） 可改变 rows 属性
</h3></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<div class="form-group"> 
  <textarea rows="8" class="form-control">

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

4.选择框（Select）

使用

5.静态控件

当您需要在一个水平表单内的表单标签后放置纯文本时，请在

上使用 class .form-control-static。

三、表单控件状态

1.输入框焦点

当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。

2.禁用的输入框 input

如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框还，会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

姓名：

3.禁用的字段集 fieldset

对

添加 disabled 属性来禁用

内的所有控件。

4.验证状态

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

5.表单控件大小

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

6.表单帮助文本

Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在后使用 .help-block。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!