Documentation PHPBoost 3

BBCode : insérer une liste

Table des matières

Liste de base
Liste numérotée
Imbrication
Personnalisations supplémentaires

Dans cet article nous allons voir comment créer des listes en langage BBCode.

Liste de base

Pour créer une liste il faut d'abord la déclarer. Pour cela il faut utiliser la balise

Code BBCODE :

[list]

.
Ensuite il faut déclarer chaque élément de la liste en utilisant [*].

Voilà un exemple de liste basique :

élément 1
élément 2
élément 3

dont le code source est :

Code BBCODE :

[list][*]élément 1
[*]élément 2
[*]élément 3[/list]

Liste numérotée

Pour faire une liste numérotée il faut passer l'argument ordered.

<ol style="list-style-type: decimal;" class="formatter-ol">
[*]Elément 1
[*]Elément 2
[*]Elément 3</ol>

Voici le code pour créer cette liste :

Code BBCODE :

[list=ordered style="list-style-type: decimal;"]
[*]Elément 1
[*]Elément 2
[*]Elément 3[/list]

Imbrication

Il est possible d'imbriquer les listes . Comme ceci :

Elément 1
Elément 2
- Sous liste 1
- Sous liste 2
Elément 3

Voici le code pour créer cette liste :

Code BBCODE :

[list][*]Elément 1
[*]Elément 2
[list][*]Sous liste 1
[*]Sous liste 2[/list]
[*]Elément 3[/list]

Personnalisations supplémentaires

Liste avec une puce carré

Voici la liste :

<ol style="list-style-type: square;" class="formatter-ol">
[*]Elément 1
[*]Elément 2</ol>

Voici le code pour créer cette liste :

Code BBCODE :

[list=ordered style="list-style-type: square;"]
[*]Elément 1
[*]Elément 2[/list]

Liste avec une puce ronde

Voici la liste :

<ol style="list-style-type: circle;" class="formatter-ol">
[*]Elément 1
[*]Elément 2</ol>

Voici le code pour créer cette liste :

Code BBCODE :

[list=ordered style="list-style-type: circle;"]
[*]Elément 1
[*]Elément 2[/list]

Liste avec une puce ronde pleine

Voici la liste :

<ol style="list-style-type: disc;" class="formatter-ol">
[*]Elément 1
[*]Elément 2</ol>

Voici le code pour créer cette liste :

Code BBCODE :

[list=ordered style="list-style-type: disc;"]
[*]Elément 1
[*]Elément 2[/list]

Liste à chiffre Romain

Il est possible de donner un style supplémentaire à chaque liste.
Pour cela il suffit de mettre du CSS.

Voici un exemple avec des chiffres Romain :

<ol style="list-style-type: upper-roman;" class="formatter-ol">
[*]Elément 1
[*]Elément 2</ol>

Voici le code pour créer cette liste :

Code BBCODE :

[list=ordered style="list-style-type: upper-roman;"]
[*]Elément 1
[*]Elément 2[/list]

Liste alphabétisée en minuscule

Voici la liste :

<ol style="list-style-type: lower-alpha;" class="formatter-ol">
[*]Elément 1
[*]Elément 2</ol>

Voici le code pour créer cette liste :

Code BBCODE :

[list=ordered style="list-style-type: lower-alpha;"]
[*]Elément 1
[*]Elément 2[/list]

Liste alphabétisée en majuscule

Voici la liste :

<ol style="list-style-type: upper-alpha;" class="formatter-ol">
[*]Elément 1
[*]Elément 2</ol>

Voici le code pour créer cette liste :

Code BBCODE :

[list=ordered style="list-style-type: upper-alpha;"]
[*]Elément 1
[*]Elément 2[/list]

Vous en voulez encore plus ??

Retrouverez la plupart des propriétés CSS disponibles pour les listes dans ce récapitulatif du Site du Zér0 : Propriétés des listes Et bien plus encore ...

Source - ben.popeye