📜  引导程序4 |形式

📅  最后修改于: 2021-05-25 16:11:02             🧑  作者: Mango

表单布局: Bootstrap提供了两种类型的表单布局,下面列出了这些表单:

  • 堆叠形式
  • 内联表格

堆叠形式:堆叠形式以堆叠形式创建输入字段和提交按钮。

例子:

 
 
 
    Bootstrap Form 
      
    
    
  
    
      
    
      
    
      
    
 
  

    

        GeeksforGeeks     

           

Stacked form

           
        
            
                                              
                           
                                              
                           
                                              
                           
                                              
                           
                             
                                    
    
                         

输出:

内联表单: .form-inline类与

元素一起使用以创建内联表单。内联表单包含左对齐和内联的元素。视口的宽度至少为576px时,将应用inline属性。如果屏幕尺寸小于576像素,则表单元素将垂直堆叠。

例子:

 
 
 
    Bootstrap Form 
      
    
    
  
    
      
    
      
    
      
    
 
  

    

        GeeksforGeeks     

           

Inline form

           
                                                                                                                                                                                            
                             
                                         
                         

输出:

带有实用程序的嵌入式表单: Bootstrap间隔实用程序用于添加空间,使外观看起来更好。 .mr-sm-2类用于为所有设备(小型和高端)上的每个输入添加正确的边距, .mb-2类则用于在底部添加边距。

例子:

 
 
 
    Bootstrap Form 
      
    
    
  
    
      
    
      
    
      
    
 
  

    

          GeeksforGeeks     

           

Inline form with Utilities

           
        
                                                                                                                                                                                   
                             
                                    
    
                         

输出:

表单验证:

元素中的.was-validated.needs-validation类用于在提交表单之前或之后提供验证。具有绿色边框的输入字段表示有效,而红色边框表示无效的表单内容。 .valid-feedback.invalid-feedback用于在提交表单之前向用户显示通知消息。

例子:

 
 
 
    Bootstrap Form 
      
    
    
  
    
      
    
      
    
      
    
 
  

    

GeeksforGeeks

           

Form Validation

           
                     
                                                  
Valid
                
                    Please fill this field                 
            
                           
                                                  
Valid
                
                    Please fill this field                 
            
                           
                                                  
Valid
                
                    Please fill this field                 
            
                           
                                                  
Valid
                
                    Please fill this field                 
            
                           
                             
                                         
                         

输出: