◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
使用 Bootstrap 创建响应式布局
ID:15568 / 打印
平安
在本文中，我将引导您完成使用 bootstrap 5 构建简单且响应式布局的过程。
这是我将向您介绍的 html 结构：
<section class="bg-dark text-light p-5"><div class="container"> <div class="row"> <div class="col-lg-6 col-12 my-5"> <h1 class="display-4">become a <span class="text-warning">web developer</span> </h1> <p class="lead">lorem ipsum dolor sit amet consectetur adipisicing elit. earum dicta inventore magnam illo doloremque mollitia quis sint ullam atque officiis vel voluptas eum blanditiis unde autem maiores beatae, perferendis neque.</p> <button class="btn btn-primary btn-lg">start the enrollment</button> </div> <div class="col-lg-6 col-12 d-flex align-items-center"> @@##@@ </div> </div> </div> </section>
这个简单的部分包括两列 - 一列用于文本，一列用于图像。让我们探讨一下 bootstrap 如何处理此布局中的响应能力。
容器和行：
<div class="container"> <div class="row"> ... </div> </div>
.container: 此类创建响应式固定宽度容器。容器内的内容会根据屏幕尺寸自动调整宽度。 .row: 在容器内，我们有一行。 bootstrap 使用 12 列网格系统，其中行内的内容分为列。
带有 bootstrap 的响应式列：
<div class="col-lg-6 col-12 my-5"> <h1 class="display-4">become a <span class="text-warning">web developer</span> </h1> <p class="lead">lorem ipsum dolor sit amet...</p> <button class="btn btn-primary btn-lg">start the enrollment</button> </div>
列类：
.col-lg-6: 这意味着在大屏幕上（例如，桌面），此列将占据 12 个网格列中的 6 个（50屏幕宽度的%)。
.col-12: 在较小的屏幕上（如移动设备），该列将占据所有 12 列，使其占据容器的整个宽度.
这使得内容可以灵活地适应不同的屏幕尺寸。例如：
在桌面上：内容和图像将并排放置，各占屏幕的 50%。
在移动设备上：文本和图像将垂直堆叠，各自占据整个宽度。
使图像响应：
@@##@@
.img-fluid: 这个类确保图像具有响应能力，随屏幕尺寸缩放而不会溢出容器。
.w-100: 这会强制图像占据其容器的整个宽度，这有助于防止图像在较小的屏幕上被压扁或变得不成比例。
通过组合这些类，图像将始终在其分配的列内很好地缩放，完美适应移动和桌面视图。
确保垂直对齐：
<div class="col-lg-6 col-12 d-flex align-items-center"> @@##@@ </div>
.d-flex： bootstrap 的 flexbox 实用程序类 可以轻松对齐内容.
.align-items-center: 这将图像在其容器内垂直居中，确保布局看起来平衡且专业。
最后：
此示例演示了使用 bootstrap 创建灵活且响应式的布局是多么容易。 只需付出最少的努力，您就可以让您的网站在各种尺寸的屏幕上看起来都很棒，为用户提供最佳的体验。
