Créer une mise en page réactive avec Bootstrap

Paix
Dans cet article, je vais vous guider tout au long du processus de création d'une mise en page simple et réactive à l'aide de Bootstrap 5.

Voici la structure HTML que je vais vous guider :

<section class="bg-dark text-light p-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-12 my-5">
                <h1 class="display-4">Become a <span class="text-warning">Web Developer</span></h1>
                <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum dicta inventore magnam illo doloremque mollitia quis sint ullam atque officiis vel voluptas eum blanditiis unde autem maiores beatae, perferendis neque.</p>
                <button class="btn btn-primary btn-lg">Start The Enrollment</button>
            </div>
            <div class="col-lg-6 col-12 d-flex align-items-center">
                <img class="img-fluid w-100" src="img/coding-woman.jpg" alt="">
            </div>
        </div>
    </div>
</section>

Cette section simple comprend deux colonnes : une pour le texte et une pour une image. Explorons comment Bootstrap gère la réactivité dans cette mise en page.

Le conteneur et les rangées :

<div class="container">
    <div class="row">
        ...
    </div>
</div>

.container : Cette classe crée un conteneur réactif à largeur fixe. Le contenu à l'intérieur du conteneur ajustera automatiquement sa largeur en fonction de la taille de l'écran.
.row : À l'intérieur du conteneur, nous avons une ligne. Bootstrap utilise un système de grille à 12 colonnes, où le contenu à l'intérieur de la ligne est divisé en colonnes.

Colonnes responsives avec Bootstrap :

<div class="col-lg-6 col-12 my-5">
    <h1 class="display-4">Become a <span class="text-warning">Web Developer</span></h1>
    <p class="lead">Lorem ipsum dolor sit amet...</p>
    <button class="btn btn-primary btn-lg">Start The Enrollment</button>
</div>

Classes de colonnes :

.col-lg-6 : Cela signifie que sur les grands écrans (par exemple, ordinateurs de bureau), cette colonne occupera 6 des 12 colonnes de la grille (50 % de la largeur de l'écran).
.col-12 : Sur des écrans plus petits (comme les appareils mobiles), la colonne occupera les 12 colonnes, ce qui lui fera occuper toute la largeur du conteneur .

Cela permet au contenu d'être flexible et de s'adapter à différentes tailles d'écran. Par exemple :

Sur les ordinateurs de bureau : le contenu et l'image seront placés côte à côte, chacun occupant 50 % de l'écran.
Sur les appareils mobiles : le texte et l'image s'empileront verticalement, chacun occupant toute la largeur.

Rendre les images réactives :

<img class="img-fluid w-100" src="img/coding-woman.jpg" alt="">

.img-fluid : Cette classe garantit que l'image est réactive, s'adaptant à la taille de l'écran sans déborder du conteneur.
.w-100 : Cela force l'image à occuper toute la largeur de son conteneur, ce qui permet d'éviter qu'elle ne s'écrase ou ne devienne disproportionnée sur des écrans plus petits.

En combinant ces classes, l'image s'adaptera toujours correctement dans la colonne qui lui est attribuée, s'adaptant parfaitement aux vues sur mobile et sur ordinateur.

Assurer l'alignement vertical :

<div class="col-lg-6 col-12 d-flex align-items-center">
    <img class="img-fluid w-100" src="img/coding-woman.jpg" alt="">
</div>

.d-flex : La classe utilitaire Flexbox de Bootstrap facilite l'alignement du contenu.
.align-items-center : Ceci centre l'image verticalement dans son conteneur, garantissant que la mise en page semble équilibrée et professionnelle.

À la fin :
Cet exemple montre à quel point il est facile de créer une mise en page flexible et réactive à l'aide de Bootstrap. Avec un minimum d'effort, vous pouvez donner à votre site Web une belle apparence sur des écrans de toutes tailles, offrant ainsi aux utilisateurs une expérience optimale.

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!