引导程序4 |自订表格

Bootstrap 4可以自定义浏览器的默认表单和控件布局。可以使用Bootstrap 4(如复选框，单选按钮，文件输入等)来创建自定义表单。 Bootstrap简化了以多种形式(例如标签，输入，字段，文本区域，按钮，复选框等)对齐和样式化网页的过程。

Custom Checkbox： .custom-control和.custom-checkbox类在

元素中用于包装容器元素。 .custom-control-input类与input type =“ checkbox”一起使用以创建自定义输入文本框。

例子：

 
 
      
 
     
        Bootstrap Custom forms
     
      
     
      
     
      
     
     
     
     
     
     
     
 
  
 
     
        GeeksforGeeks
        Custom Checkbox
  
        
            
                
                
                    Custom checkbox
                
            
              
            
                
                
                    Custom checkbox
                
            
              
            
                
                Default checkbox
            
              
            
            Default checkbox
            
            Submit
        
     
 
 

输出：

自定义开关： .custom-control和.custom-switch类用于包装输入复选框。 .custom-control-input类与标签标记一起使用。引导程序开关/切换是用于激活两个预定义选项之一的简单组件。通常用作开/关按钮。切换按钮允许用户在两种状态之间更改设置。

例子：

 
 
      
 
     
        Bootstrap Custom forms
     
      
     
      
     
      
     
     
     
     
     
     
     
 
  
 
     
        GeeksforGeeks
        Custom Switch Buttons
  
        
            
                
                
                    Toggle On
                
            
            
            
                
                
                    Toggle Off
                
            
            
            Submit
        
     
 
 

输出：

自定义单选按钮：与复选框相同。它在标签标签上使用.custom-radio而不是.custom-input。选中复选框和单选按钮以支持基于HTML的表单验证并提供简短，友好的标签。

例子：

 
 
      
 
     
        Bootstrap Custom forms
     
      
     
      
     
      
     
     
     
     
     
     
     
 
  
 
     
        GeeksforGeeks
        Custom Radio Buttons
  
        
            
                
                
                    Radio Button On
                
            
            
            
                
                
                    Radio Button Off
                
            
            
            Submit
        
     
 
 

输出：

自定义内联表单控件：自定义复选框和单选按钮用作默认值，以使用内联控件通过.custom-control-inline类内联显示它们。通过将.form-check-inline添加到.form-check类，可以在同一水平行上对复选框或单选按钮进行分组。

例子：

 
 
      
 
     
        Bootstrap Custom forms
     
      
     
      
     
      
     
     
     
     
     
     
     
 
  
 
     
        GeeksforGeeks
        Inline Custom Form Controls
  
        
            
                
                
                    Radio Button
                
            
            
                
                
                    Radio Button
                
            
            
            
                
                
                    Custom checkbox
                
            
            
                
                
                    Custom checkbox
                
            
            
            Submit
        
     
 
 

输出：

自定义选择菜单：用于选择任何特定的属性值，并根据用户需要进行自定义。 .custom-select类在元素中用于创建自定义菜单。它使用和标记进行自定义。在选项标签内部，它将放置值并在您运行程序时显示在下拉列表中。

例子：

 
 
      
 
     
        Bootstrap Custom forms
     
      
     
      
     
      
     
     
     
     
     
     
     
 
  
 
     
        GeeksforGeeks
        Custom Select Menu
  
        
            
                Select Computer science Subject
                Data Structure
                Algorithm
                Computer Networks
                Operating System
            
          
            Submit
        
     
 
 

输出：

自定义选择菜单大小： .custom-select-sm类用于创建较小的内容， .custom-select-lg类用于创建较大的选择菜单。

例子：

 
 
      
 
     
        Bootstrap Custom forms
     
      
     
      
     
      
     
     
     
     
     
     
     
 
  
 
     
        GeeksforGeeks
        Custom Select Menu Size
  
        
            
                Select Computer science Subject
                Data Structure
                Algorithm
                Computer Networks
                Operating System
            
              
            
                Select Computer science Subject
                Data Structure
                Algorithm
                Computer Networks
                Operating System
            
              
            
                Select Computer science Subject
                Data Structure
                Algorithm
                Computer Networks
                Operating System
            
        
     
 
 

自定义文件上传：要创建自定义文件控件，请将标签包装在使用.custom-file类的div标签内。自从很早以来，文件上传器组件就一直是HTML规范的一部分。但是，最近，它通常隐藏在更好的用户界面后面，这些用户界面支持文件的拖放和图像预览。可以通过按钮对经典输入框进行一些基本的重新样式设置，以统一所有浏览器的呈现。
对于标签标签，它使用.custom-control-label类。
对于输入标签，它使用.custom-control-input class。

例子：

 
 
      
 
     
        Bootstrap Custom forms
     
      
     
      
     
      
     
     
     
     
     
     
     
 
  
 
     
        GeeksforGeeks
        Custom File Upload
  
        
            Custom file upload:
            
                
                
                    Choose file from computer
                
            
        
     
      
    
    
        $(".custom-file-input").on("change", function() {
            var file_name = $(this).val().split("\\").pop();
            $(this).siblings(".custom-file-label")
                    .addClass("selected").html(file_name);
        });

  
 
 

输出：

自定义范围： .custom-range类在元素中用于创建custom_range菜单。

例子：

 
 
      
 
     
        Bootstrap Custom forms
     
      
     
      
     
      
     
     
     
     
     
     
     
 
  
 
     
        GeeksforGeeks
        Custom Range
  
        
            Custom range