M3206 — TD #2

Intégration multimédia S3

Premiers composants

Un composant est une fonctionnalité déjà implantée en CSS et JavaScript, prête à être utilisée.

Bouton

See the Pen Untitled by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

  • Utilisés dans les formulaires et certains liens
  • Deux classes : btn et btn-* (pour le style)
  • Plusieurs mots-clé pour les couleurs : primary, secondary, success, warning, etc

Badge

See the Pen Badges by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

  • Utilisés pour des étiquettes (tags)
  • Élément span avec une classe badge et un classe bg-* pour la couleur du fond
  • Mêmes mots-clé pour les couleurs : primary, secondary, success, warning, etc

Pagination

See the Pen Pagination by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

  • Barre de navigation entre plusieurs pages
  • Classe active pour la page courante
  • Classe disabled pour les liens désactivés

Exercice 1

Pagination : énoncé

Card

See the Pen Toasters by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

  • Présentation d'un contenu dans un bloc
  • Décomposition possible en entête, corps et pied de page
  • Plusieurs classes card-* disponibles

Tooltip

See the Pen Tooltip by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

  • Message affiché au survol
  • Besoin de l'activer avec du code JavaScript
  • Utilisable dans n'importe quel élément HTML en ajoutant des attributs

Popover

See the Pen Popover by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

  • Message affiché quand on clique sur un bouton
  • Besoin de l'activer avec du code JavaScript
  • Très semblable au tooltip

Exercice 2

Popover : énoncé

Bref
  • Structure plus rigide que la mise en page responsive
  • Copier-coller-adapter

Composants avancés

Dropdown

See the Pen Dropdown by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

  • Utilisé dans un menu pour choisir une option
  • Structure plus complexe avec plusieurs éléments, attributs et classes

Barre de navigation

See the Pen Navbar by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

  • Barre de navigation ou menu en haut de la page, caché sur un petit écran
  • Structure encore plus complexe avec plusieurs parties : bouton, partie cachée, liste de liens, etc.
  • navbar-expand-sm : barre visible à partir du point de rupture sm
  • Style : navbar-light/navbar-dark pour clair/sombre ; bg-* pour la couleur du fond
  • Correspondance bouton hamburger↔partie cachée avec les attributs data-bs-target du bouton et id de la partie cachée

Exercice 3

Navbar : énoncé

Accordéon

See the Pen Accordion by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

  • Structure basée sur un conteneur et plusieurs sections
  • Deux types de correspondance : conteneur↔section et entête↔corps pour chaque section avec des attributs id et data-bs-*
  • Première section visible avec les classes show et collapsed
  • Une seule section ouverte à la fois, supprimer le lien conteneur↔section sinon

Carousel

See the Pen Carousel by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

  • Les images doivent avoir les mêmes dimensions
  • Structure avec boutons et liste d'items (images)
  • Correspondance conteneur↔boutons avec des attributs id et data-bs-target

Exercice 4

Carousel : énoncé

Modal

See the Pen Modal by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

  • Boîte de dialogue ouverte avec un bouton
  • Décomposition possible en entête, corps et pied de page
  • Correspondance bouton↔modal avec les attributs id et data-bs-target

Exercice 5

Modal : énoncé

Offcanvas

See the Pen Offcanvas by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

  • Barre latérale activée avec un bouton
  • Décomposition possible en entête et corps
  • Correspondance bouton↔offcanvas avec les attributs id et data-bs-target
  • Fonctionnement similaire au card
Bref
  • Composant : bout de code HTML tout prêt
  • Certains composants doivent être activés avec du code JavaScript
  • Certains composants se ressemblent beaucoup

Formulaires

Input

See the Pen Input by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Select

See the Pen Select by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Checkbox et boutons radio

See the Pen Checkbox et radio by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Combinaisons

See the Pen Combinaisons by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Mise en page

See the Pen Formulaires avec grille by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Exercice 6

Formulaire avec collapse : énoncé

Autres outils

Display

See the Pen Untitled by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Fixed

See the Pen Fixed by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.