Quel package est utilisé pour la barre de navigation dans bootstrap ?-Tutoriel d'amorçage-php.cn

Quel package est utilisé pour la barre de navigation dans bootstrap ?

WBOY

Libérer： 2022-02-11 16:54:03

original

2400 Les gens l'ont consulté

Dans bootstrap, la barre de navigation est enveloppée par l'élément "nav". L'élément nav est utilisé pour définir le lien de navigation. L'utilisation de cet élément pour envelopper la barre de navigation peut rendre la barre de navigation réactive. ; barre de navigation ".

Quel package est utilisé pour la barre de navigation dans bootstrap ?

L'environnement d'exploitation de ce tutoriel : système Windows 10, bootstrap version 3.3.7, ordinateur DELL G3

Dans quoi envelopper la barre de navigation dans bootstrap

La barre de navigation (navbar) dans Bootstrap est placée à l'emplacement le responsable de l'application ou du site Web, en tant que composant de base réactif de la navigation, peut ajuster automatiquement l'état d'affichage de la barre de navigation en fonction de la largeur de la fenêtre du navigateur, la replier sur les appareils mobiles (et peut être ouverte ou fermée), et devient progressivement le mode d'expansion horizontale.

Barre de navigation de style par défaut

La barre de navigation de Bootstrap contient deux parties : une partie est utilisée pour placer des boutons d'icônes, définis par le conteneur de .navbar-header ; l'autre partie est utilisée pour placer des composants de navigation, définis par .nav-collapse ; .collapse Définition du conteneur. Le conteneur

.navbar-header contient généralement le nom du site et le bouton icône. Le nom du site est toujours visible, mais le bouton icône n'est visible que sur les petits écrans. Le nom du site est un lien de marque .navbar. Le bouton icône est un bouton de classe .navbar-toggle, qui contient trois éléments class="icon-bar". Lorsque vous définissez un bouton, vous lui fournissez également les attributs data-toggle et data-target. L'attribut data-toggle indique à JavaScript ce que fait le bouton, et l'attribut data-target indique l'élément de menu à afficher lorsque vous cliquez sur le bouton.

.nav-collapse.collapse Le conteneur ne contient généralement que des composants de navigation, tels que des liens de navigation, des formulaires, des boutons, des menus déroulants, du texte, des liens non liés à la navigation, etc. Les composants de navigation ne se développent que horizontalement sur les grands écrans et doivent être cliqué sur les petits écrans. Le bouton icône s'affiche. Pour une simple barre de navigation, celle-ci ne contient généralement que des liens de navigation. Les liens de navigation sont définis à l'aide d'éléments de liste de .nav.navbar.

Afin de rendre la barre de navigation réactive, elle est généralement enveloppée d'un élément .navbar

La balise

définit la partie du lien de navigation.

Bien sûr, vous pouvez également utiliser l'élément

, mais assurez-vous de définir l'attribut role="navigation" pour garantir que les utilisateurs utilisant des appareils d'assistance savent clairement qu'il s'agit d'une zone de navigation. Alternativement, pour obtenir un alignement et un remplissage appropriés, placez la barre de navigation entière dans un conteneur .container ou .container-fluid.

Recommandations associées : Tutoriel bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!