Une série de méthodes de partage pour utiliser les compétences de navigation Bootstrap bar_javascript

Cet article contient l'utilisation de base de la barre de navigation Bootstrap pour votre référence. Le contenu spécifique est le suivant

1 Style de navigation de base de Bootstrap
Création d'une barre de navigation dans le framework Bootstrap. principalement via le style .nav ». Le style « .nav » par défaut ne fournit pas de style de navigation par défaut et un autre style doit être associé pour être efficace, tel que « nav-tabs », « nav-pills » et autres. Par exemple, il y a un exemple de barre de navigation par onglets dans l'éditeur de code sur la droite. La méthode d'implémentation consiste à ajouter les styles de classe .nav et nav-tabs à la balise ul

HomeCSS3SassjQueryResponsive

2. Barre de navigation de base Bootstrap
Lors de la création d'une barre de navigation de base, il y a principalement les étapes suivantes :

Étape 1 : Créez d'abord une liste de navigation (

• ) et ajoutez le nom de la classe "navbar-nav"

Étape 2 : Ajoutez un conteneur (p) en dehors de la liste et utilisez les noms de classe "navbar" et "navbar-default"

La fonction principale du style ".navbar" est de définir des effets tels que gauche et droite le rembourrage et les coins arrondis, mais les styles liés à la couleur et ceux liés à la couleur n'ont été définis d'aucune façon

网站首页系列教程名师介绍成功案例关于我们

3. Ajoutez un titre à la barre de navigation Bootstrap
Lors de la création de pages Web, il y a souvent un titre devant le menu (la taille du texte est légèrement plus grande que celle des autres textes. En fait, le framework Bootstrap a également pris en compte cet aspect). pour tout le monde, grâce à "navbar-header" et "navbar-brand" à réaliser.

　　 导航条
 　网站首页系列教程名师介绍成功案例关于我们

4. Menu secondaire de la barre de navigation Bootstrap
Ajout d'un menu secondaire à la barre de navigation également Très simple

　　 导航条
 　网站首页系列教程
  CSS3JavaScriptPHP名师介绍成功案例关于我们

5. Barre de navigation Bootstrap avec formulaire
Certaines barres de navigation auront Il y a une recherche form. Un "navbar-form" est fourni dans le framework Bootstrap. La méthode d'utilisation est très simple. Placez un formulaire avec le nom de la classe navbar-form dans le conteneur navbar. navbar-left" permet au formulaire de flotter vers la gauche pour un meilleur alignement. Dans le framework Bootstrap, le style "navbar-right" est également fourni pour aligner les éléments vers la droite dans la barre de navigation.

　　 Bootstrap
 　网站首页系列教程
  CSS3JavaScriptPHP名师介绍成功案例关于我们搜索

6. Boutons, texte et liens dans la barre de navigation Bootstrap En plus d'utiliser l'élément a et la barre de navigation dans la marque de barre de navigation dans la barre de navigation du framework Bootstrap En plus de nav's ul et navbar-form, d'autres éléments peuvent également être utilisés Le framework propose trois autres styles :
1). >2). Barre de navigation Le texte dans navbar-text

3) Le lien ordinaire dans la barre de navigation navbar-link

Cependant, ces trois styles sont soumis à certaines restrictions lorsqu'ils sont utilisés dans le framework. et doivent être combinés avec navbar-brand et navbar-nav est utilisé ensemble. Il y a également une certaine limite sur le nombre. Généralement, il n'y aura aucun problème si vous en utilisez un ou deux

.

　　 Bootstrap
 　Navbar TextNavbar TextNavbar Text　　 Bootstrap
 　Navbar Text
  Navbar Text
  Navbar Text

7. Barre de navigation fixe Bootstrap

Dans l'un des nombreux cas, les concepteurs souhaitent que la barre de navigation soit fixée en haut ou en bas de le navigateur. Cette barre de navigation fixe est utilisée dans C'est plus courant dans le développement mobile. Le framework Bootstrap propose deux façons de réparer la barre de navigation : .navbar-fixed-top : La barre de navigation est fixe en haut du navigateur. fenêtre du navigateur
.navbar-fixed-bottom : La barre de navigation Fixe en bas de la fenêtre du navigateur

　…我是内容　…

8. Navigation par pagination Bootstrap

Navigation par page avec numéros de page, probablement le type de navigation par pagination le plus courant, en particulier lorsque la page de liste a beaucoup de contenu, elle fournira aux utilisateurs une navigation par pagination. Habituellement, de nombreux étudiants aiment. pour utiliser les structures p>a et p>span pour créer une navigation par pagination avec des numéros de page. Cependant, dans le framework Bootstrap, une structure comme ul>li>a est utilisée et la méthode de pagination est ajoutée à la balise ul >In. le framework Bootstrap, vous pouvez également définir la taille du bouton de pagination dans plusieurs situations différentes 1). Agrandir la navigation de pagination via "pagination-lg"
2). plus petit

«12345»

En plus de la navigation par pagination avec des numéros de page, le framework Bootstrap fournit également ce type de navigation par pagination que l'on voit souvent sur. certains sites Web simples, tels que des blogs personnels, des sites Web de magazines, etc. Ce type de navigation par pagination ne voit pas le numéro de page spécifique, mais fournit uniquement un bouton « page précédente » et « page suivante ».

En utilisation réelle, la navigation par pagination avec changement de page est similaire à la navigation par pagination avec des numéros de page. La classe pager est ajoutée à la balise ul.

………

Par défaut, la navigation qui tourne les pages est affichée au centre, mais parfois nous avons besoin qu'une soit à gauche et une sur la droite. Le framework Bootstrap propose deux styles

précédent : laissez le bouton "Précédent" être à gauche

suivant : laissez le bouton "Suivant" être à droite

«上一页下一页»

Ce qui précède est une série de partages sur la façon d'utiliser les compétences de navigation bootstrap bar_javascript Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !