Bootstrap 简明教程
Bootstrap - Stacks
本节讨论的是堆栈。堆栈是一个实用类，可用以控制容器中内容的叠放。
` stack ` 实用类控制元素的叠放次序。堆栈提供了一种快速便捷的方式，可通过应用 flexbox 属性在 Bootstrap 中创建布局。
Vertical stack
类 ` .vstack ` 用于创建垂直布局。诸如 ` .gap- `* 之类的实用类可用来在条目之间添加空间。
默认情况下，叠放的条目为全宽。
以下示例展示了 ` .vstack ` 类的用法：
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Helper - Stack</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Vertical stack example</h4><br>
<div class="vstack gap-1">
<div class="text-bg-secondary p-2">Item on First place</div>
<div class="text-bg-primary p-2">Item on Second place</div>
<div class="text-bg-info p-2">Item on Third place</div>
</div>
</body>
</html>使用类 ` .vstack ` 叠放按钮或其他元素。
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Helper - Stack</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Vertical stack using buttons</h4><br>
<div class="vstack gap-3 col-md-4 mx-auto">
<button type="button" class="btn btn-success">Confirm changes</button>
<button type="button" class="btn btn-secondary">Cancel</button>
</div>
</body>
</html>Horizontal stack
类 ` .hstack ` 用于创建水平布局。诸如 ` .gap- `* 之类的实用类可用来在条目之间添加空间。
默认情况下，叠放的条目垂直居中，且仅占用其必要的宽度。
以下示例展示了 ` .hstack ` 类的用法：
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Helper - Stack</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Horizontal stack example</h4><br>
<div class="hstack gap-3 column-gap-3">
<div class="text-bg-warning p-2">Item one</div>
<div class="text-bg-light p-2">Item two</div>
<div class="text-bg-secondary p-2">Item three</div>
</div>
</body>
</html>诸如 ` .ms-auto ` 之类的水平边距实用类可用来添加空间。实用类 ` .ms-auto ` 将文本右对齐至屏幕。让我们看一个示例：
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Helper - Stack</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Horizontal margin example</h4><br>
<div class="hstack gap-3 column-gap-3">
<div class="text-bg-primary p-2">Item one</div>
<div class="text-bg-secondary p-2">Item two</div>
<div class="text-bg-info p-2 ms-auto">Item three</div>
</div>
</body>
</html>诸如类 ` .vr ` 之类的垂直规则用于创建垂直分隔线。让我们看一个例子。
下面给出的示例展示了 .vr 类的用法：
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Helper - Stack</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Horizontal stack with vertical rule</h4><br>
<div class="hstack gap-3 column-gap-3">
<div class="text-bg-secondary p-3">Item one</div>
<div class="vr"></div>
<div class="text-bg-warning p-3">Item two</div>
<div class="vr"></div>
<div class="text-bg-info p-3">Item three</div>
</div>
</body>
</html>可以使用类 ` .hstack ` 创建内联表单。
Example
可以使用 编辑和运行 选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Helper - Stack</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Create an inline form</h4><br>
<div class="hstack gap-2">
<input class="form-control me-auto" type="text" placeholder="Add text here..." aria-label="Add text here...">
<div class="vr"></div>
<button type="button" class="btn btn-success">Submit</button>
<div class="vr"></div>
<button type="button" class="btn btn-outline-danger">Clear</button>
</div>
</body>
</html>