Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Création de l'En-tête et de la Navigation | Création d'un Site Portfolio avec Bootstrap
Quizzes & Challenges
Quizzes
Challenges
/
Fondations de Bootstrap

bookCréation de l'En-tête et de la Navigation

1. Créer une barre de navigation

Commencer par ajouter une barre de navigation en haut de la page. Utiliser le composant Navbar de Bootstrap à cet effet.

<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">
          <!-- Navigation links will be added here -->
        </ul>
      </div>
    </div>
  </nav>
</header>

2. Ajouter des liens de navigation

À l'intérieur de la classe navbar-nav, ajouter des liens de navigation pour la page d'accueil, la section à propos, l'expérience, les compétences et la section contact.

<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>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#skills">Skills</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#contact">Contact</a>
  </li>
</ul>

Résultat

index.html

index.html

copy
Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 3

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 3.23

bookCréation de l'En-tête et de la Navigation

Glissez pour afficher le menu

1. Créer une barre de navigation

Commencer par ajouter une barre de navigation en haut de la page. Utiliser le composant Navbar de Bootstrap à cet effet.

<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">
          <!-- Navigation links will be added here -->
        </ul>
      </div>
    </div>
  </nav>
</header>

2. Ajouter des liens de navigation

À l'intérieur de la classe navbar-nav, ajouter des liens de navigation pour la page d'accueil, la section à propos, l'expérience, les compétences et la section contact.

<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>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#skills">Skills</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#contact">Contact</a>
  </li>
</ul>

Résultat

index.html

index.html

copy
Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 3
some-alt