ブートストラップのグリッド システムは何に役立ちますか?

ブートストラップでは、グリッド システムの役割は、同じページ セットが異なる解像度のデバイスに適応できるようにすることです。システムは各行を 12 のグリッドに均等に分割し、同じ要素がさまざまなデバイスで使用されるページ レイアウトを実現するために、グリッドの数は異なります。

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

ブートストラップの用途は何ですか?グリッド システム

1.ブートストラップ グリッド システム: その機能は、同じページのセットを異なる解像度のデバイスに適応させることです

#2. グリッド システムの実装: 各行を 12 のグリッドに分割しますを指定し、同じ要素がモバイル デバイスと PC デバイスで異なる数のグリッドを占有するように指定します。例: ある div は、コンピュータでは 4 グリッドを占有し、携帯電話では 12 グリッドを占有します

3。ステップ

1 .コンテナの定義: テーブル table と同等

##*コンテナの分類:

1.コンテナ: 固定幅はデバイスによって異なります (空白のままにします)

2 .container-fluid: 100%

2. 行の定義: tr スタイルと同等: row

3. 要素の定義: さまざまなデバイス上で要素が占有するグリッドの数を指定します。スタイル:col-デバイスコード-グリッド数

#*デバイスコード:

1.xs:超小型画面携帯電話 (768px):col-xs-12

2. sm: 小さな画面のタブレット (>=768px)

3.md: 中画面のデスクトップ モニター (>=992px)

4.lg: 大画面の大きなデスクトップ モニター ( >= 1200px)

**注: 1 行のグリッド数が 12 を超える場合、超過部分は自動的に折り返されます

**注: 定義されたクラス属性には上位互換性がありますただし、下位互換性はありません。デバイスの幅が設定したグリッド クラス属性のデバイス コードの最小値より小さい場合、デフォルトで 1 つの要素が行全体を占有します。

関連する推奨事項:

ブートストラップ チュートリアル

以上がブートストラップのグリッド システムは何に役立ちますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。