Bootstrap4 表单form-control以及表单控件

Bootstrap4 表单布局

• 堆叠表单 (全屏宽度)：垂直方向

Bootstrap4 支持以下表单控件：

• input
• textarea
• checkbox
• radio

• select

• Bootstrap Input

  Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。

  注意：: 如果 input 的 type 属性未正确声明，输入框的样式将不会显示。

  以下实例使用两个 input 元素，一个是 text，一个是 password ：

  • 内联表单：水平方向

• 
  

• 
   

  堆叠表单

  
   

  
   

  
        帐号:
       
     

  
     

  
        帐号:
       
     

  
     

  
        密码:
       
     

  
     

  
       
          提交
       
     

  
      确定
   

  
  
• 
  

• 内联表单

  所有内联表单中的元素都是左对齐的。

  注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。

  内联表单需要在 

   元素上添加 .form-inline类。

  以下实例使用两个输入框，一个复选框，一个提交按钮来创建内联表单：

  
  

•  
  

• 
  
  
  
   

  内联表单

  
   

  屏幕宽度在大于等于 576px 时才会水平显示。如果小于 576px 则会生成堆叠表单。

  
   
      Email:
     
      Password:
     
     

  
       
          Remember me
       
     

  
      Submit