Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Construction de la Section Expérience | Créer un Site Web de Portfolio avec Bootstrap
Essentiels de Bootstrap pour les Sites Web Modernes

book
Construction de la Section Expérience

1. Créer la section Expérience

Concevez une section sous la section héroïque pour présenter vos expériences professionnelles ou projets. Utilisez le système de grille de Bootstrap pour créer une mise en page réactive.

html
<section id="experience" class="experience-section py-5">
<div class="container">
<h2 class="h2 text-center fs-2 text-primary mb-5">Job Experience</h2>
<div class="row">
<!-- Add job experience cards or project thumbnails here -->
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title text-center">Job Experience Title</h5>
<p class="card-text">
Description of your job experience or project.
</p>
<!-- Add more details or links here -->
</div>
</div>
</div>
<!-- Add more columns for additional experiences -->
</div>
</div>
</section>

2. Ajouter des Cartes d'Expérience Professionnelle ou des Vignettes de Projet

Dans la classe row, ajoutez des cartes d'expérience professionnelle ou des vignettes de projet pour mettre en valeur vos expériences ou projets. Personnalisez le contenu de chaque carte avec des détails pertinents tels que les titres de poste, les descriptions et des informations supplémentaires.

Résultat

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio</title>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<!-- Build Header Navigation -->
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">My Portfolio</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#experience">Experience</a>

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 5
We use cookies to make your experience better!
some-alt