Livre d'introduction Bootstrap (5) Barre de navigation, pagination des compétences navigation

Barre de navigation

Barre de navigation (navbar) et le Livre d'introduction Bootstrap - (4) menu, bouton et navigation introduits dans la section précédente. La navigation (nav) n'a qu'un seul mot différent, avec un mot supplémentaire « bar ». En fait, ils sont encore évidemment différents dans le framework Bootstrap. Il y a une couleur d'arrière-plan dans la barre de navigation (navbar), et la barre de navigation peut être un pur lien (similaire à la navigation), un formulaire ou une combinaison de formulaire et de navigation. Ils se réduisent (et peuvent être ouverts et fermés) sur les appareils mobiles et s'étendent progressivement horizontalement à mesure que la largeur de la fenêtre augmente.

Barre de navigation de base

En fait, la différence d'apparence entre la barre de navigation et la navigation n'est pas si grande, mais en utilisation réelle, la barre de navigation est beaucoup plus compliquée que la navigation. Implémentons une barre de navigation de base.

<div class="navbar navbar-default" role="navigation"><!--role是为了方便屏幕阅读器理解此处内容-->
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">PHP</a></li>
 </ul>
</div>

Copier après la connexion

L'effet qui peut être obtenu est le suivant :

Écran large :

Écran étroit :

Lors de la création d'une barre de navigation de base, faites attention aux points suivants :

1. Tout d'abord, ajoutez le nom de classe .navbar-nav
en fonction de la liste de navigation (

2. Ajoutez un conteneur (div) en dehors de la liste Si cela est autorisé ici, il est recommandé d'utiliser

et d'utiliser les noms de classe .navbar et .navbar-default
.

3. La fonction principale de la classe navbar est de définir des effets tels que le remplissage gauche et droit et les coins arrondis. Utilisez .navbar-default pour contrôler la couleur de la barre de navigation, telle que .navbar-inverse.

Avec titre, menu secondaire

Dans la production de pages Web, vous pouvez généralement voir 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 cela en considération pour tout le monde, via .navbar-). header Et .navbar-brand à réaliser, comme :

<div class="navbar-header">
 <a href="##" class="navbar-brand">WEB开发</a>
</div>

Copier après la connexion

Bien sûr, il peut également être utilisé pour réaliser un logo, comme décrit sur le site officiel chinois, qui ne sera pas décrit en détail ici.

Inutile d'en dire plus sur le menu secondaire. Il a été expliqué en détail dans le blog précédent. Si vous ne le comprenez toujours pas, vous pouvez relire mon blog précédent. Jetons un œil au paragraphe suivant. et effets réalisables : (notez que la barre de navigation inversée de la barre de navigation est utilisée ici)

<div class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
 <a href="##" class="navbar-brand">WEB开发</a>
 </div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li class="dropdown" >
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">JavaScript
 <span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="#">jQuery</a></li>
 <li><a href="#">Vue</a></li>
 <li><a href="#">NodeJS</a></li>
 </ul>
 </li>
 <li ><a href="#">PHP</a></li>
 </ul>
</div>

Copier après la connexion

L'effet est le suivant :

Avec formulaire

Nous voyons souvent des formulaires de recherche dans la barre de navigation, comme Zhihu, Sina Weibo, etc. Bien sûr, le framework Bootstrap ne peut pas manquer d'une telle chose. Le mode d'utilisation est également très simple :

Un formulaire .navbar est fourni dans le framework Bootstrap. Placez un formulaire avec le nom de classe .navbar-form dans le conteneur .navbar ; puis ajoutez .navbar-left pour que le formulaire flotte vers la gauche pour un meilleur alignement.

Dans Bootstrap, le style .navbar-right est également fourni pour aligner les éléments à droite de la barre de navigation.

Copiez ce code dans le code et voyez l'effet :

<form action="##" class="navbar-form navbar-left" rol="search">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
</form>

Copier après la connexion

Boutons, texte et liens

En plus de certains des styles ci-dessus, le framework bootstrap propose trois autres styles :

1. Le bouton navbar-btn dans la barre de navigation rend les boutons non centrés verticalement dans la barre de navigation

2. Le texte de la barre de navigation dans la barre de navigation utilise généralement l'élément

3. Liens normaux dans la barre de navigation navbar-link, liens non-navigation, ajoutez cette classe pour avoir la couleur par défaut correcte et les paramètres de couleur inversés

Cependant, ces trois styles sont soumis à certaines restrictions lorsqu'ils sont utilisés dans le framework et doivent être utilisés conjointement avec navbar-brand et navbar-nav. Il existe également une certaine limite quant à la quantité. Généralement, il n'y aura aucun problème si vous en utilisez un ou deux, mais il y aura des problèmes si vous en utilisez plus de deux.

Barre de navigation fixe

Parfois, nous souhaitons que la barre de navigation soit fixée en haut ou en bas du navigateur. Bootstrap nous propose commodément deux classes pour obtenir un tel style :

.navbar-fixed-top : La barre de navigation est fixée en haut de la fenêtre du navigateur

.navbar-fixed-bottom : La barre de navigation est fixe en bas de la fenêtre du navigateur

La méthode d'utilisation est très simple. Il vous suffit d'ajouter le nom de classe correspondant au conteneur le plus externe (barre de navigation) de la barre de navigation.

<nav class="navbar navbar-default navbar-static-top">
 ...
</nav>

Copier après la connexion

这个固定的导航条会遮住页面上的其它内容，除非你给元素底部设置了 padding 。提示：导航条的默认高度是 50px。如： body { padding-bottom: 70px; } ，当然你也可以使用你自己的值。

响应式导航条

在上面的例子中，导航条就仅仅能大屏幕下有一个不错的效果，在屏幕变小的情况下，还直接把所有的导航项直接展现出来就不适合了。为了有一个更好的显示效果，响应式的导航条设计也就随之而来。我们先来看看效果，再一步一步分析它！

窄屏时，点击右边的按钮图标可展开，效果与上面的展开效果除了 active 状态不再溢出容器外，其他基本相同。实现代码如下：

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
 <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
 <span class="sr-only">Toggle Navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
 <a href="#" class="navbar-brand">WEB开发</a>
 </div>
 <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse">
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">PHP</a></li>
 </ul>
 </div>
</div>

Copier après la connexion

分析：

和普通导航条一样，最外层使用

Étiquettes associées：

bootstrap导航条 bootstrap分页导航 bootstrap入门书籍

source：php.cn

Article précédent：Séparez tous les trois chiffres du montant par des virgules sous js_javascript skills Article suivant：js mise en œuvre d'exemples simples d'effets de liaison à trois niveaux dans les provinces, les villes et les comtés_compétences javascript

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur