TP1 Bootstrap Correction
TP1 Bootstrap Correction
TP1 Bootstrap Correction
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.
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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Page1</a>
</li>
<li class="nav-item">
<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">
<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>
Page 3 sur 9
<a href="#" class="btn btn-danger">Go somewhere</a>
</div>
</div>
</div>
<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>
</div>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
</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>
<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>EX2</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<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">
<div class="container-fluid">
<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">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link">Messages
<span class="badge rounded-pill bg-success">12</span></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<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>
<td><a href="" class="btn btn-sm btn-danger"><i
class="bi bi-x-lg"></i></a></td>
</tr>
<tr>
<td>Dwayne</td>
<td>Heat</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>Kobe</td>
<td>Lakers</td>
<td>Yes <span class="badge bg-warning text-
dark">Last</span></td>
<td><a href="" class="btn btn-sm btn-danger"><i
class="bi bi-x-lg"></i></a></td>
</tr>
<tr>
<td>Isaiah</td>
<td>Celtics</td>
<td>Yes <span class="badge bg-
success">First</span></td>
<td><a href="" class="btn btn-sm btn-danger"><i
class="bi bi-x-lg"></i></a></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
about Bootstrap</li>
<li class="list-group-item list-group-item-warning">Feel warned
about Bootstrap</li>
<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>
<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>EX3</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>
<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
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
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>
<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