Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
Bootstrap

La Syntaxe de base de Bootstrap

Un cours complet pour maîtriser La Syntaxe de base de Bootstrap.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Sommaire du cours
historique de bootstrap
Présentation de bootstrap
Installation de Bootstrap
La Syntaxe de base de Bootstrap
Les bases de Bootstrap et template de démarrage
Le système de grille Bootstrap
La grille de Bootstrap en pratique
Exercices positionnement sur Grille Bootstrap
Alignement avec Bootstrap
TP la grille Bootstrap
Les classes pull et push
Typographie de Bootstrap
Les tableaux dans Bootstrap
Menus de navigation (Navbar)
Les barres d'outils standard Bootstrap
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

  1. Objectif

    • Connaitre le Bootstrap.

  2. Pour commencer

    • Si vous avez téléchargé les fichiers de base
      • Il suffit d’entrer le code dans notre fichier HTML. Voici le code à copier-coller afin que Bootstrap fonctionne sans Internet sur votre ordinateur.
      <!doctype html>
<html lang="fr">
    <head>
        <title>Hello, world!</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="bootstrap-5.1.3/css/bootstrap.min.css">
    </head>
    <body>
        <h1>Hello, world !</h1>
        
        
        <!-- jQuery en premier, puis Popper.js et enfin Bootstrap JS -->
        <script src="bootstrap-5.1.3/js/bootstrap.bundle.min.js"></script>
    </body>
</HTML>
  3. Si vous utilisez des CDN.
    • Vous trouvez sur le site de Bootstrap un template de base et des exemples comportant l'essentiel des éléments pour vous aider à initier un projet.
    <!doctype html>
<html lang="fr">
  <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>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <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>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>
  4. Il vous suffit simplement de sélectionner le code et de le coller dans votre éditeur et vous êtes prêt à utiliser Bootstrap.

  5. Créer la première page Web avec Bootstrap 5

    • Pour commencer on va essayer d'analyser les parties essentiels de notre page principal
      • Le doctype HTML5
          <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> </html>
        • à inclure obligatoirement:
          • document HTML5
          • L'attribut lang
          • Le jeu de caractères
    • La balise meta viewport
      • <meta name="viewport" content="width=device-width, initial-scale=1">
      • Utiliser la balise meta viewport pour contrôler la mise en page sur les navigateurs mobiles
      • Le Viewport désigne schématiquement la surface de la fenêtre du navigateur.
      • La propriété width contrôle la taille du viewport.
        • Elle peut être réglée à une valeur fixe de pixels, comme width=600
        • Elle peut être réglée à automatiquement à la valeur de device-width du terminal.
      • La propriété initial-scale contrôle le niveau de zoom lorsque la page est chargée pour la première fois.
        • Les propriétés maximum-scale, minimum-scale, et user-scalable contrôlent la manière dont les utilisateurs sont autorisés à zoomer ou dézoomer une page.
    • La balise jQuery de Bootstrap
      • Les balises <script> qui activent les plugins jQuery de Bootstrap. Ces plugins sont nécessaires pour animer les composants Bootstrap.