纽扣

按钮-Bootstrap 5和Material Design 2.0组件

将MDB自定义按钮样式用于表单，对话框等中的操作，并支持多个 大小，状态等。

注意：阅读 API 标签以找到所有可用选项，然后 高级定制

基本例子


          <button type="button" class="btn btn-primary">Button</button>

禁用文字换行

如果您不希望换行，请添加 .text-nowrap 类添加到按钮。在Sass中，您可以设置 $ btn-white-space：nowrap 禁用每个按钮的文本换行。

色彩

MDB包含几种预定义的按钮样式，每种样式都有其自己的语义目的，并且 很少有其他东西可以控制。


          <button type="button" class="btn btn-primary">Primary</button>
          <button type="button" class="btn btn-secondary">Secondary</button>
          <button type="button" class="btn btn-success">Success</button>
          <button type="button" class="btn btn-danger">Danger</button>
          <button type="button" class="btn btn-warning">Warning</button>
          <button type="button" class="btn btn-info">Info</button>
          <button type="button" class="btn btn-light" data-mdb-ripple-color="dark">Light</button>
          <button type="button" class="btn btn-dark">Dark</button>
          <button type="button" class="btn btn-link" data-mdb-ripple-color="dark">Link</button>

向辅助技术体现含义：
使用颜色添加含义仅提供视觉指示，不会传达给 辅助技术的用户-例如屏幕阅读器。确保信息表示为 颜色可以从内容本身（例如可见文字）中显而易见，也可以包含在内 通过其他方式，例如用 .visually-hidden 类。

大纲

需要一个按钮，但是他们带来的沉重背景颜色不是吗？替换默认 带有 .btn-outline-* 的修饰符类，以删除所有背景图片和 任何按钮上的颜色。

在大纲按钮中，我们建议添加 data-mdb-ripple-color =“ dark” 更改颜色 涟漪效应。波纹的默认灯光颜色（自动应用 （对于每个按钮），在使用浅色和轮廓按钮的情况下可能看不到。

要了解有关波纹效应的更多信息，请查看以下所有可用选项 Ripple Docs 。


          <button type="button" class="btn btn-outline-primary" data-mdb-ripple-color="dark">
            Primary
          </button>
          <button type="button" class="btn btn-outline-secondary" data-mdb-ripple-color="dark">
            Secondary
          </button>
          <button type="button" class="btn btn-outline-success" data-mdb-ripple-color="dark">
            Success
          </button>
          <button type="button" class="btn btn-outline-danger" data-mdb-ripple-color="dark">
            Danger
          </button>
          <button type="button" class="btn btn-outline-warning" data-mdb-ripple-color="dark">
            Warning
          </button>
          <button type="button" class="btn btn-outline-info" data-mdb-ripple-color="dark">
            Info
          </button>
          <button type="button" class="btn btn-outline-light" data-mdb-ripple-color="dark">
            Light
          </button>
          <button type="button" class="btn btn-outline-dark" data-mdb-ripple-color="dark">
            Dark
          </button>

某些按钮样式使用相对较浅的前景色，并且仅应在 深色背景以具有足够的对比度。

四舍五入

添加 .btn-rounded 类以使按钮四舍五入。


          <button type="button" class="btn btn-primary btn-rounded">Primary</button>
          <button type="button" class="btn btn-secondary btn-rounded">Secondary</button>
          <button type="button" class="btn btn-success btn-rounded">Success</button>
          <button type="button" class="btn btn-danger btn-rounded">Danger</button>
          <button type="button" class="btn btn-warning btn-rounded">Warning</button>
          <button type="button" class="btn btn-info btn-rounded">Info</button>
          <button type="button" class="btn btn-light btn-rounded">Light</button>
          <button type="button" class="btn btn-dark btn-rounded">Dark</button>

圆角轮廓

您可以结合使用 .btn-outline-* 和 .btn-rounded 按钮轮廓并同时四舍五入。


          <button
            type="button"
            class="btn btn-outline-primary btn-rounded"
            data-mdb-ripple-color="dark"
          >
            Primary
          </button>
          <button
            type="button"
            class="btn btn-outline-secondary btn-rounded"
            data-mdb-ripple-color="dark"
          >
            Secondary
          </button>
          <button
            type="button"
            class="btn btn-outline-success btn-rounded"
            data-mdb-ripple-color="dark"
          >
            Success
          </button>
          <button
            type="button"
            class="btn btn-outline-danger btn-rounded"
            data-mdb-ripple-color="dark"
          >
            Danger
          </button>
          <button
            type="button"
            class="btn btn-outline-warning btn-rounded"
            data-mdb-ripple-color="dark"
          >
            Warning
          </button>
          <button
            type="button"
            class="btn btn-outline-info btn-rounded"
            data-mdb-ripple-color="dark"
          >
            Info
          </button>
          <button
            type="button"
            class="btn btn-outline-light btn-rounded"
            data-mdb-ripple-color="dark"
          >
            Light
          </button>
          <button
            type="button"
            class="btn btn-outline-dark btn-rounded"
            data-mdb-ripple-color="dark"
          >
            Dark
          </button>

漂浮的

使用 .btn-floating 类制作一个圆形按钮。

为了使其正常工作，您必须在其中放置一个图标。 文字不会 适合。您可以在我们的网站上找到数百个可用图标 图标文档。 


          <button type="button" class="btn btn-primary btn-floating">
            <i class="fas fa-download"></i>
          </button>

您几乎可以将所有相同的类和属性应用于浮动按钮， 常规按钮-颜色，波纹，大小，轮廓等。


          <button type="button" class="btn btn-primary btn-lg btn-floating">
            <i class="fab fa-facebook-f"></i>
          </button>
          <button
            type="button"
            class="btn btn-outline-success btn-floating"
            data-mdb-ripple-color="dark"
          >
            <i class="fas fa-star"></i>
          </button>
          <button type="button" class="btn btn-danger btn-floating">
            <i class="fas fa-magic"></i>
          </button>
          <button type="button" class="btn btn-dark btn-floating">
            <i class="fab fa-apple"></i>
          </button>

社会的

结合我们的图标和自定义颜色，您可以创建社交按钮。结合我们的图标和 自定义颜色，您可以创建社交按钮。查看我们所有可用的图标 图标搜索（选中 “品牌”以过滤品牌图标）。

在下面的示例中，我们放置一个Facebook图标 <i class="fab fa-facebook-f"></i> 在按钮内并设置 一种 background-color 至 #3B5998 （facebook品牌颜色）。 


          <a class="btn btn-primary" style="background-color: #3b5998" href="#!" role="button"
            ><i class="fab fa-facebook-f"></i
          ></a>

样品品牌

社交按钮形式的一些最受欢迎的品牌。


            <!-- Facebook -->
            <a class="btn btn-primary" style="background-color: #3b5998" href="#!" role="button"
              ><i class="fab fa-facebook-f"></i
            ></a>

            <!-- Twitter -->
            <a class="btn btn-primary" style="background-color: #55acee" href="#!" role="button"
              ><i class="fab fa-twitter"></i
            ></a>

            <!-- Google -->
            <a class="btn btn-primary" style="background-color: #dd4b39" href="#!" role="button"
              ><i class="fab fa-google"></i
            ></a>

            <!-- Instagram -->
            <a class="btn btn-primary" style="background-color: #ac2bac" href="#!" role="button"
              ><i class="fab fa-instagram"></i
            ></a>

            <!-- Linkedin -->
            <a class="btn btn-primary" style="background-color: #0082ca" href="#!" role="button"
              ><i class="fab fa-linkedin-in"></i
            ></a>

            <!-- Pinterest -->
            <a class="btn btn-primary" style="background-color: #c61118" href="#!" role="button"
              ><i class="fab fa-pinterest"></i
            ></a>

            <!-- Vkontakte -->
            <a class="btn btn-primary" style="background-color: #4c75a3" href="#!" role="button"
              ><i class="fab fa-vk"></i
            ></a>

            <!-- Stack overflow -->
            <a class="btn btn-primary" style="background-color: #ffac44" href="#!" role="button"
              ><i class="fab fa-stack-overflow"></i
            ></a>

            <!-- Youtube -->
            <a class="btn btn-primary" style="background-color: #ed302f" href="#!" role="button"
              ><i class="fab fa-youtube"></i
            ></a>

            <!-- Slack -->
            <a class="btn btn-primary" style="background-color: #481449" href="#!" role="button"
              ><i class="fab fa-slack-hash"></i
            ></a>

            <!-- Github -->
            <a class="btn btn-primary" style="background-color: #333333" href="#!" role="button"
              ><i class="fab fa-github"></i
            ></a>

            <!-- Dribbble -->
            <a class="btn btn-primary" style="background-color: #ec4a89" href="#!" role="button"
              ><i class="fab fa-dribbble"></i
            ></a>

            <!-- Reddit -->
            <a class="btn btn-primary" style="background-color: #ff4500" href="#!" role="button"
              ><i class="fab fa-reddit-alien"></i
            ></a>

            <!-- Whatsapp -->
            <a class="btn btn-primary" style="background-color: #25d366" href="#!" role="button"
              ><i class="fab fa-whatsapp"></i
            ></a>

流动的社会

通过添加 .btn-floating 类，您可以创建一个漂亮的浮动社交按钮。


            <a
              class="btn btn-primary btn-lg btn-floating"
              style="background-color: #ac2bac"
              href="#!"
              role="button"
              ><i class="fab fa-instagram"></i
            ></a>

文本

您无需仅使用图标。您可以向按钮添加文本。记得添加一些 间距类（例如 .me-2 ），以在图标和 文本。

Twitter 

            <a class="btn btn-primary" style="background-color: #55acee" href="#!" role="button"
              ><i class="fab fa-twitter me-2"></i>Twitter</a
            >

仅图标

通过删除按钮类并将 background-color 替换为 color ，您可以创建简约的可点击图标。


            <!-- Facebook -->
            <a style="color: #3b5998" href="#!" role="button"
              ><i class="fab fa-facebook-f fa-lg"></i
            ></a>

            <!-- Twitter -->
            <a style="color: #55acee" href="#!" role="button"
              ><i class="fab fa-twitter fa-lg"></i
            ></a>

            <!-- Google -->
            <a style="color: #dd4b39" href="#!" role="button"
              ><i class="fab fa-google fa-lg"></i
            ></a>

            <!-- Instagram -->
            <a style="color: #ac2bac" href="#!" role="button"
              ><i class="fab fa-instagram fa-lg"></i
            ></a>

通知事项

通过使用徽章，您可以创建带有通知的按钮来提供柜台。

8 

            <a class="btn btn-primary" style="background-color: #3b5998" href="#!" role="button"
              ><i class="fab fa-facebook-f"></i><span class="badge bg-danger ms-2">8</span></a
            >

标签

的 .btn 这些类旨在与 <button> 元件。但是，您也可以在 <a> 要么 <input> 元素（尽管某些浏览器可能适用 渲染略有不同）。

在使用按钮类时<a> 用于触发页内元素 功能（例如折叠内容），而不是链接到其中的新页面或部分 在当前页面上，应该为这些链接赋予 role =“button” 将其目的传达给辅助技术，例如屏幕阅读器。

Link 

          <a class="btn btn-primary" href="#" role="button">Link</a>
          <button class="btn btn-primary" type="submit">Button</button>
          <input class="btn btn-primary" type="button" value="Input" />
          <input class="btn btn-primary" type="submit" value="Submit" />
          <input class="btn btn-primary" type="reset" value="Reset" />

Sizes

喜欢更大或更小的按钮吗？添加 .btn-lg 或 .btn-sm 其他尺寸。 


          <button type="button" class="btn btn-primary btn-sm">Button</button>
          <button type="button" class="btn btn-primary">Button</button>
          <button type="button" class="btn btn-primary btn-lg">Button</button>

活跃状态

添加 .active 类以使按钮看起来像被按下。

Primary link Link 

          <a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true"
            >Primary link</a
          >
          <a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true"
            >Link</a
          >

禁用状态

通过添加按钮使按钮看起来不活动disabled 布尔属性 <button> 元件。禁用的按钮有 pointer-events: none适用于防止悬停状态和活动状态 触发。 


          <button type="button" class="btn btn-primary btn-lg" disabled>Primary button</button>
          <button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

使用的禁用按钮 <a> 元素的行为略有不同：

  • <a>不支持 disabled 属性，因此您必须添加 的 .disabled 类以使其在视觉上显得已禁用。
  • 包括一些未来友好的样式以禁用所有 定位按钮上的 pointer-events 。在支持该属性的浏览器中，您可以 根本看不到禁用的光标。
  • 禁用的按钮应包括 aria-disabled =“ true” 属性指示元素的状态 辅助技术。
Primary link Link 

          <a
            href="#"
            class="btn btn-primary btn-lg disabled"
            tabindex="-1"
            role="button"
            aria-disabled="true"
            >Primary link</a
          >
          <a
            href="#"
            class="btn btn-secondary btn-lg disabled"
            tabindex="-1"
            role="button"
            aria-disabled="true"
            >Link</a
          >

链接功能警告：
.disabled 类使用 pointer-events：none 尝试禁用 的链接功能 <a>，但是CSS属性尚未标准化。 另外，即使在支持 pointer-events：none ，键盘的浏览器中 导航不受影响，这意味着有视力的键盘用户和辅助用户 技术仍然可以激活这些链接。为了安全起见，请添加一个 这些链接上的 tabindex =“-1” 属性（以防止它们接收键盘 焦点）并使用自定义JavaScript禁用其功能。

Block buttons

像混合Bootstrap 4一样创建全宽度的“阻止按钮”响应式堆栈 我们的显示和间隙实用程序。通过使用实用程序而不是按钮特定的类，我们 对间距，对齐和响应行为具有更大的控制权。


          <div class="d-grid gap-2">
            <button class="btn btn-primary" type="button">Button</button>
            <button class="btn btn-primary" type="button">Button</button>
          </div>

在这里，我们创建一个响应式变化，从垂直堆叠的按钮开始，直到 md 断点，其中 .d-md-block 替换 .d-grid 类，从而使 gap-2 实用程序无效。调整大小 浏览器以查看它们的变化。


          <div class="d-grid gap-2 d-md-block">
            <button class="btn btn-primary" type="button">Button</button>
            <button class="btn btn-primary" type="button">Button</button>
          </div>

您可以使用网格列宽度类来调整块按钮的宽度。例如， 对于半角的“阻止按钮”，请使用 .col-6 。将其水平居中 .mx-auto 也是如此。


          <div class="d-grid gap-2 col-6 mx-auto">
            <button class="btn btn-primary" type="button">Button</button>
            <button class="btn btn-primary" type="button">Button</button>
          </div>

当水平时，可以使用其他实用程序来调整按钮的对齐方式。这里 我们以前面的响应示例为例，并添加了一些flex实用程序和margin实用程序 当按钮不再堆叠时，将其右对齐。


          <div class="d-grid gap-2 d-md-flex justify-content-md-end">
            <button class="btn btn-primary me-md-2" type="button">Button</button>
            <button class="btn btn-primary" type="button">Button</button>
          </div>

切换状态

添加 data-mdb-toggle =“ button” 以切换按钮的活动状态。如果 您要预先切换按钮，则必须手动添加 .active 类 和 aria-pressed =“ true” 到＆lt; button＆gt; 。


          <button type="button" class="btn btn-primary" data-mdb-toggle="button" autocomplete="off">
            Toggle button
          </button>
          <button
            type="button"
            class="btn btn-primary active"
            data-mdb-toggle="button"
            autocomplete="off"
            aria-pressed="true"
          >
            Active toggle button
          </button>
          <button
            type="button"
            class="btn btn-primary"
            disabled
            data-mdb-toggle="button"
            autocomplete="off"
          >
            Disabled toggle button
          </button>
Toggle link Active toggle link Disabled toggle link 

          <a href="#" class="btn btn-primary" role="button" data-mdb-toggle="button">Toggle link</a>
          <a
            href="#"
            class="btn btn-primary active"
            role="button"
            data-mdb-toggle="button"
            aria-pressed="true"
            >Active toggle link</a
          >
          <a href="#" class="btn btn-primary disabled" role="button" data-mdb-toggle="button"
            >Disabled toggle link</a
          >

纽扣 - API

方法

您可以使用按钮构造函数创建按钮实例，例如：


      const button = document.getElementById('myButton')
      const bsButton = new mdb.Button(button)
Method Description Example
toggle Toggles push state. Gives the button the appearance that it has been activated. instance.toggle()
dispose Destroys an element's button. instance.dispose()

例如，切换所有按钮


      const buttons = document.querySelectorAll('.btn')
      buttons.forEach((button) => {
        const button = new mdb.Button(button)
        button.toggle()
      })

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件：


        import { Button } from 'mdb-ui-kit';

Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.

JOIN OUR MAILING LIST NOW
© 2021 Copyright: MDBootstrap.com