Dans cette séance de TP on va apprendre comment régler le margin et le padding des boîtes avec les classes de Bootstrap.
Avant de commencer, créez un répertoire nommé m3206-tp4 contenant les répertoires exo1, exo2 et exo3. Chacun de ces répertoires contient votre travail sur l'exercice correspondant. Le fichier HTML de chaque exercice doit s'appeler index.html.
À la fin de la séance, vous devez compresser et soumettre le répertoire m3206-tp4 sur AMeTICE.
Présenter un contenu sur un petit dispositif n'est pas une excuse pour enlever tous les espaces. Bien au contraire, il est préférable d'utiliser des espaces pour mettre en évidence l'importance des différents éléments. Un exemple facile : on sépare un texte en paragraphes pour marquer des idées différentes. Voici plein d'articles sur ceci : [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Bootstrap propose plusieurs classes pour régler le margin (espace extérieur entre le bord d'une boîte et et les autres boîtes) et le padding (espace intérieur entre le bord d'une boîte et son contenu).
Pour le margin, on a les classes .m-0, .m-1 (par défaut), ..., .m-5 et .m-auto pour avoir des margins de plus en plus grands.
Chercher dans le code source de Bootstrap les classes .m-0, ..., .m-5. Faire une page web qui explique en français les règles CSS de ces six classes, notamment les termes !important et rem.
On peut aussi régler le margin de chaque coté séparément avec les classes suivantes :
.mt-* |
margin supérieur (margin-top) |
.mb-* |
margin inferieur (margin-bottom) |
.ml-* |
margin gauche (margin-left) |
.mr-* |
margin droite (margin-right) |
.mx-* |
margins horizontaux (margin-left et margin-right) |
.my-* |
margins verticaux (margin-top et margin-bottom) |
En plus, toutes ces classes ont des versions responsives : .m-sm-0, .mt-md-1, .mb-lg-2, .ml-xl-3, etc.
Donc il y a 7*7*5 = 245 classes différentes pour régler le margin.
Pour le padding, c'est pareil mais avec "p" à la place de "m" : .p-0, .pt-sm-1, .pb-md-2, .pl-lg-3, .pr-xl-4, etc.
Jusqu'à présent vous n'avez utilisé Bootstrap que pour faire des exemples. Maintenant vous allez faire une vraie mise en page avec du contenu.
Pour cela, vous allez concevoir une nouvelle mise en page pour les articles de la Wikipédia. Vous devrez récupérer le code source d'une page donnée, et le modifier pour utiliser votre mise en page.
Astuce #1 Très souvent, vous trouvez du code (HTML, PHP...) qui n'est pas indenté, donc il est difficile à comprendre. Pour bien indenter un code HTML, utilisez le site FreeFormater.com.
Astuce #2 Pour enlever tous les attributs class d'un document HTML, on aimerait rechercher les chaînes de caractères qui commencent par class=" et qui finissent par ". Pour ce faire, il faut faire une recherche avec des expressions régulières (regexes). L'expression régulière pour la requête précédente est class="(.*?)".
Prenez l'article sur TrackMania Turbo. Faites un document HTML qui présente le contenu de l'article (tout ce qui est dans le div #content). Utilisez sagement les classes p* et m*.
Continuez l'exercice 2 en rajoutant l'en-tête, la barre latérale et le pied-de-page pour faire une page complète.