This page was translated automatically from the English original.
View the original
Mises en page
Créez et personnalisez les mises en page des pages dans le thème Jekyll Zer0-Mistakes.
Table of Contents
Mises en page
Les mises en page définissent la structure et l’apparence de vos pages. Le thème Zer0-Mistakes inclut plusieurs mises en page intégrées.
Mises en page disponibles
| Mise en page | Objectif | Cas d’usage |
|---|---|---|
default |
Page standard avec barre latérale | Documentation, pages générales |
journals |
Mise en page d’article de blog | Articles de blog avec métadonnées |
home |
Mise en page de page d’accueil | Page d’accueil du site |
collection |
Index de collection | Pages de liste pour les collections |
landing |
Page pleine largeur | Pages marketing/d’atterrissage |
root |
HTML de base | Ne pas utiliser directement |
Utiliser les mises en page
Spécifiez une mise en page dans le front matter de votre page :
---
title: "My Page"
layout: default
---
Hiérarchie des mises en page
Les mises en page héritent les unes des autres :
root.html
└── default.html
├── home.html
├── journals.html
├── collection.html
└── landing.html
Créer des mises en page personnalisées
Étape 1 : Créer le fichier de mise en page
Créez un fichier dans _layouts/ :
---
layout: default
---
<!-- _layouts/tutorial.html -->
<article class="tutorial">
<header class="tutorial-header">
<h1>Mises en page</h1>
<div class="meta">
<span class="difficulty">intermediate</span>
<span class="time"></span>
</div>
</header>
<div class="tutorial-content">
<!--
===================================================================
DEFAULT LAYOUT - Standard content layout with sidebars
===================================================================
File: default.html
Path: _layouts/default.html
Inherits: root.html
Purpose: Primary content layout with sidebar navigation and table of contents
Template Logic:
- Creates a responsive three-column layout using Bootstrap grid
- Left sidebar: Site navigation and content outline (collapsible on mobile)
- Local graph: Obsidian side panel (rendered at body level via footer.html)
- Center: Main content area with page title and body content
- Right sidebar: Table of contents and page shortcuts (hidden on mobile)
- Implements scroll spy for navigation highlighting
- Responsive design that stacks vertically on mobile devices
Layout Structure:
1. Container wrapper with Bootstrap responsive classes
2. Left sidebar (bd-sidebar) - Navigation and outline
3. Main content area (bd-main) with:
- Intro section (page title, metadata)
- Right sidebar (bd-toc) - Table of contents
- Content area (bd-content) - Main page content
Dependencies:
- sidebar-left.html: Site navigation and content outline
- intro.html: Page title, breadcrumbs, and metadata
- sidebar-right.html: Table of contents and page shortcuts
Bootstrap Classes Used:
- container-xxl: Extra large responsive container
- bd-gutter: Custom Bootstrap spacing
- bd-layout: Custom layout utility class
- bd-sidebar: Custom sidebar styling
- bd-main: Main content area
- bd-toc: Table of contents styling
- bd-content: Content area styling
===================================================================
-->
<!-- ================================================ -->
<!-- MAIN LAYOUT CONTAINER -->
<!-- Bootstrap responsive container with custom grid -->
<!-- ================================================ -->
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<!-- ================================ -->
<!-- LEFT SIDEBAR - Navigation -->
<!-- ================================ -->
<!-- Site navigation, content outline, and offcanvas menu for mobile -->
<aside class="bd-sidebar">
<!--
===================================================================
SIDEBAR LEFT - Dynamic Navigation Sidebar
===================================================================
File: sidebar-left.html
Path: _includes/navigation/sidebar-left.html
Purpose: Left sidebar panel (responsive offcanvas) around the resolved
sidebar navigation content
Template Logic:
- Responsive offcanvas sidebar for mobile devices
- Mode resolution + rendering are delegated to shared includes:
* navigation/sidebar-config.html — resolves sidebar_nav / title / icon
from page.sidebar → collection `sidebar:` metadata → site.sidebar
* navigation/sidebar-nav.html — renders the resolved mode
Navigation modes (page.sidebar.nav — see sidebar-config.html):
- "auto": best mode for the page's collection (curated data file →
collection folder tree → post categories)
- "collection": live folder tree of the page's (or a named) collection
- "categories" / "tags": posts grouped by taxonomy term
- any other value: _data/navigation/<value>.yml rendered by nav-tree.html
Configuration:
- Heading text/icon: page.sidebar.title/icon → collection metadata →
site.sidebar.title/icon → "Browse docs"
===================================================================
-->
<!-- ================================ -->
<!-- SIDEBAR NAVIGATION CONTAINER -->
<!-- ================================ -->
<!-- Responsive offcanvas sidebar - full-width on mobile, fixed on desktop -->
<script>
try {
if (localStorage.getItem('zer0-nav-sidebar-visible') === 'false') {
document.documentElement.classList.add('bd-sidebar-pref-hidden');
}
} catch (e) {}
</script>
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<!-- ========================== -->
<!-- SIDEBAR HEADER -->
<!-- ========================== -->
<!-- Mobile-only header with close button -->
<div class="offcanvas-header">
<h2 class="offcanvas-title h5 mb-0" id="bdSidebarOffcanvasLabel">Browse docs</h2>
<div class="d-flex align-items-center gap-1">
<button type="button"
class="btn btn-sm btn-link text-body-secondary bd-sidebar-visibility-toggle d-lg-none px-2"
aria-controls="bdSidebar"
aria-expanded="true"
aria-label="Hide documentation sidebar">
<i class="bi bi-eye-slash" aria-hidden="true"></i>
<span class="visually-hidden">Hide documentation sidebar</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close documentation sidebar" data-bs-target="#bdSidebar"></button>
</div>
</div>
<!-- ========================== -->
<!-- SIDEBAR CONTENT AREA -->
<!-- ========================== -->
<!-- Scrollable content area with dynamic navigation options -->
<div class="offcanvas-body overflow-auto">
<div class="bd-sidebar-desktop-header mb-3 d-none d-lg-flex align-items-center justify-content-between gap-2 w-100">
<strong class="d-flex align-items-center mb-0">
<i class="bi bi-journal-bookmark me-2" aria-hidden="true"></i>
Browse docs
</strong>
<button type="button"
class="btn btn-sm btn-link text-body-secondary bd-sidebar-visibility-toggle d-none d-lg-inline-flex flex-shrink-0 px-1"
aria-controls="bdSidebar"
aria-expanded="true"
aria-label="Hide documentation sidebar"
title="Hide documentation sidebar">
<i class="bi bi-layout-sidebar-inset" aria-hidden="true"></i>
<span class="visually-hidden">Hide documentation sidebar</span>
</button>
</div>
<!-- Resolved navigation content (see navigation/sidebar-nav.html) -->
<nav class="w-100 nav-tree" id="sidebar-content" data-nav-tree aria-label="Section navigation">
<!--
===================================================================
NAV TREE - Flat YAML Navigation Renderer
===================================================================
File: nav-tree.html
Path: _includes/navigation/nav-tree.html
Purpose: Render hierarchical navigation from YAML data files
Parameters:
- nav: Name of navigation file in _data/navigation/ (e.g., "docs", "main")
Data Schema (expected in _data/navigation/*.yml):
- title: string (required) - Display text
- url: string (optional) - Link URL
- icon: string (optional) - Bootstrap Icons class (e.g., "bi-folder")
- expanded: boolean (optional) - Default expanded state (default: false)
- children: array (optional) - Nested navigation items (max 2 levels)
Note: This implementation supports 2 levels of nesting to avoid Jekyll's
include depth limit. For deeper nesting, consider a plugin approach.
Dependencies:
- site.data.navigation[nav]: Navigation YAML data
- Bootstrap 5 collapse component
- Bootstrap Icons for visual indicators
Usage:
include navigation/nav-tree.html nav="docs"
===================================================================
-->
<ul class="list-unstyled fw-normal pb-2 small nav-tree-root">
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-rocket-takeoff me-2"></i>
<span>Getting Started</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-getting-started"
aria-expanded="true"
aria-controls="nav-getting-started"
aria-label="Toggle Getting Started submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse show" id="nav-getting-started">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Documentation Home</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/installation/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Installation</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/getting-started/quick-start/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Quick Start</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/getting-started/theme-guide/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Theme Guide</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/front-matter/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Front Matter</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/features/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-stars me-2"></i>
<span>Features</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-features"
aria-expanded="false"
aria-controls="nav-features"
aria-label="Toggle Features submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-features">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Features Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/book-collection/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Books Collection</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/mermaid-diagrams/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Mermaid Diagrams</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/mathjax-math/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>MathJax Math</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/giscus-comments/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Giscus Comments</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/posthog-analytics/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>PostHog Analytics</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/keyboard-navigation/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Keyboard Navigation</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/preview-image-generator/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Preview Images</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/customization/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-palette me-2"></i>
<span>Customization</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-customization"
aria-expanded="false"
aria-controls="nav-customization"
aria-label="Toggle Customization submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-customization">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/customization/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Customization Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/customization/layouts/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Layouts</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/customization/styles/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Styles</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/customization/navigation/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Navigation</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/deployment/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-cloud-upload me-2"></i>
<span>Deployment</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-deployment"
aria-expanded="false"
aria-controls="nav-deployment"
aria-label="Toggle Deployment submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-deployment">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Deployment Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/github-pages/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>GitHub Pages</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/remote-theme-checklist/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Remote-Theme Consumer Checklist</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/build-overlay/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Safe-Mode Build Overlay</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/netlify/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Netlify</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/custom-domain/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Custom Domain</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/jekyll/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-journal-code me-2"></i>
<span>Jekyll</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-jekyll"
aria-expanded="false"
aria-controls="nav-jekyll"
aria-label="Toggle Jekyll submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-jekyll">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Jekyll Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/jekyll-config/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Configuration</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/jekyll-liquid/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Liquid Templating</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/code-highlighting/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Code Highlighting</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/pagination/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Pagination</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/jekyll-performance-optimization/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Performance</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/jekyll-security/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Security</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/ruby/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-gem me-2"></i>
<span>Ruby & Bundler</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-ruby-bundler"
aria-expanded="false"
aria-controls="nav-ruby-bundler"
aria-label="Toggle Ruby & Bundler submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-ruby-bundler">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/ruby/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Ruby Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/ruby-101/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Ruby 101</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/liquid/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-droplet me-2"></i>
<span>Liquid</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-liquid"
aria-expanded="false"
aria-controls="nav-liquid"
aria-label="Toggle Liquid submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-liquid">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/liquid/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Liquid Overview</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/docker/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-box-seam me-2"></i>
<span>Docker</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-docker"
aria-expanded="false"
aria-controls="nav-docker"
aria-label="Toggle Docker submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-docker">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/docker/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Docker Overview</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/bootstrap/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-bootstrap me-2"></i>
<span>Bootstrap</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-bootstrap"
aria-expanded="false"
aria-controls="nav-bootstrap"
aria-label="Toggle Bootstrap submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-bootstrap">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/bootstrap/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Bootstrap Overview</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/development/testing/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-tools me-2"></i>
<span>Development</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-development"
aria-expanded="false"
aria-controls="nav-development"
aria-label="Toggle Development submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-development">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/development/testing/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Testing</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/development/vendor-assets/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Vendor assets</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/troubleshooting/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<i class="bi-question-circle me-2"></i>
<span>Help</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-help"
aria-expanded="false"
aria-controls="nav-help"
aria-label="Toggle Help submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-help">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/troubleshooting/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none">
<span>Troubleshooting</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</aside>
<div class="position-fixed bd-sidebar-fab d-lg-none" id="sidebarFab">
<button class="btn btn-primary rounded-circle shadow-lg p-0 bd-sidebar-toggle"
type="button"
aria-controls="bdSidebar"
aria-expanded="true"
aria-label="Open documentation sidebar">
<i class="bi bi-journal-bookmark fs-5" aria-hidden="true"></i>
</button>
</div>
<!-- ================================ -->
<!-- MAIN CONTENT AREA -->
<!-- ================================ -->
<!-- Primary content section with scroll spy for table of contents navigation.
Not a <main>: root.html already provides the single <main id="main-content">
landmark; a nested <main> here would duplicate it (issue #299). -->
<div class="bd-main order-1" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="100" data-bs-smooth-scroll="true">
<!--
file: _includes/content/intro.html
description: Enhanced intro section with share, edit, and improve/report buttons
path: _includes/content/intro.html
features:
- Responsive share dropdown with multiple social platforms
- Edit on GitHub quick link
- "Improve" button — opens the page-feedback widget (capture type + description
+ live page context + console logs → GitHub issue). Progressive enhancement:
it is a real link to the issue form, upgraded by assets/js/page-feedback.js.
See _includes/components/page-feedback.html.
- Responsive flex layout: full-width content block, frosted metadata footer with reading time and action buttons
- Balanced padding and typography hierarchy via bd-intro-* classes
- Metadata row: author, dates, category, difficulty, tags, view source
-->
<!-- Intro Section -->
<div class="bd-intro" style="
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assets/images/previews/bootstrap-integration.png') no-repeat center center / cover;">
<div class="bd-intro-inner">
<div class="bd-intro-content">
<h1 class="bd-intro-title">Intégration de Bootstrap 5 dans Zer0-Mistakes</h1>
<p class="bd-intro-description">Comment le thème Jekyll Zer0-Mistakes embarque Bootstrap 5.3.3 versionné — grille, composants, modes de couleur, icônes et personnalisation Sass, avec des exemples prêts à copier-coller.</p>
</div>
<div class="bd-intro-meta-footer">
<ul class="bd-intro-meta-row list-unstyled" aria-label="Page metadata">
<li class="bd-intro-meta-item">
<i class="bi bi-person-fill bd-intro-meta-icon" aria-hidden="true"></i>
<a class="bd-intro-meta-link" href="https://github.com/bamr87" rel="author" itemprop="author">Amr</a>
</li>
<li class="bd-intro-meta-item">
<i class="bi bi-pencil bd-intro-meta-icon" aria-hidden="true"></i>
<time datetime="2026-06-22T12:00:00+00:00" itemprop="dateModified">
Updated Jun 22, 2026
</time>
</li>
<li class="bd-intro-meta-item">
<i class="bi bi-folder2 bd-intro-meta-icon" aria-hidden="true"></i>
<a class="bd-intro-meta-link bd-intro-badge" href="/docs/bootstrap/">Bootstrap</a>
</li>
<li class="bd-intro-meta-item">
<i class="bi bi-bar-chart-steps bd-intro-meta-icon" aria-hidden="true"></i>
<span class="bd-intro-badge bd-intro-badge--level bd-intro-badge--level-beginner">Beginner</span>
</li>
<li class="bd-intro-meta-item bd-intro-meta-item--tags">
<i class="bi bi-tags bd-intro-meta-icon" aria-hidden="true"></i>
<span class="bd-intro-tag-list">
<a class="bd-intro-badge bd-intro-badge--tag" href="/tags/#bootstrap">bootstrap</a>
<a class="bd-intro-badge bd-intro-badge--tag" href="/tags/#css">css</a>
<a class="bd-intro-badge bd-intro-badge--tag" href="/tags/#responsive">responsive</a>
<a class="bd-intro-badge bd-intro-badge--tag" href="/tags/#components">components</a>
</span>
</li>
<li class="bd-intro-meta-item bd-intro-meta-item--source d-none d-md-inline-flex">
<i class="bi bi-file-earmark-code bd-intro-meta-icon" aria-hidden="true"></i>
<a class="bd-intro-meta-link" href="https://github.com/bamr87/zer0-mistakes/blob/main//fr/docs/bootstrap/index.md" target="_blank" rel="noopener noreferrer">View source</a>
</li>
</ul>
<div class="bd-intro-meta-bottom">
<p class="bd-intro-meta">
<i class="bi bi-clock me-1" aria-hidden="true"></i>
Estimated reading time: 15 minutes
</p>
<!-- Action Buttons Group -->
<div class="bd-intro-actions">
<!-- Share Button -->
<div class="dropdown">
<button class="btn btn-sm btn-info dropdown-toggle" type="button" id="shareDropdownBottom" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-share" aria-hidden="true"></i>
<span class="d-none d-sm-inline ms-1">Share</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="shareDropdownBottom">
<li>
<a class="dropdown-item" href="https://reddit.com/submit?url=https://zer0-mistakes.com/fr/docs/bootstrap/&title=Int%C3%A9gration%20de%20Bootstrap%205%20dans%20Zer0-Mistakes" target="_blank" rel="noopener noreferrer">
<i class="bi bi-reddit me-2"></i>Share on Reddit
</a>
</li>
<li>
<a class="dropdown-item js-linkedin-share"
href="https://www.linkedin.com/sharing/share-offsite/?url=https://zer0-mistakes.com/fr/docs/bootstrap/"
target="_blank"
rel="noopener noreferrer"
title="Copies a cleaned article summary to your clipboard, then opens LinkedIn sharing"
data-share-url="https://zer0-mistakes.com/fr/docs/bootstrap/"
data-share-title="Intégration de Bootstrap 5 dans Zer0-Mistakes"
data-share-description="Comment le thème Jekyll Zer0-Mistakes embarque Bootstrap 5.3.3 versionné — grille, composants, modes de couleur, icônes et personnalisation Sass, avec des exemples prêts à copier-coller.">
<i class="bi bi-linkedin me-2"></i>Share on LinkedIn
</a>
</li>
<li>
<a class="dropdown-item" href="https://x.com/intent/tweet?url=https%3A%2F%2Fzer0-mistakes.com%2Ffr%2Fdocs%2Fbootstrap%2F&text=Int%C3%A9gration+de+Bootstrap+5+dans+Zer0-Mistakes" target="_blank" aria-label="Share on X">
<i class="bi bi-twitter-x me-2"></i>Share on X
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li><button class="dropdown-item" type="button" data-copy="https://zer0-mistakes.com/fr/docs/bootstrap/">
<i class="bi bi-clipboard me-2" aria-hidden="true"></i>Copy Link
</button>
</li>
</ul>
</div>
<!-- Improve / Report — opens the page-feedback widget (assets/js/page-feedback.js).
Progressive enhancement: this is a real link to the issue form, so it
works without JavaScript; page-feedback.js intercepts [data-pf-open]
clicks and opens the richer capture modal (context + logs + AI) instead. -->
<a class="btn btn-sm btn-success bd-intro-action-link"
href="https://github.com/bamr87/zer0-mistakes/issues/new?template=page_improvement.yml&labels=page-feedback"
data-pf-open
target="_blank"
rel="noopener noreferrer"
title="Report a problem or suggest an improvement for this page">
<i class="bi bi-megaphone" aria-hidden="true"></i>
<span class="d-none d-sm-inline ms-1">Improve</span>
</a>
<!-- Edit on GitHub Button -->
<a href="https://github.com/bamr87/zer0-mistakes/blob/main//fr/docs/bootstrap/index.md"
class="btn btn-sm btn-dark bd-intro-action-link"
target="_blank"
rel="noopener noreferrer">
<i class="bi bi-github" aria-hidden="true"></i>
<span class="d-none d-sm-inline ms-1">Edit on GitHub</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- =============================== -->
<!-- RIGHT SIDEBAR - Table of Contents -->
<!-- =============================== -->
<!-- Page outline, shortcuts, and related links (hidden on mobile) -->
<div class="bd-toc text-body-secondary">
<!--
file: sidebar-right.html
path: _includes/sidebar-right.html
includes: nav_list.html, content/toc.html
--><!-- FOUC guard: apply hidden TOC preference before paint -->
<script>
try {
if (localStorage.getItem('zer0-nav-toc-visible') === 'false') {
document.documentElement.classList.add('bd-toc-pref-hidden');
}
} catch (e) {}
</script>
<!-- Right sidebar container -->
<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="tocContents" aria-labelledby="tocLabel">
<div class="offcanvas-header">
<h2 class="offcanvas-title h5 mb-0" id="tocLabel">Table of Contents</h2>
<div class="d-flex align-items-center gap-1">
<button type="button"
class="btn btn-sm btn-link text-body-secondary bd-toc-visibility-toggle d-lg-none px-2"
aria-controls="tocContents"
aria-expanded="true"
aria-label="Hide table of contents">
<i class="bi bi-eye-slash" aria-hidden="true"></i>
<span class="visually-hidden">Hide table of contents</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close table of contents" data-bs-target="#tocContents"></button>
</div>
</div>
<div class="offcanvas-body">
<!-- Table of contents -->
<nav id="TableOfContents" role="navigation" aria-label="Table of Contents">
<!-- TOC title -->
<div class="mb-3 d-flex align-items-center justify-content-between gap-2">
<strong class="d-flex align-items-center mb-0">
<i class="bi bi-file-text me-2" aria-hidden="true"></i>
On this page
</strong>
<button type="button"
class="btn btn-sm btn-link text-body-secondary bd-toc-visibility-toggle d-none d-lg-inline-flex flex-shrink-0 px-1"
aria-controls="tocContents"
aria-expanded="true"
aria-label="Hide table of contents"
title="Hide table of contents">
<i class="bi bi-layout-sidebar-inset-reverse" aria-hidden="true"></i>
<span class="visually-hidden">Hide table of contents</span>
</button>
</div>
<ul class="list-group-flush"><li class="list-group-item"><a href="#intégration-de-bootstrap-533" class="">Intégration de Bootstrap 5.3.3</a><ul><li class="list-group-item"><a href="#comment-bootstrap-est-chargé" class="">Comment Bootstrap est chargé</a><ul><li class="list-group-item"><a href="#css-regroupé--par-défaut" class="">CSS (regroupé — par défaut)</a></li><li class="list-group-item"><a href="#javascript" class="">JavaScript</a></li><li class="list-group-item"><a href="#bootstrap-icons" class="">Bootstrap Icons</a></li><li class="list-group-item"><a href="#optionnel--exemple-cdn-forks-uniquement" class="">Optionnel : exemple CDN (forks uniquement)</a></li></ul></li><li class="list-group-item"><a href="#système-de-grille" class="">Système de grille</a><ul><li class="list-group-item"><a href="#grille-de-base" class="">Grille de base</a></li><li class="list-group-item"><a href="#colonnes-responsives" class="">Colonnes responsives</a></li><li class="list-group-item"><a href="#colonnes-à-largeur-automatique" class="">Colonnes à largeur automatique</a></li></ul></li><li class="list-group-item"><a href="#points-de-rupture-responsives" class="">Points de rupture responsives</a><ul><li class="list-group-item"><a href="#utilitaires-responsives" class="">Utilitaires responsives</a></li></ul></li><li class="list-group-item"><a href="#composants-du-thème" class="">Composants du thème</a><ul><li class="list-group-item"><a href="#navigation-navbar" class="">Navigation (Navbar)</a></li><li class="list-group-item"><a href="#cartes" class="">Cartes</a></li><li class="list-group-item"><a href="#fenêtres-modales" class="">Fenêtres modales</a></li><li class="list-group-item"><a href="#offcanvas-barre-latérale-mobile" class="">Offcanvas (barre latérale mobile)</a></li></ul></li><li class="list-group-item"><a href="#modes-de-couleur-sombreclair" class="">Modes de couleur (sombre/clair)</a><ul><li class="list-group-item"><a href="#bascule-de-thème" class="">Bascule de thème</a></li></ul></li><li class="list-group-item"><a href="#bootstrap-icons-1" class="">Bootstrap Icons</a><ul><li class="list-group-item"><a href="#icônes-courantes" class="">Icônes courantes</a></li><li class="list-group-item"><a href="#taille-des-icônes" class="">Taille des icônes</a></li></ul></li><li class="list-group-item"><a href="#classes-utilitaires" class="">Classes utilitaires</a><ul><li class="list-group-item"><a href="#espacement" class="">Espacement</a></li><li class="list-group-item"><a href="#flexbox" class="">Flexbox</a></li><li class="list-group-item"><a href="#texte" class="">Texte</a></li></ul></li><li class="list-group-item"><a href="#personnalisation" class="">Personnalisation</a><ul><li class="list-group-item"><a href="#variables-css" class="">Variables CSS</a></li><li class="list-group-item"><a href="#sass-personnalisé" class="">Sass personnalisé</a></li></ul></li><li class="list-group-item"><a href="#formulaires" class="">Formulaires</a><ul><li class="list-group-item"><a href="#formulaire-de-base" class="">Formulaire de base</a></li><li class="list-group-item"><a href="#validation-de-formulaire" class="">Validation de formulaire</a></li></ul></li><li class="list-group-item"><a href="#ressources" class="">Ressources</a></li><li class="list-group-item"><a href="#voir-aussi" class="">Voir aussi</a></li><li class="list-group-item"><a href="#voir-aussi-1" class="">Voir aussi</a></li></ul></li></ul>
</nav>
</div>
</div>
</div>
<!-- =============================== -->
<!-- MAIN CONTENT BODY -->
<!-- =============================== -->
<!-- Where the actual page content is rendered -->
<div class="bd-content ps-lg-2">
<h1 id="intégration-de-bootstrap-533">Intégration de Bootstrap 5.3.3</h1>
<p>Le thème Zer0-Mistakes est construit sur <strong>Bootstrap 5.3.3</strong>, offrant des mises en page responsives, des composants modernes et de puissants utilitaires.</p>
<h2 id="comment-bootstrap-est-chargé">Comment Bootstrap est chargé</h2>
<p>Le thème embarque <strong>Bootstrap 5.3.3</strong> et <strong>Bootstrap Icons</strong> sous <a href="⟦1⟧"><code class="language-plaintext highlighter-rouge">assets/vendor/</code></a>, si bien que les builds <strong>GitHub Pages</strong> ne nécessitent aucun <code class="language-plaintext highlighter-rouge">npm</code> ni accès réseau au moment de la publication. Actualisez les fichiers avec <code class="language-plaintext highlighter-rouge">./scripts/vendor-install.sh</code> (voir <a href="⟦2⟧">Ressources fournisseurs</a>). Bootstrap 5 a supprimé la dépendance à jQuery, le thème ne regroupe donc plus et ne charge plus jQuery.</p>
<h3 id="css-regroupé--par-défaut">CSS (regroupé — par défaut)</h3>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<!-- In _includes/core/head.html -->
<link href="<span class="p">{{</span><span class="w"> </span><span class="s1">'/assets/vendor/bootstrap/css/bootstrap.min.css'</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">relative_url</span><span class="w"> </span><span class="p">}}</span>" rel="stylesheet">
</code></pre></div></div>
<h3 id="javascript">JavaScript</h3>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<!-- In _includes/components/js-cdn.html -->
<script src="<span class="p">{{</span><span class="w"> </span><span class="s1">'/assets/vendor/bootstrap/js/bootstrap.bundle.min.js'</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">relative_url</span><span class="w"> </span><span class="p">}}</span>"></script>
</code></pre></div></div>
<h3 id="bootstrap-icons">Bootstrap Icons</h3>
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<link rel="stylesheet" href="<span class="p">{{</span><span class="w"> </span><span class="s1">'/assets/vendor/bootstrap-icons/font/bootstrap-icons.css'</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">relative_url</span><span class="w"> </span><span class="p">}}</span>">
</code></pre></div></div>
<h3 id="optionnel--exemple-cdn-forks-uniquement">Optionnel : exemple CDN (forks uniquement)</h3>
<p>Si vous préférez un CDN public plutôt que des fichiers fournisseurs versionnés, vous pouvez remplacer les liens ci-dessus par des URL jsDelivr (ce n’est pas le comportement par défaut de ce thème).</p>
<h2 id="système-de-grille">Système de grille</h2>
<h3 id="grille-de-base">Grille de base</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-8"</span><span class="nt">></span>Main content<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">></span>Sidebar<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="colonnes-responsives">Colonnes responsives</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Stack on mobile, side-by-side on tablet+ --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-12 col-md-6"</span><span class="nt">></span>Left<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-12 col-md-6"</span><span class="nt">></span>Right<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="colonnes-à-largeur-automatique">Colonnes à largeur automatique</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>Equal<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>Equal<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>Equal<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<blockquote>
<p><strong>Pour aller plus loin :</strong> la grille de Bootstrap repose sur flexbox et excelle pour les rangées de colonnes. Lorsque vous avez besoin d’un vrai contrôle bidimensionnel — zones qui se chevauchent, régions nommées ou mises en page façon magazine — tournez-vous vers CSS Grid natif. Le <a href="/posts/2025/01/23/css-grid-mastery/">tutoriel Maîtrise de CSS Grid</a> le présente avec des démos interactives directement dans le navigateur.</p>
</blockquote>
<h2 id="points-de-rupture-responsives">Points de rupture responsives</h2>
<table>
<thead>
<tr>
<th>Point de rupture</th>
<th>Classe</th>
<th>Dimensions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Très petit</td>
<td>(par défaut)</td>
<td>< 576px</td>
</tr>
<tr>
<td>Petit</td>
<td><code class="language-plaintext highlighter-rouge">sm</code></td>
<td>≥ 576px</td>
</tr>
<tr>
<td>Moyen</td>
<td><code class="language-plaintext highlighter-rouge">md</code></td>
<td>≥ 768px</td>
</tr>
<tr>
<td>Grand</td>
<td><code class="language-plaintext highlighter-rouge">lg</code></td>
<td>≥ 992px</td>
</tr>
<tr>
<td>Très grand</td>
<td><code class="language-plaintext highlighter-rouge">xl</code></td>
<td>≥ 1200px</td>
</tr>
<tr>
<td>XXL</td>
<td><code class="language-plaintext highlighter-rouge">xxl</code></td>
<td>≥ 1400px</td>
</tr>
</tbody>
</table>
<h3 id="utilitaires-responsives">Utilitaires responsives</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Hide on mobile --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-md-block"</span><span class="nt">></span>Desktop only<span class="nt"></div></span>
<span class="c"><!-- Show only on mobile --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-block d-md-none"</span><span class="nt">></span>Mobile only<span class="nt"></div></span>
</code></pre></div></div>
<h2 id="composants-du-thème">Composants du thème</h2>
<h3 id="navigation-navbar">Navigation (Navbar)</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-body-tertiary"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"/"</span><span class="nt">></span>Brand<span class="nt"></a></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span>
<span class="na">data-bs-toggle=</span><span class="s">"collapse"</span>
<span class="na">data-bs-target=</span><span class="s">"#navbarNav"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">></span></span>
<span class="nt"></button></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarNav"</span><span class="nt">></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"navbar-nav"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Home<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></nav></span>
</code></pre></div></div>
<h3 id="cartes">Cartes</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"image.jpg"</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text.<span class="nt"></p></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="fenêtres-modales">Fenêtres modales</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Button trigger --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span>
<span class="na">data-bs-toggle=</span><span class="s">"modal"</span>
<span class="na">data-bs-target=</span><span class="s">"#exampleModal"</span><span class="nt">></span>
Launch demo modal
<span class="nt"></button></span>
<span class="c"><!-- Modal --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"exampleModal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span>
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"modal-title"</span><span class="nt">></span>Modal title<span class="nt"></h5></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">></button></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span>
Modal content here.
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">></span>Close<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Save changes<span class="nt"></button></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="offcanvas-barre-latérale-mobile">Offcanvas (barre latérale mobile)</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Button --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span>
<span class="na">data-bs-toggle=</span><span class="s">"offcanvas"</span>
<span class="na">data-bs-target=</span><span class="s">"#sidebar"</span><span class="nt">></span>
Open Sidebar
<span class="nt"></button></span>
<span class="c"><!-- Offcanvas --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"offcanvas offcanvas-start"</span> <span class="na">id=</span><span class="s">"sidebar"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"offcanvas-header"</span><span class="nt">></span>
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"offcanvas-title"</span><span class="nt">></span>Menu<span class="nt"></h5></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"offcanvas"</span><span class="nt">></button></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"offcanvas-body"</span><span class="nt">></span>
Sidebar content...
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h2 id="modes-de-couleur-sombreclair">Modes de couleur (sombre/clair)</h2>
<p>Bootstrap 5.3 prend en charge les modes de couleur via <code class="language-plaintext highlighter-rouge">data-bs-theme</code> :</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><html</span> <span class="na">data-bs-theme=</span><span class="s">"dark"</span><span class="nt">></span>
</code></pre></div></div>
<h3 id="bascule-de-thème">Bascule de thème</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">setTheme</span> <span class="o">=</span> <span class="p">(</span><span class="nx">theme</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">data-bs-theme</span><span class="dl">'</span><span class="p">,</span> <span class="nx">theme</span><span class="p">);</span>
<span class="p">};</span>
<span class="c1">// Toggle</span>
<span class="nx">setTheme</span><span class="p">(</span><span class="dl">'</span><span class="s1">dark</span><span class="dl">'</span><span class="p">);</span> <span class="c1">// or 'light'</span>
</code></pre></div></div>
<p>Voir <a href="/docs/features/color-modes/">Modes de couleur</a> pour l’implémentation complète.</p>
<h2 id="bootstrap-icons-1">Bootstrap Icons</h2>
<h3 id="icônes-courantes">Icônes courantes</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Navigation --></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"bi bi-house"</span><span class="nt">></i></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"bi bi-search"</span><span class="nt">></i></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"bi bi-gear"</span><span class="nt">></i></span>
<span class="c"><!-- Actions --></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"bi bi-plus-circle"</span><span class="nt">></i></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"bi bi-pencil"</span><span class="nt">></i></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"bi bi-trash"</span><span class="nt">></i></span>
<span class="c"><!-- Social --></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"bi bi-github"</span><span class="nt">></i></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"bi bi-twitter"</span><span class="nt">></i></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"bi bi-linkedin"</span><span class="nt">></i></span>
<span class="c"><!-- States --></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"bi bi-check-circle text-success"</span><span class="nt">></i></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"bi bi-x-circle text-danger"</span><span class="nt">></i></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"bi bi-exclamation-circle text-warning"</span><span class="nt">></i></span>
</code></pre></div></div>
<h3 id="taille-des-icônes">Taille des icônes</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><i</span> <span class="na">class=</span><span class="s">"bi bi-house fs-1"</span><span class="nt">></i></span> <span class="c"><!-- Large --></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"bi bi-house fs-3"</span><span class="nt">></i></span> <span class="c"><!-- Medium --></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"bi bi-house fs-5"</span><span class="nt">></i></span> <span class="c"><!-- Small --></span>
</code></pre></div></div>
<h2 id="classes-utilitaires">Classes utilitaires</h2>
<h3 id="espacement">Espacement</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Margin --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"mt-3"</span><span class="nt">></span>margin-top: 1rem<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"mb-4"</span><span class="nt">></span>margin-bottom: 1.5rem<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"mx-auto"</span><span class="nt">></span>center horizontally<span class="nt"></div></span>
<span class="c"><!-- Padding --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3"</span><span class="nt">></span>padding: 1rem<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"py-4"</span><span class="nt">></span>padding-y: 1.5rem<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="flexbox">Flexbox</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-flex justify-content-between align-items-center"</span><span class="nt">></span>
<span class="nt"><span></span>Left<span class="nt"></span></span>
<span class="nt"><span></span>Right<span class="nt"></span></span>
<span class="nt"></div></span>
</code></pre></div></div>
<h3 id="texte">Texte</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-primary"</span><span class="nt">></span>Primary text<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Muted text<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">></span>Centered text<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"fw-bold"</span><span class="nt">></span>Bold text<span class="nt"></p></span>
</code></pre></div></div>
<h2 id="personnalisation">Personnalisation</h2>
<h3 id="variables-css">Variables CSS</h3>
<p>Redéfinissez les variables CSS de Bootstrap :</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nd">:root</span> <span class="p">{</span>
<span class="py">--bs-primary</span><span class="p">:</span> <span class="m">#0d6efd</span><span class="p">;</span>
<span class="py">--bs-secondary</span><span class="p">:</span> <span class="m">#6c757d</span><span class="p">;</span>
<span class="py">--bs-body-bg</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span>
<span class="py">--bs-body-color</span><span class="p">:</span> <span class="m">#212529</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">data-bs-theme</span><span class="o">=</span><span class="s1">"dark"</span><span class="o">]</span> <span class="p">{</span>
<span class="py">--bs-body-bg</span><span class="p">:</span> <span class="m">#212529</span><span class="p">;</span>
<span class="py">--bs-body-color</span><span class="p">:</span> <span class="m">#f8f9fa</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="sass-personnalisé">Sass personnalisé</h3>
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// _sass/custom.scss</span>
<span class="nv">$primary</span><span class="p">:</span> <span class="mh">#3b82f6</span><span class="p">;</span>
<span class="nv">$secondary</span><span class="p">:</span> <span class="mh">#64748b</span><span class="p">;</span>
<span class="c1">// Then import Bootstrap</span>
<span class="k">@import</span> <span class="s2">"bootstrap/scss/bootstrap"</span><span class="p">;</span>
</code></pre></div></div>
<h2 id="formulaires">Formulaires</h2>
<h3 id="formulaire-de-base">Formulaire de base</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><form></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">></span>Email<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"email"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"message"</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">></span>Message<span class="nt"></label></span>
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"message"</span> <span class="na">rows=</span><span class="s">"3"</span><span class="nt">></textarea></span>
<span class="nt"></div></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Submit<span class="nt"></button></span>
<span class="nt"></form></span>
</code></pre></div></div>
<h3 id="validation-de-formulaire">Validation de formulaire</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><form</span> <span class="na">class=</span><span class="s">"needs-validation"</span> <span class="na">novalidate</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">required</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>Please provide a valid email.<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></form></span>
<span class="nt"><script></span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">.needs-validation</span><span class="dl">'</span><span class="p">).</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">form</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">submit</span><span class="dl">'</span><span class="p">,</span> <span class="nx">event</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">form</span><span class="p">.</span><span class="nx">checkValidity</span><span class="p">())</span> <span class="p">{</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">form</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">was-validated</span><span class="dl">'</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="nt"></script></span>
</code></pre></div></div>
<h2 id="ressources">Ressources</h2>
<ul>
<li><a href="https://getbootstrap.com/docs/5.3/">Documentation de Bootstrap 5</a></li>
<li><a href="https://icons.getbootstrap.com/">Bootstrap Icons</a></li>
<li><a href="https://getbootstrap.com/docs/5.3/examples/">Exemples Bootstrap</a></li>
<li><a href="https://getbootstrap.com/docs/5.3/examples/cheatsheet/">Aide-mémoire Bootstrap</a></li>
</ul>
<h2 id="voir-aussi">Voir aussi</h2>
<ul>
<li><a href="/docs/features/color-modes/">Modes de couleur</a></li>
<li><a href="/docs/customization/layouts/">Mises en page</a></li>
<li><a href="/docs/customization/includes/">Composants d’inclusion</a></li>
<li><a href="/posts/2025/01/23/css-grid-mastery/">Maîtrise de CSS Grid (tutoriel)</a></li>
</ul>
<h2 id="voir-aussi-1">Voir aussi</h2>
<ul>
<li>[[Customization]]</li>
<li>[[Features]]</li>
<li>[[Jekyll]]</li>
<li>[[Liquid]]</li>
</ul>
</div>
</div>
</div>
</div>
</article>
Étape 2 : Utiliser la mise en page
---
title: "Getting Started Tutorial"
layout: tutorial
difficulty: beginner
estimated_reading_time: "15 minutes"
next_tutorial: /tutorials/part-2/
---
Variables de mise en page
Accédez à ces variables dans vos mises en page :
| Variable | Description |
|---|---|
⟦8⟧ |
Contenu de la page (obligatoire) |
⟦10⟧ |
Titre de la page |
⟦12⟧ |
Description de la page |
⟦14⟧ |
Nom de la mise en page actuelle |
⟦16⟧ |
URL de la page |
⟦18⟧ |
Titre du site |
Remplacer les mises en page du thème
Pour personnaliser une mise en page du thème :
- Copiez la mise en page du thème vers votre répertoire
_layouts/ - Modifiez selon vos besoins
- Jekyll utilise votre version à la place
Contenu conditionnel
Affichez du contenu en fonction de la mise en page ou des variables de page :
{% if page.layout == 'journals' %}
<div class="post-meta">
<time>{{ page.date | date: "%B %d, %Y" }}</time>
<span class="author">{{ page.author }}</span>
</div>
{% endif %}
{% if page.sidebar %}
{% include navigation/sidebar.html %}
{% endif %}
Inclure des composants
Utilisez les includes pour les parties réutilisables :
{% include core/head.html %}
{% include navigation/header.html %}
{% include content/toc.html %}
{% include core/footer.html %}
Bonnes pratiques
- Commencez avec
default— Héritez de default pour la cohérence - Gardez les mises en page ciblées — Chaque mise en page doit avoir un seul objectif
- Utilisez les includes — Extrayez les composants réutilisables
- Documentez les mises en page personnalisées — Notez l’objectif et les variables requises
- Testez la réactivité — Vérifiez que les mises en page fonctionnent sur toutes les tailles d’écran
Référence
- Documentation des mises en page Jekyll
- Langage de template Liquid
- Maîtrise de CSS Grid (tutoriel) — créez des mises en page bidimensionnelles personnalisées avec des exemples interactifs dans le navigateur
Référence technique
Pour les détails destinés aux contributeurs (hiérarchie des mises en page, héritage des templates Liquid, câblage de la barre latérale) :
Voir aussi
- [[Customization]]
- [[Include Components]]
- [[Liquid]]