communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
recherche
logo
  • Se connecter
  • S'inscrire
Réinitialisation du mot de passe réussie

Suivez les projets qui vous intéressent et découvrez les dernières actualités les concernant.

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.

Formation continue
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>
Réinitialiser le code
Opération automatique
soumettre
logo
Aperçu Clear
Section précédente
section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Gratuit tutoriel de développement réactif bootstrap
Gratuit Manuel d'auto-apprentissage complet PHP
Gratuit Manuel de référence en chinois JavaScript
Gratuit Manuel de développement HTML
Gratuit Manuel technique XML
Gratuit Manuel du didacticiel de démarrage SQL
Gratuit Débuter avec Perl
Gratuit Document didacticiel en ligne DTD
Gratuit Tutoriel d'introduction de base à Python
Gratuit Tutoriel de base sur les servlets
Gratuit Manuel complet HTML5
Gratuit jsp manuel de référence en ligne
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~
Les étudiants qui ont regardé ce cours apprennent également
496452
Parlons brièvement de la création d'une entreprise en PHP Introduction rapide au développement web front-end Développement pratique à grande échelle par Tianlongbabu du cadre MVC version Mini imitant le site Web de l'encyclopédie des choses embarrassantes Premiers pas avec le développement pratique PHP : création rapide de PHP [Small Business Forum] Vérification de connexion et forum de discussion classique Collecte de connaissances sur les réseaux informatiques Démarrage rapide de la version complète de Node.JS Le cours front-end qui vous comprend le mieux : HTML5/CSS3/ES6/NPM/Vue/...[Original] Écrivez votre propre framework PHP MVC (40 chapitres en profondeur/gros détails/à lire absolument pour que les débutants progressent)