Correction TP5 Bootstrap Ex01
Correction TP5 Bootstrap Ex01
-
Objectifs
- Etre capable de mettre les carrousels dans les grilles en Bootstrap 4
-
Exercice 02
-
Énoncé
-
Solution
-
Vous pouvez visualiser l’énoncé de l’exercice
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
h2,h3 {text-align: center;}
p{text-align: center;}
.card {border: none;}
</style>
</head>
<body>
<div class="container">
<div class="container">
<div class="jumbotron ">
<h2 >
Bienvenue sur notre site!
</h2>
<h3>
Regardons ce bouton! Wow, cliquons dessus
</h3>
<p>
<a class="btn btn-primary btn-block " href="https://lorempixel.com">Apprendre encore plus</a>
</p>
</div>
</div>
<hr>
<div class="container">
<h5>Regardons quelques images aleatoire!<small>depuis<a href="https://lorempixel.com">https://lorempixel.com</a></small></h5>
<div class="card-group mb-5">
<div class="card">
<div class="card-body">
<p class="card-text">La technologie est l'étude des outils et des techniques. Le terme désigne tout ce qui peut être dit aux diverses périodes historiques sur l'état de l'art en matière d'outils et de savoir-faire. Il inclut l'art, l'artisanat, les métiers, les sciences appliquées et éventuellement les connaissances.
Par extension et abusivement</p>
<img class="card-img-top" src="tech.jpg" alt="Card image cap">
</div>
</div>
<div class="card">
<div class="card-body">
<p class="card-text">Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization.</p>
<img class="card-img-top" src="tech (1).jpg" alt="Card image cap">
</div>
</div>
<div class="card">
<div class="card-body">
<p class="card-text">Smartphones are a class of mobile phones and of multi-purpose mobile computing devices. They are distinguished from feature phones by their stronger hardware capabilities and extensive mobile operating systems, which facilitate wider software, internet (including web browsing[1] over mobile broadband),</p>
<img class="card-img-top" src="tech (2).jpg" alt="Card image cap">
</div>
</div>
</div>
</div>
<div class="text-center alert alert-success">
Merci pour votre visite
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>