全面解析Bootstrap表单样式的使用

本文主要给大家介绍了bootstrap表单样式的使用知识,非常不错,一起看看吧!

表单

rush:js;">
Box">

效果图:

这里写图片描述

class: form-control

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

2、水平表单:

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

rush:js;">
Box">

效果图:

这里写图片描述

在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:

1、在元素是使用类名“form-horizontal”。

2、配合Bootstrap框架的网格系统。

在元素上使用类名“form-horizontal”主要有以下几个作用:

- 设置表单控件padding和margin值。 - 改变“form-group”的表现形式,类似于网格系统的“row”。

3、水平表单:

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

rush:js;">
Box">

效果图:

这里写图片描述

4、输入框input

单行输入框,常见的文本输入框,也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式.

rush:js;">
用户名"/>

效果图:

这里写图片描述

5、下拉选择框select

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

rush:js;">
1
1

效果图:

这里写图片描述

6、文本域textarea

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

rush:js;">

效果图:

这里写图片描述

7.复选框checkBox和单选择按钮radio

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

rush:js;">
案例1
Box">
dio">
dio">

效果图:

这里写图片描述

8.复选框和单选按钮水平排列

有时候,为了布局的需要,将复选框和单选按钮需要水平排列。Bootstrap框架也做了这方面的考虑:

1、如果checkBox需要水平排列,只需要在label标签添加类名“checkBox-inline”

2、如果radio需要水平排列,只需要在label标签添加类名“radio-inline”

rush:js;">
Box-inline"> Box" value="option1">游戏
dio-inline"> dio" value="option1" name="sex">男性

效果图:

这里写图片描述

9.按钮

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

rush:js;"> Button btnbtn btn-primarybtn btn-infobtn btn-successbtn btn-warningbtn btn-dangerbtn btn-inverse

效果图:

这里写图片描述

10.表单控件大小

前面看到的表单控件都正常的大小。可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是:

1、input-sm:让控件比正常大小更小

2、input-lg:让控件比正常大小更大

这两个类适用于表单中的input,textarea和select控件.

rush:js;">
添加.input-lg,控件变大">
添加.input-sm,控件变小">

效果图:

这里写图片描述

11.表单控件状态(禁用状态)

Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性disabled”。具体的看下面的代码

禁用单个表单标签,只需要在标签属性中加入disabled

rush:js;">

效果图:

这里写图片描述

在Bootstrap框架中,如果fieldset设置了disabled属性,整个域都将处于被禁用状态。

rush:js;">
disabledTextInput">禁用的输入框 disabledTextInput" class="form-control" placeholder="禁止输入">
disabledSelect">禁用的下拉框
Box">

效果图:

这里写图片描述

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

rush:js;"> form role="form">
disabledTextInput">禁用的输入框 disabledTextInput" class="form-control" placeholder="禁止输入">
disabledSelect">禁用的下拉框
Box">

效果图:

这里写图片描述

表单验证状态

在制作表单时,不免要做表单验证。同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果

1、.has-warning:警告状态(黄色)

2、.has-error:错误状态(红色)

3、.has-success:成功状态(绿色)

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

rush:js;">
错误状态 错误状态">



Feedback">
Feedback">
Feedback"> 错误状态"> Feedback">

效果图:

这里写图片描述

这里写图片描述

表单提示信息

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

rush:js;">
Feedback">
Feedback">
Feedback"> 错误状态"> 错误的 Feedback">

效果图:

这里写图片描述

以上所述是小编给大家介绍的Bootstrap表单样式的使用。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

Bootstrip HTML 查询搜索常用格式模版 <form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...
class="" Description