深入学习Bootstrap表单

本文知识点借鉴来自nofollow" target="_blank" href="http://www.runoob.com/bootstrap/bootstrap-forms.html">http://www.runoob.com/bootstrap/bootstrap-forms.html，里面写的比较详细还给出了例子，这里总结一下重点方便记忆。

一、表单布局

1.垂直表单（默认）

向父

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

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

和 <select> <a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a> 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> <a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a><a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a> class .form-inline； 
默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。
使用 class .sr-only，您可以隐藏内联表单的<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>。</p>
<p><span style="color: #800000"><h3>3.水平表单
</h3></p>
<p> 向父 <form> 元素<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a> class .form-horizontal。 
 把<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>和控件放在一个带有 class .form-group 的 <div> 中。 
 向<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a><a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a> 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>二、<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>的表单控件
</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 <a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>
</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，控制它们显示在同一行上。

深入学习Bootstrap表单

一、表单布局

三、表单控件状态

猜你在找的Bootstrap相关文章