• Go to main content
Top of the page

Thème Paris.fr
Logo de Ville de Paris – Aller vers l’accueil

Thème Paris.fr

    • Quick start
    • Configuration
    • Versions
    • Mettre à jour le thème
    • Grille
    • Navigation
    • Couleurs
    • Typographie
    • Iconographie
  • Composants
    • Pages
    • Code
    • Mail
  • Support
  • FAQ
  • Search
    • Connect
Thème Paris.fr
    • Quick start
    • Configuration
    • Versions
    • Mettre à jour le thème
    • Grille
    • Navigation
    • Couleurs
    • Typographie
    • Iconographie
  • Composants
    • Pages
    • Code
    • Mail
  • Support

Thème Paris.fr

  1. Home
  2. Styles
  3. Grille
Chargement...

@cContainer

Doc Bootstrap @cContainer [New window]

Exemple

Contenu du container

Contenu du container "fluid"

<@cContainer >
    <@cBlock class='white-light-bg-color p-sm'>
        <@cTitle level='3' class="main-info-color">Contenu du container</@cTitle>
    </@cBlock>
</@cContainer>
<@cContainer type='fluid'>
    <@cBlock class='white-light-bg-color p-sm'>
        <@cTitle level='3' class="main-info-color">Contenu du container "fluid"</@cTitle>
    </@cBlock>
</@cContainer>

<div class="container">
<div class="white-light-bg-color p-sm">
<h3 class="main-info-color">
Contenu du container</h3>
</div>
</div>
<div class="container-fluid">
<div class="white-light-bg-color p-sm">
<h3 class="main-info-color">
Contenu du container "fluid"</h3>
</div>
</div>

Paramètres

Voici la liste des différents paramètres de la macro :

  • id (string) optionnal - identifiant unique du container
  • class (string) optionnal - classe(s) css du container
  • type (string) optionnal - le type de container, en ajoutant la valeur '-fluid' il prend toute la largeur
  • params (string) optionnal - permet d'ajouter des paramètres HTML au container

@cRow

Exemple

Contenu en colonne

<@cRow>
    <!-- Contenu en colonne -->
        <@cCol>
            <@cText>Contenu en colonne</@cText>
        </@cCol>
</@cRow>

<div class="row ">
<!-- Contenu en colonne -->
<div class="col ">
<p>
Contenu en colonne</p>
</div>
</div>

Paramètres

Voici la liste des différents paramètres de la macro :

  • id (string) required - identifiant unique de la ligne
  • class (string) optionnal - classe(s) css de la ligne
  • params (string) optionnal - permet d'ajouter des paramètres HTML à la ligne

@cCol

Exemple

Colonne A
Colonne B

<@cRow>
    <@cCol>
            Colonne A
        </@cCol>
        <@cCol>
            Colonne B
        </@cCol>
</@cRow>

<div class="row ">
<div class="col ">
Colonne A
</div>
<div class="col ">
Colonne B
</div>
</div>

Paramètres

Voici la liste des différents paramètres de la macro :

  • id (string) required - identifiant unique de la colonne
  • class (string) optionnal - classe(s) css de la colonne
  • cols (string) optionnal - Si non vide ajoute la classe "col", que vous pouvez compléter avec l'attribut "class" ci-dessous. Si vous ajoutez une valeur, attention le préfix de classe 'col-' est présent dans la macro. Vous pouvez ajouter les "sm-XX", "md-XX", "lg-XX", "xl-XX" ou "XX" est toute valeur permise par Bootstrap. On peut ajouter d'autres paramètres BS séparés par un espace.
  • defa@chListt (string) optionnal - Si col est vide, ajoute le préfix valeur de "defa@chListt", par défaut -col- qui peut être complété avec l'attribut "class" ci-dessous.
  • params (string) optionnal - permet d'ajouter des paramètres HTML à la colonne

@cHeader

Exemple

Header v1

Header v2

<@cHeader title='Header v1'/>
<@cHeader>
    <@cTitle>Header v2</@cTitle>
</@cHeader>

<header >
<h2>
Header v1</h2>
</header>
<header >
<h3>
Header
<small>
v2</small>
</h3>
</header>

Paramètres

Voici la liste des différents paramètres de la macro :

  • id (string) optionnal - identifiant unique du header
  • class (string) optionnal - classe(s) css du header
  • title (string) optionnal - titre compris dans le header
  • titleLevel (number) required - - taille du titre du header
  • titleUrl (string) optionnal - url du titre, qui sera sous forme de lien si ce paramètre a une valeur
  • titleUrlClass (string) optionnal - classe(s) css sur le titre sous forme de lien
  • params (string) optionnal - permet d'ajouter des paramètres HTML au header

@cFooter

Exemple

Footer v1

Footer v2

<@cFooter title='Footer v1'/>
<@cFooter>
    <@cTitle>Footer v2</@cTitle>
</@cFooter>

<footer >
<h2>
Footer v1</h2>
</footer>
<footer >
<h3>
Footer
<small>
v2</small>
</h3>
</footer>

Paramètres

Voici la liste des différents paramètres de la macro :

  • id (string) optionnal - identifiant unique du footer
  • class (string) optionnal - classe(s) css du footer
  • title (string) optionnal - titre compris dans le footer
  • params (string) optionnal - permet d'ajouter des paramètres HTML au footer

Tag "footer" html5 utilisable avec une balise section ou article.

@cSection

Exemple

Contenu de la Section

<@cSection>
    <@cTitle level=2 class='border border-dark p-24'>Contenu de la Section</@cTitle>
</@cSection>

<section>
<h2 class="border border-dark p-24">
Contenu de la Section</h2>
</section>

Paramètres

Voici la liste des différents paramètres de la macro :

  • id (string) optionnal - identifiant unique de la section
  • class (string) optionnal - classe(s) css de la section
  • type (string) required - par défaut "section" - élément HTML de niveau block de structure section
  • params (string) optionnal - permet d'ajouter des paramètres HTML à la section

Aide

Wrapper "Section", tag html5

@cBlock

Exemple

Contenu de la Section

<@cBlock>
    ...
</@cBlock>

<div>
<h2 class="border border-dark p-sm">
Contenu de la Section</h2>
</div>

Paramètres

Voici la liste des différents paramètres de la macro :

  • id (string) optionnal - identifiant unique du bloc
  • class (string) optionnal - classe(s) css du bloc
  • type (string) required - par défaut "div" - élément HTML de niveau block
  • params (string) optionnal - permet d'ajouter des paramètres HTML au bloc

Aide

Wrapper "Div"

Go to the site Paris.fr
Thème Paris.fr
  • Paris.fr [New window]
  • site map
  • Contact [New window]
  • Condition générales d'utilisation [New window]
  • Politique de gestion des données à caractère personnel [New window]
  • Politique de gestion des cookies [New window]
Icon Nef Icon Burger Icon Close Icon Arrow Double Right Icon External Link Icon Arrow Left Icon Arrow Right Icon Arrow Up Icon Arrow Down Icon Home Icon User Icon Plus Icon Agenda Icon Trash Icon Upload Icon Arrow Download Icon Off Icon Dash Icon Disk Icon Search Icon Shield Icon Eye Icon Eye Off Icon Refresh Icon Overview Icon Edit Icon Edit Profile Icon Edit Document Icon Archive Icon Mail Icon Like Icon Settings Icon Filter Icon Check Icon Check Circle Icon Exclamation Circle Icon Exclamation Icon Stop Circle Icon File Text Icon File Euro Icon File Image Icon Help Icon Pin Icon Play Icon Volume Icon Clock Icon Layout Icon Desk Icon Bell Icon Flag FR Icon Flag EN Icon France Connect Icon Facebook Icon Instagram Icon Twitter Icon X Icon BlueSky Icon Linkedin