ホームページ >ウェブフロントエンド >フロントエンドQ&A >Bootstrap4 のラスターはいくつかのカテゴリに分類されます

Bootstrap4 のラスターはいくつかのカテゴリに分類されます

青灯夜游
青灯夜游オリジナル
2022-01-10 10:31:052338ブラウズ

bootstrap4 のラスターは 5 つのカテゴリに分類されます: 1. 「.col」、すべてのデバイス用; 2. 「.col-sm」、タブレット デバイス用; 3. 「.col-md」、デスクトップ モニター用; 4. 「.col-lg」、大型デスクトップモニター用; 5. 「.col-xl」、特大デスクトップモニター用。

Bootstrap4 のラスターはいくつかのカテゴリに分類されます

#このチュートリアルの動作環境: Windows7 システム、bootsrap4 バージョン、DELL G3 コンピューター


Bootstrap は、一連の応答性の高い、 mobile 画面またはビューポートのサイズが大きくなるにつれて、自動的に最大 12 列に分割されるデバイスファーストの流体グリッド (グリッド) システム。

独自のニーズに応じて列の数を定義することもできます:

Bootstrap4 のラスターはいくつかのカテゴリに分類されます

Bootstrap 4 のグリッド システムは応答性が高く、列は自動的に調整されます。画面サイズに合わせて並べ替えます。

Bootstrap 4 グリッド システムには次の 5 つのクラスがあります:

  • .col- すべてのデバイス用

  • .col-sm- タブレット- 画面幅 576px

  • .col-md- デスクトップ モニター- 画面幅 以上768px より)

  • .col-lg- 大型デスクトップ モニター - 画面幅 992px 以上)

  • .col-xl-特大デスクトップ モニター - 画面幅 1200 ピクセル以上)

  • #次の表は、ブートストラップ グリッド システムがさまざまなデバイスでどのように動作するかをまとめたものです:

' - ‐ ‐ ‐ ‐ ‐ #列数と 12ギャップ幅30px (列の両側に 15 ピクセル) #入れ子にすることができます列の並べ替えブートストラップの詳細については、

# Ultra Small Device
< 576px

#≥576px

デスクトップモニター ≥768px

大型デスクトップモニター ≥992px
##特大デスクトップ モニター
≥1200px
コンテナの最大幅 なし (自動) 540px 720px 960px 1140px
クラスプレフィックス .col - .col-sm - .col-md- .col- lg- .col-xl-
はい
Yes
ブートストラップの基本チュートリアル

を参照してください。 !

以上がBootstrap4 のラスターはいくつかのカテゴリに分類されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。