Bootstrap表单布局有哪几种方式？Bootstrap表单布局的创建方法（附代码）

向标签添加 class .control-label。

实例

     
    
      
    
    




    

        名
        

            
        
    
    

        姓
        

            
        
    
    

        

            

                
                     是否记住
                
            
        
    
    

        

            登录
        
    

结果如下所示

支持的表单控件

Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。

输入框（Input）

最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。

实例

     
    
      
    
    




    

        标签
        
    
 

运行结果如下：

文本框（Textarea）

当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。

实例

     
    
      
    
    




    

        文本框
        
    

结果如下所示：

复选框（Checkbox）和单选框（Radio）

复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。

当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。

对一系列复选框和单选框使用 .checkbox-inline 或.radio-inline class，控制它们显示在同一行上。

下面的例子演示了这两种类型（默认和内联）：

实例

     
    
      
    
    



默认的复选框和单选按钮的实例

    选项 1


    选项 2


    
         选项 1
    


    
        选项 2 - 选择它将会取消选择选项 1
    

内联的复选框和单选按钮的实例

    
         选项 1
    
    
         选项 2
    
    
         选项 3
    
    
         选项 1
    
    
         选项 2
    

运行结果如下：

选择框（Select）

当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。

使用 展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。

使用 multiple="multiple" 允许用户选择多个选项。

下面的实例演示了这两种类型（select 和 multiple）：

例子：

    
    
      
    
    




    

        选择列表
        
            A
            B
            C
            D
            E
        
        可多选的选择列表
        
            A
            B
            C
            D
            E
        
    

运行结果如下：

静态控件

当您需要在一个水平表单内的表单标签后放置纯文本时，请在

上使用 class .form-control-static。

实例

    
    
      
    
    




    

        Email
        

            
email@example.com
        
    
    

        密码
        

            
        
    

运行结果如下：

表单控件状态

除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。

输入框焦点

当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。

禁用的输入框 input

如果您想要禁用一个输入框 input，只需要简单地添加disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

禁用的字段集 fieldset

对

     
    
      
    
    




    

        聚焦
        

            
        
    
    

        
            禁用
        
        

            
        
    
    

        

            禁用输入（Fieldset disabled）
            
            

                
            
        
        

            禁用选择菜单（Fieldset disabled）
            
            

                
                    禁止选择
                
            
        
    
    

        
            输入成功
        
        

            
        
    
    

        
            输入警告
        
        

            
        
    
    

        
            输入错误
        
        

            
        
    

     
    
      
    
    




    

        
    
    

        
    
    

        
    
    

    
    

        
            .input-lg
        
    
    

        
            默认选择
        
    
    

        
            .input-sm
        
    

    

        

            
        
        

            
        
        

            
        
    

     
    
      
    
    




    帮助文本实例
    
    一个较长的帮助文本块，超过一行，
        需要扩展到下一行。本实例中的帮助文本总共有两行。