Bootstrap每天必学之表单_javascript技巧

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

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