Cré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
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Can you explain how to make the navigation bar responsive?
How do I customize the appearance of the navigation bar?
What should I do if the navigation links are not working?
Awesome!
Completion rate improved to 3.23
Cré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
Merci pour vos commentaires !