Bootstrap 提供了丰富的外边距和网格系统类，使得网页布局变得轻松而灵活。在这篇教程中，我们将深入了解如何使用这些类来创建响应式的页面布局。
1. 外边距类
1.1 m-{size}: 设置所有边的外边距
这个类为元素设置相等大小的外边距，其中 {size} 是指定的尺寸值。例如，m-3 将在元素的上、右、下、左四个边上都添加外边距，大小为 3。
1.2 mt-{size}: 设置上边距（Margin Top）
使用此类，你可以独立设置元素的顶部外边距。通过指定 {size} 的值，你能够控制顶部外边距的大小。例如，mt-4 将为元素添加一个顶部外边距大小为 4。
1.3 mb-{size}: 设置下边距（Margin Bottom）
与上边距类似，mb-{size} 用于设置元素的底部外边距。
1.4 ml-{size}: 设置左边距（Margin Left）
通过添加此类，你可以单独设置元素的左侧外边距。
1.5 mr-{size}: 设置右边距（Margin Right）
用于设置元素的右侧外边距，可以独立调整。
2. 网格系统
2.1 col-md-12: 占据整个行宽度
在 Bootstrap 的网格系统中，col-md-12 用于定义一个占据整个行宽度的元素。这对于创建全宽度的内容块非常有用。
2.2 row: 包裹网格系统的列
row 类是用于包裹 Bootstrap 网格系统中的列的容器。确保在布局上正确对齐和排列列。
3. 示例应用
为了更好地理解，我们将使用一个更详细的示例。
<!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>Detailed Bootstrap Tutorial</title>
<style>
.custom-box {
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container mt-4">
<div class="row">
<div class="col-md-12 bg-primary text-white p-3">
<h1 class="m-0">Welcome to Detailed Bootstrap Tutorial</h1>
<p class="m-0">Learn how to use Bootstrap for responsive web development.</p>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6 custom-box">
<h2 class="mt-0">Section 1</h2>
<p>This is the first section of our tutorial. It contains a custom-styled box.</p>
</div>
<div class="col-md-6 custom-box">
<h2 class="mt-0">Section 2</h2>
<p>Explore the power of Bootstrap grid system. Customize each box according to your needs.</p>
</div>
</div>
</div>
<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 网格系统中的列的容器。确保在布局上正确对齐和排列列。
3. 示例应用
为了更好地理解，我们将使用一个更详细的示例。
在这个例子中，我们创建了一个自定义样式的盒子（custom-box类），并运用了各种外边距类和网格系统类，以展示它们的实际应用。你可以根据项目的需要进一步定制这些类，以适应不同的设计需求。
