Bootstrap 垂直表单、水平表单、内联表单

1. 介绍与安装
2. 网格系统
3. 按钮、字形图标、表格
4. 下拉菜单和响应式标签
5. 进度条和 Jumbotron

在本文中，我们将学习如何创建表单。几乎每个网站都使用表单，它们用于收集用户输入。

表格：

Bootstrap 提供了 3 种表单布局，分别是：

• 垂直表格（默认）
• 水平表格
• 内联表格

我们将分别研究它们：

垂直形式：

首先，我们将使用

标签初始化表单。我们将把所有标签和表单控件包装在标签

中。这是表单组件之间的最佳间距所必需的。

现在，我们可以根据需要在这些标签中设计表单。我们可以使用标签来定义输入元素的标签。请记住， 标签的 属性应该等于相关元素的 id 属性才能将它们绑定在一起。在标签标记之后，可以输入 标记，该标记指定用户可以输入数据的输入字段。输入标签内使用的类必须是class=”form-control”。还可以使用 placeholder 属性，它指定描述输入字段预期值的简短提示。

例子：

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浏览器
• 火狐
• 歌剧
• 苹果浏览器