Bootstrap4 按钮组

在Bootstrap 4中，按钮组是一种将一组按钮放在同一行或同一列的方式。以下是一个简单的例子，演示如何创建一个水平的按钮组：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <title>Bootstrap 4 按钮组</title>
</head>
<body>

<div class="container mt-4">
  <h2>按钮组示例</h2>

  <!-- 水平按钮组 -->
  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">按钮1</button>
    <button type="button" class="btn btn-secondary">按钮2</button>
    <button type="button" class="btn btn-success">按钮3</button>
  </div>

</div>

<!-- Bootstrap JavaScript 和 jQuery（可选）-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</body>
</html>

在这个例子中，我们使用了Bootstrap提供的btn-group类来创建按钮组，并使用btn类来定义按钮的样式。这是一个简单的水平按钮组示例，你可以根据需要进行修改。如果你想要垂直排列按钮，可以使用btn-group-vertical类。

转载请注明出处：http://www.pingtaimeng.com/article/detail/5490/Bootstrap