7.29. Bootstrap5 gadget

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

Page Views: 10 views

Bootstrap 5 provides a lot of useful classes to help us achieve results quickly without having to rewrite some CSS code.

7.29.1. Background color

When setting the background color of different elements, you need to pass the .text-\* class to set the matching text color

Image0

Example 

<div class="p-3 mb-2 bg-primary text-white">.bg-primarydiv> <div class="p-3 mb-2 bg-secondary text-white">.bg-secondarydiv> <div class="p-3 mb-2 bg-success text-white">.bg-successdiv> <div class="p-3 mb-2 bg-danger text-white">.bg-dangerdiv> <div class="p-3 mb-2 bg-warning text-dark">.bg-warningdiv> <div class="p-3 mb-2 bg-info text-dark">.bg-infodiv> <div class="p-3 mb-2 bg-light text-dark">.bg-lightdiv> <div class="p-3 mb-2 bg-dark text-white">.bg-darkdiv> <div class="p-3 mb-2 bg-body text-dark">.bg-bodydiv> <div class="p-3 mb-2 bg-white text-dark">.bg-whitediv> <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparentdiv>    
   .bg-gradient   class can set the effect of the background color gradient 
  
 
 Example  
 
 
 
<div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primarydiv> <div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondarydiv> <div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-successdiv> <div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-dangerdiv> <div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warningdiv> <div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-infodiv> <div class="p-3 mb-2 bg-light bg-gradient text-dark">.bg-lightdiv> <div class="p-3 mb-2 bg-dark bg-gradient text-white">.bg-darkdiv> <div class="p-3 mb-2 bg-body bg-gradient text-dark">.bg-bodydiv> <div class="p-3 mb-2 bg-white bg-gradient text-dark">.bg-whitediv> <div class="p-3 mb-2 bg-transparent bg-gradient text-dark">.bg-transparentdiv>      
 
  7.29.2.  Frame  
 
 We can use it.   border   related classes display borders as needed: 
 
 Image1 
 
 
 Example  
 
 
 
<span class="border">span> <span class="border border-0">span> <span class="border border-top-0">span> <span class="border border-right-0">span> <span class="border border-bottom-0">span> <span class="border border-left-0">span> <br> <span class="border-top">span> <span class="border-end">span> <span class="border-bottom">span> <span class="border-start">span>    
   .border-1   to   .border-5   class is used to set the width of the borderline: 
  
 
 Example  
 
 
 
<span class="border border-1">span> <span class="border border-2">span> <span class="border border-3">span> <span class="border border-4">span> <span class="border border-5">span>    
 The following sets the different colors of the border: 
  
 
 Example  
 
 
 
<span class="border border-primary">span> <span class="border border-secondary">span> <span class="border border-success">span> <span class="border border-danger">span> <span class="border border-warning">span> <span class="border border-info">span> <span class="border border-light">span> <span class="border border-dark">span> <span class="border border-white">span>    
 Rounded related classes are used to set fillets: 
 
 Image2 
  
 
 Example  
 
 
 
<img src="..." class="rounded" alt="..."> <img src="..." class="rounded-top" alt="..."> <img src="..." class="rounded-end" alt="..."> <img src="..." class="rounded-bottom" alt="..."> <img src="..." class="rounded-start" alt="..."> <img src="..." class="rounded-circle" alt="..."> <img src="..." class="rounded-pill" alt="..."> 
 
 
 
   rounded-0   to   rounded-3   class is used to set the size of the fillet 
 
 
 
 Example  
 
 
 
<img src="..." class="rounded-0" alt="..."> <img src="..." class="rounded-1" alt="..."> <img src="..." class="rounded-2" alt="..."> <img src="..." class="rounded-3" alt="..."> 
 
 
 
  
 
  7.29.3.  Float and clear float  
 
 Element floats to the right to use the   .float-end   class, floating to the left using the   .float-start   class   .clearfix   class is used to clear floats: 
 
 
 Example  
 
 
 
<div class="clearfix"> <span class="float-start">Float leftspan> <span class="float-end">Float rightspan> div>    
 You can also set the floating effect according to the screen size (   .float-*-left|right   -* indicates sm (> = 576px), md (> = 768px), lg (> = 992px), xl (> = 1200px) or xxl (> = 1400px): 
  
 
 Example  
 
 
 
<div class="float-sm-end">Small screen floating to the rightdiv><br> <div class="float-md-end">Medium screen floating to the rightdiv><br> <div class="float-lg-end">Large screen floating to the rightdiv><br> <div class="float-xl-end">Large screen floating to the rightdiv><br> <div class="float-xxl-end">Extra large screen floating to the rightdiv><br> <div class="float-none">No floatdiv>      
 
  7.29.4.  Center alignment  
 
 Use   .mx-auto   class to set the center alignment of elements (add   margin-left   and   margin-right   for auto): 
 
 
 Example  
 
 
 
<div class="mx-auto bg-warning" style="width:150px">center aligneddiv>      
 
  7.29.5.  Width and height  
 
 Width usage   w-\*   (.w-25,   .w-50,   .w-75,   .w-100,   .mw-auto,   .mw-100)   class to set the. 
 
 
 Example  
 
 
 
<div class="w-25 bg-warning">25% widthdiv> <div class="w-50 bg-warning">50% widthdiv> <div class="w-75 bg-warning">75% widthdiv> <div class="w-100 bg-warning">100% widthdiv> <div class="w-auto bg-warning">Automatically set widthdiv> <div class="mw-100 bg-warning">100% widthdiv>    
 High use   h-\*   (.h-25,   .h-50,   .h-75,   .h-100,   .mh-auto,   .mh-100)   class to set the. 
  
 
 Example  
 
 
 
<div style="height:200px;background-color:#ddd"> <div class="h-25 d-inline-block p-2 bg-warning">25% widthdiv> <div class="h-50 d-inline-block p-2 bg-warning">50% widthdiv> <div class="h-75 d-inline-block p-2 bg-warning">75% widthdiv> <div class="h-100 d-inline-block p-2 bg-warning">100% widthdiv> <div class="h-auto d-inline-block p-2 bg-warning">Automatically set widthdiv> <div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">100% widthdiv> div>       
                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            7.29. Bootstrap5 gadget 
                        

                    

                

            
        
        

            

    
        
        

            

                

                    
                        
                            
                                Web框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        

                            
 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

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

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

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289