Exercices

Projet conçu en tant que formateur pour héberger des exercices liés à l'apprentissage de la programmation

---

Project maintained by thomgo Hosted on GitHub Pages — Theme by mattgraham

Reproduire le positionnement d’un blog

Les schémas suivants représentent le positonnement de différents articles sur un blog. regardez la manière dont ils se transforment sur smartphones, tablettes et pc. Essayez de reproduire la même chose en utilisant le positionnement sur la grille de Bootstrap.

Vous devrez ajouter quelques lignes de CSS pour voir vos éléments HTML et leur mettre de la couleur. N’oubliez pas également d’utiliser les balises sémantiques.

A vous de jouer !

Smartphones

Tablettes

Desktop

Correction

        <div class="container-fluid">
          <div class="row">
            <!-- Aside -->
            <aside class="col-12 col-sm-4">
              <div class="row">
               <div class="col-4 col-sm-12">
                 <article>
                  <h2>1</h2>
                 </article>
               </div>
               <div class="col-4 col-sm-12">
                 <article>
                  <h2>2</h2>
                 </article>
               </div>
               <div class="col-4 col-sm-12">
                 <article>
                  <h2>3</h2>
                 </article>
               </div>
              </div>
            </aside>
            <!-- section -->
            <section class="col-12 col-sm-8">
              <div class="row">
              <div class="col-12 col-sm-8 offset-sm-2 offset-lg-0 col-lg-4">
                <article>
                 <h2>Voilà du texte</h2>
                </article>
              </div>
              <div class="col-12 col-sm-6 col-lg-4">
                <article>
                 <h2>Voilà du texte</h2>
                </article>
              </div>
              <div class="col-12 col-sm-6 col-lg-4">
                <article>
                 <h2>Voilà du texte</h2>
                </article>
              </div>
              </div>
            </section>

          </div>
        </div>