Skip to main content

Bootstrap

Bootstrap 5 est un framework front-end polyvalent et puissant qui permet aux développeurs de créer rapidement des sites web réactifs et esthétiquement attrayants.
Il offre une flexibilité et une extensibilité suffisantes pour répondre aux besoins de projets web de toutes tailles.

Bootstrap n'est qu'un outil parmis d'autres, il existe de nombreux framework CSS.
Certains inclue le javascript avec d'autre nom. C'est une question de préférences et il est tout à fait possible de crée son site web sans framework.

Installation​

La façon la plus simple de l'utiliser et de passer par les cdn mit en place pour fournir la partie css et js de bootstrap

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

On va donc inclure celà dans notre page html.
Souvent le js est inclut avant le tag </body>. Javascript va travailler avec la structure html du coup c'est préférable que celle ci soit crée avant son inclusion.
De plus l'ajouter en fin de page html permet de ne pas ralentir le rendu de la page.

Starter​

On peut utliser le template de base de bootstrap avec un élement alert pour vérifier que l'installation est correctement faite.


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="alert alert-primary" role="alert">
        It's Work
    </div>

    <!-- js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </body>
</html>

Docs​

Bootstrap 5