• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 24/08/2020

Utilisez les composants d'interface utilisateur de Bootstrap pour afficher le contenu

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Compétences évaluées

  • Utilisez les composants d'interface utilisateur de Bootstrap pour afficher le contenu
  • Question 1

    Si vous voulez réduire la barre de navigation de Bootstrap pour les écrans de petite et de très petite taille, et la développer pour tous les autres écrans, laquelle de ces classes devez-vous ajouter à l'élément  <nav> ?

    • navbar-expand

    • navbar-expand-sm

    • navbar-expand-md

    • navbar-expand-lg

  • Question 2

    Que font les classes  .navbar-light  et  .navbar-dark  ?

    • Elles ajustent la couleur de l'arrière-plan du composant barre de navigation

    • Elles ajustent la couleur des éléments dans le composant barre de navigation

    • Elles ajustent la couleur de l'arrière-plan et de l'élément du composant barre de navigation

  • Question 3

    Laquelle des propositions suivantes créera une barre de navigation responsive, développée sur les zones de visualisation avec la taille du grand point d'arrêt minimum, et réduite dans toutes les autres largeurs de la zone de visualisation ?

    • <nav class="navbar navbar-expand-lg">
      <a class="navbar-brand" href="#">Nom du site</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div id="navbarContent" class="collapse navbar-collapse">
      ... nav items...
      </div>
      </nav>
    • <nav class="navbar navbar-expand">
      <a class="navbar-brand" href="#">Nom du site</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div id="navbarContent" class="collapse navbar-collapse">
      ... nav items...
      </div>
      </nav>
    • <nav class="navbar navbar-expand-lg">
      <a class="navbar-brand" href="#">Nom du site</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse">
      ... nav items...
      </div>
      </nav>
    • <nav class="navbar navbar-expand-lg">
      <a class="navbar-brand" href="#">Nom du site</a>
      <button class="navbar-toggler" type="button" data-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div id="navbarContent">
      ... nav items...
      </div>
      </nav>