平安
在本文中，我將引導您完成使用 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">
<img class="img-fluid w-100" src="img/coding-woman.jpg" alt="">
</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 class="img-fluid w-100" src="img/coding-woman.jpg" alt="">
.img-fluid: 這個類別確保影像具有反應能力，隨螢幕尺寸縮放而不會溢出容器。
.w-100: 這會強制影像佔據其容器的整個寬度，這有助於防止影像在較小的螢幕上被壓扁或變得不成比例。
透過組合這些類，影像將始終在其分配的列內很好地縮放，完美適應行動和桌面視圖。
確保垂直對齊：
<div class="col-lg-6 col-12 d-flex align-items-center">
<img class="img-fluid w-100" src="img/coding-woman.jpg" alt="">
</div>
.d-flex： Bootstrap 的 Flexbox 實用程式類別 可以輕鬆對齊內容.
.align-items-center: 這將影像在其容器內垂直居中，確保佈局看起來平衡且專業。
最後：
此範例示範了使用 Bootstrap 建立靈活且響應式的佈局是多麼容易。 只需付出最少的努力，您就可以讓您的網站在各種尺寸的螢幕上看起來都很棒，為用戶提供最佳的體驗。
以上是使用 Bootstrap 建立響應式佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！
