Bootstrap 2/3¶

Image¶

La classe CSS .img-fluid est utilisée pour rendre les images réactives (responsive). Cette classe applique les styles nécessaires pour que l’image s’adapte automatiquement à la largeur de son conteneur, tout en conservant son ratio original.

Utilisation

<img src="image.jpg" alt="Texte alternatif" class="img-fluid">

Icônes¶

Bootstrap¶

https://icons.getbootstrap.com/

Installation¶

Ajouter cette ligne dans le <head> de votre HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Utilisation¶

<!-- Le préfix des classes est `bi-` pour « Bootstrap Icon » -->
<i class="bi bi-person-wheelchair"></i>

IcoMoon ¶

https://icomoon.io/app/

Installation icomoon¶

Placez le dossier de votre police icomoon dans le répertoire assets/fonts/
Ajouter cette ligne dans le <head> de votre HTML : <link rel="stylesheet" href="assets/fonts/icomoon-v01/style.css">

Utilisation icomoon¶

<i class="icomoon-heart"></i>

Carte¶

https://getbootstrap.com/docs/5.3/components/card

<div class="card">

  <img src="https://picsum.photos/800/450" class="card-img-top" alt="">

  <div class="card-body">

    <h5 class="card-title">Image à vendre</h5>
    <p class="card-text">Nulla vitae elit libero...</p>
    <a href="#" class="btn btn-primary">Acheter</a>

  </div>

</div>

Bouton¶

https://getbootstrap.com/docs/5.3/components/buttons/

Petit rappel au sujet des couleurs disponibles

https://getbootstrap.com/docs/5.3/customize/color/#colors

Dimensions

<button class="btn btn-primary btn-sm">Petit</button>
<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary btn-lg">Large</button>

Style outline

<button class="btn btn-outline-primary">Normal</button>

État désactivé

<button class="btn btn-primary" disabled>Bouton</button>

Les classes s'appliquent également aux liens!

<a href="#" class="btn btn-primary btn-sm">Petit</a>
<a href="#" class="btn btn-primary">Normal</a>
<a href="#" class="btn btn-primary btn-lg">Large</a>

Display¶

https://getbootstrap.com/docs/5.3/utilities/display

Les classes CSS de type display sont construites de la façon suivante : d-{affichage} et d-{breakpoint}-{affichage}

Les différents affichages disponibles :

none
inline
inline-block
block
grid
inline-grid
table
table-cell
table-row
flex
inline-flex

On utilise souvent ces classes afin de déterminer ce qui doit être affiché sur certains breakpoints.

Taille d'écran	Classe
Caché sur tous	`.d-none`
Caché uniquement sur xs	`.d-none` `.d-sm-block`
Caché uniquement sur sm	`.d-sm-none` `.d-md-block`
Caché uniquement sur md	`.d-md-none` `.d-lg-block`
Caché uniquement sur lg	`.d-lg-none` `.d-xl-block`
Caché uniquement sur xl	`.d-xl-none` `.d-xxl-block`
Caché uniquement sur xxl	`.d-xxl-none`
Visible partout	`.d-block`
Visible uniquement sur xs	`.d-block` `.d-sm-none`
Visible uniquement sur sm	`.d-none` `.d-sm-block` `.d-md-none`
Visible uniquement sur md	`.d-none` `.d-md-block` `.d-lg-none`
Visible uniquement sur lg	`.d-none` `.d-lg-block` `.d-xl-none`
Visible uniquement sur xl	`.d-none` `.d-xl-block` `.d-xxl-none`
Visible uniquement sur xxl	`.d-none` `.d-xxl-block`

Display Flex¶

https://getbootstrap.com/docs/5.3/utilities/flex/

Justification¶

Quelques classes en particulier

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

Alignement¶

Quelques classes en particulier

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

Formulaire¶

https://getbootstrap.com/docs/5.3/forms/overview/

<form>
  <div class="mb-3">
    <label for="email-field" class="form-label">Courriel</label>
    <input type="email" class="form-control" id="email-field" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">Entrez votre courriel pour que nous puissions le vendre, à votre insu bien sûr, à tous nos partenaires.</div>
  </div>
  <button type="submit" class="btn btn-primary">Soumettre</button>
</form>

Prochain cours¶

On fait un peu de JavaScript.

Pour ceux et celles qui auraient besoin de se pratiquer en JavaScript, veuillez faire ces exercices à la maison : https://www.w3schools.com/js/exercise_js.asp?filename=exercise_js_variables1

Un aide-mémoire est également disponible sur mon GitHub : https://github.com/jfcmontmorency/aide-memoire

Finalement, réviser au besoin la portion JavaScript du cours 1

Exercices¶

Exercice - Bootstrap
Le petit prince

Exercice - Bootstrap
Cartes philosophiques

Exercice - Bootstrap
L’enfant roi

Exercice - Bootstrap
Donkey Kong