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

TP1 Bootstrap

Un cours complet pour maîtriser TP1 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

    • 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 w-100 text-uppercase" 
type="submit">Se connecter</button>
              <hr class="my-4">
              <button class="btn btn-lg btn-google w-100 text-uppercase" 
type="submit"><i class="fa fa-google mr-2"></i> Se connecter avec Google</button>
              <button class="btn btn-lg btn-facebook w-100 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.
  5. Solution
    • Essayez de faire l'exercice de votre côté avant de regarder la solution !