Mise en page
Sur cette page :
Flexbox
Exemple d'utilisation de la classe .d-flex
Il s'agit d'un conteneur flexible avec la classe
.d-flex. Ses enfants sont alignés en ligne par défaut.
Vous pouvez ajouter plusieurs enfants au conteneur flexible pour les aligner horizontalement.
Exemple de code
<div class="well d-flex">
<div class="child">
Il s'agit d'un conteneur flexible avec la classe .d-flex. Ses enfants sont alignés en ligne par défaut.
</div>
<div class="child">
Vous pouvez ajouter plusieurs enfants au conteneur flexible pour les aligner horizontalement.
</div>
</div>Exemple d'utilisation de la classe .flex-column
Il s'agit d'un conteneur flexible avec les classes
.d-flex et .flex-column.
Ses enfants sont alignés dans une direction de colonne. Chaque enfant occupe la largeur totale du conteneur.
Vous pouvez ajouter plusieurs enfants au conteneur flexible avec
.flex-column pour les aligner verticalement.
Exemple de code
<div class="well d-flex flex-column">
<div class="child">
Il s'agit d'un conteneur flexible avec les classes .d-flex et .flex-column.
Ses enfants sont alignés dans une direction de colonne. Chaque enfant occupe la largeur totale du conteneur.
</div>
<div class="child">
Vous pouvez ajouter plusieurs enfants au conteneur flexible avec .flex-column pour les aligner verticalement.
</div>
</div>Exemple de fonctionnement de la classe .align-items-center
Il s'agit d'un conteneur flexible avec les classes
.d-flex et .align-items-center.
Ses enfants sont alignés verticalement au centre.
Exemple de code
<div class="well d-flex align-items-center">
<div class="child">
Il s'agit d'un conteneur flexible avec les classes .d-flex et .align-items-center.
Ses enfants sont alignés verticalement au centre.
</div>
</div>Exemple de fonctionnement de la classe .align-self-center
Il s'agit d'un conteneur flexible avec la classe
.d-flex.
Le premier enfant (.align-self-center) est aligné verticalement au centre à l'intérieur du conteneur flexible.
Le deuxième enfant n'est pas aligné et suit l'alignement par défaut.
Exemple de code
<div class="well d-flex">
<div class="child align-self-center">
Il s'agit d'un conteneur flexible avec la classe .d-flex.
Le premier enfant (.align-self-center) est aligné verticalement au centre à l'intérieur du conteneur flexible.
</div>
<div class="child">
Le deuxième enfant n'est pas aligné et suit l'alignement par défaut.
</div>
</div>Exemple de fonctionnement de la classe .align-self-end
Il s'agit d'un conteneur flexible avec la classe
.d-flex.
Le premier enfant (.align-self-end) est aligné verticalement à l'extrémité à l'intérieur du conteneur flexible.
Le deuxième enfant n'est pas aligné et suit l'alignement par défaut.
Exemple de code
<div class="well d-flex">
<div class="child align-self-end">
Il s'agit d'un conteneur flexible avec la classe .d-flex.
Le premier enfant (.align-self-end) est aligné verticalement à l'extrémité à l'intérieur du conteneur flexible.
</div>
<div class="child">
Le deuxième enfant n'est pas aligné et suit l'alignement par défaut.
</div>
</div>Grille CSS
Exemple de fonctionnement de la classe [class*=col-]
Cet élément a la classe
col-6. Il a un padding à gauche et à droite de 0.
Exemple de code
<div class="well">
<div class="row">
<div class="col-6">
Cet élément a la classe col-6. Il a un padding à gauche et à droite de 0.
</div>
</div>
</div>Exemple de fonctionnement de la classe Bootstrap .row
Cet élément est à l'intérieur d'une rangée de grille Bootstrap avec la classe
.row.
Il contient et efface les flottants de vos colonnes.
Ceci est une autre colonne avec la classe
.col-md-6.
Exemple de code
<div class="well">
<div class="row">
<div class="col-md-6">
Cet élément est à l'intérieur d'une rangée de grille Bootstrap avec la classe .row.
Il contient et efface les flottants de vos colonnes.
</div>
<div class="col-md-6">
Ceci est une autre colonne avec la classe .col-md-6.
</div>
</div>
</div>GCWeb Override - Exemple de fonctionnement de la classe .brdr-tp .row
Colonne 1
Colonne 2
Colonne 3
Exemple de code
<div class="well brdr-tp">
<div class="row">
<div class="col-md-4">Colonne 1</div>
<div class="col-md-4">Colonne 2</div>
<div class="col-md-4">Colonne 3</div>
</div>
</div>GCWeb Override - Exemple de fonctionnement de la classe .pagedetails
Ceci est une rangée à l'intérieur d'une division avec la classe .pagedetails.
La rangée contient deux colonnes, chacune occupant 50% de la largeur du conteneur sur les petits écrans (sm).
Les colonnes ont un padding à gauche et à droite en raison de la classe [class*=col-].
Ceci est la deuxième colonne de la rangée.
La classe de la rangée ajoute une marge négative aux côtés gauche et droit pour contrer le padding appliqué aux colonnes.
Résumé des détails de la page
Ceci est un élément détails à l'intérieur d'une division avec la classe .pagedetails.
Il a un padding de 2em en haut et en bas.
La classe .row est utilisée pour la compatibilité ascendante avec GCWeb 4.0.26 et moins.
L'élément details à l'intérieur de la classe .row a des marges appliquées.
Le premier élément de la classe .row a une marge supérieure, affectant le lien "Signaler un problème".
Exemple de code
<div class="well pagedetails">
<div class="row">
<div class="col-sm-6">
<p>Ceci est une rangée à l'intérieur d'une division avec la classe .pagedetails.</p>
<p>La rangée contient deux colonnes, chacune occupant 50% de la largeur du conteneur sur les petits écrans (sm).</p>
<p>Les colonnes ont un padding à gauche et à droite en raison de la classe [class*=col-].</p>
</div>
<div class="col-sm-6">
<p>Ceci est la deuxième colonne de la rangée.</p>
<p>La classe de la rangée ajoute une marge négative aux côtés gauche et droit pour contrer le padding appliqué aux colonnes.</p>
</div>
</div>
<details>
<summary>Résumé des détails de la page</summary>
<p>Ceci est un élément détails à l'intérieur d'une division avec la classe .pagedetails.</p>
<p>Il a un padding de 2em en haut et en bas.</p>
<p>La classe .row est utilisée pour la compatibilité ascendante avec GCWeb 4.0.26 et moins.</p>
<p>L'élément details à l'intérieur de la classe .row a des marges appliquées.</p>
<p>Le premier élément de la classe .row a une marge supérieure, affectant le lien "Signaler un problème".</p>
</details>
</div>Bootstrap .row-no-gutters Exemple de fonctionnement de la classe
La classe .row-no-gutters est appliquée à la rangée, ce qui supprime les espaces (marges) entre les colonnes à l'intérieur de la rangée.
Colonne 1
Colonne 2
Colonne 3
Exemple de code
<div class="container">
<div class="row row-no-gutters">
<div class="col-4">
<div class="content-box">
Colonne 1
</div>
</div>
<div class="col-4">
<div class="content-box">
Colonne 2
</div>
</div>
<div class="col-4">
<div class="content-box">
Colonne 3
</div>
</div>
</div>
</div>Bootstrap [class*=col-] Exemple de fonctionnement de la classe avec pas de marges
Dans ces exemples, les classes Bootstrap `[class*=col-]` sont utilisées dans différents scénarios : sans marges, avec les marges par défaut, dans un formulaire et dans un tableau. Ces classes permettent de créer des mises en page adaptatives avec des colonnes de grille et de personnaliser l'espacement entre les colonnes.
Colonne 1
Colonne 2
Colonne 3
Exemple de code
<div class="container">
<div class="row row-no-gutters">
<div class="col-4">
<div class="content-box">
Colonne 1
</div>
</div>
<div class="col-4">
<div class="content-box">
Colonne 2
</div>
</div>
<div class="col-4">
<div class="content-box">
Colonne 3
</div>
</div>
</div>
</div>Bootstrap [class*=col-] Exemple de fonctionnement de la classe avec marges par défaut
Colonne 1
Colonne 2
Colonne 3
Exemple de code
<div class="container">
<div class="row">
<div class="col-4">
<div class="content-box">
Colonne 1
</div>
</div>
<div class="col-4">
<div class="content-box">
Colonne 2
</div>
</div>
<div class="col-4">
<div class="content-box">
Colonne 3
</div>
</div>
</div>
</div>Bootstrap [class*=col-] Exemple de fonctionnement de la classe dans un formulaire
Exemple de code
<div class="container">
<form>
<div class="row">
<div class="col-6">
<label for="name">Nom :</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="col-6">
<label for="email">Email :</label>
<input type="email" id="email" name="email" class="form-control">
</div>
</div>
<div class="row">
<div class="col-12">
<label for="message">Message :</label>
<textarea id="message" name="message" class="form-control" rows="4"></textarea>
</div>
</div>
</form>
</div>Bootstrap [class*=col-] Exemple de fonctionnement de la classe dans un tableau
| Nom | Âge | Profession |
|---|---|---|
| John Doe | 30 | Ingénieur |
| Jane Smith | 25 | Docteur |
| Michael Johnson | 35 | Enseignant |
Exemple de code
<div class="container">
<table class="table">
<thead>
<tr>
<th class="col-4">Nom</th>
<th class="col-4">Âge</th>
<th class="col-4">Profession</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-4">John Doe</td>
<td class="col-4">30</td>
<td class="col-4">Ingénieur</td>
</tr>
<tr>
<td class="col-4">Jane Smith</td>
<td class="col-4">25</td>
<td class="col-4">Docteur</td>
</tr>
<tr>
<td class="col-4">Michael Johnson</td>
<td class="col-4">35</td>
<td class="col-4">Enseignant</td>
</tr>
</tbody>
</table>
</div>Bootstrap Grille de colonnes avec largeur automatique en fonction du contenu col-xs-auto col-sm-auto col-md-auto col-lg-auto
Les colonnes avec les classes .col-xs-auto, .col-sm-auto, .col-md-auto et .col-lg-auto ajusteront automatiquement leur largeur en fonction du contenu qu'elles contiennent. Cela garantit que le contenu n'est pas tronqué, et les colonnes occuperont seulement l'espace nécessaire pour accueillir le contenu.
Ceci est une colonne avec une largeur automatique en fonction du contenu.
Elle ajustera sa largeur pour s'adapter au contenu à l'intérieur.
Ceci est une autre colonne avec une largeur automatique en fonction du contenu.
Le contenu à l'intérieur déterminera sa largeur dynamiquement.
Exemple de code
<div class="well">
<div class="row">
<div class="col-xs-auto col-sm-auto col-md-auto col-lg-auto">
<div class="content-box">
Ceci est une colonne avec une largeur automatique en fonction du contenu.
Elle ajustera sa largeur pour s'adapter au contenu à l'intérieur.
</div>
</div>
<div class="col-xs-auto col-sm-auto col-md-auto col-lg-auto">
<div class="content-box">
Ceci est une autre colonne avec une largeur automatique en fonction du contenu.
Le contenu à l'intérieur déterminera sa largeur dynamiquement.
</div>
</div>
</div>
</div>col-me-push-3 Exemple de fonctionnement de la classe (avec direction RTL)
Il s'agit d'une colonne qui occupe 6 unités (50 %) de la largeur dans sa position normale, mais avec la classe
col-md-push-3, elle est poussée de 3 unités vers la droite, et sa position effective sera après les 3 premières unités.Exemple de code
<div class="wb-outer-container" dir="rtl">
<div class="wb-inner-container">
<div class="col-md-6 col-md-push-3">
<div class="content-box">Il s'agit d'une colonne qui occupe 6 unités (50 %) de la largeur dans sa position normale, mais avec la classe <code>col-md-push-3</code>, elle est poussée de 3 unités vers la droite, et sa position effective sera après les 3 premières unités. </div>
</div>
</div>
</div><div class="clearfix"></div>
[class*=col-] .well.header-rwd[class*=pstn-] Exemple de fonctionnement de la classe
La classe
header-rwd héritera de la largeur du conteneur parent grâce à la règle CSS [class*=col-] .well.header-rwd[class*=pstn-].
Exemple de code
<div class="well">
<div class="row">
<div class="col-md-6">
<div class="well header-rwd pstn-example">
La classe <code>header-rwd</code> héritera de la largeur du conteneur parent
grâce à la règle CSS <code>[class*=col-] .well.header-rwd[class*=pstn-]</code>.
</div>
</div>
</div>
</div>Infostripe GCWeb avec les classes .col-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus nibh, finibus ut sagittis lacinia, consectetur sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus et lectus at turpis tristique pretium. Aenean vel massa eu neque consequat dictum. Integer elit ante, egestas non eros non, consectetur posuere justo. Nam vel sollicitudin nisl, et imperdiet mauris. Quisque scelerisque tincidunt nibh, sed bibendum mauris laoreet vel. In hac habitasse platea dictumst.
Exemple de code
<div class="well"><div class="infostripe col-md-8 col-sm-6 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus nibh, finibus ut sagittis lacinia, consectetur sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus et lectus at turpis tristique pretium. Aenean vel massa eu neque consequat dictum. Integer elit ante, egestas non eros non, consectetur posuere justo. Nam vel sollicitudin nisl, et imperdiet mauris. Quisque scelerisque tincidunt nibh, sed bibendum mauris laoreet vel. In hac habitasse platea dictumst.</p>
</div></div>Ligne de base de la grille (conteneurs)
Ligne de base GCWeb
Veuillez noter que le mixin `.container-fixed` est utilisé pour appliquer le style approprié au conteneur de largeur fixe.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Exemple de code
<div class="well"><div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div></div>Exemple de code
<main><div class="container-fluid">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div></main>Conteneur de largeur fixe GCWeb
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Exemple de code
<div class="well"><div class="container-fixed">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div></div>Détails de la page
- Date de modification :