Bootstrap 4 の「mb-0」ユーティリティ クラスはページ要素にどのような影響を与えますか?

Bootstrap 4 の class="mb-0" ユーティリティ クラスの目的を理解する

Bootstrap 4 は、開発者に膨大な数の機能を提供します。 xs、sm、md、lg、xl などのさまざまなブレークポイントにわたるページの応答性と適応性を強化するために設計された、マージンおよびパディング ユーティリティ クラス。これらの多用途クラスは、一貫した命名規則に従っています。

{property}{sides}-{size}

クラスの要素の解読

• m: マージンを示しますsettings
• b: 下マージンを指定します
• 0: マージンの下の値を 0 に設定します

実装例

次の HTML コードを考えてみましょう:

<code class="html"><p class="mb-0">Lorem ipsum</p></code>

このインスタンスでは、「mb-0」ユーティリティ クラスが段落要素に適用されており、結果は次のようになります。その特定の要素のデフォルトの下マージンの削除です。

追加のユーティリティ クラス オプション

Bootstrap 4 は、他のマージンおよびパディング プロパティのユーティリティ クラスも提供します。

• t: マージン/パディング上部
• l: マージン/パディング左
• r: マージン/パディング右
• x: マージン/パディング左および -右
• y: マージン/パディング上および-bottom

サイズ オプション:

ユーティリティ クラスはサイズ オプションでさらにカスタマイズでき、開発者は間隔を正確に制御できます:

• 0: マージン/パディングなし
• 1: 0.25rem のマージン/パディング (デフォルトのフォント サイズでは 4px)
• 2: 0.5rem (8px) のマージン/パディング
• 3: 1rem (16px) のマージン/パディング
• 4: 1.5rem (24px) のマージン/パディング
• 5: 3rem (48px) のマージン/パディング
• auto: margin to auto

より包括的な詳細については、間隔に関する公式の Bootstrap 4 ドキュメントと w3schools チュートリアルを参照してください。

以上がBootstrap 4 の「mb-0」ユーティリティ クラスはページ要素にどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。