レスポンシブ レイアウトを実装するためのブートストラップの原理は何ですか?

ブートストラップでは、レスポンシブ レイアウトは、グリッド システムを使用してさまざまな画面に異なるクラス属性を使用することによって実装されます。システムは自動的に 12 列に分割されます。レスポンシブ レイアウトは、グリッド システムを使用して一連のページ レイアウトを作成するための行と列の組み合わせ。

このチュートリアルの動作環境: Windows 10 システム、ブートストラップ バージョン 3.3.7、DELL G3 コンピューター

ブートストラップの原理とはレスポンシブ レイアウトを実装するには

グリッド システムの実装原則は、コンテナのサイズを定義し、それを 12 等分の部分に分割することです (24 または 32 の部分に分割することもできますが、12 部分が最も多くなります) common)、内側と外側のマージンを調整し、最後にメディア クエリと組み合わせることで、強力な応答性の高いグリッド システムが作成されました。

グリッド システムの実装原理は、コンテナのサイズを定義し、それを次のように分割することです12 等分の部分 (24 または 32 の部分に分割することもできますが、12 部分が最も一般的です)、次に内側と外側のマージンを調整し、最後にメディア クエリと組み合わせて、強力な応答性の高いグリッド システムを作成します。 Bootstrap フレームワークのグリッド システムは、コンテナを 12 等分に分割します。

bootstrap の長所と短所:

1.bootstrap は最近 bootstrap4 をリリースしました。これにはボックスフレックス レイアウトやその他のアップデートがあり、最新の Web テクノロジーの発展に対応しています。

2. 比較的成熟しており、多数のプロジェクトで十分に使用され、テストされています

3. 完全なドキュメントがあると、より便利に使用できます

4.多数のコンポーネント スタイル、受け入れ可能 カスタマイズ

欠点:

1. 独自の特別なニーズがある場合は、スタイルを再カスタマイズする必要があります。 Web サイト内にブートストラップ以外の「スタイル」スタイルが多数存在すると、大量の CSS の書き換えが必要になり、フレームワークを使用する意味が失われます。

2. 互換性の問題が発生します。インターネット上には IE との互換性を保つ方法がたくさんありますが、他のファイルを導入する必要があり、その中には非常に小さいファイルもあり、必然的に読み込み速度が遅くなります。速度が低下し、ユーザーエクスペリエンスに影響を与えます。

Bootstrap のレスポンシブ レイアウトはグリッド システムを使用し、画面ごとに異なるクラス属性を使用します。開発中は、メディア クエリの使用 (デバイスごとに異なるコードの作成) を考慮する必要がなく、携帯電話、タブレット、PC で使用できるコード セットは 1 つだけ作成できます。 Bootstrap の公式説明: Bootstrap は、応答性の高いモバイルファーストの流体グリッド システムを提供します。画面またはビューポートのサイズが大きくなると、システムは自動的に 12 列に分割されます。グリッド システムは、一連の行と列を通じてページ レイアウトを作成するために使用されます。

グリッド システムの仕組み:

1. 行は、.container (固定幅) または .container-fluid (100% 幅) に含まれている必要があります。適切な配置 (alignment
) とパディングを指定します。
2. 行を介して水平方向に列のグループを作成します。
3. コンテンツは列 (column) に配置する必要があり、列のみが行 (row) の直接の子要素として使用できます。
4. .row や .col-xs-4 などの定義済みクラスを使用して、グリッド レイアウトをすばやく作成できます。 Bootstrap ソース コードで定義されたミックスインを使用して、セマンティック レイアウトを作成することもできます。
5. 列のパディング属性を設定して、列間にギャップ (ガター) を作成します。 .row 要素に負のマージンを設定して .container 要素に設定されたパディングをオフセットすると、行に含まれる列のパディングが間接的にオフセットされます。
6. グリッド システムの列は、1 ～ 12 の値を指定することでスパン範囲を表します。たとえば、3 つの .col-xs-4 を使用して、3 つの等しい幅の列を作成できます。
7. 1 つの行 (行) に含まれる列の数が 12 を超える場合、余分な列の要素はまとめて別の行に配置されます。
8. グリッド クラスは、分割点サイズ以上の画面幅を持つデバイスに適しており、小さな画面の場合はグリッド クラスがオーバーライドされます。
次の図は、さまざまな画面でのグリッド システムの適用手順を示しています。

Bootstrap レスポンシブ レイアウトを使用する、

まず、head にメタ タグを導入し、viewpirt 属性を追加する必要があります。コンテンツの幅はデバイスの幅と同じです。初期スケール: ページが初めて表示されるエリアのズーム レベル値が 1 の場合、ページはスケーリングなしで実際のサイズに従って表示されます。最大スケール: ユーザーが表示する最小比率ズームできるかどうか、ユーザー スケーラブル: ユーザーが手動でズームできるかどうか。コードは次のとおりです。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">

以下は、超小型の携帯電話画面 (iphone5s) と PC 画面 (>=1200px) を対象とした、ブートストラップ レイアウトを使用したページ (ログイン フォーム インターフェイス) です。 Col-xs-12: 小さい画面は 12 列を占め、col-lg-5: 大きい画面は 5 列を占め、col-lg-offset-3: 大きい画面は 3 列をインデントします。これは比較的単純な例で、タブレットなどの他の画面に適応させたい場合は、col-md-* 属性を追加し、大画面の携帯電話の場合は、col-sm-* 属性を追加できます。特定の画面にどの属性を使用するかは、上の図のさまざまな画面に対するブートストラップ グリッド システムのさまざまな使用法を参照できます。

<p class="container-fluid login">
  <p class="row">
    <p class="col-xs-12 col-sm-12 col-md-8 col-lg-5 col-lg-offset-3">
      <form class="form-horizontal loginForm">
        <h3 id="用户登录">用户登录</h3>
        <p class="form-group">
          <label for="email" class="col-sm-2 col-xs-3 control-label">邮箱</label>
          <p class="col-sm-8 col-xs-8">
            <input type="text" class="form-control" name="email" placeholder="请输入邮箱">
              <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            </p>
        </p>
        <p class="form-group">
          <label for="password" class="col-sm-2 col-xs-3 control-label">密码</label>
          <p class="col-sm-8 col-xs-8">
            <input type="password" class="form-control" name="password" placeholder="请输入密码">
              <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            </p>
        </p>
        <p class="form-group">
          <p class="col-sm-offset-2 col-sm-4 col-xs-4 ">
            <p class="checkbox">
              <label>
                <input type="checkbox">记住我 </label>
            </p>
          </p>
          <p class="col-sm-4 col-xs-4 control-label" >
            <a href="resetPwd.html" id="forget">忘记密码？</a>
          </p>
        </p>
        <p class="form-group">
          <p class="col-sm-12 col-lg-12">
            <button type="button" class="btn btn-primary btn-block" id="submit">登录</button>
          </p>
        </p>
      </form>
    </p>
  </p>

コードのレンダリング:
PC バージョン:

モバイル バージョン:

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

以上がレスポンシブ レイアウトを実装するためのブートストラップの原理は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。