bootstrap3.0教程之表单(form)使用详解

本文主要讲解的是表单，这个其实对于做过网站的人来说，并不陌生，而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容：

1.基本案例

2.内联表单

3.水平排列的表单

4.被支持的控件

5.静态控件

6.控件状态

7.控件尺寸

8.帮助文本

9.总结

基本案例
单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的、和<select>元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。</p> <p><br><u>复制代码</u>代码如下:<br /><br /><br /><br /><img src="https://img.jbzj.com/file_images/article/201404/20140415142120.jpg?201431514257" alt="" /></p> <p>两个文本框的宽度的确为100%。并且有三个form-group。</p> <p><strong>内联表单</strong></p> <p>为左对齐和inline-block级别的控件设置.form-inline，可以将其排布的更紧凑。</p> <p>需要设置宽度：在Bootstrap中,input、select和textarea默认被设置为100%宽度。为了使用内联表单，你需要专门为使用到的表单控件设置宽度。</p> <p>一定要设置label:如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。对于这些内联表单,你可以通过为label设置.sr-only已将其隐藏。<br /><br><u>复制代码</u>代码如下:<br /><br /><br /><br /><img src="https://img.jbzj.com/file_images/article/201404/20140415142143.jpg?2014315142547" alt="" /></p> <p><strong>水平排列的表单</strong></p> <p> 通过为表单添加.form-horizontal，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再使用.row了。</p> <p><br><u>复制代码</u>代码如下:<br /><br /><br /><br /><img src="https://img.jbzj.com/file_images/article/201404/20140415142154.jpg?201431514267" alt="" /></p> <p><br /><strong>被支持的控件</strong></p> <p>在表单布局案例中展示了其所支持的标准表单控件。</p> <p><strong>Input<br /></strong>大部分表单控件、文本输入域控件。包括HTML5支持的所有类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。</p> <p>注意：有正确设置了type的input控件才能被赋予正确的样式。</p> <p>文本框示例<br /><br><u>复制代码</u>代码如下:<br /><input type="text" placeholder="Text input"><br /><br /><br /><img src="https://img.jbzj.com/file_images/article/201404/20140415142209.jpg?2014315142630" alt="" /></p> <p><strong>textarea</strong></p> <p>支持多行文本的表单控件。可根据需要改变rows属性。<br /><br><u>复制代码</u>代码如下:<br />textarea<br /><textarea rows="3">

Checkbox 和 radio

Checkbox用于选择列表中的一个或多个选项，而radio用于从多个选项中只选择一个。

默认外观(堆叠在一起)

复制代码代码如下:



Option one is this and that—be sure to include why it's great

Option one is this and that—be sure to include why it's great





Option two can be something else and selecting it will deselect option one

Inline checkboxes

通过将.checkbox-inline 或 .radio-inline应用到一系列的checkbox或radio控件上，可以使这些控件排列在一行。

复制代码代码如下:

1


2


3


 
同理Radio是一样的，只需要添加一下样式即可。

Select

复制代码代码如下:

1
2
3
4
5

1
2
3
4
5

静态控件
在水平布局的表单中，如果需要将一行纯文本放置于label的同一行，为

元素添加.form-control-static即可。

复制代码代码如下:

控件状态
通过为控件和label设置一些基本状态，可以为用户提供回馈。

输入焦点

我们移除了某些表单控件的默认outline样式，并对其:focus状态赋予了box-shadow样式。

复制代码代码如下:

被禁用的输入框
 为输入框设置disabled属性可以防止用户输入，并能改变一点外观，使其更直观。

复制代码代码如下:

被禁用的fieldset
为