Barre de navigation réactive au développement réactif H5 (2)

Barre de navigation pliable

Nous avons écrit la barre de navigation dans la section précédente, mais nous constaterons que même si la barre de navigation est Elle a été rétracté, mais les colonnes de navigation remplies ne sont plus visibles lorsque la page est réduite.

Voici à quoi ressemble l'affichage normal

QQ截图20161102103016.png

Lors d'un zoom arrière

QQ截图20161102103023.png

Notre colonne de navigation a disparu, comment devons-nous la résoudre.

Créez une colonne pliable :

Utilisez la méthode navbar-toggle fournie avec le plug-in pour faire fonctionner

<button type="button"class="navbar-toggle"data-toggle="collapse" data-target="#navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

rrree

Une déclaration représente une ligne, trois déclarations représentent trois lignes, l'effet est le suivant

QQ截图20161102103435.png

QQ截图20161102103442.png

De cette façon, notre barre de navigation est complète.

Difficultés dans ce chapitre :

Utilisation de bootstrap Créez une barre de navigation pliable.

section suivante

nouveau fichier

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
 <title>PHP中文网</title>
 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
 .logo{
 padding: 0;
 }
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
 <div class="container">
 <div class="navbar-header">
 <a href="#" class="navbar-brand logo" ><img src="https://img.php.cn/upload/course/000/000/004/5819475ea4910787.png" height="50" alt="PHP中文网"></a>
 <button type="button"class="navbar-toggle"data-toggle="collapse" data-target="#navbar-collapse">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

 </button>

 </div>
 <div class="collapse navbar-collapse"id="navbar-collapse">
 <ul class="nav navbar-nav navbar-right daohang " >
 <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
 <li><a href="#"><span class="glyphicon glyphicon-bookmark"></span> 资讯</a></li>
 <li><a href="#"><span class="glyphicon glyphicon-fire"></span> 实例</a></li>
 <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 关于我们</a></li>
 </ul>
 </div>

 </div>
</nav>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">

</script>
</body>
</html>

soumettre Réinitialiser le code

Opération automatique

Plein écran