Share
Bootstrap, unul dintre cele mai populare cadre front-end printre designerii de web, și-a lansat recent foarte așteptat cu nerăbdare versiunea 4! Să aruncăm o privire la ceea ce este nou, la ce a fost eliminat și ce puteți face cu el.
Nu am încetat niciodată să creadă și sperăm că nici tu nu ai făcut-o! Bootstrap 4.0.0 a aterizat în sfârșit! https://t.co/zFAOxpyhvD
- Bootstrap (@getbootstrap) 18 ianuarie 2018
Această repetare a lui Bootstrap, conform lui Mark Otto și a echipei, este o "rescriere majoră a întregului proiect". Asta promite multe îmbunătățiri și, de asemenea, sugerează că există multe pentru a vă pune capul dacă intenționați să migrați proiectele existente la această nouă versiune. Nu există "schimbări de rupere", dar sunt multe de luat. Timpul de a sari și de a examina cele mai importante caracteristici.
Tradițional, aspectul Bootstrap a fost alimentat de stiluri bazate pe plutitor. În versiunile recente, a fost pusă la dispoziție o alternativă flexbox, dar având în vedere extensia sa de browser, flexbox este acum comandantul rețelelor Bootstrap. Tehnologia CSS din spatele rețelelor Bootstrap nu face o diferență enormă, dar flexbox oferă mai multă flexibilitate decât plutește, astfel încât grilele bazate pe flexbox-uri să vină cu câteva opțiuni suplimentare. De exemplu, prin utilizarea mijloacelor flexbox puteți defini o coloană și aveți posibilitatea ca frații săi să fie redimensionați automat în jurul acesteia.
Trecerea la favorizarea flexbox-ului a determinat o altă schimbare: sprijinul pentru browser. Bootstrap v4 a scazut in mod oficial suportul pentru Internet Explorer 8, 9 si iOS 6. Acest lucru inseamna ca site-urile dvs. Bootstrap vor sustine doar IE10 + si iOS 7+. Merită să luați notă.
Fanii Sass vor fi încântați să audă că Bootstrap este acum oficial un proiect Sass-first. Dacă descărcați sursa Bootstrap, veți găsi un folder numit "Sass", în care veți vedea toate partialele necesare. "_Variables.scss" conține toate variabilele și setările de care aveți nevoie, apoi "bootstrap.scss" găzduiește toate @import directive, permițându-vă să personalizați instalarea Bootstrap prin includerea sau excluderea oricăror componente pe care le doriți.
În toate locurile, în afară de interogările mediatice, Bootstrap v4 a scăzut pixelii în favoarea unităților relative de măsură, cum ar fi rems. Acest lucru face ca totul să fie mai scalabil, așa că, dacă nu ați ajuns încă să vă obișnuiți cu unități, acum ar fi un moment minunat să aruncați o privire asupra acestor resurse:
Pe lângă mutarea lui Bootstrap de la planurile bazate pe plutitor, răspunsul său acum vine și cu un nivel suplimentar. De acum înainte, veți putea personaliza aceste cinci valori prestabilite:
$ grid-breakpoints: (xs: 0px, sm: 576px, md: 768px, lg: 992px, xl: 1200px)!
Următoarea schimbare notabilă vine sub forma unui nou fișier de resetare. "Reboot" ia resetările lui Normalize, care utilizează doar selectori de elemente, apoi se bazează pe ele cu anumite stiluri de resetare bazate pe clase (veți găsi .masa și .masă marginita îngropat acolo cu mai multe altele).
Dacă ați descărcat vreodată o versiune anterioară de Bootstrap, veți fi familiarizați cu personalizarea online. Acest instrument v-a permis să verificați și să debifați diferite aspecte ale cadrului Bootstrap pentru a vă crea versiunea ideală.
Ei bine, a dispărut.
În schimb, Bootstrap se concentrează acum pe structura sa modulară, permițându-vă să folosiți Sass de la sfârșitul dvs., să includeți doar ceea ce aveți nevoie și să vă compilați propriul rezultat final .
Fă-o singurBootstrap nu mai include Glyphicons. În schimb, vă sfătuim să găsiți propriile preferințe și să le includeți în orice mod vă recomandați. Echipa Bootstrap preferă ei înșiși următoarele seturi, pe care le recomandăm să le implementați ca SVG, mai degrabă decât să utilizați pictograme de fonturi web:
Iconic e degeabaVersiunile anterioare ale Bootstrap au inclus suport Grunt pentru automatizarea multor sarcini comune; asta a dispărut acum. În schimb, Bootstrap vine acum cu o grămadă de scripturi npm pe care le veți găsi în fișierul "package.json". Puteți utiliza aceste pentru a face lucruri cum ar fi urmăriți fișierele Sass pentru modificări, efectuați teste de scame pe JavaScript sau pur și simplu utilizați run npm dist să faceți totul și să compilați o versiune de distribuție a site-ului dvs. terminat.
Pentru mai multe detalii despre modul în care funcționează Bootstrap și Node.js, aruncați o privire la docs-ul pentru crearea unui instrument sau consultați următoarele tutoriale:
Odată cu aceste modificări majore, există o serie de modificări minore la cele mai recente Bootstrap. Ventilatoare ale componentelor cum ar fi panouri, miniaturi și fântâni vor fi dezamăgite pentru a afla că acestea au fost eliminate. Cu toate acestea, ei au făcut loc pentru o componentă cuprinzătoare numită "carte", care este de fapt o mare ameliorare. Puteți citi toate informațiile despre aceste modificări și multe altele pe pagina Migrare.
Rămâi acordat pentru mai multe tutoriale și cursuri pentru Bootstrap 4 pe Tuts +, și vă voi vedea data viitoare!
Accentsconagua