@ -28,15 +28,58 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione
@@ -28,15 +28,58 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
---
## Texte et paragraphe
Ceci est un paragraphe. Ils peuvent contenir du texte <strong>en gras</strong> et <em>en italique</em>, voir <strong><em>les deux en même temps</em></strong>, grâce aux balises `<strong>` et `<em>`. On peut aussi retrouver des <ahref="#">liens</a> définis par du texte <ahref="#">plus ou moins long</a>. Une autre balise utile dans certains cas est `<abbr>`, qui permet de définir un acronyme comme <abbrtitle="HyperText Markup Language">HTML</abbr> par exemple.
Et puis, le latin, c'est chouette, en voici un extrait. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
---
## Listes
Voici un exemple de liste simple :
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
En voici une autre avec des éléments ordonnés :
<ol>
<li>Commencer par faire ceci ;</li>
<li>Ajouter cela dans ceci ;</li>
<li>S'assurer que tout est dit ;</li>
<li>Voilà, c'est fini !</li>
</ol>
# Forms
<pclass="lead">Forms should be rendered with <ahref="https://github.com/stephrdev/django-tapeforms">django-tapeforms</a> for a better integration. The input fields of type *checkbox*, *radio*, *select*, *range* and *file* are customized (see the <i>custom forms</i> documentation).</p>
# Formulaires
<pclass="lead">Dans le code Django, le rendu des formulaires est à faire avec <ahref="https://github.com/stephrdev/django-tapeforms">django-tapeforms</a> pour une bonne intégration.</p>
---
## Base inputs
## Champs de base
Quelques classes supplémentaires sont à utiliser, comme `.required` pour identifier un champ requis. Les actions du formulaires sont aussi à regrouper dans un conteneur `.form-actions`.
```html_example
<form>
@ -92,8 +135,84 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione
@@ -92,8 +135,84 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione
<labelclass="custom-control-label"for="input9">Recevoir la newsletter mensuelle</label>
<strong>Heads up!</strong> This <ahref="#"class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
```
# Boutons
On peut retrouver un bouton dans les actions d'un formulaire, d'un message, ou encore pour rendre plus visible un lien vers une autre page. Comme pour les messages, seules quelques couleurs et variantes sont à utiliser :
* `.btn-primary` : pour une action principale, sur la page ou pour un élément ;
* `.btn-secondary` : pour une action secondaire, sur la page ou pour un élément ;
* `.btn-success` : pour l'envoi d'un formulaire ;
* `.btn-outline-danger` : pour supprimer un élément.
Une variante particulière `.btn-outline-primary` est à utiliser pour un bouton d'ajout, au sein d'une liste d'éléments présentés avec le composant *Card* :
```html_example
<divclass="row">
<divclass="col-sm-6 col-md-4 col-lg-3 mb-3">
<divclass="card">
<h5class="card-header">Élément 1</h5>
<divclass="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</div>
<divclass="col-sm-6 col-md-4 col-lg-3 mb-3">
<divclass="card">
<h5class="card-header">Élément 2</h5>
<divclass="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<h1>Bénévalibre<smallclass="text-muted"> : Aperçu des composants de Bootstrap</small></h1>
<pclass="lead">Cette page donne un aperçu des composants principaux de Bootstrap, mis en forme pour l'application. Pour plus de détails sur l'utilisation du framework Bootstrap et de ses composants, consultez la documentation. Une page donne également un guide des styles spécifiques à l'application.</p>
<smallid="fileHelp"class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
<smallid="fileHelp"class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
<h1>Bénévalibre<smallclass="text-muted"> : Guide des styles</small></h1>
<pclass="lead">Ce guide des styles ne documente que les composants ou autres styles propres à l'application. Pour plus de détails sur l'utilisation du framework Bootstrap et de ses composants, consultez la documentation. Une page donne également un aperçu des composants principaux de Bootstrap mis en forme pour l'application.</p>