imageGestionnaire Neural v7.3.8
11. Picasa
13. Pictogrammes

12 - Éléments visuels (IU) Bootstrap

Par Django Blais, Analyste programmeur | mardi 7 novembre 2017

Bootstrap est un « cadriciel »! C’est-à-dire une librairie de styles et d’interface usager écrits en CSS pour tout type de pages HTML. Une interface usager ou IU est un élément de la page qui permet une interaction, physique ou visuelle, avec l’usager. Boutons, encart, carte, tableaux, entêtes, alerte, pastille, badge, liens, images...

Développé à l’origine par Twitter, il est aujourd’hui le plus rependu. Utiliser les codes suivant dans vos page vous assure une ergonomie des plus populaire mais aussi une portabilité qui va bien au delà de Neural. Voici une liste des éléments les plus susceptibles d’augmenter la valeur de vos pages Web. Vous pouvez copier-coller les exemples suivants directement dans vos pages Web. En fait, l’ensemble du cadriciel Bootstrap est disponible.

NOTE : Le résultat et les couleurs peuvent différer légèrement selon les sites Web.

Pour plus d’information sur les éléments visuels de l’interface usager (IU) Bootstrap, consultez le site officiel de Bootstrap (en anglais)

Couleurs Exemple
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
Code source
<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-warning text-white">.bg-warning</div>
<div class="bg-info text-white">.bg-info</div>
<div class="bg-light text-dark">.bg-light</div>
<div class="bg-dark text-white">.bg-dark</div>
<div class="bg-white text-dark">.bg-white</div>

Gros texte Exemple

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Code source
<p class="lead">
  ...
</p>

Commentaires Exemple
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Source de Lorem ipsum
Code source
<blockquote>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  <footer class="blockquote-footer">Source de <cite title="Source Title">Lorem ipsum</cite></footer>
</blockquote>
<

Images Exemple
Exemple rond
Exemple encadré
Code source
<img src="...jpg" class="img-fluid rounded" alt="Exemple arrondi" />
<img src="...jpg" class="img-fluid img-thumbnail" alt="Exemple encadré" />

Tableaux Exemple
Liste des usagers
# Prénom Nom Identifiant -
1 Mark Otto @mdo -
2 Jacob Thornton @fat -
3 Larry the Bird @twitter -
...
...
...
...
...
...
...
Code source
<table class="table table-striped table-bordered table-hover table-sm">
  <caption>Liste des usagers</caption>
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Prénom</th>
      <th scope="col">Nom</th>
      <th scope="col">Identifiant</th>
      <th>-</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>-</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
      <td>-</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
      <td>-</td>
    </tr>
    <tr class="table-primary"><td colspan="5">...</td></tr>
    <tr class="table-secondary"><td colspan="5">...</td></tr>
    <tr class="table-success"><td colspan="5">...</td></tr>
    <tr class="table-danger"><td colspan="5">...</td></tr>
    <tr class="table-warning"><td colspan="5">...</td></tr>
    <tr class="table-info"><td colspan="5">...</td></tr>
    <tr class="table-light"><td colspan="5">...</td></tr>
  </tbody>
</table>

Alertes Exemple
Code source
<div class="alert alert-primary" role="alert">
  ...<a href="#" class="alert-link">un exemple de lien</a>...
</div>

<div class="alert alert-secondary" role="alert">
  ...<a href="#" class="alert-link">un exemple de lien</a>...
</div>

<div class="alert alert-success" role="alert">
  ...<a href="#" class="alert-link">un exemple de lien</a>...
</div>

<div class="alert alert-danger" role="alert">
  ...<a href="#" class="alert-link">un exemple de lien</a>...
</div>

<div class="alert alert-warning" role="alert">
  ...<a href="#" class="alert-link">un exemple de lien</a>...
</div>

<div class="alert alert-info" role="alert">
  ...<a href="#" class="alert-link">un exemple de lien</a>...
</div>

<div class="alert alert-light" role="alert">
  ...<a href="#" class="alert-link">un exemple de lien</a>...
</div>

<div class="alert alert-dark" role="alert">
  ...<a href="#" class="alert-link">un exemple de lien</a>...
</div>

Autres alertes Exemple
Code source
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Réussi !</h4>
  <p>...</p>
  <hr>
  <p class="mb-0">...</p>
</div>

Avec bouton « fermer » Exemple
Code source
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Attention</strong> ...
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

Notification Exemple
Code source
<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

<button type="button" class="btn btn-primary">
  <span class="badge badge-light">9</span>
  <span class="sr-only">Messages</span>
</button>

Badges Exemple
Primaire Secondaire Succès Danger Attention Information Claire Foncé
Code source
<span class="badge badge-primary">Primaire</span>
<span class="badge badge-secondary">Secondaire</span>
<span class="badge badge-success">Succès</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Attention</span>
<span class="badge badge-info">Information</span>
<span class="badge badge-light">Claire</span>
<span class="badge badge-dark">Foncé</span>

Pastilles Exemple
Primaire Secondaire Succès Danger Attention Information Claire Foncé
Code source
<span class="badge badge-pill badge-primary">Primaire</span>
<span class="badge badge-pill badge-secondary">Secondaire</span>
<span class="badge badge-pill badge-success">Succès</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Attention</span>
<span class="badge badge-pill badge-info">Information</span>
<span class="badge badge-pill badge-light">Claire</span>
<span class="badge badge-pill badge-dark">Foncé</span>

Hyperliens Exemple
Primaire Secondaire Succès Danger Attention Information Claire Foncé
Code source
<a href="#" class="badge badge-primary">Primaire</a>
<a href="#" class="badge badge-secondary">Secondaire</a>
<a href="#" class="badge badge-success">Succès</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Attention</a>
<a href="#" class="badge badge-info">Information</a>
<a href="#" class="badge badge-light">Claire</a>
<a href="#" class="badge badge-dark">Foncé</a>

Boutons Exemple
Code source
<button type="button" class="btn btn-primary">Primaire</button>
<button type="button" class="btn btn-secondary">Secondaire</button>
<button type="button" class="btn btn-success">Succès</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Attention</button>
<button type="button" class="btn btn-info">Information</button>
<button type="button" class="btn btn-light">Claire</button>
<button type="button" class="btn btn-dark">Foncé</button>
<button type="button" class="btn btn-link">Lien</button>

Boutons contours Exemple
Code source
<button type="button" class="btn btn-outline-primary">Primaire</button>
<button type="button" class="btn btn-outline-secondary">Secondaire</button>
<button type="button" class="btn btn-outline-success">Succès</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Attention</button>
<button type="button" class="btn btn-outline-info">Information</button>
<button type="button" class="btn btn-outline-light">Claire</button>
<button type="button" class="btn btn-outline-dark">Foncé</button>

Boutons grosseur Exemple




Code source
<button type="button" class="btn btn-primary btn-lg">Gros bouton</button>
<button type="button" class="btn btn-secondary btn-lg">Gros bouton</button>

<button type="button" class="btn btn-primary btn-sm">Petit bouton</button>
<button type="button" class="btn btn-secondary btn-sm">Petit bouton</button>

<button type="button" class="btn btn-primary btn-lg btn-block">Bouton 100%</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Bouton 100%</button>

Carte Exemple
Image

Titre de la carte

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Cliquer
Code source
<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." alt="Image">
  <div class="card-body">
    <h4 class="card-title">...</h4>
    <p class="card-text">...</p>
    <a href="#" class="btn btn-primary">Cliquer</a>
  </div>
</div>

Carte avec liens Exemple
Code source
<div class="card">
  <div class="card-header">
    Services
  </div>
  <div class="list-group">
    <a href="..." class="list-group-item"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Accueil</a>
    <a href="..." class="list-group-item"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Librairie</a>
    <a href="..." class="list-group-item"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Édition</a>
  </div>
</div>

Carte avec fond coloré Exemple
Entête

Titre (primaire)

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Entête

Titre (secondaire)

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Entête

Titre (succès)

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Entête

Titre (danger)

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Entête

Titre (attention)

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Entête

Titre (information)

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Entête

Titre (claire)

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Entête

Titre (foncé)

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Code source
<div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
  <div class="card-header">...</div>
  <div class="card-body">
    <h4 class="card-title">...</h4>
    <p class="card-text">...</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
  <div class="card-header">...</div>
  <div class="card-body">
    <h4 class="card-title">...</h4>
    <p class="card-text">...</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 20rem;">
  <div class="card-header">...</div>
  <div class="card-body">
    <h4 class="card-title">...</h4>
    <p class="card-text">...</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 20rem;">
  <div class="card-header">...</div>
  <div class="card-body">
    <h4 class="card-title">...</h4>
    <p class="card-text">...</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 20rem;">
  <div class="card-header">...</div>
  <div class="card-body">
    <h4 class="card-title">...</h4>
    <p class="card-text">...</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 20rem;">
  <div class="card-header">...</div>
  <div class="card-body">
    <h4 class="card-title">...</h4>
    <p class="card-text">...</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 20rem;">
  <div class="card-header">...</div>
  <div class="card-body">
    <h4 class="card-title">...</h4>
    <p class="card-text">...</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 20rem;">
  <div class="card-header">...</div>
  <div class="card-body">
    <h4 class="card-title">...</h4>
    <p class="card-text">...</p>
  </div>
</div>

Carte : texte sur image Exemple
Image

Titre de la carte

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Mise à jour il y a 3 jours

Code source
<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Image">
  <div class="card-img-overlay">
    <h3 class="card-title">..</h3>
    <p class="lead card-text">...</p>
    <p class="card-text">...</p>
  </div>
</div>

Info-bulle Exemple
Exemple d’info-bulle
Code source
<a href="#" class="btn btn-secondary" data-toggle="tooltip" title="Exemple d’info-bulle">
  Exemple d’info-bulle
</a>

Grille Exemple

L’exemple suivant a deux colonnes par défaut. On a le même résultat en ajoutant « 6 » au bout de la classe : col-6. Voir le prochain exemple pour plus de détail.

Première de deux colonnes col
Deuxième de deux colonnes col
Première de deux colonnes col-6
Deuxième de deux colonnes col-6
Code source
<div class="row">
  <div class="col">
    Première de deux colonnes
  </div>
  <div class="col">
    Deuxième de deux colonnes
  </div>
</div>

Comme la classe col-6

<div class="row">
  <div class="col-6">
    Première de deux colonnes
  </div>
  <div class="col-6">
    Deuxième de deux colonnes
  </div>
</div>

Le système de grille (grid) de Bootstrap est l’une de ces fonctionnalités les plus puissantes, mais en même temps des plus complexe. Pour plus de détail, consultez la section « Grid system ».


Grille avec nombre de colonnes Exemple

Le cadriciel Bootstrap base son système de grille sur 12 colonnes! Les 12 classes de col-1, la plus petite des 12 colonnes, à la classe col-12 pour forcer la largeur maximum de la grille. Ce qui fausse un peu la lecture. Par exemple la classe nécessaire pour 3 colonnes s’écrit col-4 (1/3) alors que la classe pour 4 colonnes col-3 (1/4)!

1 col-3Première de quatre colonnes col-3
2 col-3Deuxième de trois colonnes col-3
3 col-3Troisième de quatre colonnes col-3
4 col-3Quatrième de quatre colonnes col-3
Code source
<div class="row">
  <div class="col-3">
    Première colonne
  </div>
  <div class="col-3">
    Deuxième colonne
  </div>
  <div class="col-3">
    Troisième colonne
  </div>
  <div class="col-3">
    Quatrième colonne
  </div>
</div>

Grille adaptativeExemple
1 Mobile col-sm
2 Mobile col-sm
3 Mobile col-sm
1 Tablette col-md-4
2 Tablette col-md-4
3 Tablette col-md-4
1 Portable col-lg-6
2 Portable col-lg-6
Code source
<div class="row">
  <div class="col-sm">
    Première de trois colonnes
  </div>
  <div class="col-sm">
    Deuxième de trois colonnes
  </div>
  <div class="col-sm">
    Troisième de trois colonnes
  </div>
</div>

ou

<div class="row">
  <div class="col-md-4">
    Première de trois colonnes
  </div>
  <div class="col-md-4">
    Deuxième de trois colonnes
  </div>
  <div class="col-md-4">
    Troisième de trois colonnes
  </div>
</div>

ou

<div class="row">
  <div class="col-lg-6">
    Première de deux colonnes
  </div>
  <div class="col-lg-6">
    Deuxième de deux colonnes
  </div>
</div>

L’aspect ou le caractère adaptatif permet d’optimiser l’affichage sur les tablettes et mobiles en positionnant chaque cellule une en dessous des autres. Dans l’exemple précédent, le « sm » indique « small » pour le mobile. Il y a aussi col-md (médium ou tablette) col-lg (large portable) col-xl (extra-large bureau). Le nombre de colonnes par ligne peut aussi être spécifié en ajoutant le numéro de la colonne : col-sm-6 par exemple. Pour plus de détail, consultez la section « Grid system ».



Dernière mise à jour