Questo articolo è un articolo speculare di traduzione automatica, clicca qui per saltare all'articolo originale.

Architect_Programmer_Code Rete Agricola»Architetto › Progettazione front-end e web › Telaio frontale › Basato su bootstrap per abilitare la modalità dark night (dark) ...
Vista: 6129|Risposta: 4

[Bootstrap] Abilita la modalità scura (scura) basata su Bootstrap

[Copiato link]
Pubblicato su 04/04/2023 09:32:35 | | | |
Requisiti: ho visto una piccola icona di una lampadina e una luna nell'angolo destro di alcuni siti web, clicca sull'icona della lampadina per ottenere la modalità luce, clicca sull'icona della luna per la modalità notturna (modalità scura), sembra davvero interessante, il mio sito si basa sullo sviluppo del framework front-end Bootstrap, cerca materiali e tutorial correlati.

bootstrap4：Il login del link ipertestuale è visibile.
bootstrap5：Il login del link ipertestuale è visibile.
Documentazione tutorial：Il login del link ipertestuale è visibile.

Il codice compila i quattro metodi del corpo di lavoro originale (e un totale di sei varianti)

Modalità di commutazione manuale:Il login del link ipertestuale è visibile.
Segui il cambio automatico dei sistemi operativi:Il login del link ipertestuale è visibile.




(Soprattutto come l'iPhone passa da giorno a notte, la modalità scura è adatta per ambienti a scarsa luce, che può proteggere meglio gli occhi dell'utente senza disturbare gli altri e può anche risparmiare più energia.) ）

Secondo il tutorial di documentazione, cerca di presentarlo sul nostro sito web, prima guarda i rendering come segue:



Introducendo gli stili in testa, il codice è il seguente:

Codice HTML dell'icona del pulsante:

Modalità toggle codice js:

(Fine)




Precedente:Passa all'accesso aperto alla porta specificata sotto Linux
Prossimo:Lo strumento Cassowary per il test di stress delle richieste HTTP

Post correlati
 Padrone di casa| Pubblicato su 07/04/2023 21:08:11 |


Usa il seguente comando per verificare se è in modalità scura:

 Padrone di casa| Pubblicato su 07/04/2023 21:09:46 |
Possiamo usare l'event listener per rilevare il cambiamento del pattern, e il codice di implementazione appare così:

 Padrone di casa| Pubblicato su 21/07/2025 14:38:40 |
Xiaozha Pubblicato il 2023-4-7 21:09
Possiamo usare l'event listener per rilevare il cambiamento del pattern, e il codice di implementazione appare così:
Per le modifiche alla modalità di monitoraggio, si veda:Il login del link ipertestuale è visibile.
 Padrone di casa| Pubblicato su 21/07/2025 16:16:34 |
Darkmode.js Aggiungi la modalità buia/notte al tuo sito web in pochi secondi:Il login del link ipertestuale è visibile.
Disconoscimento:
Tutto il software, i materiali di programmazione o gli articoli pubblicati dalla Code Farmer Network sono destinati esclusivamente all'apprendimento e alla ricerca; I contenuti sopra elencati non devono essere utilizzati per scopi commerciali o illegali, altrimenti gli utenti dovranno sostenere tutte le conseguenze. Le informazioni su questo sito provengono da Internet, e le controversie sul copyright non hanno nulla a che fare con questo sito. Devi eliminare completamente i contenuti sopra elencati dal tuo computer entro 24 ore dal download. Se ti piace il programma, ti preghiamo di supportare software autentico, acquistare la registrazione e ottenere servizi autentici migliori. In caso di violazione, vi preghiamo di contattarci via email.
Mail To:help@itsvse.com