自举 5 |按钮组

原文:https://www.geeksforgeeks.org/bootstrap-5-button-group/

Bootstrap 5 是 Bootstrap 的最新主要版本，在该版本中，他们修改了用户界面并进行各种更改。按钮组是 Bootstrap 5 提供的一个组件，它有助于将一系列按钮组合成一行。它支持所有类型的按钮。

语法:

<div class="btn-group"> Buttons... <div>

类型:以下是 Bootstrap 5 中提供的九种按钮类型:

  • BTN-初级
  • BTN-二级
  • BTN-成功
  • BTN-危险

  • BTN-警告

  • btn 信息

  • BTN-光
  • BTN-暗
  • btn-link

水平排列的按钮组:的。btn-group 类用于创建水平排列的按钮组。

  • 示例:本示例用于展示 Bootstrap 5 中水平排列的按钮组的工作情况。

    ```html <!DOCTYPE html>

                 Bootstrap 5 | Buttons group     

        

        
            

                GeeksforGeeks         

        
        
            
                                           Primary                                        Secondary                                        Success                                        Danger         
            
                                      Warning                                   Info                                  Light                                  Dark                                  Link         
        

                      ```

    输出:

  • Vertically arranged button groups: The .btn-group-vertical class is used in parent div to create vertical button group.

    示例:该示例用于显示 Bootstrap 5 中垂直排列的按钮组的工作情况。

    ```html <!DOCTYPE html>

                 Bootstrap 5 | Buttons group     

        

        

                GeeksforGeeks         

                                 HTML             

                    CSS             

                    JavaScript                      

        

    ```

    输出:

  • Button group sizing: The whole button group can be given the same size by including the class btn-group- ( could be sm, md or lg) in the .btn-group parent element, instead of including sizing classes in each button.

    示例:该示例使用 Bootstrap 5 中的按钮组显示按钮大小的工作方式。

    ```html <!DOCTYPE html>

                 Bootstrap 5 | Buttons group     

        

        

                GeeksforGeeks         

                
                                         HTML                 

                        CSS                 

                        JavaScript                              



                                         HTML                 

                        CSS                 

                        JavaScript                              



                                         HTML                 

                        CSS                 

                        JavaScript                              

            
        

    ```

    输出:

  • Nesting button groups and making dropdown menus: A button group can be nested within another button group and dropdown menus can be created this way.

    单按钮下拉: 示例:

    ```html <!DOCTYPE html>

                 Bootstrap 5 | Buttons group     

                          

        

                GeeksforGeeks         

                
                                         HTML                 

                        CSS                 

                        
                                                         JavaScript                      

                        
                    
                
            
        

           ```

    输出:

  • Split button dropdown: Example:

    ```html <!DOCTYPE html>

                 Bootstrap 5 | Buttons group     

        

                 

        

                GeeksforGeeks         

                
                                         HTML                 

                        CSS                 

                                                 JavaScript                                                                                        

                    
                
            
        

    ```

    输出:

  • Bootstrap 5 also supports Split Button Vertical Dropdown. Example:

    ```html <!DOCTYPE html>

                 Bootstrap 5 | Buttons group     

                             

        

                GeeksforGeeks         

                
                                       HTML               

                        CSS                 

                                                 JavaScript                     

                    
                
            
        

    ```

    输出:

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/6626.html