Bootstrap按钮与按钮组
前言
- 在 之前的博客 中，我们已经详细了解了 Bootstrap5 中诸多实用的 组件和样式类，比如 图像相关样式类等，它们在网页布局和内容展示方面发挥着重要作用。
- 在这篇文章里，我们将 深入探讨 Bootstrap5 中 按钮相关的样式类，看看如何利用它们打造出更美观、更符合网页设计需求的按钮效果。
之前的Bootstrap5博客专栏
https://blog.csdn.net/2402_83322742/category_12848026.html?spm=1001.2014.3001.5482
一、Bootstrap按钮
（一）、内置按钮样式
Bootstrap 5 内置了多种预定义的按钮样式，每种样式都有着自身的语义目的，并且为按钮增添了独特外观。只要元素带有 .btn 类，就会继承圆角按钮的默认外观，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">黑色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>
</body>
</html>
- 这些按钮类不仅可以应用在
<button>元素上，还可用于<a> 、 <input>等元素，比如：
<a href="#" class="btn btn-success">链接按钮</a>
<button type="button" class="btn btn-success">按钮</button>
<input type="button" class="btn btn-success" value="输入按钮">
<input type="submit" class="btn btn-success" value="提交按钮">
<input type="reset" class="btn btn-success" value="重置按钮">
（二）、按钮边框设置
Bootstrap 5 提供了八个轮廓 / 边框按钮。当鼠标移动到这些按钮上时，会添加突出的效果，代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 最新的 Bootstrap5 核心 css 文件 -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-outline-primary">主要</button>
<button type="button" class="btn btn-outline-secondary">次要</button>
<button type="button" class="btn btn-outline-success">成功</button>
<button type="button" class="btn btn-outline-info">信息</button>
<button type="button" class="btn btn-outline-warning">警告</button>
<button type="button" class="btn btn-outline-danger">危险</button>
<button type="button" class="btn btn-outline-dark">深色</button>
<button type="button" class="btn btn-outline-light text-dark">浅色</button>
</body>
</html>
（三）、按钮尺寸调整
我们可以轻松设置 Bootstrap 5 按钮的大小，使用 .btn-lg 类能够让按钮看起来比较大，而使用 .btn-sm 类则会使按钮看起来比较小，示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 最新的 Bootstrap5 核心 css 文件 -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary btn-lg" >大号按钮</button>
<button type="button" class="btn btn-primary btn-sm">小号按钮</button>
</body>
</html>
（四）、块级按钮创建
若想创建跨越父元素整个宽度的块级按钮，只需添加 .btn-block 类就可以进行设置，同时在父级元素中添加 .d-grid 类，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 最新的 Bootstrap5 核心 css 文件 -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="d-grid">
<button type="button" class="btn btn-primary btn-block">100% 宽度的按钮</button>
</div>
</body>
</html>
（五）、活动 / 禁用按钮设置
按钮还可以设置为激活或者禁止点击的状态。通过 .active 类能够设置按钮是可用的，利用 disabled 属性可以设置按钮不可点击。
- 不过需要注意的是，
<a>元素不支持 disabled 属性，对于链接元素，可以通过添加 .disabled 类来禁止点击，示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 最新的 Bootstrap5 核心 css 文件 -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary active">点击后的按钮</button>
<button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
<a href="#" class="btn btn-primary disabled">禁止点击的链接</a>
</body>
</html>
二、Bootstrap按钮组
（一）、基本按钮组
要创建一个按钮组，只需将一系列带有 .btn 类的按钮包装在
<div>元素中，然后在其上应用 .btn-group 类。此外，还能在单个按钮上应用 .active 类来指示活动状态，示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 最新的 Bootstrap5 核心 css 文件 -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-success active">按钮一</button>
<button type="button" class="btn btn-warning">按钮二</button>
<button type="button" class="btn btn-danger">按钮三</button>
</div>
</body>
</html>
（二）、按钮组的大小设置
- 可以使用 .btn-group-lg|sm|xs 类来设置按钮组的大小，这样能够对整个按钮组进行大小调整，而无需逐个对按钮进行操作，示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 最新的 Bootstrap5 核心 css 文件 -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-success ">按钮一</button>
<button type="button" class="btn btn-warning ">按钮二</button>
<button type="button" class="btn btn-danger">按钮三</button>
</div>
</body>
</html>
（三）、垂直按钮组
如果希望按钮组显示为垂直堆叠而不是水平堆叠的样式，只需将类 .btn-group 替换为类 .btn-group-vertical，示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 最新的 Bootstrap5 核心 css 文件 -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>
| 非常感谢您的阅读，喜欢的话记得三连哦 |
扫一扫
262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
