Bootstrap中的表单是什么

这篇文章将为大家详细讲解有关Bootstrap中的表单是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

图们网站制作公司哪家好,找创新互联建站!从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作,到程序开发,运营维护。创新互联建站2013年至今到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站

表单是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同。

同样,表单也是Bootstrap框架中的核心内容,本文将详细介绍Bootstrap的表单

基础表单

对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset、legend、label标签进行了定制

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

label {
  display: inline-block;
  margin-bottom: 5px;
  font-weight: bold;
}

主要将这些元素的margin、padding和border等进行了细化设置

当然表单除了这几个元素之外,还有input、select、textarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果

1、宽度变成了100%

2、设置了一个浅灰色(#ccc)的边框

3、具有4px的圆角

4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化

5、设置了placeholder的颜色为#999

       Email address        
       Password        
       File input          Example block-level help text here.

  
          
  Submit

Bootstrap中的表单是什么

水平表单

Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格

通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了

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

1、设置表单控件padding和margin值

2、改变“form-group”的表现形式,类似于网格系统的“row”


  
    Email
    
      
    
  
  
    Password
    
      
    
  
  
    
      
        
      
    
  
  
    
      Sign in
    
  

Bootstrap中的表单是什么

内联表单

有时候我们需要将表单的控件都在一行内显示。在Bootstrap框架中实现这样的表单效果是轻而易举的,只需要在

元素中添加类名“form-inline”即可。内联表单实现原理非常简单,欲将表单控件在一行显示,就需要将表单控件设置成内联块元素(display:inline-block)

为 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)

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

如果没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案,比如 aria-label、aria-labelledby 或 title 属性。如果这些都不存在,屏幕阅读器可能会采取使用 placeholder 属性,如果存在的话,使用占位符来替代其他的标记,但要注意,这种方法是不妥当的


  
    Name
    
  
  
    Email
    
  
  Send invitation

Bootstrap中的表单是什么


  
    Email address
    
  
  
    Password
    
  
  
    
  
  Sign in

Bootstrap中的表单是什么


  
    Amount (in dollars)
    
      $
      
      .00
    
  
  Transfer cash

Bootstrap中的表单是什么

表单控件

每一个表单都是由表单控件组成。离开了控件,表单就失去了意义

【输入框】

单行输入框,常见的文本输入框,也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的

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

为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”

Bootstrap中的表单是什么

【下拉列表】

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

[注意]许多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的


  
  
  
  
  

Bootstrap中的表单是什么

【文本域】

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

Bootstrap中的表单是什么

【多选和单选框】

多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个

Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio与label标签配合使用会出现一些小问题(最头痛的是对齐问题)

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


  


  


  


  


  

Bootstrap中的表单是什么

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


   1


   2


   3


   1


   2


   3

Bootstrap中的表单是什么

【静态控件】

如果需要在表单中将一行纯文本和 label 元素放置于同一行,为

元素添加 .form-control-static 类即可


  
    Email
    
      email@example.com

               Password                    

Bootstrap中的表单是什么


  
    Email
    email@example.com

          Password           Confirm identity

Bootstrap中的表单是什么

控件尺寸

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

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

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

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





...
...
...

Bootstrap中的表单是什么

通过添加 .form-group-lg 或 .form-group-sm 类,为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸


  
    Large label
    
      
    
  
  
    Small label
    
      
    
  

Bootstrap中的表单是什么

用栅格系统中的列(column)包裹输入框或其任何父元素,都可很容易的为其设置宽度


  
    
  
  
    
  
  
    
  

Bootstrap中的表单是什么

控件状态

表单主要用来与用户沟通,好的表单就能更好的与用户进行沟通,而好的表单一定离不开表单的控件状态。

每一种表单状态都能给用户传递不同的信息,比如表单有焦点的状态可以告诉用户可以输入或选择东西,禁用状态可以告诉用户不可以输入或选择东西,还有就是表单控件验证状态,可以告诉用户的操作是否正确等。Bootstrap框架中的表单控件也具备这些状态

【焦点状态】

焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果box-shadow

Bootstrap中的表单是什么

【禁用状态】

Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”。和其他表单的禁用状态不同的是,Bootstrap框架做了一些样式风格的处理 ,被禁用的输入框颜色更浅,并且还添加了 not-allowed 鼠标状态

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}

Bootstrap中的表单是什么

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

[注意]对于整个禁用的域中,如果legend中有输入框的话,这个输入框是无法被禁用的


    
    
      Disabled input
      
    
    
      Disabled select menu
      
        
      
    
    
      
    
    Submit
  

Bootstrap中的表单是什么

【只读状态】

为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅(就像被禁用的输入框一样),但是仍然保留标准的鼠标状态

Bootstrap中的表单是什么

【校验状态】

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

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

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

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

使用的时候只需要在form-group容器上或在其父级容器上对应添加状态类名


  Input with success
  
  A block of help text that breaks onto a new line and may extend beyond one line.


  Input with warning
  


  Input with error
  


  
    
  


  
    
  


  
    
  

Bootstrap中的表单是什么

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

[注意]此类名要与“has-error”、“has-warning”和“has-success”在一起使用,且只能使用在文本输入框 元素上


  Input with success
  
  
  (success)


  Input with warning
  
  
  (warning)


  Input with error
  
  
  (error)


  Input group with success
  
    @
    
  
  
  (success)

Bootstrap中的表单是什么

当然,也可以为水平排列的表单和内联表单设置可选的图标


  
    Input with success
    
      
      
      (success)
    
  
  
    Input group with success
    
      
        @
        
      
      
      (success)
    
  

Bootstrap中的表单是什么


  
    Input with success
    
    
    (success)
  


  
    Input group with success
    
      @
      
    
    
    (success)
  

Bootstrap中的表单是什么

【提示信息】

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


  
    成功状态
    
    你输入的信息是正确的
    
  
  
    警告状态
    
    请输入正确信息
    
  
  
    错误状态
    
    你输入的信息是错误的
      
  

Bootstrap中的表单是什么

按钮

按钮是Bootstrap框架核心内容之一。因为按钮是Web制作中不可缺少的东西。而且不同的Web页面具有不同的按钮风格,甚至说同一个Web网站或应用程序具有多种按钮风格,比如说不同的按钮颜色、大小和状态等

【基本按钮】

Bootstrap框架的基本按钮是通过类名“btn”来实现

我是一个基本按钮

Bootstrap中的表单是什么

【默认按钮】

Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

Bootstrap中的表单是什么

【按钮元素】

可以为 a标签按钮 span标签按钮 div标签按钮

Bootstrap中的表单是什么

【按钮风格】

在Bootstrap框架中除了默认的按钮风格之外,还有其他六种按钮风格,每种风格的其实都一样,不同之处就是按钮的背景颜色、边框颜色和文本颜色

Bootstrap中的表单是什么

使用起来就很简单,就像前面介绍的默认按钮一样的使用方法,只需要在基础按钮“.btn”基础上追加对应的类名,就可以得到需要的按钮风格

基础按钮.btn
默认按钮.btn-default
主要按钮.btn-primary
成功按钮.btn-success
信息按钮.btn-info
警告按钮.btn-warning
危险按钮.btn-danger
链接按钮.btn-link

Bootstrap中的表单是什么

【按钮尺寸】

使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素,并且这个按钮不会有任何的padding和margin值

Bootstrap中的表单是什么

  (大按钮)Large button   (大按钮)Large button

  (默认尺寸)Default button   (默认尺寸)Default button

  (小按钮)Small button   (小按钮)Small button

  (超小尺寸)Extra small button   (超小尺寸)Extra small button

(块级元素)Block level button (块级元素)Block level button

Bootstrap中的表单是什么

【按钮状态】

Bootstrap框架针对按钮的状态做了一些特殊处理。在Bootstrap框架中针对按钮的状态效果主要分为两种:活动状态和禁用状态。

Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover),点击状态(:active)和焦点状态(:focus)几种

当按钮处于激活状态时,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。对于 Button2 Link1 Link2

Bootstrap中的表单是什么

和input等表单控件一样,在Bootstrap框架的按钮中也具有禁用状态的设置。禁用状态与其他状态按钮相比,就是背景颜色的透明度做了一定的处理,opcity的值从100%调整为65%。

在Bootstrap框架中,要禁用按钮有两种实现方式:

方法1:在标签中添加disabled属性

方法2:在元素标签中添加类名“disabled”

两者的主要区别是:

“.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为,则需要通过JavaScript这样的语言来处理

对于标签来说,它并不支持使用disable属性,只支持通过类名“.disable”来禁用按钮,可以禁止元素的链接跳转行为


    通过disabled属性禁用按钮 
    通过添加类名disabled禁用按钮
    未禁用的按钮

    通过disabled属性禁用按钮      通过添加类名disabled禁用按钮     未禁用的按钮

Bootstrap中的表单是什么

关于“Bootstrap中的表单是什么”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


标题名称:Bootstrap中的表单是什么
分享URL:http://hbruida.cn/article/ggppjp.html

其他资讯