Bootstrap每天必学之表单

Bootstrap每天必学之表单

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

1.基本案例

2.内联表单

3.水平排列的表单

4.被支持的控件

5.静态控件

6.控件状态

7.控件尺寸

8.帮助文本

基本案例

 单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的、和<select>元素都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。</select>

Email address

Password

File input

Example block-level help text here.

Check me out

Submit

两个文本框的宽度的确为100%。并且有三个form-group。

内联表单

为左对齐和inline-block级别的控件设置.form-inline，可以将其排布的更紧凑。

需要设置宽度：在Bootstrap中,input、select和textarea默认被设置为100%宽度。为了使用内联表单，你需要专门为使用到的表单控件设置宽度。

一定要设置label:如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。对于这些内联表单,你可以通过为label设置.sr-only已将其隐藏。

Email address

Password

Remember me

Sign in

水平排列的表单

 通过为表单添加.form-horizontal，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再使用.row了。

Email

Password

Remember me

Sign in

被支持的控件

在表单布局案例中展示了其所支持的标准表单控件。

Input

大部分表单控件、文本输入域控件。包括HTML5支持的所有类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。

注意：有正确设置了type的input控件才能被赋予正确的样式。

文本框示例

复制代码 代码如下:

Textarea

支持多行文本的表单控件。可根据需要改变rows属性。

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即可。

Email

email@example.com

Password

控件状态

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

　　输入焦点

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

复制代码 代码如下:

被禁用的输入框

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

复制代码 代码如下:

被禁用的fieldset

　　为

标签的链接功能不受影响

这个class只改变按钮的外观，并不能禁用其功能。建议自己通过javascript代码禁用链接功能。

跨浏览器兼容性

虽然Bootstrap会将这些样式应用到所有浏览器上，Internet Explorer 9及以下浏览器中的

Disabled input

Disabled select menu

Disabled select

Can't check this

Submit

可将鼠标移到各个控件上进行查看效果。

校验状态

Bootstrap对表单控件的校验状态，如error、warning和success状态，都定义了样式。使用时，添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。

Input with success

Input with warning

Input with error

控件尺寸

通过.input-lg之类的class可以为控件设置高度，通过.col-lg-*之类的class可以为控件设置宽度。

高度尺寸

创建大一些或小一些的表单控件以匹配按钮尺寸。

...

...

...

调整列尺寸

用栅格系统中的列包裹input或其任何父元素，都可很容易的为其设置宽度。

帮助文本

 用于表单控件的块级帮助文本。

复制代码 代码如下:

自己独占一行或多行的块级帮助文本。

本篇文章主要讲解表单中各种控件的样式控制，其中也有看到按钮的简单样式使用，下一篇文章将重点来讲解按钮的样式。

详细内容可以参考：

全面解析Bootstrap表单使用方法（表单样式）

全面解析Bootstrap表单使用方法（表单控件）

全面解析Bootstrap表单使用方法（表单控件状态）

全面解析Bootstraphttp://表单使用方法（表单按钮）

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。