Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
Bootstrap

Correction TP5 Bootstrap Ex02

Un cours complet pour maîtriser Correction TP5 Bootstrap Ex02.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Sommaire du cours
historique de bootstrap
Présentation de bootstrap
Installation de Bootstrap
La Syntaxe de base de Bootstrap
Les bases de Bootstrap et template de démarrage
Le système de grille Bootstrap
La grille de Bootstrap en pratique
Exercices positionnement sur Grille Bootstrap
Alignement avec Bootstrap
TP la grille Bootstrap
Les classes pull et push
Typographie de Bootstrap
Les tableaux dans Bootstrap
Menus de navigation (Navbar)
Les barres d'outils standard Bootstrap
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

  1. Objectifs

    • Etre capable de mettre les carrousels dans les grilles en Bootstrap 4

  2. Exercice 02

    1. Énoncé
    2. Solution
      <!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>&copy; 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>