ブートストラップを使用したレスポンシブ レイアウトの作成

平和
この記事では、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>

この単純なセクションには、テキスト用と画像用の 2 つの列が含まれています。このレイアウトで Bootstrap が応答性をどのように処理するかを見てみましょう。

コンテナと行:

<div class="container">
    <div class="row">
        ...
    </div>
</div>

.container: このクラスは、応答性の高い固定幅コンテナーを作成します。コンテナ内のコンテンツは、画面サイズに応じて幅が自動的に調整されます。
.row: コンテナー内には行があります。 Bootstrap は 12 列のグリッド システムを使用し、行内のコンテンツが列に分割されます。

ブートストラップを使用したレスポンシブ列:

<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: これにより、コンテナ内で画像が垂直方向に中央に配置され、レイアウトのバランスが取れてプロフェッショナルに見えるようになります。

最後に:
この例は、ブートストラップを使用して柔軟で応答性の高いレイアウトを作成することがいかに簡単であるかを示しています。 最小限の労力で、Web サイトをあらゆるサイズの画面で見栄え良く表示し、ユーザーに最適なエクスペリエンスを提供できます。

以上がブートストラップを使用したレスポンシブ レイアウトの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。