Composants Bootstrap

Bootstrap offre une liste importante de composants pré-programmés qui offrent de fonctionnalités dynamiques à nos pages sans qu'on ait besoin de les programmer nous-mêmes.

C'est le cas de :

• Les barres de navigation réactives
• Les carrousels
• Les fenêtres superposées (popup)
• Les effets visuels de déroulement
• etc...

Ajouter le script

Pour que ces composants puissent fonctionner, on doit ajouter à nos pages :

• Le lien CSS pour les styles et la mise en page
• Le lien vers le script pour les éléments dynamiques

AInsi, notre squelette HTML sera :

Squelette HTML avec Bootstrap :

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Mon nom ici">
    <title>Squelette avec Bootstrap</title>

    <!--FEUILLE DE STYLES BOOTSTRAP-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B/GM4XqrwHnWXNOWMbloTmrYXZg10cakYGmpfsR/bbzQ6JAJI4ihuyADKLnBgrCe" crossorigin="anonymous">
  </head>

  <body>

    <!--HTML de la page ici-->

    <!--SCRIPT BOOTSTRAP-->
    <script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-1a/pXj49ZQ1aHEmrJ+gMw1otqoVsYwlEnlD8mIfY2TV03r20Y0CN7uqx1tQogjPL" crossorigin="anonymous"></script>
  </body>
</html>

Pourquoi le script à la fin ?

Plusieurs exemples positionnent le script dans le <head>.

C'est une ancienne méthode de fonctionner.

Aujourd'hui, on met les scripts à la fin du HTML pour empêcher que ces derniers empêchent le HTML de se charger à l'écran.

Puisque le navigateur lit le code HTML séquentiellement (ligne par ligne), on lui permet d'abord de construire la page et la fin de lire les scripts. Ainsi, les gros scripts lents ou qui ne répondent pas n'empêcheront pas l'affichage de la page.