html中内联的form,bootstrap3.0教程之表单(form)使用详解 -凯发ag旗舰厅登录网址下载

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

1.基本案例

2.内联表单

3.水平排列的表单

4.被支持的控件

5.静态控件

6.控件状态

7.控件尺寸

8.帮助文本

9.总结

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

复制代码代码如下:

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 和 radiocheckbox用于选择列表中的一个或多个选项，而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@examtryrtyrple.com

password

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

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

复制代码代码如下:

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

复制代码代码如下:

被禁用的fieldset为

设置disabled属性可以禁用中包含的所有控件。

标签的链接功能不受影响

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

跨浏览器兼容性

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

并不支持disabled属性。因此建议在这些浏览器上通过javascript代码来禁用fieldset

复制代码代码如下:

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或其任何父元素，都可很容易的为其设置宽度。

复制代码代码如下:

与50位技术专家面对面20年技术见证，附赠技术全景图

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的html中内联的form,bootstrap3.0教程之表单(form)使用详解的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。