Bootstrap（第 4 部分）|垂直表格、水平表格、内联表格

1. 介绍与安装
2. 网格系统
3. 按钮、字形、表格
4. 下拉菜单和响应式选项卡
5. 进度条和大屏幕

在本文中，我们将学习创建表单。几乎每个网站都使用表单，它们用于收集用户输入。
表格：
Bootstrap 提供了 3 种表单布局，分别是：

• 垂直表格（默认）
• 横式
• 内联表格

• 垂直形式：
  首先，我们将使用
  标签初始化表单。我们将所有标签和表单控件包装在标签

  。这是表单组件之间的最佳间距所必需的。
  现在，我们可以根据需要在这些标签中设计表单。我们可以使用标签来定义输入元素的标签。请记住， 标签的 属性应该等于相关元素的 id 属性，以便将它们绑定在一起。在 label 标签之后，可以输入 标签，该标签指定用户可以在其中输入数据的输入字段。在 input 标签中使用的类必须是 class=”form-control”。还可以使用占位符属性，该属性指定描述输入字段预期值的简短提示。例子：

html

  Bootstrap Example
  
  
  
  
      
  
   


    
     GeeksforGeeks
    

    Vertical Form
    
        
            User Name
            
        
        
            Password
            
        
        
            Login
            Register
        
    

  

• 输出：

• 水平形式：

水平表单与垂直表单的不同之处不仅在于标记的数量，还在于表单的呈现方式。要使表单水平，请在

元素中添加 class=”form-horizontal”。如果您使用 元素，则必须使用 class=”control-label”。另外，请记住，您可以使用 Bootstrap 的预定义网格类在水平布局中对齐标签和表单控件组。

您还可以向标签和输入字段添加特定样式。在

标签中添加任何类 has-warning、has-success、has-error 等，该标签包含一个具有表单组的类，以在选择时赋予它不同的效果。

• 例子：

html

  Bootstrap Example
  
  
  
  
        
  
        


    
     GeeksforGeeks
    

    Horizontal Form
    
        
            Username
            
                
            
        
        
            Password
            
                
            
        
        
            
                    Login
            
            
                    Register
            
            
                Remember me
            
        
    

  

• 输出：

• 内联表格：

顾名思义，在内联形式中，所有元素都是内联的，左对齐的，并且标签并排。您只需要在表单元素中添加 class=”form-inline” 即可。
使用 class=”sr-only” 您可以隐藏有时可能会导致问题的内联表单的标签。
您还可以在表单中添加字形。为此，您必须添加 class=”has-feedback” 并在 标记之后添加存在字形的 span 标记。记得添加 form-control-feed 作为 span 标签的类。

• 例子：

html

  Bootstrap Example
  
  
  
  
     
  
    


    
     GeeksforGeeks
    

    Inline Form
    
  
    Username:
    
    Password:
    
    Login
    Register
  
              
      

  

• 输出：

支持的浏览器：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器