Dans l'article précédent, je vous ai présenté le modèle système pour créer un menu plié à gauche (I). Pour plus de détails, veuillez cliquer pour en savoir plus.
1. À propos du bogue de l'article précédent
Il y a des questions et des bogues soulevés par plusieurs amis dans l'article précédent. Permettez-moi de parler brièvement d'eux.
1>. IE Prise en charge de la version?
Celles-ci que j'ai écrites testent simplement Firefox Google Browse. Le code peut être ajouté sous IE8 + pour la compatibilité.
<! - [Si lt ie 9]> <script src = "http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </ script> <script src = "http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"> </ script> <! [endif] ->
Si vous voulez être compatible avec le super navigateur IE6, veuillez consulter: http://www.bootcss.com/p/bsie/
2>. Utilisation du badge, merci pour les conseils pour Baidixing
Cela dépend des habitudes d'utilisation de chacun.
3>. Les polices sous le menu secondaire de l'exemple de code ne sont pas de la même taille sur Firefox et Google , merci pour le pointage de Baidixing.
Étant donné que je débogageais sur la navigation Google, Chrome ne prend pas en charge les polices inférieures à 12px par défaut.
2. Version complète du menu pliant à gauche
Les amis intéressés peuvent cliquer pour voir la démonstration de l'effet: http://stating.demo.ruyo.net/bootstrap_left_menu.html2.html
1>. La flèche change à mesure que le menu se développe et fusionne
<a href = "# systemsetting" data-toggle = "effondrement"> <i> </i> Gestion du système <span> </span> </a> <ul id = "systemSetting" style = "height: 0px;"> <li> <a href = "#"> <i> </i> Management d'utilisateurs </a> </li> <li> <a href = "#"> <i> Gestion </a> </li> <li> <a href = "#"> <i> </i> Gestion des rôles </a> </li> <li> <a href = "#"> <i> </i> Modifier le mot de passe </a> </li> <li> <a href = "#"> <i> </i> Arrow * /. NAV-header.collapsed> span.glyphicon-chevron-toggle: avant {contenu: "/e114";2>. Sélectionnez le style dans le menu secondaire
.SecondMenu A {Font-Size: 12px; Couleur: # 4A515B; Text-Align: Center;}. SecondMenu Li.active {Background-Color: #eee; Border-Color: # 428BCA;}Wulin.com recommande des sujets liés à Bootstrap:
Compétences de fonctionnement des composants bootstrap
Résumé des connaissances liées à la bootstrap
Ce qui précède est la connaissance pertinente sur le bootstrap Création d'un modèle de système (ii) dans le menu de pliage gauche introduit par l'éditeur. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!