ブートストラップラスタライズとは何ですか

ブートストラップでは、ラスタライズとはブラウザの行を 12 列に分割し、開発されたページのニーズに応じて対応する要素が占める列幅を割り当てる、つまりサイズに応じて分割することを指します。デバイスのセグメント、各セグメントは固定幅を持ち、パーセンテージとメディア クエリを通じて応答性の高いレイアウトが実現されます。

このチュートリアルの動作環境: Windows10 システム、bootstrap5 バージョン、DELL G3 コンピューター

ブートストラップ ラスタライズとは

ブートストラップにおけるラスタライズの原理は、各セグメントの幅を固定してデバイスのサイズに従ってセグメント化し、パーセンテージとメディア クエリを通じて応答性の高いレイアウトを実装することです。これにより、同じページ セットが異なるデバイスに適応できるようになります。決議。

グリッド レイアウトの基本原理: グリッドは、ページを水平方向に特定の数 (n と仮定) の基本幅の列に分割します。

その後、開発者は次のようにページにコンテンツを追加できます。対応する要素は、m 列幅を占めるように設定されます。 (m

私の理解: ラスタライズとは、ブラウザの行を 12 列に分割し、列を自分で割り当てることです。

グリッド システムの概要

グリッド システム (グリッド システム) は、固定グリッドを使用した明確で整ったデザイン スタイルで、Web ページのレイアウトを実行します。グリッド システムは印刷媒体で最初に使用されたもので、印刷レイアウトがいくつかのグリッドに分割されており、植字に非常に便利です。

その後、Web ページのレイアウトにもグリッド システムが適用され、ページ レイアウトにレスポンシブ グリッド システムを使用すると、Web ページは表示端末ごとに異なるページ構造を表示できます。たとえば、一部のモジュールは、画面の小さなデバイスでは異なる配置になったり、非表示になったりします。

Bootstrap グリッド システムの基本的な使用法。

1. Bootstrap グリッド システムでは、画面幅ごとに異なるクラスが定義されているため、要素にクラス名を直接追加するだけです。

2. 行を適切に配置してパディングできるように、行をレイアウト コンテナーに含める必要があります。

3. 行を介して水平方向に列のグループを作成できますが、行の直接の子要素として使用できるのは列のみです。

4. 行にはスタイル .row を使用し、列にはスタイル .col-*-* を使用します。コンテンツは列に配置する必要があります。列の数が 12 を超える場合、別の行が配置されます。アレンジした。

学生情報フォームのケース

ケース実装のアイデア:
1. まず、レイアウト内にクラス名の行を含む p 要素を作成する必要があります。 container as Row;
2. 次に、行コンテナー内に列を作成します。レイアウト コンテナ内の行と列は、グリッド システムを形成します。
3. グリッド システムの行と列は、テーブルの行と列に似ています。

1. HTML コードを記述します

    <p>
        </p><p>
            </p><p>姓名</p>
            <p>年龄</p>
            <p>性别</p>
        
        <p>
            </p><p>张三</p>
            <p>25</p>
            <p>男</p>
        
    

2. CSS スタイルを記述します

    .row {
        background-color: #eee;
        font-size: 30px;
    }
    .col-md-4 {
        border: 1px solid #fff;
        text-align: center;
    }

ブラウザの表示幅が 992px より大きい場合、効果は次のようになります:

ブラウザの幅が 768 ピクセルより大きい場合、効果は次のようになります。

ブラウザの幅が 768 ピクセルより小さい場合、効果は次のようになります。

関連する推奨事項: ブートストラップ チュートリアル

以上がブートストラップラスタライズとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。