Scopri come utilizzare le ultime funzionalità di Bootstrap, inclusi i dettagli delle grandi modifiche ai controlli dei moduli.
Bootstrap è un popolare framework front-end che ha rivoluzionato lo sviluppo web. Con la sua ultima versione, Bootstrap 5.3.0, il framework ha introdotto una vasta gamma di nuove interessanti funzionalità e miglioramenti che ti consentono di creare siti Web e applicazioni straordinari, reattivi e ricchi di funzionalità.
Attiva/disattiva modalità oscura
Uno dei degni di nota Aggiunte Bootstrap 5.3.0 è un interruttore per Modalità scura. Questo interruttore consente agli utenti del tuo sito Web di passare facilmente dalla modalità chiara a quella scura, facilitando l'utilizzo senza interruzioni del tuo sito Web o dell'applicazione in varie condizioni di illuminazione.
Per utilizzare questa funzione, è sufficiente aggiungere il file data-bs-toggle="modalità oscura" attributo a qualsiasi pulsante o elemento di collegamento.
Ecco un esempio:
<pulsantetipo="pulsante"classe="btn btn-primario"data-bs-toggle="Modalità scura">
Attiva la modalità oscura
pulsante>Utilità per la scala dei caratteri
Bootstrap 5.3.0 introduce una serie di utilità per la scala dei caratteri che consentono di regolare rapidamente la dimensione del testo in base a scale predefinite, senza dover scegli tu stesso valori di carattere specifici.
Puoi utilizzare queste utilità in combinazione con altre classi di tipografia Bootstrap per ottenere una tipografia scalabile e coerente nel tuo sito Web o applicazione.
Di seguito sono riportati alcuni esempi di come è possibile utilizzare le utilità per la scala dei caratteri:
<Pclasse="FS-1">Questa è la dimensione del carattere più grandeP>
<Pclasse="FS-2">Questa è una dimensione del carattere leggermente più piccolaP>
<Pclasse="FS-3">Questa è una dimensione del carattere mediaP>
<Pclasse="FS-4">Questa è una piccola dimensione del carattereP>
<Pclasse="FS-5">Questa è la dimensione del carattere più piccolaP>Utilità di grondaia
Un'altra nuova aggiunta in Bootstrap 5.3.0 è l'introduzione delle utilità grondaia. Queste utilità semplificano l'aggiunta di gutter tra le colonne nel layout della griglia Bootstrap senza dover scrivere CSS personalizzati.
Ecco un esempio di come puoi utilizzare le utilità grondaia:
<divclasse="riga gx-3">
<divclasse="col">Colonna 1div>
<divclasse="col">Colonna 2div>
div>Questo esempio usa il gx-3 class per aggiungere una grondaia di 3 unità (o 1,5 rem) tra le due colonne.
Controlli del modulo aggiornati
IL controlli del modulo in Bootstrap sono stati aggiornati nella versione 5.3.0 per migliorare la coerenza e l'usabilità. I nuovi controlli del modulo includono stili aggiornati per caselle di controllo, pulsanti di opzione e caselle di selezione, nonché feedback di convalida migliorati.
Caselle di controllo e pulsanti di opzione
Bootstrap 5.3.0 introduce nuovi stili per caselle di controllo e pulsanti di opzione che li rendono più facili da usare e più accessibili. Il nuovo design presenta aree colpite più ampie e indicatori di messa a fuoco migliorati, facilitando l'interazione con questi input.
Ecco un esempio di come puoi utilizzare i nuovi stili delle caselle di controllo:
<divclasse="controllo modulo">
<ingressoclasse="form-check-input"tipo="casella di controllo"valore=""id="controlla1">
<etichettaclasse="form-check-label"per="controlla1">Casella di spunta predefinitaetichetta>
div>Ed ecco un esempio di come puoi utilizzare i nuovi stili di pulsanti di opzione:
<divclasse="controllo modulo">
<ingressoclasse="form-check-input"tipo="Radio"nome="esempioRadios"id="radio1"valore="opzione 1">
<etichettaclasse="form-check-label"per="radio1"> opzione 1 etichetta>
div>Si noti come questo markup utilizza il .form-check-input class per definire lo stile dell'elemento di input stesso e il .form-check-label class per definire lo stile dell'etichetta.
Seleziona Scatole
Anche le caselle di selezione sono state aggiornate in Bootstrap 5.3.0 con nuovi stili per una migliore coerenza e usabilità. I nuovi stili di caselle di selezione presentano aree colpite più grandi e indicatori di messa a fuoco migliorati, semplificando l'interazione con questi input.
Ecco un esempio di come puoi utilizzare i nuovi stili di caselle di selezione:
<Selezionareclasse="selezione modulo"aria-etichetta="Esempio di selezione predefinita">
<opzioneselezionato>Apri questo menu di selezioneopzione>
<opzionevalore="1">Unoopzione>
<opzionevalore="2">Dueopzione>
<opzionevalore="3">Treopzione>
Selezionare>Nota come puoi usare il file .form-seleziona class per definire lo stile della casella di selezione stessa.
Feedback di convalida
Bootstrap 5.3.0 introduce anche nuovi stili di feedback di convalida per i controlli dei moduli. Questi stili rendono più facile fornire un feedback visivo agli utenti del tuo sito Web quando compilano un modulo in modo errato.
Ecco un esempio di come puoi utilizzare i nuovi stili di convalida:
<divclasse="gruppo di moduli">
<etichettaper="esempioInputPassword1">Parola d'ordineetichetta>
<ingressotipo="parola d'ordine"classe="il controllo del modulo non è valido"id="esempioInputPassword1"segnaposto="Parola d'ordine"necessario>
<divclasse="feedback non valido"> Si prega di fornire una password valida. div>
div>Notare come il .è invalido class indica che il campo di input non è valido e il .feedback-non valido class visualizza un messaggio per l'utente.
Con questi nuovi stili, è più facile che mai creare moduli accessibili e coerenti per il tuo sito Web o applicazione.
Emozionanti miglioramenti in Bootstrap 5.3.0
Bootstrap 5.3.0 è un aggiornamento significativo del popolare framework CSS che apporta diverse nuove funzionalità e miglioramenti al tavolo. Dall'attivazione della modalità oscura alle utilità per la scala dei caratteri e le utilità per la grondaia, ci sono molti nuovi strumenti a tua disposizione per aiutarti a creare siti Web e applicazioni migliori.