ホームページ > 記事 > ウェブフロントエンド > レスポンシブレイアウトを実装するためのブートストラップの原理は何ですか?

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

WBOYオリジナル: 2022-03-09 13:43:213877ブラウズ

ブートストラップでは、レスポンシブレイアウトは、グリッドシステムを使用してさまざまな画面に異なるクラス属性を使用することによって実装されます。システムは自動的に 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 class="form-signin-heading">用户登录</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 バージョン: