TP2 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°2 : Le Framework Bootstrap 5.

Travail à faire :
Utilisez le Framework Bootstrap 5 pour réaliser la page suivante. Elle devra comporter :
 Une barre de navigation avec "TP Bootstrap", en titre, et 5 boutons : "Accueil", "Test",
et "Inactif", Se connecter et S’inscrire à droite.
 Une partie avec un couleur sombre et couleur de text clair et un bouton.
 Insertion d’une image donnée.
 Et partie contient un grand titre, une paragraphe et un petit formulaire. En utilisant
Lorem Ipsum - All the facts - Lipsum generator pour le texte.
 Insertion d’un modal en cliquant sur le bouton « souscrire » avec un Tooltip Fermer.
Vous devriez arriver à quelque chose ressemblant à ça :
Page 1 sur 4
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>TP2 bootstrap</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-light bg-light">
<nav class="container">
<a class="navbar-brand" href="#">TP Bootstrap</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>
<nav 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="#">Accueil</a>
</li>
Page 2 sur 4
<a class="nav-link" href="#">Test</a>
</li>
<a class="nav-link disabled">Inactif</a>
</li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="#" class="nav-link">Se connecter</a></li>
<li class="nav-item"><a href="#" class="btn btn-
success">S'inscrire</a></li>
</ul>
</nav>
</nav>
</nav>
<div class="container-fluid text-center bg-dark text-light py-5">
<div class="row">
<div class="col">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aliquam culpa saepe molestiae. Dolorem, obcaecati rerum?</span>
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModal">Souscrire</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content text-black">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal
title</h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal" aria-label="Close" data-bs-toggle="tooltip" data-bs-
placement="Top" title="Fermer"></button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nemo aspernatur rem, explicabo, ab numquam vel quibusdam veniam quod nostrum
debitis cum, animi labore tenetur eligendi quis officia libero nobis
repellat!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save
changes</button>
</div>
</div>
</div>
</div>
</div>
Page 3 sur 4
</div>
</div>
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col p-5">
<img src="isima.jpg" class="img-fluid" alt="...">
</div>
<div class="col">
<h1 class="p-5">Lorem ipsum dolor sit amet consectetur adipisicing
elit. Numquam, aperiam.</h1>
<p class="p-5">Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ea quidem maiores consectetur eligendi animi, laboriosam unde quos
nostrum numquam. Voluptates accusantium, quas maiores officiis magnam facilis
tenetur ipsum quisquam perspiciatis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
deleniti numquam laborum ad enim corrupti quae exercitationem velit nulla
placeat, reprehenderit amet. Voluptatibus, dolore? Aperiam sunt dignissimos
vero unde earum.
</p>
<form class="p-5">
<div class="input-group mb-3">
<input type="email" class="form-control" placeholder="E-mail"
aria-label="Recipient's username" aria-describedby="basic-addon2">
<button class="input-group-text btn btn-
primary">S'inscrire</button>
</div>
</form>
</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>
<script>var tooltipTriggerList =
[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})</script>
</body>
</html>
Page 4 sur 4

TP2 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

TP2 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°2 : Le Framework Bootstrap 5.

Vous devriez arriver à quelque chose ressemblant à ça :

Vous aimerez peut-être aussi