Bootstrap 4 Caracteristici noi și cool pe care le veți iubi

Următoarea lansare majoră a cadrului Bootstrap este la colț. Versiunea alfa poate fi descărcată deja de pe site-ul de dezvoltare al Bootstrap, iar codul sursă este disponibil și pe Github.

Twitter Bootstrap este în prezent cel mai popular cadru frontend acolo. Acesta permite dezvoltatorilor să să construiască rapid site-uri mobile și receptive. Bootstrap face posibilă utilizarea inteligentă a trio-ului standard HTML5, CSS3 și Javascript frontend. În prezent, acesta este utilizat de mai mult de 6 milioane de site-uri web.

Deși Bootstrap 4 se află încă în faza de dezvoltare (deci nu o utilizați pe un site live încă), dezvoltatorii au făcut o treabă fabuloasă. În acest post vom arunca o privire la noua versiune care include multe caracteristici extraordinare care vor fi cu siguranță eficientizarea și îmbunătățirea fluxului de lucru pentru dezvoltarea frontierelor.

1. Sass În loc de LESS

Până în prezent, Bootstrap a folosit LESS ca principalul său președinte CSS, dar pentru noua versiune majoră, regulile de stil vor fi refacute la Sass, care este mult mai popular printre dezvoltatorii frontend, are o bază imensă de contribuitori, mai ușor de utilizat și oferă mai mult posibilități. Mulțumită puternicului compilator Libsass Sass scris în C / C++ Bootstrap 4 se va compila mult mai repede decât înainte.

2. Noua grilă pentru ecranele mai mici

Bootstrap are un sistem sofisticat de grilare receptiv care permite dezvoltatorilor să vizeze dispozitive cu diferite ferestre de vizualizare. Bootstrap 3 are în prezent 4 clase de grilă pentru coloane, .Col-xs-XX pentru telefoane mobile, .col-sm-XX pentru tablete, .col-md-XX pentru desktopuri, și .col-lg-XX pentru desktop-uri mai mari. Bootstrap 4 va îmbunătăți sistemul de rețea cu un al cincilea, care va facilita dezvoltatorilor vizați dispozitive mai mici, cu o lățime de vizualizare de 480 px.

Noua clasă a rețelei a luat numele celui mai mic cel mai mic și a împins numele curent ale nivelurilor rețelei în sus cu o notă. În Bootstrap 4, desktopurile mari vor folosi .col-xl-XX selector de clasă. Este important să știm că, în ciuda noului nume, nu au adăugat o clasă nouă pentru ecrane foarte mari, ci pentru cele mai mici.

3. Introduce unitățile CSS relative

Bootstrap 4 scade în cele din urmă suportul pentru Internet Explorer 8. Acesta este într-adevăr un pas inteligent, deoarece le permite să scape de polifluziile plictisitoare și să se transforme în unități CSS relative. În loc de pixeli, noua lansare majoră va utilizați REM-uri și EM-uri care fac posibilă să implementeze o tipografie receptivă pe site-urile Bootstrap. Acest lucru va spori, de asemenea, lizibilitatea și va face site-urile mai accesibile pentru utilizatorii cu handicap.

Dacă doriți să încercați modul în care unitățile relative funcționează cu noul Bootstrap 4, verificați această demonstrație pe Codepen.

4. Brand New Bootstrap Cards

Echipa de dezvoltare a decis să unifice unele elemente anterioare ale interfeței de utilizator Bootstrap, deci au decis să introducă o noua componentă UI numită Carduri. Cardurile vor înlocui fostele sonde, miniaturi și panouri și vor oferi utilizatorilor un flux de lucru mai fluidizat. Nu vă faceți griji, cărțile vor păstra elemente familiare, cum ar fi titlurile, anteturile și subsolul fântânilor, miniaturi și panouri.

Deoarece cardurile vor fi mai flexibile decât componentele UI actuale, acestea vor permite un spațiu mai mare pentru implementările creative. Sunt câțiva pionieri care au efectuat deja experimente pe Codepen cu carduri Bootstrap. Puteți să le verificați sau să creați propriile cărți.

5. Modulul Reboot nou

Noul modul Reboot înlocuiește modulul precedent normalize.css resetați fișierul. Nu o scapă; dimpotrivă, ea construiește mai multe reguli. Scopul mutare a fost să includă toți selectorii CSS generici și stilurile de resetare într-un un singur fișier SCSS ușor de utilizat. Poți să te uiți la codul sursă aici dacă vrei să înțelegi mai bine modul în care funcționează noul modul.

Este bine de știut că noile stiluri de resetare au setat inteligent proprietatea CSS cu dimensiunea de cutie la frontieră-box pe element, care este, prin urmare, moștenit de fiecare element copil pe pagină. Noua regulă de stil face ca structurile receptive să fie mai ușor de gestionat. Dacă doriți să cunoașteți diferența dintre tipurile de layout-box și de tip border-box, aruncați o privire la această demonstrație la îndemână oferită de CSS-Tricks.com (nu a fost creată pentru Bootstrap 4, ci doar arată cum se dimensionează în cutie în general funcționează).

6. Suportul Flexbox opt-in

Bootstrap 4 face posibila folosirea modulului Flexbox Layout al CSS3, cu toate acestea - intrucat Internet Explorer 9 nu suporta modulul flexbox - versiunea initiala a Bootstrap 4 utilizează proprietățile CSS de tip float și de afișare pentru a implementa un aspect fluid.

Flexbox are o configurație ușor de folosit, care poate fi utilizată excelent în designul receptiv, deoarece oferă un container flexibil care se extinde sau se micșorează pentru a umple spațiul disponibil cel mai bun mod. Utilizați numai funcția opt-in flexbox, dacă vă aflați nu face trebuie să furnizeze suport pentru IE9.

7. Personalizare variabilă optimizată

Toate variabilele Sass folosite în noua versiune Bootstrap sunt incluse într-un singur fișier numit _variables.scss, care va simplifica în mod semnificativ procesul de dezvoltare. Nu trebuie să faceți altceva decât să copiați setările din acest fișier în altul numit _custom.scss pentru a modifica valorile implicite.

Poti personaliza multe lucruri cum ar fi culorile, spațiul, stilurile de legătură, tipografia, tabelele, punctele de intersecție și containerele, numărul coloanei și lățimea jgheabului și multe altele.

8. Noile clase de utilitate pentru spațiu

Bootstrap 3 are deja multe clase de utilitate practice, cum ar fi cele care schimbă plutitorul sau clarfixul, dar Bootstrap 4 adaugă și mai mult. clase noi de spațiere permite dezvoltatorilor să-și schimbe rapid vopselele și marjele pe site-urile lor.

Sintaxa pentru noile clase este destul de simplă, de exemplu adăugând .m-a-0 leagă o regulă de stil care stabilește marginile la 0 pe toate laturile elementului dat (margin-all-0). În timp ce marjele utilizează m- prefix, padding-urile sunt decorate cu p- prefix. În docs-urile de dezvoltare puteți să aruncați o privire la toate clasele noi de utilități de spațiere.

9. Tooltips și Popovers Powered by Tether

În Bootstrap 4 tooltips și popovers face uz de biblioteca superioară Tether, un motor de poziționare care face posibilă păstrarea unui element absolut poziționat chiar lângă un alt element de pe aceeași pagină. Asta inseamna sfaturi si intrebari va fi plasat automat în mod corespunzător pe site-urile Bootstrap 4.

Nu uitați că, deoarece Tether este o bibliotecă JavaScript a treia parte, trebuie să o includeți separat în fișierul HTML înainte de fișierul bootstrap.js.

10. Pluginurile JavaScript reluate

Echipa de dezvoltare a refacut fiecare plugin JavaScript pentru noua versiune folosind EcmaScript 6. Cu utilizarea inteligentă a celor mai recente specificații și cele mai noi îmbunătățiri, intenționează să îmbunătățească experiența frontend.

Noul Bootstrap 4 a fost supus și altor îmbunătățiri JavaScript, cum ar fi tip verificare opțiune, generic metode de teardown, și Suport UMD, care vor lucra împreună pentru a face ca cel mai popular cadru frontend să ruleze mai ușor decât oricând.

Acum citiți: 10 alternative ușoare pentru Bootstrap & Foundation