7.12. Bootstrap5 button group

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

Page Views: 9 views

Bootstrap 5 allows us to put buttons on the same line.

It can be found in the

add on the element .btn-group class to create a button group.

7.12.1. Example 

<div class="btn-group"> <button type="button" class="btn btn-primary">Applebutton> <button type="button" class="btn btn-primary">Samsungbutton> <button type="button" class="btn btn-primary">Sonybutton> div>    
 Tip: we can use the   .btn-group-lg|sm|xs   class to set the size of the button group. 
  
 
  7.12.2.  Example  
 
 
 
<div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">Applebutton> <button type="button" class="btn btn-primary">Samsungbutton> <button type="button" class="btn btn-primary">Sonybutton> div>    
 
 Vertical button group  
 
 Can be used   .btn-group-vertical   class to create a vertical button group: 
 
  
 
  7.12.3.  Example  
 
 
 
<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Applebutton> <button type="button" class="btn btn-primary">Samsungbutton> <button type="button" class="btn btn-primary">Sonybutton> div>    
 
 Built-in button set and drop-down menu  
 
 We can set the drop-down menu in the button group: 
 
  
 
  7.12.4.  Example  
 
 
 
<div class="btn-group"> <button type="button" class="btn btn-primary">Applebutton> <button type="button" class="btn btn-primary">Samsungbutton> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Sony button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Tableta> <a class="dropdown-item" href="#">Smartphonea> div> div> div>    
 
 Vertical button group and drop-down menu  
 
  
 
  7.12.5.  Example  
 
 
 
<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Applebutton> <button type="button" class="btn btn-primary">Samsungbutton> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sonybutton> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Tableta>li> <li><a class="dropdown-item" href="#">Smartphonea>li> ul> div> div>    
 
 Multiple button groups  
 
 Button groups can be displayed side by side on the same line: 
 
  
 
  7.12.6.  Example  
 
 
 
<div class="btn-group"> <button type="button" class="btn btn-primary">Applebutton> <button type="button" class="btn btn-primary">Samsungbutton> <button type="button" class="btn btn-primary">Sonybutton> div> <div class="btn-group"> <button type="button" class="btn btn-primary">BMWbutton> <button type="button" class="btn btn-primary">Mercedesbutton> <button type="button" class="btn btn-primary">Volvobutton> div>      
                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            7.12. Bootstrap5 button group 
                        

                    

                

            
        
        

            

    
        
        

            

                

                    
                        
                            
                                Web框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        

                            
 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

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

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

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289