• 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