ブートストラップでレスポンシブレイアウトを実装する方法

レスポンシブ レイアウトのコンセプト:

レスポンシブ Web レイアウトにより、ユーザーはさまざまなサイズのブラウザーを通じて優れた視覚体験を得ることができます。現在主流のレイアウト方法です。

ブートストラップ レスポンシブ レイアウトの実装原則:

CSS3 メディア クエリ (メディア (デバイス) クエリ) を通じて、メディア クエリにより、ページ コンテンツをさまざまなメディア環境で実行できるようになります。表示されます（もちろん、このスタイルは当社が作成および指定したものです）。

@media は CSS3 で指定される属性で、メディア デバイスごとに異なるスタイルを設定するという目的を達成できます。また、同じデバイス上でも、ブラウザのサイズをリセットすると、ブラウザの幅と高さに基づいてページが再レンダリングされます。

アプリケーション:

Bootstrap は主に、min-width、max-width、および構文を使用して、さまざまな解像度でさまざまな CSS スタイルを設定します。

@メディア構文

@media mediatype and|not|only (media feature) {
CSS-Code;
}

メディアタイプには、印刷 (印刷デバイス)、画面 (コンピューター画面、タブレット、スマートフォンなどに使用)、音声 (アプリケーション (スクリーン リーダーなどの音声生成デバイス)、メディア機能を使用して最大幅または最小幅を指定します。

ブートストラップのレイアウト コンテナーの例を見てみましょう:

ブートストラップには、ページ コンテンツとグリッド システムをラップするための .container コンテナーが必要です。

次のように

固定宽度布局
<div class="container">
...
</div>
或者 流式布局
<div class="container-fluid">
...
</div>

ブートストラップCSSドキュメントでは、@media属性

1591~1605行
 
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
……

上記のコードは、コンテナの幅が幅に応じて変化することを実現しています。ブラウザの変更。

推奨: ブートストラップ入門チュートリアル

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