ホームページ >ウェブフロントエンド >CSSチュートリアル >Bootstrap の Spacing Utility クラスは Bootstrap 4 および 5 でどのように変更されましたか?

Bootstrap の Spacing Utility クラスは Bootstrap 4 および 5 でどのように変更されましたか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-10-28 07:35:021036ブラウズ

How Have Bootstrap's Spacing Utility Classes Changed in Bootstrap 4 and 5?

Bootstrap でスペーシング ユーティリティ クラスを使用するにはどうすればよいですか?

記事で、m-b- などの Bootstrap 4 のスペーシング ユーティリティ クラスについて説明しました。 lg は、React MeteorJS アプリケーションに実装しようとしましたが、成功しませんでした。明確にするために、Bootstrap のスペーシング ユーティリティの使用法と更新を調べてみましょう。

Bootstrap 5 (beta 2021)

Bootstrap 5 では RTL サポートが導入されて以来、左右の概念がstart と end に置き換えられ、l- および r- スペース ユーティリティが変更されました:

  • pl-* = ps-*
  • pr-* = pe-*
  • ml-* = ms-*
  • mr-* = me-*

ブートストラップ4 (Update 2020)

Bootstrap 4 のスペース ユーティリティは、アルファ版リリース以来進化しました。更新された構文は次のとおりです:

  • Margins: m{sides}-{size}
  • Padding: p{sides}-{ size}

例:

  • mb-2 = マージンの下 2 間隔単位
  • m-0 = マージンなし
  • pt-3 = 上部の 3 つの間隔単位をパディング
  • p-1 = すべての側面をパディング 1 つの間隔単位

ブートストラップ 4 は、デフォルトの.5remスペーサーユニット。さらに、x 軸 (左/右) および y 軸 (上/下) ユーティリティを指定できるようになりました:

  • my-2 = 上と下の 2 つの間隔単位のマージン
  • mx-0 = 左右のマージンなし
  • px-3 = 左右に 3 つの間隔単位でパディング

さらに、これらの間隔ユーティリティは応答性が高く、最小のブレークポイント (xs) ) ブレークポイントが指定されていない場合は暗黙的に指定されます:

  • mt-md-2 = マージン上部 2 間隔単位、md (および上)
  • py-sm-0 = 上部パディングなし& 下部、SM (および上)

以上がBootstrap の Spacing Utility クラスは Bootstrap 4 および 5 でどのように変更されましたか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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