Éditeur HTML Bootstrap

Démonstration

La section

Défi 1.1 : Modifier légèrement certains contenus et ajouter 3 cartes

• À partir de la vitrine, importez le gabarit « 3 cards » et insérez un exemplaire dans votre page
• Modifiez les images des 2 premières cartes et remplacez la 2e par un clip vidéo
• Retirez les « Padding responsive » de la « Section », du « container » et de la « Row » (Utilisez l'arborescence pour faciliter la sélection)
• Dupliquez la « Col » qui contient la carte à 3 reprises afin d'obtenir 6 cartes
• Ajoutez une image à titre de fond de « Container »
• Ajoutez un « Padding » de 5 au bas du « Container » du bas (celui qui héberge les 3 dernières cartes)

Lors de la sélection de la section, la classe « Section » est affichée dans la barre flottante.

Au moment de la sélection, le panneau « De base » s'affiche et vous permet de personnaliser la section.

Les « paddings » sont « responsive » : Les espacements s'adaptent à la largeur des écrans.

Résultat attendu

Les colonnes

Défi 1.2 : Ne conserver que 2 cartes et faire en sorte qu'elles occupent tout l'espace en largeur

• Supprimez 4 « Col » pour ne conserver que 2 cartes
• Supprimez la classe Bootstrap « col-md-4 » et ajoutez la classe « col-md-6 » pour chacune des 2 « Col » restantes

Le gabarit « 3 Cards » possède 3 colonnes. On constate que celles-ci se réorganisent sur les petits écrans.

L'analyse des classes révèle la largeur de la colonne sur les écrans de taille supérieure à MD.

Rappel : La grille Boostrap est constituée de 12 espaces en largeur.

Vous pouvez remplacer la classe col-md-4 par col-md-6 afin qu'elle occupe la moitié de la largeur de l'écran.

Résultat attendu

La barre de titre

Défi 1.3 : Modifier la couleur, l'icône et le style/dimension des éléments du titre

• Modifiez la couleur d'arrière-plan du « Container » contenant le texte afin de le rendre gris
• À l'aide de l'arborescence, localisez le contenant qui attribue la couleur de texte blanc et retirez cette sélection afin de retrouver la couleur par défaut (noir)
• Remplacez l'icône de la loupe par une autre de votre choix
• Modifiez la taille de l'icône afin qu'elle soit beaucoup plus grande. Pour cela, utilisez le champ taille de police dans les styles HTML5 (plutôt que les classes Bootstrap).

Le gabarit « 3 Cards » possède une barre de titre.

L'analyse des classes révèle la classe bg-primary en lien avec le choix de couleur d'arrière-plan. On remarque également des espacements pour les écrans SM, MD et LG.

Une fois sélectionnée, l'icône peut être remplacée à partir du panneau « De base ».

Résultat attendu

Les composants

Défi 1.4 : Ajouter 2 cartes avatar sous les 2 cartes actuelles et y inclure des liens vers une activité de votre cours

• Dupliquez une « Col » de carte
• Supprimez la carte à l'intérieur de cette nouvelle « Col »
• Insérez une carte avatar dans cette « Col » vide
• Modifiez la photo, le titre et le texte du paragraphe existant
• Ajoutez un paragraphe au bas de ce même paragraphe puis centrez le texte
• Dupliquez la « Col » qui contient votre nouvelle carte
• Enregistrez votre création
• Sélectionnez le mot « Paragraphe » à partir de l'éditeur Atto
• Avec Autolink, créez un lien qui pointera vers une activité de votre cours sous la forme d'un bouton 

Le gabarit « 3 Cards » possède une carte et on souhaite remplacer la carte existante par une carte Avatar.

• À l'aide du panneau « Arborescence », on localise à carte existante à supprimer
• On accède au panneau « Composants » afin de glisser-déposer la carte Avatar à l'intérieur de la colonne

Résultat attendu

La validation

• Prévisualiser le rendu (aperçu) pour les différents types d'écrans (icônes à la gauche du bouton Enregistrer)

Prenez un moment pour activer l'aperçu.

• Vous remarquerez que le mode d'affichage « Canevas » altère l'affichage des marges étant donné la présence des lignes pointillées
• Activez les différents types d'écrans afin de valider vos marges et l'affichage des éléments de votre page