Dieser Artikel ist ein Spiegelartikel der maschinellen Übersetzung, bitte klicken Sie hier, um zum Originalartikel zu springen.

Architect_Programmer_Code Landwirtschaftsnetzwerk»Architekt › Frontend-Design & Web › Frontrahmen › Bootstrap-basiert, um den dunklen Nacht-(Dunkel-)Modus zu aktivieren ...
Ansehen: 6129|Antwort: 4

[Bootstrap] Aktiviere den dunklen (dunklen) Modus basierend auf Bootstrap

[Link kopieren]
Veröffentlicht am 04.04.2023 09:32:35 | | | |
Anforderungen: Ich habe in der kleinen rechten Ecke einiger Webseiten ein kleines Symbol mit einer Glühbirne und einem Mond gesehen, auf das Glühbirnen-Symbol geklickt, um den Lichtmodus zu erhalten, dann auf das Mond-Symbol, um den Nachtmodus (Dunkelmodus) zu erhalten, es sieht sehr cool aus, meine Website basiert auf der Entwicklung des Bootstrap-Frontend-Frameworks, suche nach relevanten Materialien und Tutorials.

bootstrap4：Der Hyperlink-Login ist sichtbar.
bootstrap5：Der Hyperlink-Login ist sichtbar.
Tutorial-Dokumentation：Der Hyperlink-Login ist sichtbar.

Der Code kompiliert die vier Methoden des ursprünglichen Arbeitskörpers (und insgesamt sechs Varianten)

Manueller Schaltmodus:Der Hyperlink-Login ist sichtbar.
Folgen Sie dem automatischen Umschalten von Betriebssystemen:Der Hyperlink-Login ist sichtbar.




(Gerade da das iPhone zwischen Tag und Nacht wechselt, ist der Dunkelmodus für wenig Licht geeignet, da er die Augen des Nutzers besser schützt, ohne andere zu stören, und zudem mehr Energie spart.) ）

Laut der Dokumentationsanleitung sollten Sie versuchen, sie auf unserer Website einzuführen, und schauen Sie sich zuerst die Renderings wie folgt an:



Führe Stile im Kopf ein, der Code ist wie folgt:

Button-Icon HTML-Code:

Toggle Mode js-Code:

(Ende)




Vorhergehend:Schalte auf den offenen Zugriff auf den angegebenen Port unter Linux
Nächster:Das Cassowary-Tool für HTTP-Anfrage-Stresstests

Verwandte Beiträge
 Vermieter| Veröffentlicht am 07.04.2023 21:08:11 |


Verwenden Sie folgenden Befehl, um zu prüfen, ob sie im Dunkelmodus ist:

 Vermieter| Veröffentlicht am 07.04.2023 21:09:46 |
Wir können den Event Listener verwenden, um die Musteränderung zu erkennen, und der Implementierungscode sieht so aus:

 Vermieter| Veröffentlicht am 21.07.2025 14:38:40 |
Xiaozha Veröffentlicht am 07.04.2023, 21:09
Wir können den Event Listener verwenden, um die Musteränderung zu erkennen, und der Implementierungscode sieht so aus:
Für Änderungen im Überwachungsmodus siehe Folgendes:Der Hyperlink-Login ist sichtbar.
 Vermieter| Veröffentlicht am 21.07.2025 16:16:34 |
Darkmode.js Fügen Sie Ihrer Website innerhalb von Sekunden den Dunkel-/Nachtmodus hinzu:Der Hyperlink-Login ist sichtbar.
Verzichtserklärung:
Alle von Code Farmer Network veröffentlichten Software, Programmiermaterialien oder Artikel dienen ausschließlich Lern- und Forschungszwecken; Die oben genannten Inhalte dürfen nicht für kommerzielle oder illegale Zwecke verwendet werden, andernfalls tragen die Nutzer alle Konsequenzen. Die Informationen auf dieser Seite stammen aus dem Internet, und Urheberrechtsstreitigkeiten haben nichts mit dieser Seite zu tun. Sie müssen die oben genannten Inhalte innerhalb von 24 Stunden nach dem Download vollständig von Ihrem Computer löschen. Wenn Ihnen das Programm gefällt, unterstützen Sie bitte echte Software, kaufen Sie die Registrierung und erhalten Sie bessere echte Dienstleistungen. Falls es eine Verletzung gibt, kontaktieren Sie uns bitte per E-Mail.
Mail To:help@itsvse.com