Bootstrap 常用表单

表单

       单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、 和 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

1、输入框

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

        
            

                用户名：
                
            
        

   

2、文本域

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

            

                备注：
                
            

   

3、单选框（radio）

            

                
                     男
                
            
            

                
                     女
                
            

        

4、多选框（checkbox）

            

                
                    电影
                
            
            

                
                    运动
                
            

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

5、下拉列表

            
                男
                女
            

  

6、添加额外的图标

     只需设置相应的 .has-feedback 类并添加正确的图标即可。

            

                用户名：
                
                
            
            

                密码：
                

                    @
                    
                
                
            

 

7、常用的属性

只读状态：添加 readonly 属性

禁用状态：添加 disabled 属性

自动获取焦点：添加 autofocus

8、改变控件大小

     通过 .input-lg 类似的类可以为控件设置高度，即添加 .xxx-sm 或 .xxx-lg

     通过 .col-lg-* 类似的类可以为控件设置宽度。

具体参考官方文档：https://v3.bootcss.com/css/#forms

也可以将表单元素和 table 结合使用，