7.7. Bootstrap5 form

发布时间 ： 2025-10-25 13:35:30 UTC      

Page Views: 9 views

7.7.1. Bootstrap5 basic form

Bootstrap5 passed .table class to set the style of the underlying table, as an example:

Example 

<table class="table"> <thead> <tr> <th>Firstnameth> <th>Lastnameth> <th>Emailth> tr> thead> <tbody> <tr> <td>Johntd> <td>Doetd> <td>john@example.comtd> tr> <tr> <td>Marytd> <td>Moetd> <td>mary@example.comtd> tr> <tr> <td>Julytd> <td>Dooleytd> <td>july@example.comtd> tr> tbody> table>      
 
  7.7.2.  Stripe table  
 
 By adding   .table-striped   class, you will be in the      you seestripes on the lines inside, as shown in the following example: 
 
 
 Example  
 
 
 
<table class="table table-striped"> <thead> <tr> <th>Firstnameth> <th>Lastnameth> <th>Emailth> tr> thead> <tbody> <tr> <td>Johntd> <td>Doetd> <td>john@example.comtd> tr> <tr> <td>Marytd> <td>Moetd> <td>mary@example.comtd> tr> <tr> <td>Julytd> <td>Dooleytd> <td>july@example.comtd> tr> tbody> table>      
 
  7.7.3.  Table with borders  
 
   .table-bordered   class can add borders to a table 
 
 
 Example  
 
 
 
<table class="table table-bordered"> <thead> <tr> <th>Firstnameth> <th>Lastnameth> <th>Emailth> tr> thead> <tbody> <tr> <td>Johntd> <td>Doetd> <td>john@example.comtd> tr> <tr> <td>Marytd> <td>Moetd> <td>mary@example.comtd> tr> <tr> <td>Julytd> <td>Dooleytd> <td>july@example.comtd> tr> tbody> table>      
 
  7.7.4.  Mouse hover status table  
 
   .table-hover   class can add a rollover effect (gray background) to each row of the table: 
 
 
 Example  
 
 
 
<table class="table table-hover"> <thead> <tr> <th>Firstnameth> <th>Lastnameth> <th>Emailth> tr> thead> <tbody> <tr> <td>Johntd> <td>Doetd> <td>john@example.comtd> tr> <tr> <td>Marytd> <td>Moetd> <td>mary@example.comtd> tr> <tr> <td>Julytd> <td>Dooleytd> <td>july@example.comtd> tr> tbody> table>      
 
  7.7.5.  Black background form  
 
   .table-dark   class to add a black background to the table: 
 
 
 Example  
 
 
 
<table class="table table-dark"> <thead> <tr> <th>Firstnameth> <th>Lastnameth> <th>Emailth> tr> thead> <tbody> <tr> <td>Johntd> <td>Doetd> <td>john@example.comtd> tr> <tr> <td>Marytd> <td>Moetd> <td>mary@example.comtd> tr> <tr> <td>Julytd> <td>Dooleytd> <td>july@example.comtd> tr> tbody> table>      
 
  7.7.6.  Black stripe table  
 
 Joint use   .table-dark   and   .table-striped   class to create black striped tables: 
 
 
 Example  
 
 
 
<table class="table table-dark table-striped"> <thead> <tr> <th>Firstnameth> <th>Lastnameth> <th>Emailth> tr> thead> <tbody> <tr> <td>Johntd> <td>Doetd> <td>john@example.comtd> tr> <tr> <td>Marytd> <td>Moetd> <td>mary@example.comtd> tr> <tr> <td>Julytd> <td>Dooleytd> <td>july@example.comtd> tr> tbody> table>      
 
  7.7.7.  Mouse hover effect-black background table  
 
 Joint use   .table-dark   and   .table-hover   class can set the mouse over effect of the black background table: 
 
 
 Example  
 
 
 
<table class="table table-dark table-hover"> <thead> <tr> <th>Firstnameth> <th>Lastnameth> <th>Emailth> tr> thead> <tbody> <tr> <td>Johntd> <td>Doetd> <td>john@example.comtd> tr> <tr> <td>Marytd> <td>Moetd> <td>mary@example.comtd> tr> <tr> <td>Julytd> <td>Dooleytd> <td>july@example.comtd> tr> tbody> table>      
 
  7.7.8.  Unframed table  
 
   .table-borderless   class can set up a table without borders: 
 
 
 Example  
 
 
 
<table class="table table-borderless"> <thead> <tr> <th>Firstnameth> <th>Lastnameth> <th>Emailth> tr> thead> <tbody> <tr> <td>Johntd> <td>Doetd> <td>john@example.comtd> tr> <tr> <td>Marytd> <td>Moetd> <td>mary@example.comtd> tr> <tr> <td>Julytd> <td>Dooleytd> <td>july@example.comtd> tr> tbody> table>      
 
  7.7.9.  Specify the color class of the meaning  
 
 You can set the color for the rows or cells of the table by specifying the color class of the meaning: 
 
 
 Example  
 
 
 
<table class="table"> <thead> <tr> <th>Firstnameth> <th>Lastnameth> <th>Emailth> tr> thead> <tbody> <tr> <td>Defaulttd> <td>Defaultsontd> <td>def@somemail.comtd> tr> <tr class="table-primary"> <td>Primarytd> <td>Joetd> <td>joe@example.comtd> tr> <tr class="table-success"> <td>Successtd> <td>Doetd> <td>john@example.comtd> tr> <tr class="table-danger"> <td>Dangertd> <td>Moetd> <td>mary@example.comtd> tr> <tr class="table-info"> <td>Infotd> <td>Dooleytd> <td>july@example.comtd> tr> <tr class="table-warning"> <td>Warningtd> <td>Refstd> <td>bo@example.comtd> tr> <tr class="table-active"> <td>Activetd> <td>Activesontd> <td>act@example.comtd> tr> <tr class="table-secondary"> <td>Secondarytd> <td>Secondsontd> <td>sec@example.comtd> tr> <tr class="table-light"> <td>Lighttd> <td>Angietd> <td>angie@example.comtd> tr> <tr class="table-dark text-dark"> <td>Darktd> <td>Botd> <td>bo@example.comtd> tr> tbody> table>    
 The following table lists the descriptions of the table color classes: 
 
  
  
 Class name 
 		  
 Description 
 		 
   
  
 . table-primary 
 		  
 Blue: specify that this is an important operation 
 		 
 
  
 .table-success 
 		  
 Green: specifies that this is an operation that is allowed 
 		 
 
  
 .table-danger 
 		  
 Red: specifies that this is a dangerous operation 
 		 
 
  
 .table-info 
 		  
 Light blue: indicates that the content has changed 
 		 
 
  
 .table-warning 
 		  
 Orange: indicates actions that need to be paid attention to 
 		 
 
  
 .table-active 
 		  
 Gray: for mouse hover effect 
 		 
 
  
 .table-secondary 
 		  
 Gray: indicates that the content is not very important 
 		 
 
  
 .table-light 
 		  
 Light gray, which can be the background of the table row 
 		 
 
  
 .table-dark 
 		  
 Dark gray, which can be the background of a table row 
 		 
  
   
 
  7.7.10.  Meter head color  
 
 We can also set the color of the header, such as   .table-dark   class is used to add a black background to the header   .table-light   class is usedto add a gray background to the header: 
 
 
 Example  
 
 
 
<table class="table"> <thead class="table-dark"> <tr> <th>Firstnameth> <th>Lastnameth> <th>Emailth> tr> thead> <tbody> <tr> <td>Johntd> <td>Doetd> <td>john@example.comtd> tr> <tr> <td>Marytd> <td>Moetd> <td>mary@example.comtd> tr> <tr> <td>Julytd> <td>Dooleytd> <td>july@example.comtd> tr> tbody> table> <table class="table"> <thead class="table-light"> <tr> <th>Firstnameth> <th>Lastnameth> <th>Emailth> tr> thead> <tbody> <tr> <td>Johntd> <td>Doetd> <td>john@example.comtd> tr> <tr> <td>Marytd> <td>Moetd> <td>mary@example.comtd> tr> <tr> <td>Julytd> <td>Dooleytd> <td>july@example.comtd> tr> tbody> table>      
 
  7.7.11.  A smaller form  
 
   .table-sm   class is used to set smaller tables by reducing the inner margins: 
 
 
 Example  
 
 
 
<table class="table table-bordered table-sm"> <thead> <tr> <th>Firstnameth> <th>Lastnameth> <th>Emailth> tr> thead> <tbody> <tr> <td>Johntd> <td>Doetd> <td>john@example.comtd> tr> <tr> <td>Marytd> <td>Moetd> <td>mary@example.comtd> tr> <tr> <td>Julytd> <td>Dooleytd> <td>july@example.comtd> tr> tbody> table>      
 
  7.7.12.  Responsive form  
 
   .table-responsive   class is used to create responsive tables: a horizontal scroll bar is created when the screen width is less than 992px, and a different effect is displayed if the visual area width is greater than992px (no scroll bar): 
 
 
 Example  
 
 
 
<div class="table-responsive"> <table class="table"> <thead> <tr> <th># <th>Firstnameth> <th>Lastnameth> <th>Ageth> <th>Cityth> <th>Countryth> <th>Sexth> <th>Exampleth> <th>Exampleth> <th>Exampleth> <th>Exampleth> tr> thead> <tbody> <tr> <td>1td> <td>Annatd> <td>Pitttd> <td>35td> <td>New Yorktd> <td>USAtd> <td>Femaletd> <td>Yestd> <td>Yestd> <td>Yestd> <td>Yestd> tr> tbody> table> div>    
 You can set the scroll bar to display under the specified screen width through the following classes: 
 
  
  
 Class name 
 		  
 Screen width 
 		 
   
  
 .table-responsive-sm 
 		  
 < 576px 
 		 
 
  
 .table-responsive-md 
 		  
 < 768px 
 		 
 
  
 .table-responsive-lg 
 		  
 < 992px 
 		 
 
  
 .table-responsive-xl 
 		  
 < 1200px 
 		 
 
  
 .table-responsive-xxl 
 		  
 < 1400px 
 		 
  
  
 
 Example  
 
 
 
<div class="table-responsive-sm"> <table class="table"> ... table> div>       
                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            7.7. Bootstrap5 form 
                        

                    

                

            
        
        

            

    
        
        

            

                

                    
                        
                            
                                Web框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        

                            
 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                《地理信息系统原理、技术与方法》 
                            
                            
                        
                             97
                        
                    
                    
                    
                        

                            
 
 
 最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289