Bootstrap每天必学之表单_javascript技巧

1.基本案例
2.内联表单
3.水平排列的表单
4.被支持的控件
5.静态控件
6.控件状态
7.控件尺寸
8.帮助文本

基本案例
单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的、和<select>元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。<br /> </p> <div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><pre class="brush:php;toolbar:false"> </pre></div></div></div></div></div> <p style="text-align: center"><img id="theimg" " onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201511/20151123115326120.png?20151023115335" /></p> <p>两个文本框的宽度的确为100%。并且有三个form-group。<br /> 内联表单<br /> 为左对齐和inline-block级别的控件设置.form-inline，可以将其排布的更紧凑。<br /> 需要设置宽度：在Bootstrap中,input、select和textarea默认被设置为100%宽度。为了使用内联表单，你需要专门为使用到的表单控件设置宽度。<br /> </p> <p> 一定要设置label:如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。对于这些内联表单,你可以通过为label设置.sr-only已将其隐藏。<br /> </p> <div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><pre class="brush:php;toolbar:false"> </pre></div></div></div></div></div> <p style="text-align: center"><img id="theimg" " onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201511/20151123115429540.png?20151023115436" /></p> <p>水平排列的表单<br /> 通过为表单添加.form-horizontal，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再使用.row了。<br /> </p> <div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><pre class="brush:php;toolbar:false"> </pre></div></div></div></div></div> <p style="text-align: center"><img id="theimg" " onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201511/20151123115509519.png?20151023115517" /></p> <p>被支持的控件<br /> 在表单布局案例中展示了其所支持的标准表单控件。<br /> Input<br /> 大部分表单控件、文本输入域控件。包括HTML5支持的所有类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。<br /> 注意：有正确设置了type的input控件才能被赋予正确的样式。<br /> 文本框示例<br /> 代码如下:<input type="text" class="form-control" placeholder="Text input"></p> <p style="text-align: center"><img id="theimg" " onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201511/20151123115647852.png?20151023115654" /></p> <p>Textarea<br /> 支持多行文本的表单控件。可根据需要改变rows属性。 </p> <div class="51ds_code" style="position: relative;"><pre class="brush:php;toolbar:false"> <h2>textarea</h2> <textarea class="form-control" rows="3">