📜  Bootstrap 中的输入组示例

📅  最后修改于: 2021-08-30 10:23:17             🧑  作者: Mango

Bootstrap 中的输入组用于通过在文本输入、自定义文件选择器或自定义输入的任一侧添加文本或按钮来扩展默认表单控件。

基本输入组:以下类是用于将组添加到输入框两侧的基类。

  • .input-group-prepend类用于将组添加到输入的前面。
  • .input-group-append类用于将其添加到输入后面。
  • .input-group-text类用于设置组内显示的文本的样式。

以下示例演示了这些输入组:


  


    
    
    Input Groups in Bootstrap


    
        

Prepend Group Example

                    
                            
                                    @             
                                     
           

Append Group Example

                    
                                                     
                                    @example.com             
        
           

Prepend and Append Together

                    
                            
                                    https://             
                                                         
                                    .com             
        
    

输出:
前置和附加

输入组的大小

输入组可以通过额外的类变得更大或更小。输入组有 3 种可能的大小:

  • .input-group-sm类用于较小的尺寸。
  • .input-group-lg类用于更大的尺寸。
  • .input-group类是默认大小。

注意:当前不支持单个输入组元素的大小调整。

例子:


  


    
    
    Input Groups in Bootstrap


    
        

Sizing

                    
                            
                                    Small             
                                     
                    
                            
                                    Default             
                                     
                    
                            
                                    Large             
                                     
    

输出:
输入组的大小

使用多个输入:多个输入可以与输入组一起使用。

例子:


  


    
    
  
    Input Groups in Bootstrap


    
        

Multiple inputs

                    
                            
                                    First & Last name             
                                                  
    

输出:
多个输入

使用多个插件:多个插件可以堆叠或与其他类型混合在一起,包括复选框和单选按钮。

例子:


  


    
    
  
    Input Groups in Bootstrap


    
        

Multiple addons

                    
                            
                                    $                 0.00                
                                  
                    
                                                         
                                    $                 0.00             
        
    

输出:
多个插件

使用按钮插件:按钮也可以附加或前置到输入框。

例子:


  


    
    
  
    Input Groups in Bootstrap


    
        

Button addons

                    
                            
                                                 
                                     
                    
                                                                     
                                                 
        
                            
                                        
                                                                  
                                     
                                 
                                                                            
                                                                  
        
    

输出:
多个按钮

使用自定义选择:输入组可以与自定义选择一起使用。

注意:不支持自定义选择的浏览器默认版本。

例子:



  

    
    
    Input Groups in Bootstrap

  

    
        

Custom select

           
            
                             
                     
           
                         
                             
        
    
                 

输出:
自定义选择

使用自定义文件输入:输入组可以与自定义文件输入一起使用。

注意:不支持文件输入的浏览器默认版本。

例子:



  

    
    
    Input Groups in Bootstrap

  

    
        

Custom file input

        
            
                Upload             
            
                                              
        
           
            
                                              
            
                Upload             
        
    
                 

输出:
自定义文件