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>
                    

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

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:

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

Les tailles d'écrans:

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

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:

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

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

                                <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

                                <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

                                <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

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

                                    <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

                                    <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

                                <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

                                <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

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

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

Liste groupée

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

Les animations

Animations effet d'entrée :

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

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

Animation sur les chiffres :

Pour faire une animation ou le chiffre fait un compte à chaque fois qu'il apparaît à l'écran, utilisez le code ci-dessous :

<div id="section_counter_count" class="container">
<h3><span"><strong><span class="counter-count">17</span></strong> </span></h3>
<p><span">Lorem ipsum </span></p>
</div>
                                

Animation avant/après :

Pour faire une animation avec deux images et un avant/après, utiliser le code ci-dessous :

Animation slider horizontal :

Pour faire un slider horizontal, utiliser le code ci-dessous :

Les flèches du slider sont optionnelles, elles peuvent être retirées si besoin

L'élément card-hover permet de faire l'effet hover quand on passe dessus la carte, il peut être réutilisé séparément du slider.

L'attribut data-argument permet de modifier la vitesse du slider au clic sur les flèches, par défaut 200 s'il n'est pas renseigné

Les   dans les spans left and right arrow sont importantes, si elles ne sont pas présentes, les flèches ne s'afficheront pas.

Carousel infini :

Pour faire un carousel infini, utiliser le code ci-dessous :

Effet parallax

 <div class="inverse parallax" style="--bg-image: url('path-to-image'); --bg-height: 200px;">
 </div>
                                

--bg-image est là pour définir l'url de l'image de fond et --bg-height est la hauteur souhaitée (par défaut si non renseigné 200px).

Effet de scroll à droite ou à gauche au scroll vers le bas :

 <div id="sectionLeftRightScroll" class="sectionLeftRightScroll" style="height: 200px; width:50%">
      <div class="moveLeftRightScroll"
                                        data-move-direction="right"
                                        data-move-speed="6"
                                        style="--bg-image: url('/images/pagetesttexte.jpg')">
      </div>
 </div>
                                

--bg-image est là pour définir l'url de l'image.
data-move-direction est là pour définir la direction du scroll (right ou left), par défaut : right.
data-move-speed est là pour définir la vitesse du scroll, plus le chiffre est grand plus le scroll est lent, par défaut : 5.

Effet de bandeau tournant à l'infini

                                    <div class="scrolling-banner pause-on-hover ready" style="--duration: 10s --direction: right;">
                                        <div class="scrolling-track">

                                            <div class="scrolling-item">💡 Carte 1</div>
                                            <div class="scrolling-item">🖼️ Image 2</div>
                                            <div class="scrolling-item">✍️ Texte 3</div>
                                            <div class="scrolling-item">🎨 Carte 4</div>
                                            <div class="scrolling-item">🌟 Élément 5</div>
                                        </div>
                                    </div>
                                

--duration est une variable permettant de choisir la vitesse du bandeau réaliser en secondes. optionnel
--direction est une variable qui prend pour valeur soit left soit right elle permet de choisir le sens où va le bandeau. optionnel, Elle est de base en left
pause-on-hover permet quand l'utilisateur à la souris sur le bandeau que le bandeau s'arrète. optionnel
Dans le div du scrolling-item vous pouvez mettre n'importe quel composant.

Collapse

Cards:

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

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

Cards avec texte et animation au survol:

Panels:

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

Panels avec ombre au survol:

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

Ombres personnalisées:

Modal:

                    <!-- Button pour faire apparaitre la modal -->
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">
                    Voir modal
                    </button>

                    <!-- Modal -->
                    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                Le contenu à afficher....
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>