Home-theater-designers
Bootstrap 5 a venit cu modificări majore, inclusiv eliminarea suportului pentru Internet Explorer (IE) și dependența jQuery. Dezvoltat de Twitter, Bootstrap este cel mai popular cadru CSS din lume. Cadrul de interfață cu utilizatorul open-source urmărește poziționarea pentru viitor și acest lucru l-a văzut făcând schimbări inovatoare în v5.
Scăderea Bootstrap pentru IE a făcut din acesta primul instrument de dezvoltare web care face acest lucru. Mișcarea are loc pe măsură ce cota de piață a Internet Explorer continuă să scadă, reprezentând mai puțin de 3% din toate browserele web.
Citiți mai departe pentru a vedea ce îmbunătățiri au fost aduse Bootstrap și cum vă afectează.
1. Asistență jQuery
Bootstrap nu va mai folosi biblioteca jQuery. Echipa de dezvoltare a îmbunătățit în schimb biblioteca JavaScript pentru a efectua această modificare. Dependența jQuery nu a fost neapărat un lucru rău în Bootstrap.
De fapt, introducerea jQuery a schimbat radical modul în care a fost utilizat JavaScript. A simplificat sarcinile de scriere în JavaScript, care altfel ar fi luat multe linii de cod.
Legate de: Aflați cum să creați un element în jQuery
Cu toate acestea, echipa a decis să o elimine. Aceasta vine cu avantajul fișierelor sursă mai mici și a timpilor mai mari de încărcare a paginii. Aceasta a fost o schimbare foarte necesară, care va face ca Bootstrap să câștige un stil mai prietenos cu viitorul.
Dimensiunea fișierului sursă a devenit mai ușoară cu 85 KB de JavaScript minimizat, iar acest lucru este esențial, deoarece Google consideră că timpul de încărcare a paginilor pentru site-urile mobile este un factor de clasare.
Oricât de mult nu este necesară utilizarea jQuery în Bootstrap 5, îl puteți folosi în continuare dacă doriți. De asemenea, este demn de remarcat faptul că toate pluginurile JavaScript rămân disponibile.
2. Proprietăți personalizate CSS
Prin renunțarea la suportul Internet Explorer, se pot utiliza proprietăți CSS (variabile) personalizate. IE nu acceptă proprietăți personalizate - doar un motiv pentru care a reținut dezvoltatorii web mult timp.
Proprietățile personalizate CSS fac CSS mai flexibil și programabil. Variabilele CSS sunt prefixate cu -bs pentru a preveni conflictul cu CSS terță parte.
Există două tipuri de variabile disponibile: variabile rădăcină și variabile componente.
Variabilele rădăcină pot fi accesate oriunde este încărcat Bootstrap CSS. Aceste variabile sunt localizate în _root.scss și fac parte din fișierele dist compilate.
Variabilele componente sunt utilizate ca variabile locale în anumite componente. Acestea sunt utile pentru a evita moștenirea accidentală a stilurilor în componente cum ar fi tabelele imbricate.
3. Sistem de rețea îmbunătățit
Deoarece au existat unele probleme la actualizarea de la versiunea 3 la 4, Bootstrap 5 păstrează cea mai mare parte a sistemului de această dată, bazându-se pe sistemul existent în loc să îl schimbe complet. Unele dintre modificări sunt:
- Clasa jgheabului ( .băieți ) a fost înlocuit cu un utilitar ( .g * ) la fel ca marginea și căptușeala
- Au fost incluse și clase de spațiere verticală
- Coloanele nu mai sunt implicite poziție: relativă
4. Documentație îmbunătățită
Documentația a fost îmbunătățită cu mai multe informații, mai ales atunci când vine vorba de personalizare. O problemă obișnuită a fost că, cu multe site-uri care folosesc Bootstrap, ați putea identifica imediat că utilizează Bootstrap. Bootstrap 5 vine acum cu un aspect nou și cu o personalizare mai bună.
Acum există mai multă flexibilitate pentru a vă personaliza temele, astfel încât nu fiecare site sau aplicație să aibă aceeași asemănare. Pagina tematică v4 a fost de fapt extinsă cu mai mult conținut și fragmente de cod pentru a construi deasupra fișierelor Sass (popularul pre-procesor CSS). De asemenea, puteți găsi un proiect Starter npm pe platforma GitHub, care este disponibil ca depozit de șabloane.
Paleta de culori a fost, de asemenea, extinsă în versiunea 5. Sistemul de culori încorporat extins implică faptul că vă puteți stiliza cu ușurință culoarea fără a fi nevoie să părăsiți baza de cod. De asemenea, s-a lucrat mai mult pentru a îmbunătăți contrastul culorilor, inclusiv adăugarea unei metrici de contrast a culorilor în documentele de culoare Bootstrap.
5. Controale de formulare îmbunătățite
Bootstrap și-a îmbunătățit controalele de formă, grupurile de intrare și multe altele.
În v4, Bootstrap folosea controale de formular personalizate în plus față de valorile implicite furnizate de fiecare browser. În v5, toate acestea sunt acum personalizate. Toate butoanele radio, casetele de selectare, fișierul, gama și multe altele pentru a le oferi același aspect și comportament în diferite browsere.
Noile controale de formular nu mai conțin marcaje colorate inutile, ci se concentrează pe caracteristicile de proiectare standard și logice.
6. Bootstrap 5 adaugă Utilities API
După noi biblioteci CSS, cum ar fi Tailwind CSS, Bootstrap adaugă acum și o bibliotecă utilitară. Echipa de bootstrap spune că sunt fericiți să vadă cum alți dezvoltatori contestă modul în care am construit pe web în ultimul deceniu.
Utilitățile câștigă avânt în comunitatea de dezvoltare și echipa de bootstrap a luat în considerare. Echipa a adăugat mai devreme prevederi pentru utilități în v4 folosind global $ enable- * clase. În v5, s-au schimbat într-o abordare API și un nou limbaj și sintaxă în Sass. Acest lucru vă va oferi puterea de a crea noi utilități, în timp ce puteți continua să eliminați sau să modificați valorile implicite date.
Ca o modalitate de a oferi o organizare mai bună, unele utilități care erau în v4 au fost mutate în secțiunea Helpers.
7. Noua bibliotecă de pictograme Bootstrap
Bootstrap se mândrește acum cu propria sa bibliotecă de pictograme open source SVG, cu peste 1.300 de pictograme. Este personalizat pentru componentele cadrului, dar puteți lucra în continuare cu ele la orice proiect.
Având în vedere că sunt imagini SVG, acestea se pot scala rapid și pot fi implementate în mai multe moduri și, de asemenea, în stil CSS.
Puteți instala pictogramele folosind deasupra nivelului mării:
$ npm i bootstrap-iconsInstalați Bootstrap 5
Puteți merge la Pagina oficială de descărcare Bootstrap 5 dacă doriți să îl instalați. Dacă doriți să fiți la curent cu cea mai recentă versiune de dezvoltare, puteți utiliza deasupra nivelului mării a-l trage:
$ npm i bootstrap@next
La momentul scrierii acestui articol, cadrul se află în versiunea sa Beta 3. Aceasta înseamnă că software-ul este sigur de utilizat, dar este încă în curs de dezvoltare. Simțiți-vă liber să oferiți feedback echipei și să aduceți orice contribuție necesară.
Acțiune Acțiune Tweet E-mail Introducere în componentele web și arhitectura bazată pe componenteSă aruncăm o privire la componentele web obișnuite și să vedem de ce sunt utile.
Citiți în continuare Subiecte asemănătoare- Programare
- Dezvoltare web
- JavaScript
- CSS
Jerome este scriitor de personal la MakeUseOf. El acoperă articole despre programare și Linux. El este, de asemenea, un entuziast criptografic și ține mereu la curent industria cripto.
Mai multe de la Jerome DavidsonAboneaza-te la newsletter-ul nostru
Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Photoshop nu va deschide discul zero completFaceți clic aici pentru a vă abona