Une barre de navigation flexible NAVIGATION:Flexible

Comme la classe .nav est basée sur Flexbox, nous pouvons créer des barres de navigation qui s’adaptent selon la taille de l’écran.

Voici le code utilisé pour cet exemple :

<nav class="nav nav-pills flex-column flex-sm-row"> 
        <a class="nav-link active" href="#">Lorem</a> 
        <a class="nav-link" href="#">Ipsum</a> 
        <a class="nav-link" href="#">Adipiscing</a> 
        <a class="nav-link" href="#">Amet</a> 
</nav> 

L’élément <nav> utilise la classe .flex-column pour indiquer que par défaut, les éléments enfants doivent s’afficher en colonne, les uns sous les autres. Puis nous avons la classe .flex-sm-row qui indique que les éléments doivent s’afficher en ligne pour les petits écrans et plus. C’est donc cette règle qui s’applique sur les écrans de petite taille et les plus grands. Pour les écrans très petits, de taille inférieure à 576 pixels, c’est l’affichage vertical qui est utilisé.

Voici l’affichage sur un petit écran et supérieur :

images/C10-008.png

Voici l’affichage obtenu sur un très petit écran :

images/C10-009.png
Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Les options de mise en forme
Suivant
Une barre de navigation avec bouton déroulant