TP1 Bootstrap Correction

Ministère de l’Enseignement Matière : IHM-Framework
Supérieur Enseignante TP : Amira Jbara

Université de Monastir Section : LBC
Institut Supérieur Classe : B, C, D, E, F.
d'Informatique de Mahdia Année universitaire : 2022-2023
(ISIMA)
TP N°1 : Le Framework Bootstrap 5.

Exercice 1 :
Créez une nouvelle page web en utilisant Bootstrap 5. Elle devra comporter :
 Une barre de navigation avec "MMI" en titre, et trois boutons : "Home", "Page 1", et
"Page 2", un menu déroulant et un formulaire de recherche.
 Un jumbotron avec un titre, une description et un bouton.
 Trois cartes alignées avec une image, une description et un bouton. Pour aligner les
cartes en 3 colonnes, servez-vous de la grille.
 Utilisez Lorem Ipsum - All the facts - Lipsum generator pour le texte.
 Utilisez LoremFlickr pour les images.
Vous devriez arriver à quelque chose ressemblant à ça :
Correction :
<!DOCTYPE html>
<html lang="en">
<head>
Page 1 sur 9
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ex1</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="images/LOGO_CAT.png" alt="" width="30" height="24"
class="d-inline-block align-text-top">
MIMI
</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="#">Home</a>
</li>
<a class="nav-link disabled" href="#">Page1</a>
</li>
<a class="nav-link disabled">Page2</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-
expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another
action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else
here</a></li>
Page 2 sur 9
</ul>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search"
placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light"
type="submit">Chercher</button>
</form>
</div>
</div>
</nav>
<div class="container pt-4">
<div class="row">
<div class="p-5 mb-4 bg-secondary bg-opacity-25 rounded-3">
<div class="container-fluid py-5">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple
jumbotron-style component for calling extra attention to featured content or
information.</p>
<hr>
<p>It uses utility classes for typography and spacing to
space content out within the larger container.</p>
<a class="btn btn-danger btn-lg" href="#"
role="button">Learn more</a>
</div>
</div>
</div>
<div class="row pt-4">
<div class="col">
<div class="card" style="width: 18rem;">
<img src="https://loremflickr.com/320/240" class="card-img-
top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the
card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-danger">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
top" alt="...">
Page 3 sur 9
</div>
</div>
</div>
<div class="col">
top" alt="...">
</div>
</div>
</div>
</div>
</div>
<link
</body>
</html>
Exercice 2 :
Utilisez le Framework Bootstrap 5 pour réaliser la page suivante :
Correction :
Page 4 sur 9
<!DOCTYPE html>
<html lang="en">
<head>
<title>EX2</title>
<link
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
icons@1.10.5/font/bootstrap-icons.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<a class="nav-link active" aria-current="page"
href="#">Home</a>
</li>
<a class="nav-link" href="#">Contact</a>
</li>
<a class="nav-link">About Us</a>
</li>
<a class="nav-link">Messages
<span class="badge rounded-pill bg-success">12</span></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col mx-2">
Page 5 sur 9
<h1>Dashboard:</h1>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Team</th>
<th>All Star</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tbody>
<tr>
<td>Steph</td>
<td>Warriors</td>
<td>Yes</td>
<td><a href="" class="btn btn-sm btn-danger"><i
class="bi bi-x-lg"></i></a></td>
</tr>
<tr>
<td>Lebron</td>
<td>Cavaliers</td>
<td>Yes</td>
</tr>
<tr>
<td>Dwayne</td>
<td>Heat</td>
<td>Yes</td>
</tr>
<tr>
<td>Kobe</td>
<td>Lakers</td>
<td>Yes <span class="badge bg-warning text-
dark">Last</span></td>
</tr>
<tr>
<td>Isaiah</td>
<td>Celtics</td>
<td>Yes <span class="badge bg-
success">First</span></td>
</tr>
Page 6 sur 9
</tbody>
</table>
<hr>
</div>
</div>
</div>
<div class="row">
<div class="col">
<h2 class="mx-3">Todos:</h2>
<div class="col mx-3">
<ul class="list-group">
<li class="list-group-item list-group-item-success">Feel good
about Bootstrap</li>
<li class="list-group-item list-group-item-primary">Feel informed
<li class="list-group-item list-group-item-warning">Feel warned
<li class="list-group-item list-group-item-warning">Maybe I should
read the docs</li>
<li class="list-group-item list-group-item-danger">Danger zone
</li>
<li class="list-group-item list-group-item-danger">I really should
read the docs </li>
</ul>
</div>
</div>
</div>
<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>
Exercice 3 :
Écrivez le code nécessaire pour que votre page ressemble à celle-ci :
 Utilisez Lorem Ipsum - All the facts - Lipsum generator pour le texte.
 Utilisez https://picsum.photos pour les images.
Page 7 sur 9
Correction :
<!DOCTYPE html>
<html lang="en">
<head>
<title>EX3</title>
<link
</head>
<body>
<br>
<div class="container">
<div class="row">
<div class="col">
<div class="p-5 mb-4 bg-secondary bg-opacity-10 rounded-3">
<div class="container text-center">
<h2>Welcome to our website!</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam
aspernatur voluptatum atque cum! Officiis alias ipsum possimus cumque, officia
veniam nihil est praesentium molestias. Inventore sapiente nulla et nisi
consectetur.</p>
<div class="d-grid gap-2">
<button class="btn btn-primary btn-lg" type="button">Learn
more</button> </div>
</div>
Page 8 sur 9
</div>
</div>
</div>
<hr>
<h3>Let's look at some random pictures! <small class="lead">from LOREM
PICSUM https://picsum.photos</small></h3>
<div class="row">
<div class=" col-md-4 lead">
<P> lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos
quas expedita dolorum blanditiis deserunt. Excepturi architecto repellat harum
perferendis! Consequuntur placeat autem nobis facere tempora earum explicabo
quasi deserunt sit!</P>
<img src="https://picsum.photos/300/320" class="img-thumbnail"
alt="...">
</div>
<div class="col lead">
<P>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos
alt="...">
</div>
<div class="col lead">
<P>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos
alt="...">
</div>
</div>
<hr>
<div class="row">
<div class="col">
<div class="alert alert-success text-center" role="alert">
Thanks for Visiting!
</div>
</div>
</div>
</div>
<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>
Page 9 sur 9

TP1 Bootstrap Correction

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP1 Bootstrap Correction

Transféré par

Droits d'auteur :

Formats disponibles

Ministère de l’Enseignement Matière : IHM-Framework

Supérieur Enseignante TP : Amira Jbara

TP N°1 : Le Framework Bootstrap 5.

Vous devriez arriver à quelque chose ressemblant à ça :

Vous aimerez peut-être aussi