Exemples utiles pour le TP3

Comprendre un affichage

• Si du texte est positionné sur une image : utiliser la superposition sur carte avec card-img-overlay

• Si un élément est divisé en colonnes de contenu : utiliser le système de grille avec row et les variantes de col

Il se peut qu'un card-img-overlay contienne un bloc Flex ou même une grille !

Il se peut donc qu'un item de carrousel affiche une carte avec card-img-overlay qui contient une grille à l'intérieur !

Nav à plusieurs barres

La balise <nav> est une balise bloc qui peut contenir plusieurs blocs.

Ainsi dans le nav, on peut créer 2 barres de navigation.

En HTML :

1. on insert donc 2 blocs dans le nav

2. on associe les classes de barre de navigation à chaque bloc

   ⭐ La beauté des classes c'est de pouvoir les utiliser autant de fois qu'on veut dans une page ! ⭐

Donc :

<nav>
    <!--Première barre-->
    <div class="navbar ...">
        ...
    </div>

    <!--Deuxième barre-->
    <div class="navbar ...">
        ...
    </div>
</nav>

Marges automatiques

Avec le Flex, l'attribut justify-content traite tous les enfants pour les positionner en groupe.

✅ Les marges automatiques permettent de pousser une partie des enfants à gauche ou à droite du flex.

Une marge automatique prend l'espace disponible et en fait une marge.

• mx-auto : marge gauche ET marge droite automatique
• ms-auto : marge gauche automatique (margin start)
• me-auto : marge droite automatique (margin end)

Cacher et afficher sur tailles d'écran

Parfois sur mobile, on manque d'espace pour tout afficher le contenu.

On veut donc :

1. Cacher par défaut
2. afficher sur une autre taille d'écran

Exemple :

<!--Pour une image-->
<img src="img/monimage.png" alt="Mon image" class="img-fluid d-none d-md-inline">

<!--Pour un paragraphe-->
<p class="d-none d-lg-block">
    Paragraphe optionnel qui ne s'affiche que sur écrans larges et plus.
</p>

Modifier les classes Bootstrap

Même lorsqu'on utilise la version en ligne, il est possible de redéfinir des valeurs des classes Bootstrap dans notre CSS.

Exemple :

Supposons une carte contenant un bouton rouge :

<div class="card...">
    <div class="card-body">
       <button type="button" class="btn btn-danger">Un bouton rouge</button>
    </div>
</div>

Dans le CSS local, on peut appeler les classes Bootstrap pour modifier les styles :

.card:hover .btn-danger {
    background-color: black;
}

Imbriquer des composants

Très souvent, nous avons à imbriquer des composants les uns dans les autres.

Exemple : Un carrousel contenant une diapositive ayant une carte avec image de fond et superposition de grille

Pour cet exemple, la base HTML de cette diapositive (carousel-item) serait :

    <div class="carousel-item">
        <div class="card">
            <img class="card-img">
            <div class="card-img-overlay">
                <div class="row">
                    <div class="col">
                        ...
                    </div>
                    <div class="col">
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div>