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
- Formations jusqu’à 100 % financées
- Date de début flexible
- Projets professionnalisants
- Mentorat individuel