使用 Bootstrap 建立響應式佈局

平安
在本文中，我將引導您完成使用 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 lazy" src="/static/imghwm/default1.png" data-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 lazy" src="/static/imghwm/default1.png" data-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 lazy" src="/static/imghwm/default1.png" data-src="img/coding-woman.jpg" alt="">
</div>

.d-flex： Bootstrap 的 Flexbox 實用程式類別 可以輕鬆對齊內容.
.align-items-center: 這將影像在其容器內垂直居中，確保佈局看起來平衡且專業。

最後：
此範例示範了使用 Bootstrap 建立靈活且響應式的佈局是多麼容易。 只需付出最少的努力，您就可以讓您的網站在各種尺寸的螢幕上看起來都很棒，為用戶提供最佳的體驗。

以上是使用 Bootstrap 建立響應式佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！