📌  相关文章
📜  我们如何在 Bootstrap 中创建大按钮组？

📅  最后修改于: 2022-05-13 01:56:52.188000             🧑  作者: Mango

我们如何在 Bootstrap 中创建大按钮组？

Bootstrap是一个免费的开源 CSS 和 JavaScript/jQuery 代码集合，用于创建动态网站布局和 Web 应用程序。它是最流行的前端框架之一，拥有一组非常好的预定义 CSS 代码。它使用不同类型的类来制作响应式网站。 Bootstrap 5 是 Bootstrap 的主要版本，它更新了 UI 设计并进行了一些更改。 Button 是 Bootstrap 5 提供的非常关键的组件类。通过使用各种 Buttons 类，现在我们可以设计一个响应非常灵敏且有吸引力的 Button 组件。我们可以使用预定义的类在网页上添加按钮。 Bootstrap 提供了多种类型的按钮，还支持多个自定义按钮。在本文中，我们将了解如何使用 Bootstrap Buttons 类创建带有标签的大按钮组。

句法：

Button Group： Button Group 是 Bootstrap 5 提供的一个组件，它基本上可以让你制作一个系列中的一组按钮。按钮组还支持所有类型的按钮类。

类型：以下是 Bootstrap 5 中可用的 9 种按钮类型：

  • btn-primary
  • btn-二级
  • btn-成功
  • btn-危险
  • btn警告
  • btn信息
  • btn-光
  • btn-黑暗
  • btn链接

Bootstrap Buttons & 其他按钮组件的详细使用请参考 Bootstrap 5 Buttons & Bootstrap Buttons with Examples 文章。

现在让我们通过示例了解如何使用btn-group类将一系列按钮组合在一行中。

方法一：

  • 在 div 类中使用类btn-group和btn-group-lg 。
  • 在每个 div 类中，添加一个 HTML

示例1：为了创建一个按钮组，你需要在容器标签中定义一个btn-group类，例如

。

HTML


  

  
    
    
    
  
    
    
  
    GeeksforGeeks Bootstrap Button

  

    

        GeeksforGeeks
    

      
    

        Bootstrap button group
    

  
    

        
  
        
    


  

HTML


  

  
    
    
    
  
    
    
  
    GeeksforGeeks Bootstrap Button

  

    

        GeeksforGeeks
    

      
    

        Bootstrap Button group sizing
    

  
    

        

            
        

  
        

            
        

  
        

            
        

    


  

HTML


  

    
        Bootstrap 5 Horizontal Large Buttons group
    
  
    
    

  

    

        

            GeeksforGeeks
        

          
        

            Horizontal Large Buttons Group
        

  
        

            
  
            
  
            
        

    


  

HTML


  

    
        Bootstrap 5 Vertical Large Buttons group
    
  
    
    

  

    

        

            GeeksforGeeks
        

          
        

            Vertical Large Buttons Group
        

  
        

            
  
            
  
            
        

    


  

输出：

我们还通过包含类btn-group-*和.btn-group父类来创建相同大小的按钮组，而不是在每个按钮中包含大小调整类。

btn-group类有多种大小。这些如下：

  • btn-group-sm：用于小按钮组。
  • btn-group-md：用于中等按钮组。
  • btn-group-lg：用于大按钮组。

示例 2：此示例演示了在 Bootstrap 中使用不同的按钮组大小调整组。

HTML 



  

  
    
    
    
  
    
    
  
    GeeksforGeeks Bootstrap Button

  

    

        GeeksforGeeks
    

      
    

        Bootstrap Button group sizing
    

  
    

        

            
        

  
        

            
        

  
        

            
        

    


  

输出：

我们将按照以下步骤构建 Bootstrap 大按钮组。

方法二：

第一步：要使用 Bootstrap 组件类，我们需要下载 bootstrap 包或者我们可以直接使用 Bootstrap CDN 链接，从官方页面，在 标签内，如下图所示。

第 2 步：在外部

中将类声明为具有.btn-group-lg值的容器。

第 3 步：现在，将不同的预定义按钮类添加到内部 HTML

我们将利用上述两种方法在 Bootstrap 中创建大按钮组。

bootstrap 中水平排列的大按钮组： .btn-group-lg类与父.btn-group类一起用于创建水平排列的大按钮组。

示例 3：在此示例中，我们在 Bootstrap 中创建了水平系列的大按钮组。

HTML 



  

    
        Bootstrap 5 Horizontal Large Buttons group
    
  
    
    

  

    

        

            GeeksforGeeks
        

          
        

            Horizontal Large Buttons Group
        

  
        

            
  
            
  
            
        

    


  

输出：

bootstrap 中垂直排列的大按钮组： .btn-group-lg类与父.btn-group-vertical类一起用于创建水平排列的大按钮组。

示例 4：在此示例中，我们在 Bootstrap 中创建了一系列垂直的大按钮组。

HTML 



  

    
        Bootstrap 5 Vertical Large Buttons group
    
  
    
    

  

    

        

            GeeksforGeeks
        

          
        

            Vertical Large Buttons Group
        

  
        

            
  
            
  
            
        

    


  

输出：