Comment utiliser les classes utilitaires d'espacement Bootstrap pour contrôler les marges et le remplissage dans mes mises en page ?

Comprendre les classes utilitaires d'espacement Bootstrap

Bootstrap fournit des classes utilitaires d'espacement complètes pour contrôler les marges et le remplissage des éléments. Ces classes simplifient le processus d'ajustement des espaces dans vos mises en page.

Syntaxe

La syntaxe des classes utilitaires d'espacement a évolué dans différentes versions de Bootstrap.

Bootstrap 4

Marges : m{côtés}-{taille>
Rembourrage : p{côtés}-{taille} 🎜>

Bootstrap 5

Marges : m{côtés}-{taille} (utilisez moi-, ms-, pe -, ps-)
Rembourrage : p{côtés}-{taille>

Exemples

Bootstrap 4 :

<div class="m-b-lg">...</div> <!-- margin-bottom-large -->
<div class="p-t-3">...</div> <!-- padding-top-3 -->

Bootstrap 5 :

<div class="me-3">...</div> <!-- margin-end-3 -->
<div class="ps-1">...</div> <!-- padding-start-1 -->

Espacement réactif

Bootstrap 4 implémente des classes utilitaires d'espacement réactives qui répondent aux points d'arrêt. La syntaxe est :

m{sides}-{breakpoint}-{size}
p{sides}-{breakpoint}-{size}

Exemple :

<div class="mt-md-2">...</div> <!-- margin-top-2 on medium screens or larger -->

Utilisation dans React

Pour utiliser les classes utilitaires d'espacement dans React, vous pouvez définir l'attribut className sur un élément. Par exemple :

<code class="javascript">import React, { Component } from 'react';

class Example extends Component {
  render() {
    return (
      <div className="m-b-lg">
        {/* Your content */}
      </div>
    );
  }
}

export default Example;</code>

Remarque :

Dans Bootstrap 4, vous devrez peut-être installer un plugin pour activer la prise en charge des classes d'utilitaires d'espacement. Reportez-vous à la documentation Bootstrap pour plus d'informations.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!