Gabarit d'application IRSST
Version 2019
Version 2019
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.
.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>
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. Bootstrap heading With faded secondary text |
|
|
h2. Bootstrap heading With faded secondary text |
|
|
h3. Bootstrap heading With faded secondary text |
|
|
h4. Bootstrap heading With faded secondary text |
|
|
h5. Bootstrap heading With faded secondary text |
|
|
h6. Bootstrap heading With faded secondary text |
.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.
.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
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
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>no styling
.list-unstyled
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
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.
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
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%.
<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>
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.
<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 & 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>
<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 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.
<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">
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>
// 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
.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.<a> ne supportepas l'attribut disabled vous devez donc ajouter la classe .disabled pour qu'elle apparaisse visuellement désactivée.pointer-events sur les boutons ancres. Dans les navigateurs qui supportent cette propriété, vous ne verrez pas du tout le curseur désactivé.aria-disabled="true" pour indiquer l'état de l'élément aux technologies d'assistance.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>
<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>
<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">×</span> </button> </div>
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-fluidroundedrounded-circleimg-thumbnailLes float fonctionnent sur la plupart des éléments.
<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-noneEn 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 |
.table .table-dark
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table"> <thead class="thead-dark">
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table"> <thead class="thead-light">
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
.table .table-striped
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
.table .table-striped .table-dark
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
.table .table-bordered
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
.table .table-bordered .table-dark
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
.table .table-borderless
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
.table .table-borderless .table-dark
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
.table .table-hover
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
.table .table-hover .table-dark
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
.table .table-sm
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
.table .table-sm .table-dark
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<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 |
<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 |
<table class="table"> <caption>List of users</caption> ... <thead>
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<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>
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">
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
<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>
<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>
<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>
Images seulement
Avec des contrôles
et indicateurs
Avec des légendes
Définir les intervalles, ajouter data-interval="10000" au <div class="carousel-item">...
Un beau fade avec .carousel-fade
<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>
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.
<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>
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>
À 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.
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>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.
<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
<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>Launch demo modal avec un lien avec un fade en xl
Ajouts
fade pour ajouter une animation à la fenêtre. class="modal fade"
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">×</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>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.
Mise en forme des formulaires
.form-control-lg et .form-control-smreadonly et si l'on veut donner à l'input un aspect "plain text" il faut ajouter la classe .form-control-plaintext. <input type="text" readonly class="form-control-plaintext form-control-sm" id="staticEmail" value="email@example.com"><div class="row"> <div class="col">...</div></div> ou avec <div class="form-row"> <div class="form-group col">...</div></div>.
.form-check-inline à n'importe quel .form-check.Les Panels, les Wells et les thumbnails ont été dépréciés dans Bootstrap 4 au profit des cartes.
<div class="form-row"> <div class="form-group col">...</div> </div>
Les cartes peuvent avoir des couleurs. Voici une carte avec text-white et bg-dark
<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>
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>
With supporting text below as a natural lead-in to additional content.
Go somewhereBack 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>
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.
Example: basic icon fa-camera-retro
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
La taille est spécifié de fa-lg (+33%) à fa-10x (10em)
À 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>
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.
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span><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><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>