434 avenue des entrepreneurs 83560 VINON SUR VERDON VINON SUR VERDON
Tél : 06 99 43 82 13

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!

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!

Exemple image

<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:

1
2
3

Exemple de 6 colones:

1
2
3
4
5
6

Exemple de 12 colones:

1
2
3
4
5
6
7
8
9
10
11
12

<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-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
col-6 col-lg-3
col-6 col-lg-3
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.

En savoir plus

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.

En savoir plus

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.

En savoir plus

                                    <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>
                    



Les animations

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

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!

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!

Exemple image
Exemple image

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!

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">
    <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.

Image 1

<button class="btn oldcollapse">Texte</button>
<div class="oldcollapse-content">
    Le contenu que je veux faire apparaître
</div>
                        




Cards:

Titre

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

Voir plus
Titre

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

Voir plus
Titre

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

Voir plus

<div class="container">
    <div class="row">
        <div class="col-12 col-lg">
            <div class="card">
                <img class="card-img-top" src="lien_image.png" alt="">
                <div class="card-body">
                    <div class="card-title">Titre</div>
                    <p class="card-text">Description.</p>
                    <a href="#" class="btn btn-primary">Voir plus</a>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg">
            <div class="card">
                <img class="card-img-top" src="lien_image.png" alt="">
                <div class="card-body">
                    <div class="card-title">Titre</div>
                    <p class="card-text">Description.</p>
                    <a href="#" class="btn btn-primary">Voir plus</a>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg">
            <div class="card">
                <img class="card-img-top" src="lien_image.png" alt="">
                <div class="card-body">
                    <div class="card-title">Titre</div>
                    <p class="card-text">Description.</p>
                    <a href="#" class="btn btn-primary">Voir plus</a>
                </div>
            </div>
        </div>
    </div>
</div>
                    
Entête
Titre

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

Voir plus

                        <div class="class="card-body>
                            <h5 class="card-title">Titre</h5>
                            <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="btn btn-primary">Voir plus</a>
                        </div>
                                


Cards avec ombre au survol:


<div class="container">
    <div class="row">
        <div class="col-12 col-lg">
            <div class="card shadow">
                <img class="card-img-top" src="lien_image.png" alt="">
                <div class="card-body">
                    <div class="card-title">Titre</div>
                    <p class="card-text">Description.</p>
                    <a href="#" class="btn btn-primary">Voir plus</a>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg">
            <div class="card shadow">
                <img class="card-img-top" src="lien_image.png alt=""">
                <div class="card-body">
                    <div class="card-title">Titre</div>
                    <p class="card-text">Description.</p>
                    <a href="#" class="btn btn-primary">Voir plus</a>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg">
            <div class="card shadow">
                <img class="card-img-top" src="lien_image.png alt=""">
                <div class="card-body">
                    <div class="card-title">Titre</div>
                    <p class="card-text">Description.</p>
                    <a href="#" class="btn btn-primary">Voir plus</a>
                </div>
            </div>
        </div>
    </div>
</div>
                    


Panels:

panel

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


Panels avec ombre au survol:

Panel avec ombre
Panel avec ombre
Panel avec ombre

<div class="panel shadow">...</div>
                    


Ombres personnalisées:

box-shadow-1
box-shadow-2
box-shadow-3






Effet de zoom

img25



<div class="row">
    <div class="col-12 col-lg">
        <div class="overflow">
            <img src="..." class="img-fluid effect-zoom" alt="">
        </div>
    </div>
</div>
                                

Effet Zoé

img25

Effet Zoe

Cet effet fonctionne en utilisant la classe "effect-zoe".


<div class="figure">
    <div class="effect-zoe">
        <img src="..." class="img-fluid" alt="img25">
        <div class="figcaption">
            <h2>Effet Zoe</h2>
            <p class="description">Cet effet fonctionne en utilisant la classe "effect-zoe".</p>
        </div>
    </div>
</div>
                    

Effet Oscar

img26

Effet Oscar

Cet effet fonctionne en utilisant la classe "effect-oscar".

Voir

<div class="figure">
    <div class="effect-oscar">
        <img src="..." class="img-fluid" alt="img25">
        <div class="figcaption">
            <h2>Effet Zoe</h2>
            <p class="description">Cet effet fonctionne en utilisant la classe "effect-oscar".</p>
        </div>
    </div>
</div>
                    

Effet Ruby

img27

Glowing Ruby

Cet effet fonctionne en utilisant la classe "effect-ruby"..

View more

<div class="figure">
    <div class="effect-ruby">
        <img src="..." class="img-fluid" alt="img25">
        <div class="figcaption">
            <h2>Effet Zoe</h2>
            <p class="description">Cet effet fonctionne en utilisant la classe "effect-ruby".</p>
        </div>
    </div>
</div>
                    

Effet ShowCase

img28

Effet showcase

Cet effet fonctionne en utilisant la classe "effect-showcase"..

View more

<div class="figure">
    <div class="effect-showcase">
        <img src="..." class="img-fluid" alt="img25">
        <div class="figcaption">
            <h2>Effet Zoe</h2>
            <p class="description">Cet effet fonctionne en utilisant la classe "effect-zoe".</p>
        </div>
    </div>
</div>
                    


traduction italien    traduction anglais

"Frais de port offert sur toute la Région PACA (hors Paca, nous consulter)"

 

Contactez-nous

Les portails du verdon

434 avenue des entrepreneurs
83560 VINON SUR VERDON

Tél :

Plan d'accès
Mentions légales et confidentialité Sommaire
N° SIREN : 433861069