整理关于Bootstrap表单的慕课笔记

前端之家收集整理的这篇文章主要介绍了整理关于Bootstrap表单的慕课笔记前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

整理自慕课笔记

基础表单

表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同。 对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset、legend、label标签进行了定制。主要将这些元素的margin、padding和border等进行了细化设置。 当然表单除了这几个元素之外,还有input、select、textarea等元素,在Bootstrap框架中,通过定制了一个类名form-control,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果

1、宽度变成了100% 2、设置了一个浅灰色(#ccc)的边框 3、具有4px的圆角 4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化 5、设置了placeholder的颜色为#999

水平表单

Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右)见下图。

这里写图片描述

在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1、在元素是使用类名“form-horizontal”。 2、配合Bootstrap框架的网格系统。(网格布局会在以后的章节中详细讲解)

在元素上使用类名“form-horizontal”主要有以下几个作用: 1、设置表单控件padding和margin值。 2、改变“form-group”的表现形式,类似于网格系统的“row”。

内联表单

有时候我们需要将表单的控件都在一行内显示,类似这样的:

这里写图片描述

在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在元素中添加类名“form-inline”即可。 内联表单实现原理非常简单,欲将表单控件在一行显示,就需要将表单控件设置成内联块元素(display:inline-block)。

注意:那么Bootstrap为什么要这么做呢?这样不是多此一举吗?其实不是的,如果没有为输入控件设置label标签,屏幕阅读器将无法正确识别。这也是Bootstrap框架另一个优点之处,为残障人员进行了一定的考虑。

表单控件(输入框input)

单行输入框,常见的文本输入框,也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过inputtype=“?”的形式来定义样式的。 为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”,如:

表单控件(下拉选择框select)

Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格。如:

1
1

表单控件(文本域textarea)

文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

表单控件(复选框checkBox和单选择按钮radio)

Bootstrap框架中checkBox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkBox和radio与label标签配合使用会出现一些小问题(最头痛的是对齐问题)。使用Bootstrap框架,开发人员无需考虑太多,只需要按照下面的方法使用即可。

Box">
dio">
dio">

从上面的示例,我们可以得知:

1、不管是checkBox还是radio都使用label包起来了 2、checkBox连同label标签放置在一个名为“.checkBox”的容器内 3、radio连同label标签放置在一个名为“.radio”的容器内

在Bootstrap框架中,主要借助“.checkBox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式

表单控件(复选框和单选按钮水平排列)

有时候,为了布局的需要,将复选框和单选按钮需要水平排列。Bootstrap框架也做了这方面的考虑: 1、如果checkBox需要水平排列,只需要在label标签添加类名“checkBox-inline” 2、如果radio需要水平排列,只需要在label标签添加类名“radio-inline”

表单控件(按钮)

input[type=“submit”

input[type=“button”

input[type=“reset”

在Bootstrap框架中的按钮都是采用

这里写图片描述

据说对于整个禁用的域中,如果legend中有输入框的话,这个输入框是无法被禁用的。

表单控件状态(验证状态)

在制作表单时,不免要做表单验证。同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果。 1、.has-warning:警告状态(黄色) 2、.has-error:错误状态(红色) 3、.has-success:成功状态(绿色) 使用的时候只需要在form-group容器上对应添加状态类名。

错误状态 错误状态">

这里写图片描述

效果可以看出,三种状态下效果都是一样的,只是颜色不一样而以。 其他两种状态省略源码不在此展示。 很多时候,在表单验证的时候,不同的状态会提供不同的 icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来,只需要在对应的状态下添加类名“has-Feedback”。请注意,此类名要与“has-error”、“has-warning”和“has-success”在一起:

Feedback">
Feedback"> ......
Feedback"> ......

这里写图片描述

效果图中可以看出,图标都居右。在 Bootstrap 的小图标都是使用@font-face来制作(后面的内容中将会着重用一节内容来介绍)。而且必须在表单中添加了一个 span 元素:

Feedback">

表单提示信息

平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个”help-block”样式,将提示信息以块状显示,并且显示在控件底部

Feedback">

这里写图片描述

提示信息,其使用了类名“help-inline”。一般让提示信息显示在控件的后面,也就是同一水平显示。如果你想在BootstrapV3.x版本也有这样的效果,你可以添加这段代码

如果你不想为bootstrap.css增加自己的代码,而且设计又有这种样的需求,那么只能借助于Bootstrap的网格系统。(网格系统在后面的章节中会详细讲解)

这里写图片描述

结束语:有关于Bootstrap框架中表单的运用除了按钮部分,到此就算是介绍完了。如果你觉得这样的表单效果并不是你需要的,你完全可以通过forms.less或者_forms.scss文件进行定制,然后重新编译就可以得到你需要的表单效果。在接下来的一节中,我们Bootstrap框架中另一个核心内容——按钮。

按钮

按钮也是Bootstrap框架核心内容之一。因为按钮是Web制作中不可缺少的东西。而且不同的Web页面具有不同的按钮风格,甚至说同一个Web网站或应用程序具有多种按钮风格,比如说不同的按钮颜色、大小和状态等。那么Bootstrap框架也考虑了这些因素,接下来的内容我们一起来探讨Bootstrap框架中的另一核心部分内容——按钮。

基本按钮

Bootstrap框架V3.x版本的基本按钮和V2.x版本的基本按钮一样,都是通过类名“btn”来实现。不同的是在V3.x版本要简约很多,去除了V2.x版本中的大量的CSS3中的部分特效,比如说文本阴影(text-shadow)、渐变背景(background-image)、边框阴影(Box-shadow)等。 难能可贵的是,Bootstrap框架中的考虑了不同浏览器的解析差异,进行了比较安全的兼容性处理,使按钮效果在不同的浏览器中所呈现的效果基本相同。 Bootstrap框架的按钮使用非常的简单,使用方式如下:

Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。 使用默认按钮风格也非常的简单,只需要在基础按钮“btn”的基础上增加类名“btn-default”即可:

标签支持

一般制作按钮除了使用

在介绍按钮开篇就说过,Web页面可能会有不同的按钮风格。那么在Bootstrap框架也考虑了。在Bootstrap框架中除了默认的按钮风格之外,还有其他六种按钮风格,每种风格的其实都一样,不同之处就是按钮的背景颜色、边框颜色和文本颜色。 在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现,在使用过程中,开发者只需要选择不同的类名即可:

这里写图片描述

这里写图片描述

方法,只需要在基础按钮“.btn”基础上追加对应的类名,就可以得到需要的按钮风格。如:

运行效果如下或查看右侧结果窗口:

这里写图片描述

按钮大小

上一节介绍了按钮的定制风格,也就是如何实现Web页面中多种风格按钮。在Bootstrap框架中,对于按钮的大小,也是可以定制的。类似于input一样,通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。 在Bootstrap框架中提供了三个类名来控制按钮大小:

这里写图片描述

修改按钮的padding、line-height、font-size和border-radius几个属性。 那么在实际使用中,这几个类名可以配合按钮中其他颜色类名一起使用,但唯一一点不能缺少“.btn”类名:

块状按钮

从前面几节的内容中,大家可能发现了,每个示例中的按钮宽度都是依靠按钮文本和padding的值来决定。但有时候在制作按钮的时候需要按钮宽度充满整个父容器(width:100%),特别是在移动端的制作中。那么前面的方法我们都无法很好的实现,除非重新定义按钮的宽度。其实在Bootstrap中并不需要这样做,Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。在实际当中,常把这种按钮称为块状按钮。 使用方法和前面的类似,只需要在原按钮类名上添加“.btn-block”类名,当然“.btn”类名是不可或缺的:

按钮状态——活动状态

Bootstrap框架针对按钮的状态做了一些特殊处理。在Bootstrap框架中针对按钮的状态效果主要分为两种:活动状态和禁用状态。 Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover),点击状态(:active)和焦点状态(:focus)几种。 而且不同风格下的按钮都具有这几种状态效果,只是颜色做了一定的调整,当按钮处理正在点击状态(也就是鼠标按下的未松开的状态),对于