📌  相关文章
📜  引导按钮

📅  最后修改于: 2020-12-19 02:48:53             🧑  作者: Mango

引导按钮

有7种样式可以在Bootstrap中添加按钮。使用以下类来实现不同的按钮样式：

  • .btn-默认
  • .btn-primary
  • .btn成功
  • .btn-info
  • .btn警告
  • .btn-危险
  • .btn链接

Bootstrap按钮示例：指定七个样式

  

  
     Job
     
  
  
    
Button Example!

Bootstrap 4中添加了3种新按钮，而Bootstrap 3中提供了7种按钮。

这三个按钮是：

  • 次要的
  • 黑暗
  • 光

以下类分别用于指定它们：

例：

让我们看看Bootstrap 4支持的所有按钮。




  Bootstrap Example
  
  
  
  
  
  





  
Button Styles

引导按钮尺寸

在Bootstrap中，您可以根据需要选择一个按钮。它提供四种按钮尺寸。

以下类定义了不同的大小：

  • .btn-lg
  • .btn-md
  • .btn-sm
  • .btn-xs

例：




  Bootstrap Example
  
  
  
  
  





  
Button Sizes

引导程序启用/禁用按钮

您可以将按钮设置为禁用或不可点击状态。

.active类用于使按钮显示为按下状态，而.disabled类用于使按钮不可单击：

例：




  Bootstrap Example
  
  
  
  
  





  
Button States

引导程序块级别按钮

块级按钮覆盖父元素的整个宽度。

.btn-block类用于创建块级别按钮：

例：




  Bootstrap Example
  
  
  
  
  





  
Block Level Buttons

  
  

  
Large Block Level Buttons

  
  

  
Small Block Level Buttons

具有其他元素的按钮类

您可以将按钮类与其他标签(例如，

按钮轮廓/带边框的按钮

Bootstrap 4提供八个轮廓/边框按钮：

例




  Bootstrap Example
  
  
  
  
  
  





  
Button Outline/ Bordered Buttons