Cet article vous aidera à apprendre la barre de navigation et la navigation par page dans Bootstrap

Cet article vous fera découvrir la barre de navigation et la navigation par page dans Bootstrap, et présentera également les étiquettes et les badges. J'espère qu'il sera utile à tout le monde !

1. Bases de la barre de navigation

La barre de navigation (navbar) et la navigation (nav) introduites dans la section précédente ne sont qu'un mot différent, avec l'ajout du mot "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. [Recommandations associées : "Tutoriel bootstrap"]

2. Barre de navigation de base

Dans la boîte Bootstrap, la barre de navigation et la navigation ne sont pas très différentes en apparence, mais en utilisation réelle, la barre de navigation est plus compliquée. que la navigation Bien plus.

Comment l'utiliser :

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

Étape 1 : Tout d'abord, ajoutez le nom de la classe "navbar-nav" en fonction de la liste de navigation (<ul class="nav">) Étape 2 : Ajoutez un conteneur (div) en dehors de la liste et utilisez les noms de classe "navbar" et "navbar-default"

Analyse du principe :

La couleur de la barre de navigation est entièrement ".navbar-default " pour contrôler.

3. Ajoutez un titre, un menu secondaire et un statut à la barre de navigation

Dans la production de pages Web, il y a souvent un titre devant le menu (la taille du texte est légèrement plus grande que les autres textes). dans le framework Bootstrap, c'est aussi Nous avons pris en compte cet aspect et l'avons implémenté via "navbar-header" et "navbar-brand". Cette fonction sert principalement de fonction de rappel. Bien sûr, après amélioration, elle peut être considérée comme une fonction de rappel. logo (à ne pas développer ici). Le style principal consiste à augmenter le paramètre de police et à définir la largeur maximale. Également sous la barre de navigation par défaut (navbar-default), la marque de la barre de navigation est également traitée en couleur. De même, le menu est fourni dans l'état actuel de la barre de navigation. , état désactivé, état suspendu et autres effets, et peut également avoir une barre de navigation avec un menu secondaire.

4. La barre de navigation avec form

fournit un "navbar-form" 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. framework , fournit également le style "navbar-right" pour aligner les éléments à droite dans la barre de navigation. Il existe ici une condition qui ne prend effet que lorsque la largeur de la fenêtre du navigateur est supérieure à 768 pixels.

5. Boutons, texte et liens dans la barre de navigation

En plus d'utiliser l'élément a dans navbar-brand et les formes ul et navbar de navbar-nav, d'autres éléments peuvent également être utilisés dans la barre de navigation. du framework Bootstrap. Le framework propose trois autres styles :

1) bouton navbar-btn dans la barre de navigation

2) texte navbar-text dans la barre de navigation

3) lien normal navbar-link dans la barre de navigation

Mais ces trois styles sont soumis à certaines restrictions lorsqu'il est utilisé dans le framework et doit être utilisé 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.

6. Barre de navigation fixe

L'une des nombreuses situations est que les concepteurs souhaitent que la barre de navigation soit fixe en haut ou en bas du navigateur. L'application de cette barre de navigation fixe est plus courante dans le développement mobile. Le framework Bootstrap propose deux manières de réparer la barre de navigation :

☑ .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 fixée en 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 la classe correspondante à la barre de navigation, le conteneur le plus à l'extérieur de la barre de navigation.

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>

7. Barre de navigation responsive

De nos jours, le terminal pour parcourir les pages web n'est plus le même. La barre de navigation implémentée dans l'exemple précédent ne peut être adaptée qu'aux navigateurs grand écran, mais lorsque l'écran du navigateur change. Quand j'étais petite, cela ne me convenait pas. Le design réactif suit donc. Ainsi, dans une page Web réactive, la barre de navigation réactive est très importante.

Utilisation :

1) Assurez-vous que le contenu qui doit être plié dans un écran étroit doit être enveloppé dans un div et ajoutez deux noms de classe deeffondrement et de barre de navigation-collapse à ce div. Enfin, ajoutez un nom de classe ou un nom d'identifiant à ce div.

2) Assurez-vous que le style de l'icône doit être affiché sur un écran étroit (méthode d'écriture fixe) :

<button class="navbar-toggle" type="button" data-toggle="collapse">
  <span class="sr-only">Toggle Navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

3) Et ajoutez data-target=".class name/#id name" au bouton, vérifiez s'il s'agit de la classe nom ou le nom d'identification Drap de laine ? Déterminé par le div qui doit être plié.

Le segment de code div qui doit être plié :

<div class="collapse navbar-collapse" id="example">
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏时显示的图标代码段：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
  ...
</button>也可以这么写，需要折叠的div代码段：<div class="collapse navbar-collapse example" >
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏时要显示的图标：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
  ...
</button>

8、反色导航条

反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。

9、分页导航（带页码的分页导航）

分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航：

☑ 带页码的分页导航

☑ 带翻页的分页导航

带页码的分页导航

带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。

使用方法：

平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法：

<ul class="pagination">
   <li><a href="#">&laquo;</a></li>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
   <li><a href="#">&raquo;</a></li>
</ul>

10、分页导航（翻页分页导航）

Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。

使用方法：

在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类：

<ul class="pager">
   <li><a href="#">&laquo;上一页</a></li>
   <li><a href="#">下一页&raquo;</a></li>
</ul>

11、标签

在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。如果使用的是a标签元素来制作的话，为了让其更美观，在hover状态去掉下划线之类。只要在span标签上添加vertical-align: super; 就可以实现标签定位在右上角了。

使用原理：

使用方法很简单，你可以在使用span这样的行内标签：

<h3>Example heading <span class="label label-default">New</span></h3>

12、徽章

从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读，在Bootstrap框架中，把这种效果称作为徽章效果，使用“badge”样式来实现。不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。

使用方法：

使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入badge类：

<a href="#">Inbox <span class="badge">42</span></a>

更多关于bootstrap的相关知识，可访问：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!