本文共 1421 字，大约阅读时间需要 4 分钟。

一、Bootstrap4 输入框组

1.1 基本输入框组

我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。

使用.input-group-prepend 类可以在输入框的的前面添加文本信息，.input-group-append 类添加在输入框的后面。

最后，我们还需要使用.input-group-text 类来设置文本的样式。

    
       
           
               
   
    
    
        
     
            
      @        
     
        
         
    
    
    
        
             
     
            
      @runoob.com        
     
    
    
   

1.1 输入框大小

使用.input-group-sm 类来设置小的输入框， .input-group-lg类设置大的输入框

    
     
     
         
   
  
    
    
     
      
      
        
       Small      
      
      
          
     
  
    
  
    
    
     
      
      
        
       Default      
      
      
          
     
  
    
  
    
    
     
      
      
        
       Large      
      
      
          
     
  
    
   

1.3 多个输入框和文本

   
   
  
    
    
     
      
      Person    
     
    
         
       
    
   
 
   
   
  
    
    
     
      
      One      
      Two      
      Three    
     
    
       
    
   

1.4 复选框与单选框

1.5 输入框添加按钮组

   
  
    
    
     Basic Button   
    
  
    
   
 
   
  
      
    
    
     Go   
    
   
 
   
  
      
    
    
     OK     
     Cancel   
    
   

1.6 设置下拉菜单

   
  
    
    
           选择网站        
     
      
      GOOGLE      
      RUNOOB      
      TAOBAO    
     
  
    
  
    
   

1.7 输入框组标签

Write your email here:
   
  
      
    
    
     @runoob.com