• 10 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 23/05/2023

Afficher du contenu avec les composants d'interface utilisateur

Compétences évaluées

  • Afficher du contenu avec les composants d'interface utilisateur
  • Question 1

    Quels sont les bons réflexes à avoir lorsque vous voulez intégrer un composant Bootstrap 5 sur votre site ?

    Attention, plusieurs réponses sont possibles.
    •  Aller voir un tuto sur YouTube

    • Consulter la documentation Bootstrap 5 du composant en question

    • Aller chercher des exemples d'utilisation du composant sur internet

    • Le coder tout de suite en faisant des tests réguliers pour vérifier le rendu

  • Question 2

    Comment rendre une barre de navigation responsive sur les écrans en dessous de la taille moyenne ?

    • <nav class="navbar navbar-expand-md">
      <a class="navbar-brand" href="#">Navbar</a>
      <ul class="navbar-nav">
      <li class="nav-item">
      <a href="#" class="nav-link"></a>
      </li>
      </ul>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMobile">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarMobile">
      <ul class="navbar-mobile">
      <li class="nav-item">
      <a href="#" class="nav-link"></a>
      </li>
      </ul>
      </div>
      </nav>
    • <nav class="navbar navbar-mobile-xs navbar-expand-md">
      <a class="navbar-brand" href="#">Navbar</a>
      <ul class="navbar-nav">
      <li class="nav-item">
      <a href="#" class="nav-link"></a>
      </li>
      </ul>
      </nav>
    • <nav class="navbar">
      <a class="navbar-brand" href="#">Navbar</a>
      <ul class="navbar-nav">
      <li class="nav-item">
      <a href="#" class="nav-link"></a>
      </li>
      </ul>
      </nav>
      <nav class="navbar-mobile">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMobile">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarMobile">
      <ul class="navbar-nav">
      <li class="nav-item">
      <a href="#" class="nav-link"></a>
      </li>
      </ul>
      </div>
      </nav>
    • <nav class="navbar navbar-expand-md">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMobile">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarMobile">
      <ul class="navbar-nav">
      <li class="nav-item">
      <a href="#" class="nav-link"></a>
      </li>
      </ul>
      </div>
      </nav>
  • Question 3

    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

    • Elles permettent d’ajouter une option de changement de thème dans la barre de navigation

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous