Correction TP5 Bootstrap Ex02
Correction TP5 Bootstrap Ex02
-
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>
<head>
<meta charset="utf-8" >
<title>Mon Site avec Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-md-7">
<h1>
<span class="fa fa-user text-primary"></span>
<a href="index.html">Monnom Monprenom</a>
<br>
<small>Formation / Certification / Digital</small>
</h1>
</div>
<div class="col-md-3 bordureVerte">
<a href="fichier/cv.pdf">Telecharger mon CV</a><br>
<a href="">Partagez</a>
</div>
</div>
<div class="row">
<div class="col-md-10 mb-4" >
<ul class="nav nav-tabs nav-justified" >
<li><a href="index.html nav-justified">
<li class="nav-item"><a class="nav-link" href="index.html">Accueil</a></li>
<li class="nav-item"> <a class="nav-link" href="moncv.html">Mon CV</a></li>
<li class="nav-item"> <a class="nav-link" href="mesprojets.html">Mes Projets</a></li>
<li class="nav-item"> <a class="nav-link" href="contact.php">Contact</a></li>
</ul>
</div>
</div>
</header>
<section>
<div class="container fluid">
<div class="row">
<div class="col-md-7 ">
<div class="card border-primary mb-4">
<div class="card-header alert alert-info text-primary bottom-primary"><h2>Présentation</h2></div>
<div class="card-body">
<div class="media">
<img class="mr-3" src="lion.jpg">
<div class="media-body">
<p>Vous etes a la recherche d'une personne competente et efficace pour gerer vos projets web ?
</p>
</div>
</div>
<div class="col-md-12">
<hr border-primary>
<p>Actuellement, je suis ..., je fais ... actuellement, je suis ..., je fais ... actuellement, je suis ..., je fais ... actuellement, je suis
..., je fais ...</p>
<ul class="list-unstyled">
<li>Redaction cahier des charges</li>
<li>elaboration de votre design & Integration precise</li>
<li>Administration sur CMS : WordPress & Drupal</li>
<li>Reflexion strategique, statistiques, referencement</li>
</ul>
<img class="img-responsive center-block" src="lion.jpg" >
</p>
</div>
</div>
</div>
<div class="card border-primary mb-4">
<div class="card-header alert alert-info text-primary bottom-primary"><h2>Actualités</h2></div>
<div class="card-body">
?
Résultat
<p>
<em>
16/07/2020 : Formation en ligne.<br>
17/08/2020 : Actualite 3 <br>
03/12/2020 : Actualite 2<br>
02/07/2020 : Actualite 1<br>
</em>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card border-primary mb-4">
<div class="card-header alert alert-info text-primary bottom-primary mb-4"><h2>Qui suis-je ?</h2></div>
<div class="card-body">
<p>
Description en quelques lignes ... <br>
Description en quelques lignes ... <br>
Description en quelques lignes ... <br>
</p>
</div>
</div>
<div class="card border-primary mb-4">
<div class="card-header alert alert-info text-primary bottom-primary mb-4"><h2>Expérience</h2></div>
<div class="card-body">
<p>
<ul>
<li>Experience 1 ... </li>
<li>Experience 2 ... </li>
<li>Experience 3 ... </li>
</ul>
</p>
</div>
</div>
<div class="card border-primary mb-4">
<div class="card-header alert alert-info text-primary bottom-primary mb-4"><h2>Contact</h2></div>
<div class="card-body">
<p>
Contact ... <br>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container"> <!-- #container : centre -->
<div class="row"><!-- ligne -->
<div class="col-md-10"> <!-- je prends 10 places -->
<hr>
<a href="">Informations</a> -
<a href="">Mentions Legales</a> -
<a href="contact.php">Contact</a>
<br>
<p>© 2020 Conception et réalisation par Nom Prénom. Tous droits reservés.</p>
</div>
</div>
</div>
</footer>
</body>
<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>
</html>