TP1 Bootstrap
TP1 Bootstrap
-
Objectif
- Le but de ce TP est d’utiliser les différents éléments du framework Twitter Bootstrap pour créer une page Web.
-
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"> -
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 !
-
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)
- 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 !
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><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>