Bootstrap 3 vs Bootstrap 4 – O prezentare generală

Bootstrap a fost cel mai de încredere cadru front-end open source pentru a dezvolta site-uri web receptive, orientate spre mobil. Bootstrap este un framework faimos, de ce??? Pentru că tot ceea ce necesită sunt cunoștințele de bază despre HTML și CSS și putem construi un site web atractiv și funcțional utilizând clase predefinite de bootstrap care au grijă de receptivitatea pe diferite dispozitive.

Bootstrap 3 a fost lansat în anul 2013 și ultima versiune stabilă Bootstrap 3.3.7 a fost lansată în iulie 2016. În octombrie 2014, Twitter a anunțat că Bootstrap 4 este în dezvoltare. Prima versiune alfa a Bootstrap 4 a fost lansată în august 2015. Și acum, în august 2017, a fost lansată versiunea Bootstrap 4.0.0-beta. Puteți consulta acest tutorial Bootstrap aprofundat dacă doriți să începeți să învățați de la 0 .

În centrul atenției acestei postări vor fi diferențele cheie, adăugările și scăderile de la versiunea 3 la noua versiune 4.0.0-beta.

Ce este diferit în versiunea 4:

Acum putem începe să vorbim despre noile caracteristici ale Bootstrap 4. Pe măsură ce tehnologia evoluează rapid, limbaje mai noi și mai inteligente sunt dezvoltate pentru a face construirea de site-uri web curate și rapide mult mai simplă. Acesta este cazul celei mai noi versiuni de Bootstrap. Echipa spune că această „versiunea 4 este o rescrie majoră a aproape întregului proiect”. Vom rezuma câteva modificări cheie ale acestei îmbunătățiri.

Schimbări globale:

• Trecut de la Less la Sass pentru fișierele CSS sursă.
• S-a schimbat de la px rem ca unitate CSS primară a Bootstrap, deși pixelii sunt încă utilizați pentru interogări media și comportamentul grilei, deoarece ferestrele de vizualizare ale dispozitivului nu sunt afectate de dimensiunea tipului.
• Dimensiunea globală a fontului a crescut de la 14px la 16px .
• S-a adăugat un nou nivel de grilă pentru ~480px și mai jos.

Sistem grilă:

Pasul major al Bootstrap 4 către îmbunătățire este mișcarea sa către adoptarea Flexbox. Ca parte a flexbox, a inclus suport pentru clasele de aliniere verticală și orizontală. Bootstrap 4 pune mult accent pe personalizare. Noul sistem de niveluri de grilă permite Bootstrap 4 să se bucure de prezența a până la 5 niveluri de grilă (exemplu de 5 niveluri: .col-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4 ). Se poate spune cu ușurință că Bootstrap 4 oferă acces la un sistem de grilă îmbunătățit.

• S-a adăugat un nou nivel de grilă SM sub 768px pentru un control mai granular. Acum există xs, sm, md, lg și xl. Acest lucru înseamnă, de asemenea, că fiecare nivel a fost crescut cu un nivel (deci .col-md-6 în v3 este acum .col-lg-6 în v4).
• S-au modificat punctele de întrerupere a interogării media a sistemului de grilă și lățimile containerului pentru a ține cont de noul nivel de grilă și pentru a se asigura că coloanele sunt divizibile uniform cu 12 la lățimea lor maximă.
• Punctele de întrerupere a grilei și lățimile containerelor sunt acum gestionate prin hărți Sass ($grid-breakpoints și $container-max-widths) în loc de câteva variabile separate. Acestea înlocuiesc în întregime variabilele @screen-* și vă permit să personalizați complet nivelurile grilei.
• Interogările media s-au schimbat și ele. În loc să repeți declarațiile de interogare media cu aceeași valoare de fiecare dată, acum există @include media-breakpoint-up/down/only. Acum, în loc să scrieți @media (lățime min: @screen-sm-min) { … }, puteți scrie @include media-breakpoint-up(sm) { … }.

Suport pentru browser:

• S-a renunțat la suportul IE8 și iOS 6. v4 este acum doar IE9+ și iOS 7+. Pentru site-urile care au nevoie de oricare dintre acestea, utilizați v3.

Clase de utilitate:

În Bootstrap 4, noi clase de utilitate au fost incluse fără a împiedica nicio funcționalitate existentă. Adăugări atât de importante sunt cele ale claselor de aliniere a textului responsive, responsive floats și încorporarea responsive. Pe lângă faptul că oferă multe comenzi rapide, acestea, respectiv, permit modificarea alinierii textului, flotarea elementelor și scalarea raportului de aspect al oricărui suport media încorporat. (exemplu: .hidden-md-up ascunde un element în ferestrele medii, mari și extra-mari. Acum, în loc de .hidden-md-up , utilizați .d-md-none ).

Imagini:

• Redenumit .img-responsive la .img-fluid .
• Redenumită .img .img-rounded în .rounded
• Redenumit .img- .img-circle în .rounded-circle

Mese:

• Tabelele responsive nu mai necesită un element de împachetare. Cu cuvinte simple, în Bootstrap 3, clasa .table-responsive ar trebui adăugată la părintele <div>. Dar în Bootstrap 4, clasa .table-responsive trebuie adăugată la elementul <table> .
• A fost adăugată o nouă opțiune .table-inverse .
• S-au adăugat modificatori pentru antetul tabelului: .thead-default și. .thead-inverse
• Clasele contextuale au fost redenumite pentru a avea un .table- . Prin urmare, .active .success , .warning , .danger și .table .table-info la .table-active , .table-success , .table-warning , .table-danger și .table-info.

Navigare:

În Bootstrap 4, componenta de navigare a fost simplificată într-o mare măsură. Unul este necesar pentru a crea o nouă listă de elemente care utilizează cea mai recentă clasă de bază de navigație. Există câteva completări recente, cum ar fi clasa nav-link, clasa nav-item și stilurile de bară de navigare.

• Componenta rescrisă cu flexbox.
• .navbar-default este acum .navbar-light , deși .navbar-dark rămâne același. Cu toate acestea, aceste clase nu mai stabilesc background-color ; în schimb ele afectează în esență doar color .
• .navbar-toggle este acum .navbar-toggler și are diferite stiluri și marcaje interioare (nu mai mult de trei <span> ).
• S-a renunțat complet la clasa .navbar-form . Nu mai este necesar; în schimb, utilizați doar .form-inline și aplicați utilități de marjă după cum este necesar.
• Barele de navigare nu mai includ în mod implicit margin-bottom sau border-radius .

Un tabel de comparație între versiunea 3 și versiunea 4 a Bootstrap

După cum am spus deja asta, echipa Bootstrap a rescris cadrul. Deci modificările de mai sus sunt doar modificări cheie pe care le-am scris aici. Pentru a citi în profunzime, vă rugăm să urmați linkul Bootstrap 4.

Ar trebui să migrăm la Bootstrap 4 sau să rămânem pe Bootstrap 3

Am vorbit despre caracteristicile pe care le oferă Bootstrap 4. Putem vedea că a fost depusă multă muncă în optimizarea și curățarea elementelor și claselor inutile în întregul cadru. Bootstrap 4 promite să fie mult mai rapid și simplificat pentru o flexibilitate și o ușurință și mai mari atunci când creați un site web minunat, prietenos cu dispozitivele mobile.

Bootstrap 4, mutat în flexbox. Aceasta poate fi considerată una dintre cele mai mari și semnificative realizări. Acest lucru va oferi următoarele beneficii:

• Grilă bazată pe Flexbox
• Nou nivel de grilă XLl
• Cea mai recentă grilă cu aspect automat
• Opțiuni de personalizare Navbar
• Noi utilități de spațiere
• Configurație Sans Glyphicons (zonă fără umflare)
• Dimensiune receptivă
• Plutitoare receptive
• Marje automate
• Centrare verticală

Concluzie

Bootstrap a ușurat întotdeauna viața dezvoltatorilor și, prin actualizarea versiunii, acum bootstrap are multe mai multe caracteristici și opțiuni noi pentru a face lucrurile, și mai mult, mai ușoare pentru dezvoltatori și de aceea oamenii migrează de la Bootstrap 3 la Bootstrap. 4, deoarece este mai convenabil și mai accesibil decât omologul său anterior.