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

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

<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 :

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!