Barre de navigation que Bootstrap doit apprendre chaque jour (2)_compétences javascript

1. Barre de navigation de base

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 classe « navbar-nav » en fonction de la liste de navigation (

)

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


<div class="navbar navbar-default">
 <!-- 导航条标题-->
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">LOGO</a>
 　</div>
 <!-- 基础导航条-->
 <ul class="nav navbar-nav">
 <li><a href="##">网站首页</a></li>
 <!-- 二级菜单-->
 <li class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="##">CSS3</a></li>
 <li><a href="##">JavaScript</a></li>
 <li class="disabled"><a href="##">PHP</a></li>
 </ul>
 </li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
 <!-- 搜索表单-->
 <form action="##" class="navbar-form navbar-left">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
 </form>
</div>

1. 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 le reste du texte), qui est implémenté via "navbar-header" et "navbar-brand".

 <!-- 导航条标题-->
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">LOGO</a>
 　</div>

2. Le menu secondaire est implémenté via l'imbrication

 <!-- 二级菜单-->
 <li class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="##">CSS3</a></li>
 <li><a href="##">JavaScript</a></li>
 <li class="disabled"><a href="##">PHP</a></li>
 </ul>
 </li>

3. 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" fait flotter le formulaire vers la gauche et le style "navbar-right" aligne les éléments vers la droite dans la barre de navigation.


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

2. Barre de navigation inversée

La barre de navigation inversée est en fait le deuxième style de barre de navigation fourni par le framework Bootstrap. Elle remplace simplement le nom de la classe "navbar-deaful" par "navbar-inverse".

<div class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
 <a href="##" class="navbar-brand">LOGO</a>
 </div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="">首页</a></li>
 <li><a href="">教程</a></li>
 <li><a href="">关于我们</a></li>
 </ul>
</div>




3. Barre de navigation fixe

Une des nombreuses situations dans lesquelles les concepteurs souhaitent que la barre de navigation soit fixée en haut ou en bas du navigateur.

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 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 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">
 　…
</div>
<!--导航条固定在浏览器窗口底部-->
<div class="navbar navbar-default navbar-fixed-bottom">
 　…
</div>

4. Barre de navigation réactive


<div class="navbar navbar-default">
 <div class="navbar-header">
 　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#demo">
 <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">LOGO</a>
 </div>
 <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse" id="demo">
 <ul class="nav navbar-nav">
 <li><a href="##">网站首页</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
 </div>
</div>

En mode écran large :



En mode écran étroit :



Utilisation :

1. Assurez-vous que le contenu qui doit être replié dans un écran étroit doit être enveloppé dans un div et ajoutez deux noms de classe, collapsus et navbar-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. Ajoutez data-target=".class name/#id name" au bouton

Les amis qui souhaitent en savoir plus sur Bootstrap peuvent cliquer sur "Tutoriel d'apprentissage bootstrap" pour une étude approfondie.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Vous pouvez également combiner "Barre de navigation Bootstrap que vous devez apprendre tous les jours" pour apprendre.