360SDN.COM

BootStrap干货篇之表单

来源:优才网  2017-09-12 16:56:18    评论:0点击:

表单作为Bootstrap的核心内容,主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。

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

实例:

说明:这里的form-control是对所有的输入控件而言的,源码中将width设置为100%,表示会将这个输入控件占满一整行,form-group是用来对label和input更好的排版的。其中还有form-group-sm,form-group-lg,源码中分别利用这个对带有form-control的控件设置了不同的高度,具体看源码,不过正常情况下还是使用form-group。

内联表单

为<form>元素添加.form-inline类可使其内容左对齐并且表现为inline-block级别的控件。只适用于视口(viewport)至少在768px宽度时(视口宽度再小的话就会使表单折叠)从源码中可以看到对form-inline下的form-group,form-control,form-control-static,input-group,radio,checkbox都是用了 display:inline-block。

注意:

在Bootstrap中,输入框和单选/多选框控件默认被设置为 width:100%;宽度。在内联表单,我们将这些元素的宽度设置为width:auto;。因此,多个控件可以排列在同一行。根据你的布局需求,可能需要一些额外的定制化组件。

一定要有label标签,如果不想要label标签可以设置 .sr-only将其隐藏。如果你没有为每个输入控件设置 label标签,屏幕阅读器将无法正确识别。

对于这些内联表单,你可以通过为label设置.sr-only类将其隐藏。还有一些辅助技术提供label标签的替代方案,比如aria-label、aria-labelledby或title属性。

如果这些都不存在,屏幕阅读器可能会采取使用placeholder属性,如果存在的话,使用占位符来替代其他的标记,但要注意,这种方法是不妥当的。

实例:

水平表单

水平表单通过指定为form指定form-horizontal类来设定,其中可以使用BootStrap的栅栏系统设置水平间距,其中的form-group的div就表示一行了,相当于 <div></div>。

因此只需要在label和input中指定列就行了,但是input标签不能直接使用,要在外面加上div。

实例:

说明:上面的label标签中的control-label主要的作用是设置文字的对齐方式为左对齐,如果不加这个将会在右边出现很大的空白。

多选和单选框

多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个。其中提供的类有checkbox,checkbox-inline, radio,radio-inline。

内联单选和多选框

通过将.checkbox-inline或.radio-inline类应用到一系列的多选框(checkbox)或单选框(radio)控件上,可以使这些控件排列在一行。

实例:

不带label文本的Checkbox和radio

如果需要<label>内没有文字,输入框(input)正是你所期望的。目前只适用于非内联的checkbox和radio。

请记住,仍然需要为使用辅助技术的用户提供某种形式的label(例如,使用aria-label)。

实例:

下拉列表(select)

实例:

静态控件

如果需要在表单中将一行纯文本和label元素放置于同一行,为<p>标签设置为form-control-static

实例:

阅读原文

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权