了解Bootstrap中的表单控件

本篇内容主要讲解“了解Bootstrap中的表单控件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“了解Bootstrap中的表单控件”吧!

公司主营业务:成都网站建设、网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联建站是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联建站推出顺平免费做网站回馈大家。

了解Bootstrap中的表单控件

基本实例


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

了解Bootstrap中的表单控件

了解Bootstrap中的表单控件

不要将表单组和输入框组混合使用不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

内联表单


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

可能需要手动设置宽度

在 Bootstrap 中,输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单,我们将这些

元素的宽度设置为 width: auto;,因此,多个控件可以排列在同一行。根据你的布局需求,可能需要一些

额外的定制化组件。

一定要添加 label 标签

如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为

label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案,

比如 aria-label、aria-labelledby 或 title 属性。如果这些都不存在,屏幕阅读器可能会采取使用

placeholder 属性,如果存在的话,使用占位符来替代其他的标记,但要注意,这种方法是不妥当的。

了解Bootstrap中的表单控件


  
    Name
    
  
       Email        
  Send invitation

了解Bootstrap中的表单控件


  
    Email address
    
  
       Password                      Sign in

了解Bootstrap中的表单控件


  
    Amount (in dollars)
    
      $
      
      .00
    
  
  Transfer cash

水平排列的表单


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

了解Bootstrap中的表单控件


  
    Email
    
      
    
  
  
    Password
    
      
    
  
  
    
      
        
      
    
  
  
    
      Sign in
    
  

被支持的控件


表单布局实例中展示了其所支持的标准表单控件。

输入框

包括大部分表单控件、文本输入域控件,还支持所有 HTML5 类型的输入控件: textpassworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtelcolor

必须添加类型声明

只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

了解Bootstrap中的表单控件

输入控件组

如需在文本输入域 前面或后面添加文本内容或按钮控件,请参考输入控件组。

文本域

支持多行文本的表单控件。可根据需要改变 rows 属性。

了解Bootstrap中的表单控件

多选和单选框

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

Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent , you'll need to add the .disabled class to the parent .radio, .radio-inline, .checkbox, or .checkbox-inline.

了解Bootstrap中的表单控件


  


  



  


  


  

内联单选和多选框

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

了解Bootstrap中的表单控件


   1


   2


   3



   1


   2


   3

不带label文本的Checkbox 和 radio

如果需要 内没有文字,输入框(input)正是你所期望的。 目前只适用于非内联的 checkbox 和 radio。 请记住,仍然需要为使用辅助技术的用户提供某种形式的 label(例如,使用 aria-label)

了解Bootstrap中的表单控件


  


  

到此,相信大家对“了解Bootstrap中的表单控件”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


分享文章:了解Bootstrap中的表单控件
分享URL:http://scjbc.cn/article/gchpcj.html