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

ブートストラップでは、グリッドシステムの役割は、同じページセットが異なる解像度のデバイスに適応できるようにすることです。システムは各行を 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 つの要素が行全体を占有します。