纽扣

按钮-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