TP1 Bootstrap

TP1 Bootstrap

  1. Objectif

    • Le but de ce TP est d’utiliser les différents éléments du framework Twitter Bootstrap pour créer une page Web.
  2. Rappels

    • La version 4 de Bootstrap est composée : d’un fichier CSS et de trois fichiers JS.
    • Le fichier CSS est propre à Bootstrap. Il contient l’essence même du framework. En ce qui concerne les fichiers JS, on retrouve le framework jQuery ainsi que la librairie Popper sur lesquels s’appuie Bootstrap.
    • Dans le template de base, vous trouvez en premier cette ligne :<meta name="viewport" content="width=device-width, initialscale=1.0">
  3. Exercice 01

    • Énoncé
      • Créer une page HTML5 et utiliser le modèle de départ offert par Bootstrap depuis l’adresse suivante
    • Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la solution !
        • Afficher la solution
          <!doctype html>
          <html lang="en">
            <head>
              <!-- Required meta tags -->
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
          
              <!-- Bootstrap CSS -->
              <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/
          4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/
          Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
          
              <title>Hello, world!</title>
            </head>
            <body>
              <h1>Hello, world!</h1>
          
              <!-- Optional JavaScript -->
              <!-- jQuery first, then Popper.js, then Bootstrap JS -->
              <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
           integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
          crossorigin="anonymous"></script>
              <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/
          dist/umd/popper.min.js" integrity="
          sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
           crossorigin="anonymous"></script>
              <script src="https://stackpath.bootstrapcdn.com/bootstrap/
          4.4.1/js/bootstrap.min.js" integrity=
          "sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
           crossorigin="anonymous"></script>
            </body>
          </html>
  4. Exercice 02

    • Énoncé
      • Créer une première page HTML5 et utiliser la méthode CDN pour appeler bootstrap 5
      • Créer une deuxème page HTML5 et utiliser la méthode local pour appeler bootstrap 5
      • Soit le contenu <body> de votre page ( à recopier)
      • <body>
          <div class="container">
            <div class="row">
              <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
                <div class="card card-signin my-5">
                  <div class="card-body">
                    <h5 class="card-title text-center"><b>Se connecter</b></h5>
                    <form class="form-signin" action="LoginServlet" method="post"  autocomplete="off">
                      <div class="form-label-group">
                        <input type="email" id="inputEmail" name="username" class="form-control" 
                        placeholder="Adresse e-mail" required autofocus 
                        value="" autocomplete="off">
                        <label for="inputEmail">Adresse e-mail</label>
                      </div>
                      <div class="form-label-group">
                        <input type="password" id="inputPassword" name="password" class="form-control" 
                        placeholder="Mot de passe" required value="" autocomplete="off">
                        <label for="inputPassword">Mot de passe</label>
                      </div>
        
                      <div class="custom-control custom-checkbox mb-3">
                        <input type="checkbox" class="custom-control-input" id="customCheck1">
                        <label class="custom-control-label" for="customCheck1">
        Se souvenir de moi</label>
                        <label  class="motpasse" for="customCheck1">Mot de passe oublié</label>
                        
                      </div>
                      <button class="btn btn-lg btn-primary btn-block text-uppercase" 
        type="submit">Se connecter</button>
                      <hr class="my-4">
                      <button class="btn btn-lg btn-google btn-block text-uppercase" 
        type="submit"><i class="fa fa-google mr-2"></i> Se connecter avec Google</button>
                      <button class="btn btn-lg btn-facebook btn-block text-uppercase" 
        type="submit"><i class="fa fa-facebook-f mr-2"></i> Se connecter avec Facebook</button>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </body>



      • Utilisez les balises HTML5 appropriées pour indiquer les en-têtes, les pieds de pages. Assurez-vous qu’ils s’affichent correctement dans votre navigateur.
      • Actualisez votre navigateur et assurez-vous que les styles de typographie Bootstrap prennent forme.
    • Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la solution !

Abonnez vous à notre chaîne YouTube gratuitement