Amount (in dollars)
    
      $
      
      .00
    
  
  Transfer cash

水平排列的表单

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

  
    Email
    
      
    
  
  
    Password
    
      
    
  
  
    
      
        
           Remember me
        
      
    
  
  
    
      Sign in
    
  

被支持的控件

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

输入框

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

必须添加类型声明

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

输入控件组

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

文本域

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

多选和单选框

多选框（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.

  
    
    Option one is this and that—be sure to include why it's great
  


  
    
    Option two is disabled
  



  
    
    Option one is this and that—be sure to include why it's great
  


  
    
    Option two can be something else and selecting it will deselect option one
  


  
    
    Option three is disabled
  

内联单选和多选框

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

   1


   2


   3



   1


   2


   3

不带label文本的Checkbox 和 radio

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

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

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流