Correction TP5 Bootstrap Ex02

Correction TP5 Bootstrap Ex02

  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>



Abonnez vous à notre chaîne YouTube gratuitement