Exercice - Grille - 02
Voici une série d'exercices pour apprendre à utiliser les grilles Bootstrap.
-
4ttr
- niveau
Voici une série d'exercices pour apprendre à utiliser les grilles Bootstrap.
Crée un nouveau dossier appelé "ex_bootstrap_grilles_02_[prénom]". Dans ce dossier tu pourras créer un fichier HTML par exercice.
Quand tu as terminé, envoie le dossier sur https://fichiers.ttrinfo.be en faisant un drag & drop (envoie tout le dossier, y compris les éventuels fichiers CSS et autres images).
Dans tous ces exercices il faut ajouter une bordure et un contenu aux colonnes. Pour les bordures, utilisez la règle CSS suivante :
[class*="col"] {
background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);
}Cette règle ajoute une bordure et une couleur de fond à chaque colonne, c'est-à-dire, à chaque élément HTML avec une classe qui commence par "col".
Pour le contenu, ajoutez au moins deux lignes de texte (lorem20).
Tu dois utiliser Bootstrap. Tu peux soit télécharger Bootstrap sur ton ordinateur soit utiliser une version en ligne (utilise le lien fourni sur la page d'accueil de Bootstrap)
Dans cet exercice, tu vas apprendre à analyser une page web et à la "découper" en .rows et en .cols. Autrement dit, tu vas pouvoir tracer et visualiser une (ou plusieurs) grille(s) Bootstrap dans des pages existantes.
Télécharge le fichier bootstrap-sites-12col-grid.pptx (section 'téléchargements'), et renomme-le en ajoutant ton prénom à la fin.
Le dernier slide contient différents exemplaires de grilles de 12 colonnes que tu pourras copier-coler dans les autres slides.
💡 Je vois des grilles partout Tous les sites Web ne sont pas basés sur Bootstrap et sur une grille de 12 colonnes. Certains n'utilisent même pas de grille du tout.
Dans les exemples du PowerPoint, si un contenu ne semble pas s'aligner avec la grille, cela signifie qu'on se trouve face à une grille imbriquée (une grille dans une colonne).
Regarde la démo en classe.
Nom de fichier: 01_grille_statique.html
Concevez et écrivez le code HTML pour faire une mise en page avec 5 lignes :
Il y a 2 façons de faire cet exercice. Utilise d'abord celle qui te semble la plus naturelle pour toi. Refais ensuite cet exercice en utilisant l'autre approche, en ajoutant ton code à la suite de l'autre.
Essaie maintenant d'ajouter des lignes avec 5, 7 et 9 colonnes. Dans ce cas, il n'y qu'une seule solution possible. Pourquoi?
Nom de fichier: 02_grille_statique.html
Concevez et écrivez le code HTML pour faire une mise en page avec 5 lignes :
Chaque ligne doit être complète.
Nom de fichier: 03_grille_statique.html
Écrivez le code HTML pour faire la mise en page suivante :
Les lignes verticales noires sont pour vous aider à identifier la largeur de chaque colonne.
Maintenant vous devez faire des mises en page responsives, qui s'adaptent à la largeur de l'écran. Utilisez toujours le nombre minimum nécessaire de classes dans chaque élément HTML.
Rappelez-vous que chaque classe responsive (p. ex., col-sm-7) applique ses règles CSS à partir de son point de rupture, et elles restent jusqu'au point de rupture de la classe suivante (si elle existe). Il est donc inutile d'utiliser deux classes avec des points de rupture consécutifs similaires (avec la même largeur) sur le même <div>. Pour une meilleure lisibilité, triez les classes dans le même élément par points de rupture croissants.
Nom de fichier: 04_grille_responsive.html
Comme il est rappelé ci-dessus, les définitions *-lg, *-xs,... s'appliquent à partir d'un certain 'point de rupture' (🇬🇧 breakpoint) et ce, jusqu'au prochain breakpoint utilisé dans l'élément.
Supprimez les classes redondantes dans ce code HTML :
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
Ami lecteur, tu vas prendre ta guitare et faire entendre ta jolie voix, mêle son ténor au soprano de la jeune souveraine qui venait de se passer. Entraînés par cet exemple, mais ne m'en coûte de se faire recevoir à la face rouge du gouverneur, vous ne seriez pas ici en lieu opportun pour faire des achats et des ventes.
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
Réponse : trois fils, et à les conduire dans des maisons isolées sur la lande. Confiez-moi donc ce grand secret ? Douleur, c'est le poisson pilote qui mène au sommet aboutit au dédale du portail ouest, et le sol séchés à l'air augmente la répulsion, et il les amusa beaucoup, et cela seul est parfait, dit-il enfin.
</div>
</div>
<div class="row">
<div class="col-sm-12 col-12 col-md-3 col-xl-3">
Mélange de meubles blancs au design épuré et de tentures déchirées, qui révélaient une lutte effroyable, gisait le corps du supplicié ; tandis que lui s'était enragé à l'idée. Fasse le ciel que les perfidies de sa dame, qu'il reconnaissait à la tête. Par-dessous mes hésitations, son amour de l'indépendance devenait de plus en tête ?
</div>
<div class="col-12 col-md-4 col-sm-12 col-lg-4">
Forcé de dépenser beaucoup pour me déterminer à t'arracher à mon genre de vie de son mari. Étaient-ils descendus dans le service des établissements publics et industriels, pour les imprimer ou les diffuser plus tard, défendre leurs enfants ; il n'allait plus du tout.
</div>
<div class="col-lg-5 col-12 col-md-5 col-sm-12">
Arrivé là, il eût pu faire, elle ne quitta plus la maison où je vais coucher par écrit. Rempli de la liqueur d'épice, un battement d'ailes derrière un gros rocher ; nous le voulons !
</div>
</div>
<div class="row">
<div class="col-xl-8 col-4 col-sm col-lg-8">
Allait-on l'empêcher de parler à tort et à travers, tant qu'ils ne puissent introduire ni dans la cour la plus intérieure que sont les hommes qui la gâtent.
</div>
<div class="col-8 col-sm col-xl-4 col-lg-4">
Tenez-moi au courant de mes intrigues avec l'étranger. Raconte-lui le mariage de son amant ne peuvent pas durer vingt mille ans ne m'apparut. Mettez-le dans une robe de lourde soie qui semblait taillée dans un mur de vapeur compacte.
</div>
</div>
</div>Nom de fichier: 05_grille_responsive.html
Reprenez le code HTML de l'exercice 2 pour faire une mise en page responsive. Si la largeur de l'écran est grande (supérieure à 992 pixels), la mise en page reste la même. Pour des écrans plus petits, la mise en page doit être ainsi :
Nom de fichier: 06_grille_responsive.html
Écrivez le code HTML pour faire la mise en page responsive suivante :
L'exercice suivant correspond à une situation plus réaliste, dans laquelle vous recevez une maquette faite par un web designer et vous devez l'implanter.
Nom de fichier: 07a_maquette_responsive_base.html
Nom de fichier: 07_maquette_responsive.html
Dans cet exercice tu vas faire une mise en page responsive à partir d'une maquette fonctionnelle (wireframe).
Fais bien attention à la structure de la mise en page, les tailles des boîtes et l'alignement horizontal des colonnes. Les étapes pour faire cet exercice sont :
Tu choisiras des images en fonction de la rangée dans laquelle tu es assis en classe:
Pour plus de facilités, utilise le filtre de recherche pour filtrer les images selon leur orientation (portrait, paysage ou carré).
Tu dois télécharger les images dans le dossier "images" (ne pas faire de liens vers le site Pexels).
Cliquez sur l'image pour la voir en grand.
Mêmes consignes que pour l'exercice précédent, en utilisant un autre modèle présenté ci-dessous.
Nom de fichier: 08_page_responsive.html
Tu devras utiliser une combinaison de .container et .container-fluid et probablement au moins 4 .row. Pour les images, utilise le même thème que celui qui t'a été assigné dans l'exercice précédent.
Fais attention au padding des éléments.
