Bootstrap erstellt eine Systemvorlage mit einem gefalteten Menü links (zwei)

Im vorherigen Artikel habe ich Ihnen die Systemvorlage zum Erstellen eines gefalteten Menüs links (i) vorgestellt. Für Details klicken Sie bitte, um mehr zu erfahren.

1. Über den vorherigen Artikel Fehler

Es gibt Fragen und Fehler, die von mehreren Freunden im vorherigen Artikel aufgeworfen wurden. Lassen Sie mich kurz über sie sprechen.

1>. IE Versionsunterstützung?

Diese, die ich geschrieben habe, testen nur Firefox Google. Der Code kann unter IE8+ zur Kompatibilität hinzugefügt werden.

 <!-[wenn lt IE 9]> <script src = "http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "http://cdn.bootcs.com/respect.js/1.4.2/respect.min.js"> </script> <! [endif]->

Wenn Sie mit dem Super -Browser IE6 kompatibel sein möchten, siehe: http://www.bootcss.com/p/bsie/

2>. Verwendung von Abzeichen, vielen Dank für die Tipps für Baidixing

Dies hängt von den Gebrauchsgewohnheiten aller davon ab.

3>. Die Schriftarten unter dem sekundären Menü des Beispielcode sind bei Firefox und Google nicht die gleiche Größe .

Da ich bei Google Browsing debuggte, unterstützt Chrome standardmäßig keine Schriftarten unter 12px.

2. Vollversion des Klappmenüs links

Interessierte Freunde können klicken, um die Effektdemonstration anzuzeigen: http://static.demo.ruyo.net/bootstrap_left_menu.html2.html

1>. Der Pfeil ändert sich, wenn sich das Menü erweitert und verschmilzt

 <a href = "#systemetting" data-toggle = "collapse"> <i> </i> Systemmanagement <span> </span> </a> <ul id = "systemetting" style = "height: 0px; Management </a> </li> <li> <a href = "#"> <i> </i> Rollenverwaltung </a> </li> <li> <a href = "#"> <i> </i> Passwort ändern </a> </li> <li> <a href = "#"> <i> </i> log -Ansicht </li> </li> </#"> <i> </i> log log anzeigen Pfeil*/. nave-header.collapsed> span.glyphicon-chevron-toggle: vor {content: "/e114"; kaum

2>. Wählen Sie den Stil im sekundären Menü aus

 .SecondMenu a {Schriftgröße: 12px; Farbe: #4A515B; Text-Align: Center;}. SecondMenu li.active {Hintergrundfarbe: #eee; Border-Color: #428bca;}

Wulin.com empfiehlt Bootstrap -bezogene Themen:

Bootstrap -Komponenten Betriebsfähigkeiten

Zusammenfassung des Kenntnisses im Zusammenhang mit Bootstrap

Das obige ist das relevante Wissen über Bootstrap erstellt eine Systemvorlage (ii) im vom Editor eingeführten linken Faltmenü. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!