<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Button Example</title>
<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h1>Bootstrap Button Example</h1>
<!-- Bootstrap 按钮 -->
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-light">Light Button</button>
<button type="button" class="btn btn-dark">Dark Button</button>
<!-- Outline 按钮 -->
<button type="button" class="btn btn-outline-primary">Primary Outline Button</button>
<button type="button" class="btn btn-outline-secondary">Secondary Outline Button</button>
<!-- 大小调整按钮 -->
<button type="button" class="btn btn-primary btn-lg">Large Button</button>
<button type="button" class="btn btn-primary btn-sm">Small Button</button>
</div>
<!-- 引入 Bootstrap JS 和 Popper.js（注意：需要先引入 Popper.js） -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
在这个例子中，我们使用了 Bootstrap 的按钮样式类，如 btn、btn-primary、btn-secondary 等，来创建不同样式的按钮。你可以根据需要选择不同的样式，并按照项目的要求进行进一步的定制。这只是一个简单的演示，Bootstrap 提供了丰富的按钮样式和选项供你使用。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12605/Bootstrap