• Go to main content
Home
Thème Paris.fr

Thème Paris.fr

    • Quick start
    • Configurer
    • Versions
    • Mettre à jour le thème
    • Support
    • Grille
    • Ombres
    • Navigation
    • Couleurs
    • Typographie
    • Iconographie
    • Images
  • Composants
    • Pages
    • Code
    • Mail
  • Design system
    • Connect

Thème Paris.fr

Thème Paris.fr

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

Container

macro @cContainer

Doc Bootstrap Container

Génère un élément conteneur Bootstrap, avec un mode fluid optionnel pour une mise en page pleine largeur

Exemple

Column content

Responsive column content

Column content

Responsive column content

<@cContainer>
	<@cRow>
		<@cCol>
			<@cText>Column content</@cText>
		</@cCol>
		<@cCol cols='sm-12 md-6 lg-4' class='mb-3'>
			<@cText>Responsive column content</@cText>
		</@cCol>
	</@cRow>
</@cContainer>

<@cContainer type='fluid' class='bg-light py-3'>
	<@cRow>
		<@cCol>
			<@cText>Column content</@cText>
		</@cCol>
		<@cCol cols='sm-12 md-6 lg-4' class='mb-3'>
			<@cText>Responsive column content</@cText>
		</@cCol>
	</@cRow>
</@cContainer>


<div class="container ">
<div class="row ">
<div class="col ">
<p>
Column content</p>
</div>
<div class="col-sm-12 md-6 lg-4 mb-3">
<p>
Responsive column content</p>
</div>
</div>
</div>
<div class="container-fluid bg-light py-3">
<div class="row ">
<div class="col ">
<p>
Column content</p>
</div>
<div class="col-sm-12 md-6 lg-4 mb-3">
<p>
Responsive column content</p>
</div>
</div>
</div>

Paramètres

Génère un élément conteneur Bootstrap, avec un mode fluid optionnel pour une mise en page pleine largeur.

  • type (string)
    optional
    - Type de conteneur ; définir à 'fluid' pour un conteneur pleine largeur. Par défaut: ''
  • class (string)
    optional
    - Classe(s) CSS supplémentaire(s) pour le conteneur. Par défaut: ''
  • id (string)
    optional
    - Identifiant unique de l'élément conteneur. Par défaut: ''
  • params (string)
    optional
    - Attributs HTML supplémentaires pour l'élément conteneur. Par défaut: ''

Ligne de grille

macro @cRow

Doc Bootstrap Ligne de grille

Génère un élément de ligne de grille Bootstrap destiné à contenir des colonnes.

Exemple

Left column
Right column
Card 1
Card 2
Card 3

<@cRow>
    <@cCol cols='md-6'>Left column</@cCol>
    <@cCol cols='md-6'>Right column</@cCol>
</@cRow>

<@cRow class='justify-content-center g-3' id='content-row'>
    <@cCol cols='lg-4'>Card 1</@cCol>
    <@cCol cols='lg-4'>Card 2</@cCol>
    <@cCol cols='lg-4'>Card 3</@cCol>
</@cRow>


<div class="row ">
<div class="col-md-6 ">
Left column</div>
<div class="col-md-6 ">
Right column</div>
</div>
<div class="row justify-content-center g-3" id="content-row">
<div class="col-lg-4 ">
Card 1</div>
<div class="col-lg-4 ">
Card 2</div>
<div class="col-lg-4 ">
Card 3</div>
</div>

Paramètres

Génère un élément de ligne de grille Bootstrap destiné à contenir des colonnes.

  • class (string)
    optional
    - Classe(s) CSS supplémentaire(s) pour la ligne. Par défaut: ''
  • id (string)
    optional
    - Identifiant unique de l'élément ligne. Par défaut: ''
  • params (string)
    optional
    - Attributs HTML supplémentaires pour l'élément ligne. Par défaut: ''

Colonne

macro @cCol

Doc Bootstrap Colonne

Génère une colonne de grille Bootstrap avec des points de rupture responsives et un dimensionnement configurables.

Exemple

Column content

Responsive column content

<@cRow>
<@cCol>
    <@cText>Column content</@cText>
</@cCol>

<@cCol cols='sm-12 md-6 lg-4' class='mb-3'>
    <@cText>Responsive column content</@cText>
</@cCol>
</@cRow>


<div class="row ">
<div class="col ">
<p>
Column content</p>
</div>
<div class="col-sm-12 md-6 lg-4 mb-3">
<p>
Responsive column content</p>
</div>
</div>

Paramètres

Génère une colonne de grille Bootstrap avec des points de rupture responsives et un dimensionnement configurables.

  • cols (string)
    optional
    - Spécification de la taille de la colonne. Le préfixe 'col-' est ajouté automatiquement ; utilisez des valeurs comme 'md-6', 'lg-4', 'sm-12 md-8'. Par défaut: ''
  • default (string)
    optional
    - Classe CSS de repli lorsque cols est vide. Par défaut: 'col'
  • class (string)
    optional
    - Classe(s) CSS supplémentaire(s) pour la colonne. Par défaut: ''
  • id (string)
    optional
    - L'identifiant unique de l'élément de colonne. Par défaut: ''
  • params (string)
    optional
    - Attributs HTML supplémentaires pour l'élément de colonne. Par défaut: ''

Block

macro @cBlock

Génère un élément conteneur HTML de niveau bloc générique (div ou section). Utile pour englober des sections de contenu sur les pages du skin.

Exemple

Content inside a div block.

<@cBlock>
    <p>Content inside a div block.</p>
</@cBlock>

<@cBlock type='section' class='content-wrapper' id='main-content'>
    <p>Main page content goes here.</p>
</@cBlock>


<div>
<p>Content inside a div block.</p>
</div>

Paramètres

Génère un élément conteneur HTML de niveau bloc générique (div ou section). Utile pour englober des sections de contenu sur les pages du skin.

  • type (string)
    optional
    - Balise HTML à utiliser pour le bloc ('div', 'section', etc.). Par défaut: 'div'
  • class (string)
    optional
    - Classe(s) CSS appliquée(s) à l'élément bloc. Par défaut: ''
  • id (string)
    optional
    - Identifiant unique de l'élément bloc. Par défaut: ''
  • params (string)
    optional
    - Attributs HTML supplémentaires pour l'élément bloc. Par défaut: ''

Section

macro @cSection

Génère un conteneur de section HTML sémantique en utilisant une balise de type bloc configurable. Structure le contenu de la page en sections logiques sur les pages skin.

Exemple

Welcome to our services section.

Our services are listed below.

<@cSection>
    <@cText>Welcome to our services section.</@cText>
</@cSection>

<@cSection type='div' class='container py-4' id='services'>
    <@cText>Our services are listed below.</@cText>
</@cSection>


<section>
<p>
Welcome to our services section.</p>
</section>
<div class="container py-4" id="services">
<p>
Our services are listed below.</p>
</div>

Paramètres

Génère un conteneur de section HTML sémantique en utilisant une balise de type bloc configurable. Structure le contenu de la page en sections logiques sur les pages skin.

  • type (string)
    required
    - Balise HTML utilisée pour l'élément section ('section', 'div', 'aside', etc.). Par défaut: 'section'
  • class (string)
    optional
    - Classe(s) CSS appliquée(s) à l'élément section. Par défaut: ''
  • id (string)
    optional
    - Identifiant unique pour l'élément section. Par défaut: ''
  • params (string)
    optional
    - Attributs HTML supplémentaires pour l'élément section. Par défaut: ''
  • Paris.fr [New window]
  • site map
  • Contact [New window]
  • Condition généales d'utilisation [New window]
  • Politique de gestion des données à caractère personnel [New window]
  • Cookies policy [New window]

Follow us

  • Facebook
  • Bluesky
  • Instagram
  • LinkedIn

Get weekly news from your city on social’s network