Conjonction (et/ou)
Sur cette page
Configurations de base
Le design peut être configuré en utilisant une liste ou un simple élément de bloc.
Avec en-têtes
Conception « Ou »
Phrase d'introduction :
-
En-tête A: Option 1 sur 2
Ceci est le contenu pour l'en-tête A
-
En-tête B: Option 2 sur 2
Ceci est le contenu pour l'en-tête B
Conception « Et »
Phrase d'introduction :
-
En-tête A
Voici le contenu pour la partie A
-
En-tête B
Voici le contenu pour la partie B
Visualiser le code
//Design « ou » avec élément de liste
<p>Phrase d'introduction :</p>
<ul class="cnjnctn-type-or">
<li class="cnjnctn-col">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 2</span></h5>
<p>Voici le contenu pour l'option A</p>
</li>
<li class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 2</span></h5>
<p>Voici le contenu pour l'option B</p>
</li>
</ul>
//Design « et » avec élément de liste
<p>Phrase d'introduction :</p>
<ul class="cnjnctn-type-and">
<li class="cnjnctn-col">
<h5>En-tête A</h5>
<p>Ceci est le contenu pour la partie A</p>
</li>
<li class="cnjnctn-col">
<h5>En-tête B<l/h5>
<p>Ceci est le contenu pour la partie B</p>
</li>
</ul>
//Design « ou » avec élément de bloc (par exemple, <div>)
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or">
<section class="cnjnctn-col">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 2</span></h5>
<p>Voici le contenu pour l'option A</p>
</section>
<section class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 2</span></h5>
<p>Voici le contenu pour l'option B</p>
</section>
</div>
//Design « et » avec élément de bloc
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-and">
<section class="cnjnctn-col">
<h5>En-tête A</h5>
<p>Voici le contenu pour la partie A</p>
</section>
<section class="cnjnctn-col">
<h5>En-tête B</h5>
<p>Voici le contenu pour la partie B</p>
</section>
</div>
Sans en-têtes
Conception « Ou »
Phrase d'introduction :
- Voici le contenu pour l'option A
- Voici le contenu pour l'option B
Conception « Et »
Phrase d'introduction :
- Voici le contenu pour la partie A
- Voici le contenu pour la partie B
Visualiser le code
//Design « ou » avec élément de liste
<p>Phrase d'introduction :</p>
<ul class="cnjnctn-type-or">
<li class="cnjnctn-col">
Voici le contenu pour l'option A
</li>
<li class="cnjnctn-col">
Voici le contenu pour l'option B
</li>
</ul>
//Design « et » avec élément de liste
<p>Phrase d'introduction :</p>
<ul class="cnjnctn-type-and">
<li class="cnjnctn-col">
Voici le contenu pour la partie A
</li>
<li class="cnjnctn-col">
Voici le contenu pour la partie A
</li>
</ul>
//Design « ou » avec élément de bloc (par exemple, <div>)
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or">
<div class="cnjnctn-col">
<p>Voici le contenu pour l'option A</p>
</div>
<div class="cnjnctn-col">
<p>Voici le contenu pour l'option B</p>
</div>
</div>
//Design « et » avec élément de bloc
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-and">
<div class="cnjnctn-col">
<p>Voici le contenu pour la partie A</p>
</div>
<div class="cnjnctn-col">
<p>Voici le contenu pour la partie B</p>
</div>
</div>
Conceptions adaptatives
Pour les exemples qui suivent, le code utilisera un élément de bloc pour simplifier. Cependant, ils peuvent également être codés en utilisant un élément de liste (tant que le contenu respecte toujours toutes les directives sur l'utilisation des listes).
L'utilisation de ces classes supplémentaires crée une conception côte à côte au-dessus d'une certaine résolution en pixels (suit les points de rupture réactifs de BOEW 4).
Le modèle par défaut (comme indiqué ci-dessus) est empilé sur toutes les résolutions et n'est jamais côte à côte.
Utilisez votre navigateur pour redimensionner la vue de la page et voir comment la conception réagit dans différentes résolutions.
Toujours côte à côte
Cette conception ne s'empile pas, quelle que soit la résolution.
Conception « Ou »
Phrase d'introduction :
En-tête A : Option 1 sur 2
Ceci est le contenu pour l'en-tête A
En-tête B : Option 2 sur 2
Ceci est le contenu pour l'en-tête B
Conception « Et »
Phrase d'introduction :
Header A
Ceci est le contenu pour l'en-tête A
Header B
Ceci est le contenu pour l'en-tête B
Visualiser le code
//Conception « Ou »
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or cnjnctn-xs">
<section class="cnjnctn-col">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</section>
<section class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête B</p>
</section>
</div>
//Conception « Et »
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-and cnjnctn-xs">
<section class="cnjnctn-col">
<h5>En-tête A</h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</section>
<section class="cnjnctn-col">
<h5>En-tête B<l/h5>
<p>Ceci est le contenu pour l'en-tête B</p>
</section>
</div>Côte à côte ≥ 768px
Cette conception s'empile sur 767px et en dessous.
Conception « Ou »
Phrase d'introduction :
En-tête A : Option 1 sur 2
Ceci est le contenu pour l'en-tête A
En-tête B : Option 2 sur 2
Ceci est le contenu pour l'en-tête B
Conception « Et »
Phrase d'introduction :
Header A
Ceci est le contenu pour l'en-tête A
Header B
Ceci est le contenu pour l'en-tête B
Visualiser le code
//Conception « Ou »
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or cnjnctn-sm">
<div class="cnjnctn-col">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête B</p>
</div>
</div>
//Conception « Et »
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-and cnjnctn-sm">
<div class="cnjnctn-col">
<h5>En-tête A</h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<l/h5>
<p>Ceci est le contenu pour l'en-tête B</p>
</div>
</div>Côte à côte ≥ 992px
Cette conception s'empile sur 991px et en dessous.
Conception « Ou »
Phrase d'introduction :
En-tête A : Option 1 sur 2
Ceci est le contenu pour l'en-tête A
En-tête B : Option 2 sur 2
Ceci est le contenu pour l'en-tête B
Conception « Et »
Phrase d'introduction :
Header A
Ceci est le contenu pour l'en-tête A
Header B
Ceci est le contenu pour l'en-tête B
Visualiser le code
//Conception « Ou »
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or cnjnctn-md">
<div class="cnjnctn-col">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête B</p>
</div>
</div>
//Conception « Et »
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-and cnjnctn-md">
<div class="cnjnctn-col">
<h5>En-tête A</h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<l/h5>
<p>Ceci est le contenu pour l'en-tête B</p>
</div>
</div>Côte à côte ≥ 1200px
Cette conception s'empile sur 1199px et en dessous.
Conception « Ou »
Phrase d'introduction :
En-tête A : Option 1 sur 2
Ceci est le contenu pour l'en-tête A
En-tête B : Option 2 sur 2
Ceci est le contenu pour l'en-tête B
Conception « Et »
Phrase d'introduction :
Header A
Ceci est le contenu pour l'en-tête A
Header B
Ceci est le contenu pour l'en-tête B
Visualiser le code
//Conception « Ou »
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête B</p>
</div>
</div>
//Conception « Et »
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-and cnjnctn-lg">
<div class="cnjnctn-col">
<h5>En-tête A</h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<l/h5>
<p>Ceci est le contenu pour l'en-tête B</p>
</div>
</div>Personnalisation
Pour les exemples qui suivent, les exemples utiliseront un élément de bloc et principalement la conception « ou » pour plus de simplicité. Cependant, ils peuvent également être codés en utilisant un élément de liste et en utilisant la conception « et ».
Largeurs de colonne personnalisées
Colonne réglée à 90 % de la largeur d'origine (l'exemple s'empile sur les appareils de taille moyenne)
Phrase d'introduction :
En-tête A : Option 1 sur 2
Ceci est le contenu pour l'en-tête A (à 90 % de la largeur par défaut cnjnctn-col-90)
En-tête B: Option 2 sur 2
Ceci est le contenu pour l'en-tête B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Colonne réglée à 80 % de la largeur d'origine (l'exemple s'empile sur les appareils de taille moyenne)
Phrase d'introduction :
En-tête A : Option 1 sur 2
Ceci est le contenu pour l'en-tête A (à 80 % de la largeur par défaut cnjnctn-col-80)
En-tête B: Option 2 sur 2
Ceci est le contenu pour l'en-tête B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Colonne réglée à 75 % de la largeur d'origine (l'exemple s'empile sur les appareils de taille moyenne)
Phrase d'introduction :
En-tête A : Option 1 sur 2
Ceci est le contenu pour l'en-tête A (à 75 % de la largeur par défaut cnjnctn-col-75)
En-tête B: Option 2 sur 2
Ceci est le contenu pour l'en-tête B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Colonne réglée à 70 % de la largeur d'origine (l'exemple s'empile sur les appareils de taille moyenne)
Phrase d'introduction :
En-tête A : Option 1 sur 2
Ceci est le contenu pour l'en-tête A (à 70 % de la largeur par défaut cnjnctn-col-70)
En-tête B: Option 2 sur 2
Ceci est le contenu pour l'en-tête B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Colonne réglée à 60 % de la largeur d'origine (l'exemple s'empile sur les appareils de taille moyenne)
Phrase d'introduction :
En-tête A : Option 1 sur 2
Ceci est le contenu pour l'en-tête A (à 60 % de la largeur par défaut cnjnctn-col-60)
En-tête B: Option 2 sur 2
Ceci est le contenu pour l'en-tête B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Colonne réglée à 50 % de la largeur d'origine (l'exemple s'empile sur les appareils de taille moyenne)
Phrase d'introduction :
En-tête A : Option 1 sur 2
Ceci est le contenu pour l'en-tête A (à 50 % de la largeur par défaut cnjnctn-col-50)
En-tête B: Option 2 sur 2
Ceci est le contenu pour l'en-tête B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Colonne réglée à 40 % de la largeur d'origine (l'exemple s'empile sur les appareils de taille moyenne)
Phrase d'introduction :
En-tête A : Option 1 sur 2
Ceci est le contenu pour l'en-tête A (à 40 % de la largeur par défaut cnjnctn-col-40)
En-tête B: Option 2 sur 2
Ceci est le contenu pour l'en-tête B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Colonne réglée à 30 % de la largeur d'origine (l'exemple s'empile sur les appareils de taille moyenne)
Phrase d'introduction :
En-tête A : Option 1 sur 2
Ceci est le contenu pour l'en-tête A (à 30 % de la largeur par défaut cnjnctn-col-30)
En-tête B: Option 2 sur 2
Ceci est le contenu pour l'en-tête B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Colonne réglée à 25 % de la largeur d'origine (l'exemple s'empile sur les appareils de taille moyenne)
Phrase d'introduction :
En-tête A : Option 1 sur 2
Ceci est le contenu pour l'en-tête A (à 25 % de la largeur par défaut cnjnctn-col-25)
En-tête B: Option 2 sur 2
Ceci est le contenu pour l'en-tête B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Colonne réglée à 20 % de la largeur d'origine (l'exemple s'empile sur les appareils de taille moyenne)
Phrase d'introduction :
En-tête A : Option 1 sur 2
Ceci est le contenu pour l'en-tête A (à 20 % de la largeur par défaut cnjnctn-col-20)
En-tête B: Option 2 sur 2
Ceci est le contenu pour l'en-tête B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Visualiser le code
//90 % de la largeur par défaut
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-90">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
//80 % de la largeur par défaut
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-80">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
//75 % de la largeur par défaut
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-75">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
//70 % de la largeur par défaut
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-70">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
//60 % de la largeur par défaut
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-60">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
//50 % de la largeur par défaut
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-50">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
//40 % de la largeur par défaut
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-40">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
//30 % de la largeur par défaut
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-30">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
//25 % de la largeur par défaut
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-25">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
//20 % de la largeur par défaut
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-20">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
</div>
</div>
Pas de bord gauche lorsqu'il est empilé
Configuration de base
Conception « Ou »
Phrase d'introduction :
Conception « Et »
Phrase d'introduction :
Visualiser le code
//Basic "or" design
<section class="panel panel-default">
...
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or brdr-0">
<div class="cnjnctn-col">
Voici le contenu pour l'option A
</div>
<div class="cnjnctn-col">
Voici le contenu pour l'option B
</div>
</div>
...
</section>
//Basic "and" design
<section class="panel panel-default">
...
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-and brdr-0">
<div class="cnjnctn-col">
Voici le contenu pour la partie A
</div>
<div class="cnjnctn-col">
Voici le contenu pour l'option B
</div>
</div>
</div>
...
</section>
Côte à côte ≥ 992px
Utilisez votre navigateur pour redimensionner la vue de la page et constater qu'il n'y a pas de bord gauche lorsqu'il est empilé.
Conception « Ou »
Phrase d'introduction :
- Voici le contenu pour l'option A
- Voici le contenu pour l'option B
Conception « Et »
Phrase d'introduction :
- Voici le contenu pour la partie A
- Voici le contenu pour l'option B
Visualiser le code
//Design « ou » côte à côte au-dessus de 991px
<section class="panel panel-default">
...
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or cnjnctn-md brdr-0">
<div class="cnjnctn-col">
Voici le contenu pour l'option A
</div>
<div class="cnjnctn-col">
Voici le contenu pour l'option B
</div>
</div>
...
</section>
//Design « et » côte à côte au-dessus de 991px
<section class="panel panel-default">
...
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-and cnjnctn-md brdr-0">
<div class="cnjnctn-col">
Voici le contenu pour la partie A
</div>
<div class="cnjnctn-col">
Voici le contenu pour l'option B
</div>
</div>
</div>
...
</section>
Conceptions flexibles
Colonnes multiples
Si vous avez besoin de plus de quatre options (colonnes), envisagez la conception par défaut toujours empilée.
Trois colonnes (l'exemple s'empile sur les petits appareils)
Phrase d'introduction :
En-tête A: Option 1 sur 3
Ceci est le contenu pour l'en-tête A
En-tête B: Option 2 sur 3
Ceci est le contenu pour l'en-tête B
En-tête C: Option 3 sur 3
Ceci est le contenu pour l'en-tête C
Quatre colonnes (l'exemple s'empile sur les appareils de taille moyenne)
Phrase d'introduction :
En-tête A: Option 1 sur 4
Ceci est le contenu pour l'en-tête A
En-tête B: Option 2 sur 4
Ceci est le contenu pour l'en-tête B
En-tête C: Option 3 sur 4
Ceci est le contenu pour l'en-tête C
En-tête D: Option 4 sur 4
Ceci est le contenu pour l'en-tête D
Visualiser le code
//Three columns (example stacks on small devices)
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or cnjnctn-md">
<div class="cnjnctn-col">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 3</span></h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 3</span></h5>
<p>Ceci est le contenu pour l'en-tête B</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête C<span class="wb-inv"> : Option 3 sur 3</span></h5>
<p>Ceci est le contenu pour l'en-tête C</p>
</div>
</div>
//Four columns (example stacks on medium devices)
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 4</span></h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 4</span></h5>
<p>Ceci est le contenu pour l'en-tête B</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête C<span class="wb-inv"> : Option 3 sur 4</span></h5>
<p>Ceci est le contenu pour l'en-tête C</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête D<span class="wb-inv"> : Option 4 sur 4</span></h5>
<p>Ceci est le contenu pour l'en-tête D</p>
</div>
</div>Conjonctions imbriquées
Pour les cas où l'un des points de décision peut avoir son propre ensemble de points de décision.
Un point de décision « ou » qui s'empile sur les petits appareils, imbriqué avec un point de décision « et » toujours empilé
Phrase d'introduction :
En-tête A : Option 1 sur 2
Ceci est le contenu pour l'en-tête A
En-tête B : Option 2 sur 2
Ceci est le contenu pour l'en-tête B
Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien.
Phrase d'introduction :
En-tête B.1
Ceci est le contenu pour l'en-tête B.1
En-tête B.2
Ceci est le contenu pour l'en-tête B.2
Visualiser le code
//Exemple de point de décision imbriqué
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-or cnjnctn-lg">
<div class="cnjnctn-col-80">
<h5>En-tête A<span class="wb-inv"> : Option 1 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête A</p>
</div>
<div class="cnjnctn-col">
<h5>En-tête B<lspan class="wb-inv"> : Option 2 sur 2</span></h5>
<p>Ceci est le contenu pour l'en-tête B</p>
<p>Nam fermentum cursus sodales. Mauris leo leo, congue et fringilla in, egestas eu sapien. </p>
<p>Phrase d'introduction :</p>
<div class="cnjnctn-type-and">
<div class="cnjnctn-col">
<h6>En-tête B.1</h6>
<p>Ceci est le contenu pour l'en-tête B.1</p>
</div>
<div class="cnjnctn-col">
<h6>En-tête B.2</h6>
<p>Ceci est le contenu pour l'en-tête B.2</p>
</div>
</div>
</div>
</div>
Détails de la page
- Date de modification :