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

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

Jan 10, 2022 am 10:31 AM
グリッド

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 までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

怠zyなロードの概念を説明してください。 怠zyなロードの概念を説明してください。 Mar 13, 2025 pm 07:47 PM

怠zyなロードの概念を説明してください。

UseEffectとは何ですか?副作用を実行するためにどのように使用しますか? UseEffectとは何ですか?副作用を実行するためにどのように使用しますか? Mar 19, 2025 pm 03:58 PM

UseEffectとは何ですか?副作用を実行するためにどのように使用しますか?

React和解アルゴリズムはどのように機能しますか? React和解アルゴリズムはどのように機能しますか? Mar 18, 2025 pm 01:58 PM

React和解アルゴリズムはどのように機能しますか?

JavaScriptでカリーはどのように機能し、その利点は何ですか? JavaScriptでカリーはどのように機能し、その利点は何ですか? Mar 18, 2025 pm 01:45 PM

JavaScriptでカリーはどのように機能し、その利点は何ですか?

JavaScriptの高次関数とは何ですか?また、より簡潔で再利用可能なコードを書くためにどのように使用できますか? JavaScriptの高次関数とは何ですか?また、より簡潔で再利用可能なコードを書くためにどのように使用できますか? Mar 18, 2025 pm 01:44 PM

JavaScriptの高次関数とは何ですか?また、より簡潔で再利用可能なコードを書くためにどのように使用できますか?

各ライフサイクル方法の目的とそのユースケースを説明します。 各ライフサイクル方法の目的とそのユースケースを説明します。 Mar 19, 2025 pm 01:46 PM

各ライフサイクル方法の目的とそのユースケースを説明します。

Reactのパフォーマンス最適化手法(メモ化、コード分割、怠zyな読み込み)とは何ですか? Reactのパフォーマンス最適化手法(メモ化、コード分割、怠zyな読み込み)とは何ですか? Mar 18, 2025 pm 01:57 PM

Reactのパフォーマンス最適化手法(メモ化、コード分割、怠zyな読み込み)とは何ですか?

usecontextとは何ですか?コンポーネント間で状態を共有するためにどのように使用しますか? usecontextとは何ですか?コンポーネント間で状態を共有するためにどのように使用しますか? Mar 19, 2025 pm 03:59 PM

usecontextとは何ですか?コンポーネント間で状態を共有するためにどのように使用しますか?

See all articles