• 10 heures
  • Moyenne
Licence

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
Être orientéComparez nos types de formation