# Gabarit d'application IRSST

Version 2019

## Les composantes expliquées

Les principales fonctionnalités de Bootstrap fréquement utilisées à L'IRSST sont décrites ici. Les adaptions et le choix de la façon d'exploiter la fonctionalité y est indiquée. Toutes les composantes de Bootstrap sont disponibles dans la documentation complète.

### La barre de navigation

`.navbar-light, .bg-light et .btn-outline-success`

`.navbar-dark, .bg-dark et .btn-info`

`.navbar-dark, .bg-primary et .btn-info`

`.navbar-dark, .bg-secondary et .btn-primary`

`.navbar-dark` (couleur des éléments), `.bg-info` (couleur du background... Ça fonctionne avec les couleurs de base : primary, secondary, success, danger, warning, info...) et `.btn-outline-warning` Voir les boutons pour plus de détails

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

### La typographie

#### Headings

Tous les titres HTML, `<h1>` à `<h6>`, sont disponibles.

Lorsque vous souhaitez faire correspondre le style de police d'un titre mais que vous ne pouvez pas utiliser l'élément HTML associé à cause des préoccupation SEO et d'accessibilité, les classes `.h1` à `.h6` sont également disponibles,

Heading | Example
--- | ---
`<h1></h1> .h1` | h1. Bootstrap heading With faded secondary text
`<h2></h2> .h2` | h2. Bootstrap heading With faded secondary text
`<h3></h3> .h3` | h3. Bootstrap heading With faded secondary text
`<h4></h4> .h4` | h4. Bootstrap heading With faded secondary text
`<h5></h5> .h5` | h5. Bootstrap heading With faded secondary text
`<h6></h6> .h6` | h6. Bootstrap heading With faded secondary text

#### Mise en forme

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

`<mark>` `ou .mark` You can use the mark tag to highlight text.

`<del>` This line of text is meant to be treated as deleted text.

`<s>` This line of text is meant to be treated as no longer accurate.

`<ins>` This line of text is meant to be treated as an addition to the document.

`<u>` This line of text will render as underlined

`<small> ou .small` This line of text is meant to be treated as fine print.

`<strong> ou .font-weight-bold ou font-weight-bold` This line rendered as bold text.

`<em> ou .font-italic` This line rendered as italicized text.

#### Formattage

`.text-left` Texte aligné à gauche sur toutes les tailles de fenêtres.

`.text-center` Center aligned text sur toutes les tailles de fenêtres.

`.text-right` Right aligned text sur toutes les tailles de fenêtres.

`.text-sm-left` Texte aligné à gauche sur les les tailles de fenêtres SM (petit) ou plus large.

`.text-md-left` Texte aligné à gauche sur les les tailles de fenêtres MD (medium) ou plus large.

`.text-lg-left` Texte aligné à gauche sur les les tailles de fenêtres LG (large) ou plus large.

`.text-xl-left` Texte aligné à gauche sur les les tailles de fenêtres XL (xlarge) ou plus large.

`.text-lowercase` Lowercased text.

`.text-uppercase` Uppercased text.

`.text-capitalized` première lettre en majuscule

`a.text-decoration-none` Non-underlined link

#### Abbreviations

Implémentation stylisée de l'élément `<abbr>` de HTML pour les abréviations et acronymes pour afficher la version étendue en survol. Les abréviations ont un soulignement par défaut et reçoivent un curseur d'aide pour fournir un contexte supplémentaire au survol et aux utilisateurs de technologies d'assistance.

Ajouter `.initialism` à une abréviation pour une taille de police légèrement plus petite.

`<abbr title="attribute">` attr

`<abbr title="attribute" class="initialism">` HTML

#### Blockquotes

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    <blockquote class="blockquote">
      <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>

#### Lists

`no styling`

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
  - Vestibulum laoreet porttitor sem
  - Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem

`.list-unstyled`

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
  - Vestibulum laoreet porttitor sem
  - Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem

`Ceci ne s'applique qu'aux éléments de liste enfants immédiats, ce qui signifie que vous devrez également ajouter la classe pour toute liste imbriquée.`
`.list-inline`

- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat

#### Description list alignment

Alignez les termes et les descriptions horizontalement en utilisant les classes prédéfinies de notre système de grille (ou mélanges sémantiques). Pour des durées plus longues, vous pouvez ajouter en option la classe `.text-truncate` pour tronquer le texte avec une ellipse.

Description lists
  A description list is perfect for defining terms.
Euismod

  Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

  Donec id elit non mi porta gravida at eget metus.

Malesuada porta
  Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated truncated truncated truncated truncated truncated
  Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
  Nested definition list
    Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
  Nested definition list
    Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

### Couleurs

La logique des couleurs de base s'appliquent à tout : text (`.text-...`code), div (`bg-...`) et les boutons (`btn-...`),dans les tableaux, les badges, les cartes....

Texte

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

Dark grey text.

Body text.

Light grey text.

Black text with 50% opacity on white background

White text with 50% opacity on black background

Arrière plan

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

Osburci n'importe quel background de 30%.

Pâli n'importe quel background de 30%.

### Tabs et accordéons

##

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

##

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

##

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

      <div class="card">
        <div class="card-header" id="headingOne">
          <h2 class="mb-0">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Collapsible Group Item #1
            </button>
          </h2>
        </div>
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingThree">
          <h2 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Collapsible Group Item #3
            </button>
          </h2>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingThree">
          <h2 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Collapsible Group Item #3
            </button>
          </h2>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>

51 Home Link 8 Link 2 23 Link 3 Link n..

Tabs can be used to contain a variety of content & elements. They are a good way to group relevant content. Display initial content in context to the user. Enable the user to flow through more information as needed.

44 Message 1 8 Message 2 23 Message 3 Message n..

    	                <ul id="tabsJustified" class="nav nav-tabs">
                        <li class="nav-item"><a href="" data-target="#home1" data-toggle="tab" class="nav-link small text-uppercase">Home</a></li>
                        <li class="nav-item"><a href="" data-target="#profile1" data-toggle="tab" class="nav-link small text-uppercase active">Profile</a></li>
                        <li class="nav-item"><a href="" data-target="#messages1" data-toggle="tab" class="nav-link small text-uppercase">Messages</a></li>
                    </ul>
                    <br>
                    <div id="tabsJustifiedContent" class="tab-content">
                        <div id="home1" class="tab-pane fade">
                            <div class="list-group"><a href="" class="list-group-item d-inline-block"><span class="float-right badge badge-pill badge-dark">51</span> Home Link</a> <a href="" class="list-group-item d-inline-block"><span class="float-right badge badge-pill badge-dark">8</span> Link 2</a>                            <a href="" class="list-group-item d-inline-block"><span class="float-right badge badge-pill badge-dark">23</span> Link 3</a> <a href="" class="list-group-item d-inline-block text-muted">Link n..</a></div>
                        </div>
                        <div id="profile1" class="tab-pane fade active show">
                            <div class="row pb-2">
                                <div class="col-md-7">
                                    <p>Tabs can be used to contain a variety of content &amp; elements. They are a good way to group <a href="" class="link">relevant content</a>. Display initial content in context to the user. Enable the user to flow through
                                        <a href="" class="link">more</a> information as needed.
                                    </p>
                                </div>
                                <div class="col-md-5"><img src="//dummyimage.com/1005x559.png/5fa2dd/ffffff" class="float-right img-fluid img-rounded"></div>
                            </div>
                        </div>
                        <div id="messages1" class="tab-pane fade">
                            <div class="list-group"><a href="" class="list-group-item d-inline-block"><span class="float-right badge badge-pill badge-dark">44</span> Message 1</a> <a href="" class="list-group-item d-inline-block"><span class="float-right badge badge-pill badge-dark">8</span> Message 2</a>                            <a href="" class="list-group-item d-inline-block"><span class="float-right badge badge-pill badge-dark">23</span> Message 3</a> <a href="" class="list-group-item d-inline-block text-muted">Message n..</a></div>
                        </div>
                    </div>

### Les boutons

    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <button type="button" class="btn btn-link">Link</button>

#### Les différentes utilisations d'un bouton

Les classes `.btn` sont conçues pour être utilisées avec l'élément `<button>`. Cependant, vous pouvez également utiliser ces classes sur des éléments <a> ou <input> (bien que certains navigateurs puissent appliquer un rendu légèrement différent).

Lorsque vous utilisez des classes de boutons sur des éléments `<a>` qui sont utilisés pour déclencher la fonctionnalité de la page (comme la réduction du contenu), plutôt que de créer des liens vers de nouvelles pages ou sections de la page en cours, ces liens devraient avoir un `role="button"` pour transmettre correctement leur but aux technologies d'aide comme les lecteurs d'écran.

Link

    <a class="btn btn-primary" href="#" role="button">Link</a>
    <button class="btn btn-primary" type="submit">Button</button>
    <input class="btn btn-primary" type="button" value="Input">
    <input class="btn btn-primary" type="submit" value="Submit">
    <input class="btn btn-primary" type="reset" value="Reset">

#### Les boutons en mode "outline"

Besoin d'un bouton, mais pas des couleurs de fond qu'ils apportent ? Remplacez les classes de modificateurs par défaut par les classes `.btn-outline-*` pour supprimer toutes les images et couleurs d'arrière-plan d'un bouton.

    <button type="button" class="btn btn-outline-primary">Primary</button>
    <button type="button" class="btn btn-outline-secondary">Secondary</button>
    <button type="button" class="btn btn-outline-success">Success</button>
    <button type="button" class="btn btn-outline-danger">Danger</button>
    <button type="button" class="btn btn-outline-warning">Warning</button>
    <button type="button" class="btn btn-outline-info">Info</button>
    <button type="button" class="btn btn-outline-light">Light</button>
    <button type="button" class="btn btn-outline-dark">Dark</button>

Bouton radio masqué

    // Large //
    <button type="button" class="btn btn-primary btn-lg">Primary Large</button>
    // Small
    <button type="button" class="btn btn-secondary btn-sm">Secondary Small</button>
    // Active //
    <button type="button" class="btn btn-primary btn-lg active">Primary Active</button>
    // Disabled //
    <button type="button" class="btn btn-lg btn-primary" disabled aria-disabled="true">.Disabled</button>
    // Block //
    <button type="button" class="btn btn-primary btn-lg btn-block my-4">Primary Block</button>
    // Checkbox déguisé en bouton //
    <div class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
    </label>
    </div>

Notes

- Boutons, a ou inputs
  - Les classes `.btn` sont conçues pour être utilisées avec l'élément `<button>` Cependant, vous pouvez également utiliser ces classes sur `<a>` ou `<input>`.
  - `role="button"` pour transmettre correctement leur but aux technologies d'assistance telles que les lecteurs d'écran.
- Disabled
  - `<a>` ne supportepas l'attribut `disabled` vous devez donc ajouter la classe `.disabled` pour qu'elle apparaisse visuellement désactivée.
  - Certains styles conviviaux pour l'avenir sont inclus pour désactiver tous les événements `pointer-events` sur les boutons ancres. Dans les navigateurs qui supportent cette propriété, vous ne verrez pas du tout le curseur désactivé.
  - Les boutons désactivés doivent inclure l'attribut `aria-disabled="true"` pour indiquer l'état de l'élément aux technologies d'assistance.

#### Groupes de boutons

Envelopper une série de boutons avech `.btn` dans`.btn-group`.

    <div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
    </div>

Toute la documentation bouton

### Alertes

A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.

    <div class="alert alert-primary" role="alert">    A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.  </div>
    <div class="alert alert-secondary" role="alert">    A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.  </div>
    <div class="alert alert-success" role="alert">    A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.  </div>
    <div class="alert alert-danger" role="alert">    A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.  </div>
    <div class="alert alert-warning" role="alert">    A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.  </div>
    <div class="alert alert-info" role="alert">    A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.  </div>
    <div class="alert alert-light" role="alert">    A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.  </div>
    <div class="alert alert-dark" role="alert">    A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.  </div>

#### Alerte Dismiss

Holy guacamole! You should check in on some of those fields below.

    <div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    </div>

### Images

#### Images Responsives

Les images dans Bootstrap 4 sont rendues responsives avec `.img-fluid`. La classe`.rounded` donne un effet arrondi.

Pour ajouter une légende, la balise `figure` est employée dans Bootstrap 4. Pour en savoir plus

`img-fluid`
`rounded`
`rounded-circle`
`img-thumbnail`

### Alignement

#### Float

Les float fonctionnent sur la plupart des éléments.

Float left sur toutes les tailles de fenêtres
Float right sur toutes les tailles de fenêtres
Don't float sur toutes les tailles de fenêtres

    <div class="float-left">Float left sur toutes les tailles de fenêtres</div>
    <div class="float-right">Float right sur toutes les tailles de fenêtres</div>
    <div class="float-right">Float right sur toutes les tailles de fenêtres</div>
    <div class="float-none">Don't float sur toutes les tailles de fenêtres</div>

- `.float-left`
- `.float-right`
- `.float-none`
- `.float-sm-left`
- `.float-sm-right`
- `.float-sm-none`
- `.float-md-left`
- `.float-md-right`
- `.float-md-none`
- `.float-lg-left`
- `.float-lg-right`
- `.float-lg-none`
- `.float-xl-left`
- `.float-xl-right`
- `.float-xl-none`

### Tables

En raison de l'utilisation répandue des tables dans les widgets tiers comme les calendriers et les sélecteurs de date, nous avons conçu nos tables pour être opt-in. Il suffit d'ajouter la classe de base .table à n'importe quelle `<table>`, puis d'étendre avec des styles personnalisés ou nos différentes classes de modificateurs inclus.

En utilisant le balisage de table le plus basique, voici à quoi ressemblent les tables basées sur une `table.table` dans Bootstrap. Tous les styles de tables sont hérités dans Bootstrap 4, ce qui signifie que toutes les tables imbriquées seront stylisées de la même manière que les tables parent.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

Tableau foncé : `.table .table-dark`

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

Entête foncée seulement : `<table class="table"> <thead class="thead-dark">`

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

Entête "light" seulement : `<table class="table"> <thead class="thead-light">`

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

Table zèbrée : `.table .table-striped`

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

Table zèbré foncé : `.table .table-striped .table-dark`

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

Table avec bordure `.table .table-bordered`

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

Table avec bordure et foncé`.table .table-bordered .table-dark`

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

Table sans bordure`.table .table-borderless`

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

Table sans bordure foncé : `.table .table-borderless .table-dark`

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

Table hover : `.table .table-hover`

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

Table hover foncé : `.table .table-hover .table-dark`

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

Table avec bordure minimales : `.table .table-sm`

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

Table foncé avec bordure minimales : `.table .table-sm .table-dark`

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

Table avec plein de couleurs : Dans les `<tr>` ou dans les `<td>` ou `<th>` :`.table-active .table-primary .table-secondary .table-success .table-danger .table-warning .table-info .table-light .table-dark`

Class | Heading | Heading
--- | --- | ---
Active | Cell | Cell
Default | Cell | Cell
Primary | Cell | Cell
Secondary | Cell | Cell
Success | Cell | Cell
Danger | Cell | Cell
Warning | Cell | Cell
Info | Cell | Cell
Light | Cell | Cell
Dark | Cell | Cell

Table avec plein de couleurs avec fond foncé : Dans les `<tr>` ou dans les `<td>` ou `<th>` :`.bg-primary .bg-secondary .bg-success .bg-info .bg-warning .bg-danger .bg-darker .bg-lighter`

# | Heading | Heading
--- | --- | ---
Primary | Cell | Cell
Secondary | Cell | Cell
Success | Cell | Cell
Info | Cell | Cell
Warning | Cell | Cell
9 | Cell | Cell
Darker | Cell | Cell
lighter | Cell | Cell

Ajouter un caption pour les screen readers : `<table class="table"> <caption>List of users</caption> ... <thead>`

List of users
# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

    <table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>

### Figures

Chaque fois que vous avez besoin d'afficher un morceau de contenu - comme une image avec une légende facultative, pensez à utiliser un`<figure>`.

Utilisez les classes `.figure` , `.figure-img` et `.figure-caption` incluses pour fournir certains styles de base pour les éléments HTML5 `<figure>` et `<figcaption>`. Les images en chiffres n'ont pas de taille explicite, donc assurez-vous d'ajouter la classe `.img-fluid` à vos `<img>` pour les rendre responsives.

On peut utiliser le formattage de texte. Ex. `<figcaption class="figure-caption text-right">`

A caption for the above image.

    <figure class="figure">
    <img src="..." class="figure-img img-fluid rounded" alt="...">
    <figcaption class="figure-caption">A caption for the above image.</figcaption>
    </figure>

### Badges

# Example heading New

    <h1>Example heading <span class="badge badge-secondary">New</span></h1>
    <h2>Example heading <span class="badge badge-secondary">New</span></h2>
    <h3>Example heading <span class="badge badge-secondary">New</span></h3>
    <h4>Example heading <span class="badge badge-secondary">New</span></h4>
    <h5>Example heading <span class="badge badge-secondary">New</span></h5>
    <h6>Example heading <span class="badge badge-secondary">New</span></h6>

Avec `button` et en ajoutant un ticker

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

Primary Secondary Success Danger Warning Info Light Dark

    <span class="badge badge-primary">Primary</span>
    <span class="badge badge-secondary">Secondary</span>
    <span class="badge badge-success">Success</span>
    <span class="badge badge-danger">Danger</span>
    <span class="badge badge-warning">Warning</span>
    <span class="badge badge-info">Info</span>
    <span class="badge badge-light">Light</span>
    <span class="badge badge-dark">Dark</span>

La classe `.badge-pill` arrondi la badge

Primary Secondary Success Danger Warning Info Light Dark

    <span class="badge badge-pill badge-primary">Primary</span>
    <span class="badge badge-pill badge-secondary">Secondary</span>
    <span class="badge badge-pill badge-success">Success</span>
    <span class="badge badge-pill badge-danger">Danger</span>
    <span class="badge badge-pill badge-warning">Warning</span>
    <span class="badge badge-pill badge-info">Info</span>
    <span class="badge badge-pill badge-light">Light</span>
    <span class="badge badge-pill badge-dark">Dark</span>

Ça fonctionne avec des liens aussi

Primary Secondary Success Danger Warning Info Light Dark

    <a href="#" class="badge badge-primary">Primary</a>
    <a href="#" class="badge badge-secondary">Secondary</a>
    <a href="#" class="badge badge-success">Success</a>
    <a href="#" class="badge badge-danger">Danger</a>
    <a href="#" class="badge badge-warning">Warning</a>
    <a href="#" class="badge badge-info">Info</a>
    <a href="#" class="badge badge-light">Light</a>
    <a href="#" class="badge badge-dark">Dark</a>

### Breadcrumbs

    <nav aria-label="breadcrumb">
     <ol class="breadcrumb">
      <li class="breadcrumb-item active" aria-current="page">Home</li>
     </ol>
    </nav>
    <nav aria-label="breadcrumb">
     <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item active" aria-current="page">Library</li>
     </ol>
    </nav>
    <nav aria-label="breadcrumb">
     <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item"><a href="#">Library</a></li>
      <li class="breadcrumb-item active" aria-current="page">Data</li>
     </ol>
    </nav>

### Carousel

Images seulement

Avec des contrôles

Previous Next

et indicateurs

Précécent Suivant

Avec des légendes

##### First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

##### Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

##### Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Previous Next

Définir les intervalles, ajouter `data-interval="10000"` au `<div class="carousel-item">...`

Previous Next

Un beau fade avec `.carousel-fade`

Previous Next

    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
    <!-- Indicateurs -->
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
    <!-- Fin indicateurs -->
      <div class="carousel-inner">
         <div class="carousel-item active">
          <img src="..." class="d-block w-100" alt="...">
         </div>
         <div class="carousel-item">
          <img src="..." class="d-block w-100" alt="...">
         </div>
         <div class="carousel-item">
           <img src="..." class="d-block w-100" alt="...">
         </div>
      </div>
    <!-- Contrôles -->
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>      <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>      <span class="sr-only">Next</span>
      </a>
    <!-- Fin Contrôles -->
    </div>

### Parallax

Avec utilisation du jumbotron. On peut ajouter plusieurs parallax en créant de nouvelles classes identiques à `.paralsec`. La hauteur par défaut est de `100vh` et peut être ajustée dans la classe `.paral`. Par défaut, les éléments sont répartis uniformément à l'horizontale. Si on veut un bloc central, Seulement à imbriquer tous les éléments dans un `<div>` parent.

# Here is a heading 1

Here is a short description 1

Here is a button 1

    <div class="jumbotron paral paralsec">
      <h1 class="display-3">Here is a heading 1</h1>
      <p class="lead">Here is a short description 1</p>
      <p class="lead">
        <a class="btn btn-info btn-lg btn-md" href="#" role="button">Here is a button 1</a>
      </p>
    </div>

### Tooltips

Les tooltips sont activés par défaut dans irsst.js

    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

    <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
      Tooltip on top
    </button>
    <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
      Tooltip on right
    </button>
    <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
      Tooltip on bottom
    </button>
    <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
      Tooltip on left
    </button><button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
      Tooltip with HTML
    </button>

### Popovers

À utiliser : La technique "Dismiss on next click". Utilisez le déclencheur `focus` pour ignorer les popovers lors du clic suivant de l'utilisateur d'un élément différent de l'élément à bascule. Vous devez utiliser la balise `a` et non la balise `button`, et vous devez également inclure un attribut `tabindex`.

Dismissible popover

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray.

    <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

### Collapse

Vous pouvez utiliser un lien avec l'attribut `href` ou un bouton avec l'attribut `data-target`. Dans les deux cas, le `data-toggle="collapse"` est requis.

Link with href

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

    <p>
      <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
        Link with href
      </a>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        Button with data-target
      </button>
    </p>
    <div class="collapse" id="collapseExample">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>

Collapses multiples

Un`<button>`ou`<a>` peut afficher et masquer plusieurs éléments en les référençant avec un sélecteur JQuery dans son attributs `href` or `data-target`. Plusieurs `<button>`ou`<a>` peuvent afficher et masquer un élément s'ils le référencent chacun avec leur attribut `href` ou`data-target`.

- `.collapse` cache le contenu
- `.collapsing` est appliqué durant la transition
- `.collapse.show` affiche le contenu

Toggle first element

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

    <p>
      <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
    </p>
    <div class="row">
      <div class="col">
        <div class="collapse multi-collapse" id="multiCollapseExample1">
          <div class="card card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
          </div>
        </div>
      </div>
      <div class="col">
        <div class="collapse multi-collapse" id="multiCollapseExample2">
          <div class="card card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
          </div>
        </div>
      </div>
    </div>

### Fenêtre modale

Launch demo modal avec un lien avec un fade en xl

##### Modal title

Modal body text goes here.

##### Modal title

Modal body text goes here.

Ajouts

- `fade` pour ajouter une animation à la fenêtre. `class="modal fade"`
- La taille par défaut est de 500px. Pour changer la taille, ajouter `class="modal-dialog ICI"` :
  - `.modal-sm` (max : 300px),
  - `.modal-lg` (max : 800px),
  - `.modal-xl` (max : 1140px),

    <div class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

### Formulaires

The `.form-group` class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies `margin-bottom`, but it picks up additional styles in `.form-inline` as needed. Use it with `<fieldset>`s, `<div>`s, or nearly any other element.

Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for email address or `number` for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Email address We'll never share your email with anyone else.
Password
Check me out
Email address
Example select
Example multiple select
Example textarea
Example file input
Example Range input

Checkboxes

Default checkbox
Disabled checkbox

Checkboxes

Default radio
Second default radio
Disabled radio

Mise en forme des formulaires

- On peut varier les tailles des inputs avec les classes `.form-control-lg` et `.form-control-sm`
- Pour rendre l'input read only, il faut ajouter l'attribut `readonly` et si l'on veut donner à l'input un aspect "plain text" il faut ajouter la classe `.form-control-plaintext`.
- Exemple : `<input type="text" readonly class="form-control-plaintext form-control-sm" id="staticEmail" value="email@example.com">`
- Les formulaires peuvent être alignés avec la grille de bootstrap `<div class="row"> <div class="col">...</div></div>` ou avec `<div class="form-row"> <div class="form-group col">...</div></div>`.
- Les groupes de checkboxes ou de radios peuvent être sur la même ligne en ajoutant `.form-check-inline` à n'importe quel `.form-check`.

Email
Password
Address
Address 2
City
State
Zip

Je m'abonne à ...

... à l'infolettre infoIRSST
... au bulletin manutention

### Les cartes

Les Panels, les Wells et les thumbnails ont été dépréciés dans Bootstrap 4 au profit des cartes.

Voici la carte de base

    <div class="form-row">
       <div class="form-group col">...</div>
    </div>

##### Card title

###### Card subtitle

Les cartes peuvent avoir des couleurs. Voici une carte avec `text-white` et `bg-dark`

Card link Another link

      <div class="card text-white bg-dark">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
      </div>
    </div>

Quote

Voici une carte avec un `card-header` et un `card-footer`.

    <div class="card">
      <div class="card-header">
        Quote
      </div>
      <div class="card-body">
    	  <p class="mb-0">Voici une carte avec un <code>card-header</code> et un <code>card-footer</code>.</p>
      </div>
    	<div class="card-footer text-muted">
        2 days ago
      </div>
    </div>

Some quick example text to build on the card title and make up the bulk of the card's content.

     <div class="card">
      <img class="card-img-top" src="https://placeimg.com/640/480/any" alt="Card image cap">
      <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

Featured

##### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere Back somewhere

      <div class="card text-center mb-4 bg-info text-white">
      <div class="card-header">
        Featured
      </div>
      <div class="card-body">
        <h5>Special title treatment</h5>
        <p>With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a><a href="#" class="btn btn-light ml-2">Back somewhere</a>
      </div>
      <div class="card-footer">
        2 days ago
      </div>
    </div>

### Icônes - Font awesome

On conserve la version 4.7 de Fonawesome pour éviter certaines erreurs du côté serveur (ex.mimetype) et client. Toutes les directives Fontawesome sont dans leur doc.

#### Basic Icons

Example: basic icon fa-camera-retro

#### Larger Icons

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

La taille est spécifié de `fa-lg` (+33%) à `fa-10x` (10em)

### Les ancres et le smoothscroll

À cause du sticky menu, les ancres ont une marge supérieure pour forcer un décalage du haut du navigateur et de l'ancre équivalent à la navbar. L'ancre doit avoir la classe `.anchor`

    	<a name="anchors" class="anchor"></a>

Pour permettre un défilement doux dans le navigateur des différents ancres, le lien pointat vers l'ancre doit avoir la classe `.smooth`

    	<li><a href="#anchors" class="smooth">Ancre et smoothscroll</a></li>

### Bordures

Utilisez les utilitaires de bordure pour styliser rapidement la bordure et le rayon de bordure d'un élément. Idéal pour les images, les boutons ou tout autre élément.

De plus, utilisez les utilitaires de bordure pour ajouter ou supprimer les bordures d'un élément. Choisissez parmi toutes les bordures ou une à la fois.

#### Ajouter une bordure

    <span class="border"></span>
    <span class="border-top"></span>
    <span class="border-right"></span>
    <span class="border-bottom"></span>
    <span class="border-left"></span>

#### Retirer une bordure

    <span class="border-0"></span>
    <span class="border-top-0"></span>
    <span class="border-right-0"></span>
    <span class="border-bottom-0"></span>
    <span class="border-left-0"></span>

### Couleur de bordure

    <span class="border border-primary"></span>
    <span class="border border-secondary"></span>
    <span class="border border-success"></span>
    <span class="border border-danger"></span>
    <span class="border border-warning"></span>
    <span class="border border-info"></span>
    <span class="border border-light"></span>
    <span class="border border-dark"></span>
    <span class="border border-white"></span>