Scribd
Importer
6 vues2 pages

Création d'une Navbar Fixe en Bas

Ce document est un code HTML pour une page web avec une navbar fixe en bas. Il utilise Bootstrap pour le style et inclut un espace pour le contenu principal. La navbar contient des liens vers l'accueil, la recherche et le profil.

Transféré par

majordomepm
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
6 vues2 pages

Création d'une Navbar Fixe en Bas

Ce document est un code HTML pour une page web avec une navbar fixe en bas. Il utilise Bootstrap pour le style et inclut un espace pour le contenu principal. La navbar contient des liens vers l'accueil, la recherche et le profil.

Transféré par

majordomepm
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

< !

DOCTYPE html>

<html lang= »fr »>

<head>

<meta charset= »UTF-8 »>

<meta name= »viewport » content= »width=device-width, initial-


scale=1.0 »>

<title>Navbar en bas</title>

<link
href= »[Link]
.css » rel= »stylesheet »>

<style>

Body {

Padding-bottom : 70px ; /* Espace pour la navbar fixe en bas */

</style>

</head>

<body>

< !—Contenu principal 

<div class= »container »>

<h1>Contenu de la page</h1>

<p>Scroll vers le bas pour voir la navbar fixe</p>

<div style= »height : 1500px ; background : #f0f0f0 ; »></div>

</div>

< !—Navbar fixe en bas 

<nav class= »navbar navbar-expand-lg navbar-dark bg-primary fixed-


bottom »>

<div class= »container-fluid »>

<a class= »navbar-brand » href= »# »>Accueil</a>

<button class= »navbar-toggler » type= »button » data-bs-


toggle= »collapse » data-bs-target= »#navbarBottom »>
<span class= »navbar-toggler-icon »></span>

</button>

<div class= »collapse navbar-collapse » id= »navbarBottom »>

<ul class= »navbar-nav me-auto mb-2 mb-lg-0 »>

<li class= »nav-item »>

<a class= »nav-link active » href= »# »><i class= »bi bi-


house »></i> Accueil</a>

</li>

<li class= »nav-item »>

<a class= »nav-link » href= »# »><i class= »bi bi-


search »></i> Recherche</a>

</li>

<li class= »nav-item »>

<a class= »nav-link » href= »# »><i class= »bi bi-


person »></i> Profil</a>

</li>

</ul>

</div>

</div>

</nav>

<script
src= »[Link]
[Link] »></script>

< !—Optionnel : Icônes Bootstrap 

<link rel= »stylesheet » href= »[Link]


icons@1.10.0/font/[Link] »>

</body>

</html>

Vous aimerez peut-être aussi