Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi et Quiz : Configuration de Bootstrap | Configuration de l'Environnement
Essentiels de Bootstrap pour les Sites Web Modernes

bookDéfi et Quiz : Configuration de Bootstrap

Remarque

Tous les défis suivront le même format que celui présenté ci-dessous :

  • Une tâche à accomplir vous sera présentée ;
  • Ensuite, vous trouverez un bloc de code dans lequel vous devrez effectuer des modifications selon la tâche ;
  • Cliquez sur le bouton Exécuter le code pour prévisualiser la page en direct ;
  • Sous le bloc de code, deux boutons seront disponibles : Indice et Solution ;
    • Le bouton Indice fournit des indications pour la tâche ;
    • Le bouton Solution affiche la solution correcte.
  • Il est recommandé d'essayer de réaliser la tâche par vous-même avant d'utiliser le bouton Solution.

Tâche

Un code HTML de base vous est fourni, comprenant un élément button actuellement stylisé avec les styles par défaut du navigateur. Bien que l’élément button comporte des noms de classes issus de Bootstrap, aucun changement n’est visible sur la page en direct car Bootstrap n’a pas encore été intégré au projet. Votre tâche consiste à ajouter les liens appropriés pour connecter Bootstrap au projet.

index.html

index.html

copy
  • Pour ajouter le lien vers le CSS de Bootstrap, utilisez le code suivant : <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">.
  • Pour le lien JavaScript de Bootstrap, utilisez ce code : <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>.
index.html

index.html

copy

Quiz

1. Quelle est l'une des méthodes pour intégrer Bootstrap dans un projet ?

2. Que signifie CDN dans le contexte de l'intégration de Bootstrap ?

3. Quelle commande permet d’installer Bootstrap via NPM ?

question mark

Quelle est l'une des méthodes pour intégrer Bootstrap dans un projet ?

Select the correct answer

question mark

Que signifie CDN dans le contexte de l'intégration de Bootstrap ?

Select the correct answer

question mark

Quelle commande permet d’installer Bootstrap via NPM ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 4

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

Can you explain where exactly I should place the Bootstrap links in the HTML file?

Do I need to add both the CSS and JavaScript links for Bootstrap to work?

What changes should I expect to see after adding Bootstrap to the project?

Awesome!

Completion rate improved to 3.23

bookDéfi et Quiz : Configuration de Bootstrap

Glissez pour afficher le menu

Remarque

Tous les défis suivront le même format que celui présenté ci-dessous :

  • Une tâche à accomplir vous sera présentée ;
  • Ensuite, vous trouverez un bloc de code dans lequel vous devrez effectuer des modifications selon la tâche ;
  • Cliquez sur le bouton Exécuter le code pour prévisualiser la page en direct ;
  • Sous le bloc de code, deux boutons seront disponibles : Indice et Solution ;
    • Le bouton Indice fournit des indications pour la tâche ;
    • Le bouton Solution affiche la solution correcte.
  • Il est recommandé d'essayer de réaliser la tâche par vous-même avant d'utiliser le bouton Solution.

Tâche

Un code HTML de base vous est fourni, comprenant un élément button actuellement stylisé avec les styles par défaut du navigateur. Bien que l’élément button comporte des noms de classes issus de Bootstrap, aucun changement n’est visible sur la page en direct car Bootstrap n’a pas encore été intégré au projet. Votre tâche consiste à ajouter les liens appropriés pour connecter Bootstrap au projet.

index.html

index.html

copy
  • Pour ajouter le lien vers le CSS de Bootstrap, utilisez le code suivant : <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">.
  • Pour le lien JavaScript de Bootstrap, utilisez ce code : <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>.
index.html

index.html

copy

Quiz

1. Quelle est l'une des méthodes pour intégrer Bootstrap dans un projet ?

2. Que signifie CDN dans le contexte de l'intégration de Bootstrap ?

3. Quelle commande permet d’installer Bootstrap via NPM ?

question mark

Quelle est l'une des méthodes pour intégrer Bootstrap dans un projet ?

Select the correct answer

question mark

Que signifie CDN dans le contexte de l'intégration de Bootstrap ?

Select the correct answer

question mark

Quelle commande permet d’installer Bootstrap via NPM ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 4
some-alt