深入学习Bootstrap表单

本文知识点借鉴来自http://www.runoob.com/bootstrap/bootstrap-forms.html，里面写的比较详细还给出了例子，这里总结一下重点方便记忆。

一、表单布局

1.垂直表单（默认）

        向父

2.内联表单

向

 二、支持的表单控件

1.输入框（Input）

姓名： 

2.文本框（textarea）  可改变 rows 属性

3.复选框（Checkbox）和单选框（Radio）        
    当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。       
    对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

 
    篮球 
    
    
    音乐 
    
    
    绘画 
    
    
    男 
    
    
    女 
    

 4.选择框（Select）        

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

1 1 1 1 1

 5.静态控件        

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

上使用 class .form-control-static。

 
  Email 
   
  
email@example.com
 
   
  

三、表单控件状态

1.输入框焦点        

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

2.禁用的输入框 input        

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

 
  姓名： 
  

3.禁用的字段集 fieldset        

对

 
   
   姓名： 
   
 
 
   
   姓名： 
   
 

 
  姓名： 
  姓名： 
  姓名： 

 
   
   
   Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。