CATALOGUE Code & Data Formation Bootstrap Apprendre Bootstrap Optimisation de Page avec Plugins Javascript de Bootstrap

Optimisation de Page avec Plugins Javascript de Bootstrap

Utiliser le scrollspy pour activer les éléments du menu en fonction du scroll
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Bootstrap
Revoir le teaser Je m'abonne
4,0
Transcription
49,90€ 24,95€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,0
49,90€ 24,95€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Fixer la Barre de Menu et Activer les Liens avec Ancres

Objectifs

Les objectifs de cette vidéo sont de:

  1. Apprendre à fixer un menu en haut de la page
  2. Comprendre comment activer les liens de navigation avec ancre
  3. Maîtriser l'utilisation des attributs data de Bootstrap

Résumé

Découvrez comment optimiser votre page web en utilisant les plugins Javascript de Bootstrap pour fixer un menu en haut et activer les liens avec ancres.

Description

Pour cette dernière leçon consacrée aux plugins Javascript de Bootstrap, nous allons apprendre à fixer un menu en haut de notre page et à activer les liens lorsqu'ils sont cliqués, redirigeant vers la partie correspondante de la page. Tout d'abord, nous verrons comment appliquer la classe navbar Fixed Top à notre menu pour le maintenir en haut de la page. Ensuite, nous ajusterons le padding du body afin d'éviter que le contenu ne passe derrière le menu fixe.

Nous ajouterons également les attributs data-spy="scroll" et data-target="#MainMenu" pour que Bootstrap gère automatiquement la classe active lorsque l'utilisateur navigue à travers les différentes sections de la page. Cette technique est particulièrement utile pour les sites Web de type OnePage où le contenu est accessible par défilement.

Après cette leçon, vous serez capable de:

  • Fixer un menu en haut de la page
  • Utiliser les attributs data-spy et data-target pour activer les liens
  • Éviter les problèmes de superposition de contenu avec un menu fixe
Voir plus

Questions - réponses

Comment fixer un menu en haut de la page avec Bootstrap?
Vous devez ajouter la classe navbar Fixed Top à votre barre de menu dans le code HTML.
Pourquoi ajouter un padding au body lors de l'utilisation d'un menu fixe?
L'ajout du padding compense la superposition du menu fixe sur le contenu pour garantir que le contenu ne passe pas derrière le menu.
Quels attributs de données sont utilisés pour activer les liens de navigation avec ancre?
Les attributs data-spy="scroll" et data-target="#MainMenu" sont utilisés pour activer automatiquement les liens de navigation avec ancre.
1 commentaire
4,0
1 vote
5
4
3
2
1
stephd
Il y a 4 years
tres bonne formation c est une bonne decouverte generale.