Energies Toitures - Siège social 8 rue de La Butte Chaumont 21240 TALANT - -
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>
<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>
<div class="container">...</div>
<div class="container-fluid">...</div>
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-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>
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.
<div class="container">
<div class="row">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
...
</div>
</div>
La largeur de la colone peut être définie manuellement en y ajouter la taille: col-[1-12] (avec un maximum de 12).
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 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 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
)
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>
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
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 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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna.
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.
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>
Les classes Bootstrap permettent d'aligner facilement le texte à l'aide des classes
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
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>
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>
<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>
<a href="#" class="btn">Text</a>
<a href="#" class="btn-outline">Text</a>
<a href="#" class="btn-outline-2">Text</a>
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
<a href="#" class="btn wow shake" data-wow-duration="3s">Bouton</a>
<a href="#" class="btn wow flash" data-wow-delay="2s">Bouton</a>
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.
<button class="btn oldcollapse">Texte</button>
<div class="oldcollapse-content">
Le contenu que je veux faire apparaître
</div>
Some quick example text to build on the card title and make up the bulk of the card's content.
Voir plusSome quick example text to build on the card title and make up the bulk of the card's content.
Voir plusSome 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>
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>
Some quick example text to build on the card title and make up the bulk of the card's content.
Voir plusSome quick example text to build on the card title and make up the bulk of the card's content.
Voir plusSome 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 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>
<div class="panel">...</div>
<div class="panel shadow">...</div>
<!-- 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>
<div class="row">
<div class="col-12 col-lg">
<div class="overflow">
<img src="..." class="img-fluid effect-zoom" alt="">
</div>
</div>
</div>
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>
<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>
<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>
<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>
Energies Toitures - Siège social 8 rue de La Butte Chaumont 21240 TALANT - -