Siège social 8 rue de La Butte Chaumont 21240 TALANT TALANT

Tél : 06 79 78 14 18

Accueil >Page test

- Slider

- Cards

- Ombres

- Modal

- Effet

DOCUMENTATION

Le but de cette page est purement technique: elle permet de visualiser la charte graphique afin d'aider au contrôle de son paramétrage et de proposer différentes solutions de mise en page de texte.

Cette zone est un blockquote=citation: utile pour le chapeau d'un article.
Cette page sert à valider le paramétrage de la charte graphique, du choix de la typographie, des tailles des titres et des espacements!


<blockquote>
    Citation
</blockquote>

Exemple de titre h1 avec un badge New 1

Exemple de titre h2 avec un badge New 2

Exemple de titre h3 avec un badge New 3


<h1>Exemple de titre h1 avec un badge <span class="badge badge-secondary">New 1</span></h1>
<h2>Exemple de titre h2 avec un badge <span class="badge badge-secondary">New 2</span></h2>
<h3>Exemple de titre h3 avec un badge <span class="badge badge-secondary">New 3</span></h3>

Mise en page Grille responsive Bootstrap:

Normal:


<div class="container">...</div>

Pleine-largeur:


<div class="container-fluid">...</div>

Avec la class inverse

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores error iusto quas. Aliquam aut beatae blanditiis cupiditate delectus, dolorum esse est nemo neque qui? Asperiores labore laborum molestias suscipit voluptatibus?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque eligendi libero maxime molestiae neque odit praesentium quam quod reiciendis voluptate. Blanditiis, incidunt, sit? Amet dolores est obcaecati, quam qui quo!


<div class="container-fluid inverse" style="padding: 25px;">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg">
                <h3>Lorem ipsum</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
            <div class="col-12 col-lg-4">
                <img src="https://via.placeholder.com/400" alt="Exemple image">
            </div>
        </div>
    </div>
</div>

Les grilles:

Pour pouvoir mettre en place les colones, il faut d'abord insérer une ligne avec la classe row.

La classe col permet d'avoir une grille responsive et de répartir les colones sur la largeur de la ligne.

Exemple de 3 colones:

Exemple de 6 colones:

Exemple de 12 colones:


<div class="container">
    <div class="row">
        <div class="col">...</div>
        <div class="col">...</div>
        <div class="col">...</div>
        ...
    </div>
</div>

Les colones adaptées:

La largeur de la colone peut être définie manuellement en y ajouter la taille: col-[1-12] (avec un maximum de 12).

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

col-7

col-5

col-8

col-4

col-9

col-3

col-10

col-2

col-11

col-1

col-12

Les tailles d'écrans:

Pour nos sites, le passage de la mise en page ecran à la mise en page mobile se fait à 992px

	Mobile < 576px	Mobile Large ≥ 576px	Tablette ≥ 768px	Ecran ≥ 992px	Grand écran ≥ 1200px
Largeur max:	Auto	540px	720px	960px	1140px
Préfixe	`col-`	`col-sm-`	`col-md-`	`col-lg-`	`col-xl-`

Les colones adaptées:

Les colones peuvent s'adapter en fonction de la taille de l'écran.

(le passage de la mise en page ecran à la mise en page mobile se fait à 992px, nous utiliserons donc le prefixe lg pour adapter la mise en page)

Par exemple, on veut un élément qui soit en 4 colones sur écran normal, 2 colones en mode tablette et mobile:

col-6 col-lg-3


<div class="col-[1-12] col-lg-[1-12]">...</div>

Les margin et padding:

Les classes Bootstrap permettent d'appliquer des marges intérieures ou extérieures aux éléments

(Si on souhaite des marges différentes enversion écran et mobile, il suffira d'ajouter le prefixe lg à ces marges)

m va nous servir à définir une marge extérieure (margin)

p va nous servir à définir une marge intérieure (padding)

il y a 7 valeurs différentes pour définir la taille des marges

0 va supprimer toutes les marges appliquées à un élément

1 va définir une marge de 0.25rem par défaut (0.25 * 16px)

2 va définir une marge de 0.5rem par défaut (0.5 * 16px)

3 va définir une marge de 1rem par défaut (1 * 16px)

4 va définir une marge de 1.5rem par défaut (1.5 * 16px)

5 va définir une marge de 3rem par défaut (3 * 16px)

auto va s'appliquer uniquement aux marges extérieures (correspond à margin:auto)

Exemples avec les padding

pas de marge intérieure

marge intérieure p-1

marge intérieure p-2

marge intérieure p-3

marge intérieure p-4

marge intérieure p-5


                                <p class="p-0 border">pas de marge intérieure</p>
                                <p class="p-1 border">marge intérieure p-1</p>
                                <p class="p-2 border">marge intérieure p-2</p>
                                <p class="p-3 border">marge intérieure p-3</p>
                                <p class="p-4 border">marge intérieure p-4</p>
                                <p class="p-5 border">marge intérieure p-5</p>

Exemples avec les margin

pas de marge extérieure

texte

marge extérieure m-1

texte


                                <p class="m-0 bg-primary">pas de marge extérieure</p>
                                <p class="bg-secondary">texte</p>
                                <p class="m-1 bg-primary">marge extérieure m-1</p>
                                <p class="bg-secondary">texte</p>

Les margin et les padding peuvent s'appliquer differemment à un ou plusieurs côté d'un élément

il y a différentes valeurs pour les côté d'un élément

t va appliquer la marge en haut (top)

b va appliquer la marge en bas (bottom)

r va appliquer la marge à droite (right)

l va appliquer la marge à gauche (left)

x va appliquer la même marge à gauche et à droite de l'élément

y va appliquer la même marge en haut et en bas de l'élément

si aucun "côté" de l'élément n'est définit, la marge s'applique sur tous les côtés

Exemples

padding-left à 2 et padding-top à 3 (marge intérieure gauche et en haut)

texte

margin-top à 3 et margin bottom à 1 (marge exterieure en haut et en bas)

texte


                                <p class="pl-2 pt-3m-0 bg-primary">padding-left à 2 et padding-top à 3 (marge intérieure gauche et en haut)</p>
                                <p class="bg-secondary">texte</p>
                                <p class="mt-3 mb-1 bg-primary">margin-top à 3 et margin bottom à 1 (marge exterieure en haut et en bas)</p>
                                <p class="bg-secondary">texte</p>

Si on souhaite des marges différentes enversion écran et mobile, il suffira d'ajouter le prefixe lg à ces marges

Par exemple si on veut un padding de 3 sur écran d'ordinateur et de 1 sur mobile

marge intérieure p-1 sur mobile et p-3 sur écran


                                <p class="p-1 p-lg-3 border">marge intérieure p-1 sur mobile et p-3 sur écran</p>

Les hauteurs et largeurs d'élément:

Les classes Bootstrap permettent de définir des hauteurs et largeurs d'élément en poucentage de leur conteneur

largeur (width)

Width 25%

Width 50%

Width 75%

Width 100%


                                <div class="w-25">Width 25%</div>
                                <div class="w-50">Width 50%</div>
                                <div class="w-75">Width 75%</div>
                                <div class="w-100">Width 100%</div>

hauteur (height)

Height 25%

Height 50%

Height 75%

Height 100%


                                    <div class="bg-light" style="height: 100px;">
                                        <div class="h-25 d-inline-block">Height 25%</div>
                                        <div class="h-50 d-inline-block">Height 50%</div>
                                        <div class="h-75 d-inline-block">Height 75%</div>
                                        <div class="h-100 d-inline-block">Height 100%</div>
                                    </div>

Même hauteur

Colonne 1 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna.

Colonne 2 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 1 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna.


                                    <div class="container">
                                        <div class="row">
                                            <div class="col-12 col-lg d-flex flex-column">
                                                <div class="equal_height">
                                                    <p>Lorem ipsum dolor sit amet</p>
                                                </div>
                                                <a href="#" class="btn">En savoir plus</a>
                                            </div>
                                            <div class="col-12 col-lg d-flex flex-column">
                                                <div class="equal_height">
                                                    <p>Lorem ipsum dolor sit amet</p>
                                                </div>
                                                <a href="#" class="btn">En savoir plus</a>
                                            </div>
                                            <div class="col-12 col-lg d-flex flex-column">
                                                <div class="equal_height">
                                                    <p>Lorem ipsum dolor sit amet</p>
                                                </div>
                                                <a href="#" class="btn">En savoir plus</a>
                                            </div>
                                        </div>
                                    </div>

Alignement du texte

Les classes Bootstrap permettent d'aligner facilement le texte à l'aide des classes

Exemples

Texte aligné sur la gauche

Texte centré

Texte aligné sur la droite


                                <div class="text-left">Texte aligné sur la gauche</div>
                                <div class="text-center">Texte centré</div>
                                <div class="text-right">Texte aligné sur la droite</div>

On peut également aligner différement le texte en version écran et en version mobile à l'aide du prefixe lg

Exemples

Texte centré en version mobile et aligné à gauche en version écran

Texte aligné sur la droite uniquement en version écran


                                <div class="text-center text-lg-left">Texte centré en version mobile et aligné à gauche en version écran</div>
                                <div class="text-lg-right">Texte aligné sur la droite uniquement en version écran</div>

Bordures

Les classes Bootstrap permettent d'ajouter des bordures (complètes ou non) à des éléments

Exemples d'ajout de bordures


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

Exemples d'arrondi de bordures


                                <div class="rounded"></div>
                                <div class="rounded-circle"></div>

Liste groupée

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros


                                <li class="list-group-item">Cras justo odio</li>
                                <li class="list-group-item">Dapibus ac facilisis in</li>
                                <li class="list-group-item">Morbi leo risus</li>
                                <li class="list-group-item">Porta ac consectetur ac</li>
                                <li class="list-group-item">Vestibulum at eros</li>

Boutons:

Bouton


<a href="#" class="btn">Text</a>

Bouton


<a href="#" class="btn-outline">Text</a>

Bouton


<a href="#" class="btn-outline-2">Text</a>

Plus de détails sur la documentation officielle

Les animations

Pour ajouter une animation, il faudra ajouter la class wow "nom_de_l'animation"

Voir les animations

Lorem ipsum


<div class="container">
    <div class="row">
        <div class="col-12 col-lg wow slideInLeft">
            <h3>Lorem ipsum</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="col-12 col-lg-4 wow tada">
            <img src="https://via.placeholder.com/400" alt="Exemple image">
        </div>
    </div>
    <div class="row">
         <div class="col-12 col-lg-4 wow rollIn">
            <img src="https://via.placeholder.com/400" alt="Exemple image">
        </div>
        <div class="col-12 col-lg wow slideInRight">
            <h3>Lorem ipsum</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

Pour plus de personnalisation, on peut retarder ou rallonger l'animation avec le code ci-dessous

data-wow-duration : Change le temps d'animation par défaut. (en seconde)
data-wow-delay : Pour retader l'animaion (en seconde)

wow shake avec 3s d'animation


<a href="#" class="btn wow shake" data-wow-duration="3s">Bouton</a>

wow flash avec retard de 2s


<a href="#" class="btn wow flash" data-wow-delay="2s">Bouton</a>

Collapse

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi corporis eligendi enim expedita facilis hic ipsam iusto maxime modi obcaecati officia optio, porro provident quo quos repellat similique, voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi consectetur dolorem enim error harum labore minima molestias nam necessitatibus nihil nisi perspiciatis quaerat, quam quibusdam quisquam reprehenderit similique sunt.