ブートストラップ ラスタライズの原理は何ですか?

ブートストラップでは、ラスタライズの原則は、各セグメントの幅を固定してデバイスのサイズに従ってセグメント化し、パーセンテージとメディア クエリを通じて応答性の高いレイアウトを実現することです。これにより、同じページ セットが可能になります。さまざまな解像度レートの機器に適応します。

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

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

Bootstrap は、主流デバイスのサイズに応じてセグメント化された 12 列のグリッド システムを採用しており、各セグメントの幅は固定で、パーセンテージとメディア クエリによる応答性の高いレイアウトを備えています。

bootstrap に初めて触れる場合は、そのグリッド レイアウトに間違いなく畏敬の念を抱くでしょう。これは一連のレスポンシブ レイアウト ソリューションを提供します。

bootstrap グリッド システムのレイアウト

簡単に言えば:
1. Bootstrap には、応答性の高い、モバイル デバイス優先の流動的なグリッドのセットが組み込まれています。グリッド システムでは、画面デバイスまたはビューポート (ビューポート) サイズが増加すると、システムは自動的に最大 12 列に分割されます。

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

メディア クエリ

ラスター システムでは、Less ファイルで次のメディア クエリ (メディア クエリ) を使用して、主要なブレークポイントしきい値を作成します。

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

また、CSS の影響をより狭い範囲の画面サイズに制限するために、メディア クエリ コードに max-width を含めることもあります。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

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

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