Javascript MDBootstrap 按钮组组件

JavaScript MDBootstrap 按钮组组件是一组用于构建响应式，现代化UI的按钮组件。MDBootstrap是一款基于Bootstrap的前端开发框架，提供了许多易于使用的组件和工具，可帮助您快速构建漂亮的Web应用程序和网站。

特征

• 易于使用。
• 可自定义颜色和样式。
• 支持多个分组和尺寸。
• 响应式设计，可在所有设备上表现良好。

用法

安装：

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-DfEwcvQmVPvZ2QvE680LkTvIQBLePWlAnNhN/cCSvEtFNS0aAXcJbsojmjKkPZZX" crossorigin="anonymous">

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">

<!-- MDBootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdbootstrap/css/mdb.min.css">

按钮组：

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">左侧按钮</button>
  <button type="button" class="btn btn-primary">中间按钮</button>
  <button type="button" class="btn btn-primary">右侧按钮</button>
</div>

自定义样式：

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">默认</button>
  <button type="button" class="btn btn-warning text-dark">警告</button>
  <button type="button" class="btn btn-success">成功</button>
</div>

分组和尺寸：

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-primary">左侧按钮</button>
  <button type="button" class="btn btn-primary">中间按钮</button>
  
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      下拉
    </button>
    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <li><a class="dropdown-item" href="#">下拉一</a></li>
      <li><a class="dropdown-item" href="#">下拉二</a></li>
    </ul>
  </div>

  <button type="button" class="btn btn-primary">右侧按钮</button>
</div>

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">按钮一</button>
  <button type="button" class="btn btn-primary">按钮二</button>
  <button type="button" class="btn btn-primary">按钮三</button>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-primary btn-lg">大按钮</button>
  <button type="button" class="btn btn-primary btn-sm">小按钮</button>
</div>

效果如下：

总结

JavaScript MDBootstrap 按钮组组件是一个出色的工具，可帮助您构建现代化UI。它易于使用，具有多种自定义选项，可以满足您的所有需求。在建立响应式网站时一定要尝试使用这个组件。