Bootstrap - 按钮示例

你好，未来的编程巨星！今天，我们将深入Bootstrap按钮的奇妙世界。作为你友好的邻居计算机老师，我将在这一旅程中逐步引导你。所以，拿上你最喜欢的饮料，坐舒适些，让我们一起踏上这个激动人心的冒险！

Bootstrap - Buttons Demo

Bootstrap按钮是什么？

在我们深入细节之前，让我们先了解一下Bootstrap按钮究竟是什么。想象一下你在建造一栋房子。墙壁和屋顶是你的HTML结构，油漆是你的CSS，而Bootstrap呢？它就像一个神奇的工具箱，让一切变得简单而美观。Bootstrap按钮是预定义样式的、随时可用的按钮，你可以轻松地将它们添加到你的网页中。

Bootstrap入门

首先，我们需要搭建我们的Bootstrap实验场。别担心，这比设置一个垄断游戏还要简单！

第一步：设置HTML结构

让我们从一个基本的HTML结构开始：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap按钮示例</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<!-- 我们的按钮将放在这里 -->
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

这就像在绘画前准备画布。我们已经包含了Bootstrap的CSS和JS文件，这让我们可以使用Bootstrap的所有功能。

基本Bootstrap按钮

现在，让我们在页面中添加一些按钮！

<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-danger">危险</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-dark">深色</button>

每个类的功能如下：

btn：这是所有Bootstrap按钮的基础类。
btn-primary、btn-secondary等：这些类定义了按钮的颜色和样式。

按钮大小

就像在快餐店你可以选择不同大小的薯条一样，Bootstrap按钮也有不同的尺寸！

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

btn-lg：使按钮变大
btn-sm：使按钮变小

轮廓按钮

有时候，你需要一个更微妙的按钮。这就是轮廓按钮派上用场的时候！

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

btn-outline-*类给你带有彩色边框和透明背景的按钮。

块级按钮

需要一个跨越其父元素全宽的按钮？块级按钮是你的好朋友！

<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">块级按钮</button>
<button class="btn btn-primary" type="button">块级按钮</button>
</div>

父div上的d-grid类和gap-2类为按钮之间添加了一些间距。

按钮状态

按钮可以有不同状态，就像我们有不同的心情一样！

<button type="button" class="btn btn-primary">正常按钮</button>
<button type="button" class="btn btn-primary active">激活按钮</button>
<button type="button" class="btn btn-primary" disabled>禁用按钮</button>

active类使按钮看起来像是被按下的。
disabled属性使按钮不可点击。

切换按钮

切换按钮就像开关一样 - 可以是开或关！

<button type="button" class="btn btn-primary" data-bs-toggle="button">切换按钮</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">激活的切换按钮</button>

data-bs-toggle="button"属性启用了切换功能。

按钮组

有时候，按钮喜欢一起出去玩。这就是按钮组派上用场的时候！

<div class="btn-group" role="group" aria-label="基本示例">
<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>

btn-group类将按钮组合在一起。

下拉按钮

下拉按钮就像惊喜盒子 - 点击它们，更多的选项就会出现！

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
下拉按钮
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">操作</a></li>
<li><a class="dropdown-item" href="#">另一个操作</a></li>
<li><a class="dropdown-item" href="#">这里还有其他东西</a></li>
</ul>
</div>

dropdown-toggle类和data-bs-toggle="dropdown"属性启用了下拉功能。

结论

恭喜你！你刚刚完成了Bootstrap按钮的旋风之旅。记住，熟能生巧，所以不要害怕尝试不同的组合。谁知道呢？你可能会创造出下一个网络设计的大热门！

以下是我们在本文中介绍的所有按钮类的快速参考表：

类别	描述
btn	基础按钮类
btn-primary	主要颜色按钮
btn-secondary	次要颜色按钮
btn-success	成功颜色按钮
btn-danger	危险颜色按钮
btn-warning	警告颜色按钮
btn-info	信息颜色按钮
btn-light	浅色按钮
btn-dark	深色按钮
btn-lg	大按钮
btn-sm	小按钮
btn-outline-*	轮廓按钮
active	激活状态按钮
disabled	禁用按钮
data-bs-toggle="button"	切换按钮
btn-group	按钮组
dropdown-toggle	下拉按钮

快乐编码，愿Bootstrap与你同在！

Credits: Image by storyset