Home-theater-designers
Bootstrap 5 è arrivato con importanti cambiamenti, incluso il drop per il supporto di Internet Explorer (IE) e la dipendenza da jQuery. Sviluppato da Twitter, Bootstrap è il framework CSS più popolare al mondo. Il framework dell'interfaccia utente open source sta cercando di posizionarsi per il futuro e questo ha visto apportare cambiamenti innovativi nella v5.
Il lancio di Bootstrap per IE lo ha reso il primo strumento di sviluppo web a farlo. La mossa arriva mentre la quota di mercato di Internet Explorer continua a diminuire, rappresentando meno del 3% di tutti i browser web.
Continua a leggere per vedere quali ulteriori miglioramenti sono stati apportati a Bootstrap e in che modo ti influenzano.
1. Supporto jQuery
Bootstrap non utilizzerà più la libreria jQuery. Il team di sviluppo ha invece migliorato la libreria JavaScript per effettuare questa modifica. La dipendenza da jQuery non era necessariamente una cosa negativa in Bootstrap.
In effetti, l'introduzione di jQuery ha cambiato radicalmente il modo in cui è stato utilizzato JavaScript. Ha semplificato le attività di scrittura in JavaScript che altrimenti avrebbero richiesto molte righe di codice.
Imparentato: Scopri come creare un elemento in jQuery
Nonostante tutto questo, la squadra ha deciso di farla finita. Ciò comporta il vantaggio di file di origine più piccoli e tempi di caricamento della pagina più elevati. Questo era un cambiamento tanto necessario che vedrà Bootstrap acquisire uno stile più orientato al futuro.
La dimensione del file di origine è diventata più leggera di 85 KB di JavaScript minimizzato, e questo è fondamentale poiché Google considera i tempi di caricamento della pagina per i siti mobili come un fattore di ranking.
Per quanto l'uso di jQuery non sia più necessario in Bootstrap 5, puoi comunque usarlo se lo desideri. Vale anche la pena notare che tutti i plugin JavaScript rimangono disponibili.
2. Proprietà personalizzate CSS
Eliminando il supporto per Internet Explorer, è possibile utilizzare proprietà CSS personalizzate (variabili). IE non supporta le proprietà personalizzate - solo uno dei motivi per cui ha trattenuto gli sviluppatori web per molto tempo.
Le proprietà personalizzate CSS rendono i CSS più flessibili e programmabili. Le variabili CSS sono precedute da -bs per prevenire conflitti con CSS di terze parti.
Sono disponibili due tipi di variabili: variabili radice e variabili componenti.
È possibile accedere alle variabili root ovunque sia caricato Bootstrap CSS. Queste variabili si trovano nella _root.scss file e fanno parte dei file dist compilati.
Le variabili dei componenti vengono utilizzate come variabili locali in particolari componenti. Sono utili per evitare l'ereditarietà accidentale degli stili in componenti come le tabelle nidificate.
3. Sistema di griglia migliorato
Poiché si sono verificati alcuni problemi durante l'aggiornamento dalla versione 3 alla 4, Bootstrap 5 mantiene questa volta la maggior parte del sistema, basandosi sul sistema esistente invece di modificarlo completamente. Alcune delle modifiche sono:
- La classe della grondaia ( .ragazzi ) è stato sostituito con un'utilità ( .G* ) proprio come il margine e il padding
- Sono state inserite anche le classi di distanziamento verticale
- Le colonne non sono più impostate per impostazione predefinita posizione: parente
4. Documentazione migliorata
La documentazione è stata migliorata con ulteriori informazioni, soprattutto quando si tratta di personalizzazione. Un problema comune era che con molti siti che usano Bootstrap, potevi immediatamente identificare che stava usando Bootstrap. Bootstrap 5 ora ha un nuovo aspetto e una migliore personalizzazione.
Ora c'è più flessibilità per personalizzare i tuoi temi in modo che non tutti i siti o le app abbiano la stessa somiglianza. La pagina dei temi v4 è stata effettivamente ampliata con più contenuti e frammenti di codice per la creazione di file Sass (il popolare pre-processore CSS). Puoi anche trovare un progetto npm di partenza sulla piattaforma GitHub che è disponibile come repository di modelli.
Anche la tavolozza dei colori è stata ampliata nella versione 5. Il sistema di colori integrato esteso implica che puoi facilmente modellare la tua colorazione senza dover lasciare la tua base di codice. È stato fatto anche altro lavoro per migliorare il contrasto del colore, inclusa l'aggiunta di una metrica di contrasto del colore nei documenti del colore Bootstrap.
5. Controlli del modulo migliorati
Bootstrap ha migliorato i controlli dei moduli, i gruppi di input e altro ancora.
Nella v4, Bootstrap utilizzava i controlli dei moduli personalizzati oltre ai valori predefiniti forniti da ciascun browser. Nella v5, ora sono tutti personalizzati. Tutti i pulsanti di opzione, le caselle di controllo, i file, gli intervalli e altro ancora per dare loro lo stesso aspetto e comportamento su browser diversi.
I nuovi controlli del modulo non contengono più markup colorato non necessario, ma si concentrano invece sulle funzionalità di progettazione standard e logiche.
6. Bootstrap 5 aggiunge l'API delle utilità
Dopo le nuove librerie CSS come Tailwind CSS, Bootstrap ora aggiunge anche una libreria di utilità. Il team di bootstrap afferma di essere felice di vedere come altri sviluppatori stanno sfidando il modo in cui abbiamo costruito sul Web negli ultimi dieci anni.
Le utility stanno guadagnando slancio nella comunità di sviluppo e il team di bootstrap ne ha preso atto. Il team aveva precedentemente aggiunto disposizioni per le utilità nella v4 utilizzando global $abilita-* classi. Nella v5, sono passati a un approccio API e a un nuovo linguaggio e sintassi in Sass. Questo ti darà il potere di creare nuove utilità pur essendo in grado di rimuovere o modificare le impostazioni predefinite fornite.
Per dare una migliore organizzazione, alcune delle utility che erano nella v4 sono state spostate nella sezione Helpers.
7. Nuova libreria di icone Bootstrap
Bootstrap ora vanta una propria libreria di icone SVG open source con oltre 1.300 icone. È realizzato su misura per i componenti del framework, ma puoi comunque lavorare con loro su qualsiasi progetto.
Dato che sono immagini SVG, possono essere ridimensionate rapidamente e possono essere implementate in molti modi e anche stilizzate con CSS.
Puoi installare le icone usando sopra il livello del mare:
$ npm i bootstrap-iconsInstalla Bootstrap 5
Puoi andare al Pagina di download ufficiale di Bootstrap 5 se vuoi installarlo Se vuoi tenerti al passo con l'ultima versione di sviluppo puoi usare sopra il livello del mare per tirarlo:
$ npm i bootstrap@next
Al momento in cui scriviamo, il framework è nella sua versione Beta 3. Ciò significa che il software è sicuro da usare ma è ancora in fase di sviluppo. Sentiti libero di dare un feedback al team e di dare il contributo necessario.
Condividere Condividere Tweet E-mail Introduzione ai componenti Web e all'architettura basata su componentiDiamo un'occhiata ai componenti Web comuni e vediamo perché sono utili.
Leggi Avanti Argomenti correlati- Programmazione
- Sviluppo web
- JavaScript
- CSS
Jerome è uno scrittore dello staff di MakeUseOf. Si occupa di articoli su programmazione e Linux. È anche un appassionato di criptovalute e tiene sempre d'occhio l'industria delle criptovalute.
Altro da Jerome DavidsonIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per consigli tecnici, recensioni, ebook gratuiti e offerte esclusive!
è mint mobile gsm o cdmaClicca qui per iscriverti