feat(ui): revois les composants et le guide selon la charte
parent
c4ae7c2cf0
commit
5bca56cbba
|
|
@ -6,54 +6,52 @@
|
|||
// Color system
|
||||
|
||||
$white: #fff;
|
||||
$gray-100: #f5f5f5;
|
||||
$gray-200: #eeeeee; // stylelint-disable-line color-hex-length
|
||||
$gray-300: #e0e0e0;
|
||||
$gray-400: #bdbdbd;
|
||||
$gray-500: #9e9e9e;
|
||||
$gray-600: #757575;
|
||||
$gray-700: #616161;
|
||||
$gray-800: #424242;
|
||||
$gray-900: #212121;
|
||||
$black: #000;
|
||||
$gray-100: #dee1e1;
|
||||
$gray-200: #d0d3d3;
|
||||
$gray-300: #c1c4c4;
|
||||
$gray-400: #b1b3b3;
|
||||
$gray-500: #9ea0a0;
|
||||
$gray-600: #878989;
|
||||
$gray-700: #6a6c6c;
|
||||
$gray-800: #3e3f3f;
|
||||
$gray-900: #202020;
|
||||
$black: #010101;
|
||||
|
||||
// The color palette is generated with:
|
||||
// https://palx.jxnblk.com/
|
||||
|
||||
$blue: #1f78dd;
|
||||
$indigo: #251fdd;
|
||||
$purple: #841fdd;
|
||||
$pink: #dd1f76;
|
||||
$red: #dd251f;
|
||||
$orange: #dd841f;
|
||||
$yellow: #ffcb00;
|
||||
$green: #1fdd25;
|
||||
$teal: #1fdd84;
|
||||
$cyan: #1fd7dd;
|
||||
|
||||
$primary: $pink;
|
||||
$secondary: #397386;
|
||||
$dark: #1f1f1f;
|
||||
$primary: #df2378;
|
||||
$secondary: #353535;
|
||||
$success: #15b29d;
|
||||
$info: #fcdf7f;
|
||||
$warning: $info;
|
||||
$danger: $primary;
|
||||
$light: #ecf5f7;
|
||||
$dark: $black;
|
||||
|
||||
// Add 'error' as an alternative to 'danger' since it is used by Django.
|
||||
$theme-colors: (
|
||||
"error": $red
|
||||
"error": $danger
|
||||
);
|
||||
|
||||
$theme-color-interval: 10%;
|
||||
|
||||
// Options
|
||||
|
||||
$enable-validation-icons: false;
|
||||
|
||||
// Links
|
||||
|
||||
$link-hover-decoration: none;
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: #353535;
|
||||
$body-bg: $gray-900;
|
||||
$body-color: $white;
|
||||
|
||||
$headings-color: #e9f1f4;
|
||||
// Links
|
||||
|
||||
$link-color: $white;
|
||||
$link-hover-color: rgba($link-color, .8);
|
||||
$link-hover-decoration: none;
|
||||
|
||||
// Components
|
||||
|
||||
$component-bg: $white;
|
||||
$component-color: $gray-900;
|
||||
|
||||
// Typography
|
||||
|
||||
|
|
@ -64,9 +62,10 @@ $font-weight-normal: 400;
|
|||
$font-weight-semibold: 600;
|
||||
$font-weight-bold: 700;
|
||||
|
||||
$headings-font-weight: $font-weight-semibold;
|
||||
$headings-font-weight: $font-weight-normal;
|
||||
$headings-color: $light;
|
||||
|
||||
$hr-border-color: rgba($gray-600, .3);
|
||||
$hr-border-color: rgba($light, .3);
|
||||
|
||||
// Buttons + Forms
|
||||
|
||||
|
|
@ -74,17 +73,17 @@ $input-btn-focus-width: 0;
|
|||
|
||||
// Forms
|
||||
|
||||
$input-bg: $gray-900;
|
||||
$input-bg: $dark;
|
||||
$input-disabled-bg: $gray-800;
|
||||
|
||||
$input-color: $body-color;
|
||||
$input-border-color: $input-bg;
|
||||
|
||||
$input-focus-border-color: $primary;
|
||||
$input-focus-border-color: $white;
|
||||
|
||||
$input-placeholder-color: $gray-700;
|
||||
|
||||
$input-group-addon-bg: $gray-800;
|
||||
$input-group-addon-bg: $secondary;
|
||||
|
||||
$custom-control-indicator-border-width: 0;
|
||||
|
||||
|
|
@ -114,41 +113,64 @@ $navbar-dark-toggler-border-color: transparent;
|
|||
$dropdown-spacer: 0;
|
||||
$dropdown-bg: $dark;
|
||||
|
||||
$dropdown-divider-bg: rgba($white, .1);
|
||||
$dropdown-divider-bg: $hr-border-color;
|
||||
|
||||
$dropdown-link-color: $gray-200;
|
||||
$dropdown-link-color: $white;
|
||||
$dropdown-link-hover-color: $white;
|
||||
$dropdown-link-hover-bg: $primary;
|
||||
|
||||
$dropdown-item-padding-y: .4rem;
|
||||
$dropdown-item-padding-x: 1rem;
|
||||
|
||||
$dropdown-header-color: $light;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $light;
|
||||
$pagination-bg: $dark;
|
||||
$pagination-border-width: 0;
|
||||
|
||||
$pagination-hover-color: $white;
|
||||
$pagination-hover-bg: $secondary;
|
||||
|
||||
$pagination-disabled-color: $gray-700;
|
||||
$pagination-disabled-bg: $body-bg;
|
||||
|
||||
// Jumbotron
|
||||
|
||||
$jumbotron-color: $gray-900;
|
||||
$jumbotron-bg: $gray-200;
|
||||
$jumbotron-color: $dark;
|
||||
$jumbotron-bg: $gray-300;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-cap-color: $gray-900;
|
||||
$card-cap-bg: rgba($black, .03);
|
||||
$card-color: $card-cap-color;
|
||||
$card-bg: $white;
|
||||
$card-cap-color: $component-color;
|
||||
$card-color: $component-color;
|
||||
$card-bg: $component-bg;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-color: $card-color;
|
||||
$list-group-bg: $card-bg;
|
||||
$list-group-color: $component-color;
|
||||
$list-group-bg: $component-bg;
|
||||
|
||||
$list-group-action-hover-color: $card-color;
|
||||
$list-group-action-hover-color: $list-group-color;
|
||||
|
||||
// Badges
|
||||
|
||||
$badge-font-weight: $font-weight-semibold;
|
||||
$badge-padding-y: .2rem;
|
||||
$badge-padding-x: .25rem;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-color: $card-color;
|
||||
$modal-content-bg: $card-bg;
|
||||
$modal-content-color: $component-color;
|
||||
$modal-content-bg: $component-bg;
|
||||
|
||||
// Alerts
|
||||
|
||||
$alert-bg-level: -5;
|
||||
$alert-border-level: -4;
|
||||
$alert-bg-level: 0;
|
||||
$alert-border-level: 1;
|
||||
$alert-color-level: 9;
|
||||
|
||||
// Close
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
// Base styles
|
||||
@import "base/fonts";
|
||||
@import "base/images";
|
||||
@import "base/typography";
|
||||
@import "base/utilities";
|
||||
|
||||
// Layout-related sections
|
||||
|
|
@ -19,6 +20,7 @@
|
|||
@import "layout/footer";
|
||||
|
||||
// Components
|
||||
@import "components/alert";
|
||||
@import "components/card";
|
||||
@import "components/buttons";
|
||||
@import "components/forms";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
// -----------------------------------------------------------------------------
|
||||
// Typography extension
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
// Underline links which are not a component.
|
||||
a:not([class]),
|
||||
.alert-link {
|
||||
font-weight: $font-weight-semibold;
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
// -----------------------------------------------------------------------------
|
||||
// Alert component's extension
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
// Change the opacity on hover instead of changing the color.
|
||||
.alert-link {
|
||||
&:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
// Use the same color for the close button on hover.
|
||||
.alert-dismissible .close {
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust the text color of danger to be white.
|
||||
.alert-danger,
|
||||
.alert-error {
|
||||
color: theme-color-level("danger", - $alert-color-level);
|
||||
|
||||
.alert-link {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,13 @@
|
|||
// Buttons component's extension
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
// Adjust the text color of primary to be white.
|
||||
.btn-outline-primary {
|
||||
color: $white;
|
||||
border-color: $white;
|
||||
}
|
||||
|
||||
// Double the border width of a large button.
|
||||
.btn-lg[class*="btn-outline-"] {
|
||||
border-width: $btn-border-width * 2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
.card {
|
||||
overflow: hidden;
|
||||
border-width: 0;
|
||||
border: 0;
|
||||
|
||||
> :last-child {
|
||||
border-bottom: 0;
|
||||
|
|
@ -14,6 +14,14 @@
|
|||
> .btn-group > .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
a:not([class]) {
|
||||
color: $dark;
|
||||
|
||||
&:hover {
|
||||
color: $gray-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
|
|
@ -26,10 +34,21 @@
|
|||
color: $card-cap-color;
|
||||
}
|
||||
|
||||
// Fix background and border colors of the active item.
|
||||
// Tweak colors of the active item in tabs.
|
||||
.card-header-tabs {
|
||||
.nav-link {
|
||||
color: $dark;
|
||||
|
||||
&:hover {
|
||||
color: $gray-800;
|
||||
border-bottom-color: transparent;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
color: $primary;
|
||||
background-color: $card-bg;
|
||||
border-bottom-color: $card-bg;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,17 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
// Hide spinners on input of type 'number'.
|
||||
[type="number"] {
|
||||
-moz-appearance: textfield; // stylelint-disable-line property-no-vendor-prefix
|
||||
|
||||
&::-webkit-outer-spin-button,
|
||||
&::-webkit-inner-spin-button {
|
||||
margin: 0;
|
||||
-webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
|
||||
}
|
||||
}
|
||||
|
||||
// Extend the base classes
|
||||
|
||||
// Indicate that a form field is required.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
# Forms
|
||||
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 <a href="#">liens</a> définis par du texte <a href="#">plus ou moins long</a>. Une autre balise utile dans certains cas est `<abbr>`, qui permet de définir un acronyme comme <abbr title="HyperText Markup Language">HTML</abbr> par exemple.
|
||||
|
||||
<p class="lead">Forms should be rendered with <a href="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>
|
||||
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.
|
||||
|
||||
---
|
||||
|
||||
## Base inputs
|
||||
## 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>
|
||||
|
||||
|
||||
|
||||
# Formulaires
|
||||
|
||||
<p class="lead">Dans le code Django, le rendu des formulaires est à faire avec <a href="https://github.com/stephrdev/django-tapeforms">django-tapeforms</a> pour une bonne intégration.</p>
|
||||
|
||||
---
|
||||
|
||||
## 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
|
|||
<label class="custom-control-label" for="input9">Recevoir la newsletter mensuelle</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary btn-block">Enregistrer</button>
|
||||
<div class="form-actions text-right">
|
||||
<button type="submit" class="btn btn-outline-danger">Supprimer</button>
|
||||
<button type="submit" class="btn btn-success">Enregistrer</button>
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
|
||||
|
||||
# Messages
|
||||
|
||||
Le composant *Alert* est utilisé pour présenter un message à l'utilisat⋅eur⋅rice. Seules les couleurs suivantes sont cependant à utiliser :
|
||||
* `.alert-success` : lorsqu'une action a bien été réalisée ;
|
||||
* `.alert-danger` : en cas d'erreur, dans le saisie du formulaire par exemple ;
|
||||
* `.alert-info` : pour afficher et faire ressortir une information.
|
||||
|
||||
```html_example
|
||||
<div class="alert alert-dismissible alert-success">
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
|
||||
</div>
|
||||
|
||||
<div class="alert alert-dismissible alert-danger">
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
|
||||
</div>
|
||||
|
||||
<div class="alert alert-dismissible alert-info">
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>Heads up!</strong> This <a href="#" 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.
|
||||
|
||||
```html_example
|
||||
<button type="button" class="btn btn-primary">Principal</button>
|
||||
<button type="button" class="btn btn-secondary">Secondaire</button>
|
||||
<button type="button" class="btn btn-success">Enregistrer</button>
|
||||
<button type="button" class="btn btn-outline-danger">Supprimer</button>
|
||||
```
|
||||
|
||||
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
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4 col-lg-3 mb-3">
|
||||
<div class="card">
|
||||
<h5 class="card-header">Élément 1</h5>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3 mb-3">
|
||||
<div class="card">
|
||||
<h5 class="card-header">Élément 2</h5>
|
||||
<div class="card-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3 mb-3">
|
||||
<a href="#" class="btn btn-outline-primary btn-lg border-dashed h-100 w-100">
|
||||
<div class="d-flex h-100 align-items-center justify-content-center">
|
||||
<div class="text-center">
|
||||
<i class="fa fa-plus mr-2" aria-hidden="true"></i>Ajouter un élément
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<div class="jumbotron">
|
||||
<div class="jumbotron rounded-0">
|
||||
<div class="container">
|
||||
<h1>Bénévalibre<small class="text-muted"> : Aperçu des composants de Bootstrap</small></h1>
|
||||
<p class="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>
|
||||
|
|
@ -245,10 +245,10 @@
|
|||
<div class="col-lg-6">
|
||||
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
||||
<label class="btn btn-primary active">
|
||||
<input type="radio" name="options" id="option-1" autocomplete="off" checked> Radio 1
|
||||
<input type="radio" name="options" id="optionRadioBtn1" autocomplete="off" checked> Radio 1
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="radio" name="options" id="option-2" autocomplete="off"> Radio 2
|
||||
<input type="radio" name="options" id="optionRadioBtn2" autocomplete="off"> Radio 2
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -260,10 +260,10 @@
|
|||
<div class="col-lg-6">
|
||||
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
||||
<label class="btn btn-outline-primary active">
|
||||
<input type="checkbox" checked autocomplete="off"> Checkbox 1
|
||||
<input type="checkbox" checked autocomplete="off"> Checkbox 3
|
||||
</label>
|
||||
<label class="btn btn-outline-primary">
|
||||
<input type="checkbox" autocomplete="off"> Checkbox 2
|
||||
<input type="checkbox" autocomplete="off"> Checkbox 4
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -271,10 +271,10 @@
|
|||
<div class="col-lg-6">
|
||||
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
||||
<label class="btn btn-outline-primary active">
|
||||
<input type="radio" name="options" id="option-1" autocomplete="off" checked> Radio 1
|
||||
<input type="radio" name="options" id="optionRadioBtn3" autocomplete="off" checked> Radio 3
|
||||
</label>
|
||||
<label class="btn btn-outline-primary">
|
||||
<input type="radio" name="options" id="option-2" autocomplete="off"> Radio 2
|
||||
<input type="radio" name="options" id="optionRadioBtn4" autocomplete="off"> Radio 4
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -286,7 +286,7 @@
|
|||
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<h3 id="buttons-dropdowns" class="my-3">Button groups</h3>
|
||||
<h3 id="button-groups" class="my-3">Button groups</h3>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
|
|
@ -558,90 +558,80 @@
|
|||
<div class="col-lg-6">
|
||||
<div class="bs-component">
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
<div class="form-group row">
|
||||
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
||||
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
||||
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputPassword1">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleSelect1">Example select</label>
|
||||
<select class="custom-select" id="exampleSelect1">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleSelect2">Example multiple select</label>
|
||||
<select multiple class="custom-select" id="exampleSelect2">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleTextarea">Example textarea</label>
|
||||
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="exampleInputFile">
|
||||
<label class="custom-file-label" for="exampleInputFile">Choose file</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputPassword1">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
||||
<small id="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>
|
||||
</div>
|
||||
<fieldset class="form-group">
|
||||
<legend>Radio buttons</legend>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" id="optionsRadios1" name="optionsRadios" class="custom-control-input" checked>
|
||||
<label class="custom-control-label" for="optionsRadios1">Option one is this and that — be sure to include why it's great</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleSelect1">Example select</label>
|
||||
<select class="form-control" id="exampleSelect1">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" id="optionsRadios2" name="optionsRadios" class="custom-control-input">
|
||||
<label class="custom-control-label" for="optionsRadios2">Option two can be something else and selecting it will deselect option one</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleSelect2">Example multiple select</label>
|
||||
<select multiple class="form-control" id="exampleSelect2">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" id="optionsRadios3" name="optionsRadios" class="custom-control-input" disabled>
|
||||
<label class="custom-control-label" for="optionsRadios3">Option three is disabled</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleTextarea">Example textarea</label>
|
||||
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputFile">File input</label>
|
||||
<input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
|
||||
<small id="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>
|
||||
</div>
|
||||
<fieldset class="form-group">
|
||||
<legend>Radio buttons</legend>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
|
||||
Option two can be something else and selecting it will deselect option one
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check disabled">
|
||||
<label class="form-check-label">
|
||||
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<legend>Checkboxes</legend>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox" value="" checked>
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check disabled">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox" value="" disabled>
|
||||
Option two is disabled
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<legend>Checkboxes</legend>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="checkbox1" checked>
|
||||
<label class="custom-control-label" for="checkbox1">Option one is this and that — be sure to include why it's great</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="checkbox2" disabled>
|
||||
<label class="custom-control-label" for="checkbox2">Option two is disabled</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -717,50 +707,6 @@
|
|||
</div>
|
||||
</form>
|
||||
|
||||
<div class="bs-component">
|
||||
<fieldset>
|
||||
<legend>Custom forms</legend>
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked>
|
||||
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
|
||||
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" id="customRadio3" name="customRadio" class="custom-control-input" disabled>
|
||||
<label class="custom-control-label" for="customRadio3">Disabled custom radio</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="customCheck1" checked>
|
||||
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="customCheck2" disabled>
|
||||
<label class="custom-control-label" for="customCheck2">Disabled custom checkbox</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<select class="custom-select">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="customFile">
|
||||
<label class="custom-file-label" for="customFile">Choose file</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -893,7 +839,7 @@
|
|||
<div class="col-lg-6">
|
||||
<h2 id="pagination" class="my-3">Pagination</h2>
|
||||
<div class="bs-component">
|
||||
<div>
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#">«</a>
|
||||
|
|
@ -917,9 +863,9 @@
|
|||
<a class="page-link" href="#">»</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div>
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination pagination-lg">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#">«</a>
|
||||
|
|
@ -943,9 +889,9 @@
|
|||
<a class="page-link" href="#">»</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div>
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination pagination-sm">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#">«</a>
|
||||
|
|
@ -969,7 +915,7 @@
|
|||
<a class="page-link" href="#">»</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<header class="jumbotron sg-header">
|
||||
<header class="jumbotron sg-header rounded-0">
|
||||
<div class="container">
|
||||
<h1>Bénévalibre<small class="text-muted"> : Guide des styles</small></h1>
|
||||
<p class="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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue