基本实例

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

      
  
       
    
        Email address    
          
       
  
       
    
        Password    
          
       
  
       
    
        File input    
            
        
Example block-level help text here.
  
       
  
       
    
               Check me out      
       
  
       Submit
      

内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

      
  
       
    
        Name    
          
       
  
       
    
        Email    
          
       
  
       Send invitation
      

可以看出 对于每一个输入控件 都要加上 .form-control的CSS

对于按钮来说要加上btn 和一种样式 上图是btn-default

 

      
  
       
    
        Amount (in dollars)    
        
      
         
          $
         
      
               
         
          .00
         
    
        
  
       
  
       Transfer cash
      

效果：

可以看出 在input的前后可以加入div并class为input-group-addon就能有一个前后的效果

对于这里的输入组 可以在查看详情

水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

同样的 结合之前学习的栅格布局，就可以做出这种布局

 

      
  
       
    
        Email    
        
      
             
        
  
       
  
       
    
        Password    
        
      
             
        
  
       
  
       
    
        
      
         
        
                     Remember me              
         
    
        
  
       
  
       
    
        
      
         Sign in    
        
  
       
      

效果：

被支持的控件

表单布局实例中展示了其所支持的标准表单控件。

输入框

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

 

校验状态

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

 

      
  
       Input with success  
         
       A block of help text that breaks onto a new line and may extend beyond one line.
      
      
  
       Input with warning  
       
      
      
  
       Input with error  
       
      
      
  
       
    
                    Checkbox with success      
       
      
      
  
       
    
                    Checkbox with warning      
       
      
      
  
       
    
                    Checkbox with error      
       
      

效果：

有明显（？）的绿黄红颜色加持

控件尺寸

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

高度尺寸

创建大一些或小一些的表单控件以匹配按钮尺寸。

.........

效果：

水平排列的表单组的尺寸

通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

 

      
  
       
    
        Large label    
        
      
             
        
  
       
  
       
    
        Small label    
        
      
             
        
  
       
      

效果：

调整列（column）尺寸

用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。

效果：

 

------------按钮---------------------------------

按钮

可作为按钮使用的标签或元素

为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

 

LinkButton

效果：

 

 

预定义样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮。

 

     （默认样式）Default
     （首选项）Primary
     （成功）Success
     （一般信息）Info
     （警告）Warning
     （危险）Danger
     （链接）Link

效果：

可以看出通过设置类 可以有不同的基础样式

激活状态

当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 <button> 元素，是通过 :active 状态实现的。对于 <a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 <button> 上（包含 aria-pressed="true"属性)），并通过编程的方式使其处于激活状态。

就是class里面添加一个active 就可以有下面的效果：

禁用状态

通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。

如下图

按钮就直接disabled属性设置下 其他就class里加个disabled类

 

本节结束