Recent, a fost lansată o nouă versiune a patra a Bootstrap. Vreau să vă spun ce este nou în această versiune, cum diferă de a treia și cum va afecta procesul de dezvoltare a site-ului web.

Daca nu stiai...

Bootstrap este un cadru bazat pe Bazat pe HTMLși CSS. Conține stiluri pentru elementele principale care sunt utilizate în aspect. Utilizarea unui astfel de cadru accelerează semnificativ procesul de creare a paginilor. Stilurile standard sunt ușor de schimbat, oferind un proces flexibil și simplu pentru crearea machetelor site-ului.

Apropo, abonați-vă la twitterul meu pentru a obține cele mai recente tutoriale Bootstrap acolo.

Dezvoltarea proiectului

Odată cu un număr tot mai mare de utilizatori și componente de suportat, crește și numărul de erori cu care trebuie tratate. Dezvoltatorii proiectului invită toată lumea să ia parte activ la dezvoltarea acestuia.

Prin urmare, depozitul de proiect așteaptă cu nerăbdare comitările dvs. :).

Suport Bootstrap v3

Cel mai întrebare importantă, pentru care majoritatea cititorilor au venit aici: Va funcționa bine un site construit folosind Bootstrap 3 dacă actualizez versiunea cadrului?

Trebuie remarcat faptul că, odată cu lansarea celei de-a treia versiuni, suportul pentru versiunea 2 de bootstrap a fost întrerupt, ceea ce dezvoltatorii încă regretă. Bootstrap va continua să fie îmbunătățit. Erori critice iar erorile vor fi corectate, dar nu la fel de activ ca înainte. Desigur, documentația pentru a treia versiune va rămâne disponibilă împreună cu a patra.

Codul scris în BS3 va fi acceptat în versiune noua, iar elementele dvs. vor continua să funcționeze așa cum ar trebui. La acestea vor fi adăugate noi clase și funcții, de exemplu:

Dar nu este nimic în neregulă cu asta, asta se numește progres cadru. Dacă știți să codificați pe Bootstrap 3 și să citiți blogul meu, puteți stăpâni cu ușurință a patra versiune.

Teme

Noua versiune va prezenta teme oficiale de la dezvoltatorii Bootstrap. Mă uit la ei foarte sceptic. În orice caz, pe acest moment: Există doar trei teme până acum, costă 99 de dolari și văd puțină folosire de la ele.

Abandonând temele individuale, dezvoltatorii ne oferă să cumpărăm aceste teme :).

Temele, de altfel, se bazează pe Bootstrap 3: acum este un panou de control, o aplicație și un site de vânzări. Poate că în viitor vor deveni subiecte cumpărare chilipir, între timp, aceasta este o modalitate bună de a sprijini dezvoltatorii.

Opinia mea

Suntem foarte mulțumiți de completările la aspectul blocului, variabile Sass și multe altele sistem structurat cadru. Motivul principal de bucurie este că cadrul trăiește și se dezvoltă, erorile sunt corectate și se adaugă altele noi cu o regularitate de invidiat.

Mă bucur că avem unul Unealtă puternică, care devine mai convenabil și mai atent cu fiecare actualizare. Sper sa va placa si voua.

Faceți clic pe „Like” pentru a ne urmări pe Facebook

Salutare tuturor, prieteni! La jumătatea anului 2013, a fost lansat Bootstrap 3, care în ultimii ani s-a dovedit a fi un cadru CSS convenabil și extensibil pentru creație rapidă layout-uri adaptive. Milioane de site-uri folosesc cu succes acest cadru și suntem deja destul de obișnuiți cu el.

Misto

La care se adauga

Bâlbâi

Pe 18 ianuarie 2018 a avut loc un eveniment important - mult așteptatul Versiunea Bootstrap 4, pe baza utilizării modelului Flexbox pentru markup care în prezent are suport pentru toți browsere moderneși este mai convenabil și mai flexibil pentru dezvoltatori decât model clasic marcaj bazat pe Float. Acum putem spune cu deplină încredere că nu este posibil, dar TREBUIE să fie dactilografiat folosind Flex!

Materiale suplimentare pentru lecția Bootstrap 4

1. Puteți testa singuri toate exemplele din această lecție. Arhiva cu exemple este pe GitHub;
2. Puteți citi mai multe despre documentația Bootstrap 4 la birou. site-ul web;
3. Șablon de pornire, inclusiv Bootstrap 4: OptimizedHTML 4.

Astăzi vom arunca o privire mai atentă asupra lucrului cu grila Bootstrap 4, comparând-o cu versiune veche. Această lecțieîți va fi util nu numai dacă ești începător și te familiarizezi cu Bootstrap, ci și dacă ești dezvoltator cu experiențăși doriți să învățați toate regulile și nuanțele aspectului folosind grila Bootstrap 4 și instrumentele Flexbox incluse în acesta.

1. Parametrii de bază impliciti ai grilei

Grila implicită din Bootstrap 4 este foarte asemănătoare cu cea de-a treia versiune, dar există câteva diferențe importante.

Din tabelul de opțiuni principale putem observa diferențe evidente din grila a treia versiune. Prefixul de clasă „.col-xs-”, care este responsabil pentru cele mai mici rezoluții, este acum eliminat, înlocuit cu un prefix simplificat „.col-”. S-ar putea să credeți în mod eronat că prefixul „.col-” este responsabil pentru rezoluțiile minime ale dispozitivelor mobile, dar acest lucru nu este în întregime adevărat. Printre altele, prefixul „.col-” este una dintre cele mai importante inovații din Bootstrap 4. Aceasta este o clasă care este responsabilă pentru aranjarea automată a coloanelor la orice rezoluție. Dar mai multe despre asta mai târziu.

Pentru rezoluții mici, prefixul „.col-sm-” cu o interogare media de 576 de pixeli este responsabil. Lățimea containerului este de 540 px. Rezoluțiile medii încep de la 768 de pixeli. Lățimea containerului - 720 px. Rezoluțiile mai mari funcționează cu rezoluții de dispozitiv de 992 de pixeli sau mai mult. Lățimea containerului - 960 px. Și cele mai mari - de la 1200 de pixeli. Lățimea containerului este fixată la 1140 px.

Rețineți că valorile maxime interogările media au valori imprecise cu partea fracțională „.98” în pixeli. Acest lucru este vizibil atunci când alegeți metoda de aspect Desktop First, unde lățimea maximă a interogării media este limitată. De exemplu, la compilarea Sass „+media-breakpoint-down(lg)” vom obține „@media (max-width: 1199.98px)”. Aici sunt eliberați 0,02 pixeli pentru a începe următoarea interogare media. Tine cont de asta. În numerele următoare ale „Jedi Layout 8” vom analiza acest lucru și multe alte puncte din această lecție folosind un exemplu real.

2. Dispunerea automată a coloanei

2.1 Coloane de lățime egală

Folosind noua clasă generică „.col”, puteți specifica până la 12 coloane pe rând (părinte de „.row”), a căror lățime va fi calculată automat în funcție de numărul de elemente și va fi egală.

De exemplu:

2.2 Setarea lățimii unei coloane

De asemenea, puteți seta în mod explicit lățimea unei coloane și lăsați restul automat.

ÎN în acest exemplu al doilea element din al treilea rând are clasa „.col-6” iar al doilea element din al doilea rând are clasa „.col-5”, care ocupă numărul corespunzător de coloane pe toate rezoluțiile ecranului. Lățimea coloanelor rămase este receptivă și se calculează automat, ocupând tot spațiul rămas.

2.3 Conținut de lățime variabilă

Puteți folosi clasa „col-(breakpoint)-auto” pentru a defini conținutul cu o lățime variabilă, în funcție de spațiul ocupat de conținutul coloanei. Unde punctul de întrerupere este dimensiunea ecranului (xl, lg, md sau sm).

Aici vedem că cele două coloane centrale ocupă o lățime corespunzătoare lățimii conținutului, dar în primul rând, datorită clasei „.justify-content-sm-center” a „.row”, întregul rând este centrat. iar lățimea totală depinde doar de lățimea coloanei centrale, în timp ce al doilea rând este întins la toată lățimea disponibilă, dar a doua coloană rămâne fixă ​​la lățimea conținutului.

2.4 Multi-rând

Datorită Bootstrap 4, puteți crea mai multe linii (cratime) într-un singur rând. Acest lucru poate fi implementat folosind clasa „.w-100”, care este foarte asemănătoare cu eticheta „br” și, în esență, înglobează doar coloanele pe o linie nouă.

Rețineți că această clasă face parte din caracteristicile suplimentare ale Bootstrap 4, care sunt conectate la proiect separat dacă se utilizează versiunea Sass a proiectului Bootstrap și se află în folderul „scss/utilities”. De asemenea, puteți conecta alte plugin-uri din acest folder la proiectul dvs., după cum este necesar.

3. Clase adaptive

3.1 Puncte de întrerupere

Foarte oportunitate interesantă Bootstrap 4 - capacitatea de a seta coloane universale care vor fi afișate la toate rezoluțiile. Aceasta este clasa „.col” menționată mai devreme. În plus, puteți defini o clasă care indică numărul specific de coloane pe care le va ocupa conținutul - acestea sunt clase cu prefixul „.col-(număr de coloane)”, de exemplu „.col-6” ne spune că conținutul va ocupa 6 coloane din 12. În cazul în care nu este necesar să specificați o anumită cantitate, puteți utiliza în siguranță clasa universală„.col”.

3.2 Pe dispozitivele mobile

Puteți utiliza prefixul de clasă „.col-sm-(numărul de coloane ocupate)” pentru a defini grila de bază la toate rezoluțiile, cu excepția celor mai mici. Pe mici ecrane coloanele unei astfel de grile se vor stivui unele sub altele. Pe mai multe permisiuni - vor ocupa la fel de mult spațiu pe cât ați definit în clase.

Aici vedem că primul rând pe dispozitivele cu o rezoluție mai mare de „sm”, adică mai mult de 576 de pixeli. este împărțit în 2 coloane - 8 și respectiv 4 din 12 lățime. Lățimea coloanelor din al doilea rând este calculată automat, dar la cele mai mici rezoluții aceste coloane se stivuiesc și una sub cealaltă, datorită clasei „.col-sm”.

3.3 Crearea unei rețele combinate complexe

CU folosind Bootstrap puteți crea orice combinație de coloane atunci când creați o grilă. Pentru fiecare coloană, puteți seta orice comportament la rezoluții diferite folosind clase adaptive. Aici diferențele față de a treia versiune sunt doar în numele claselor.

4. Alinierea

Bootstrap 4 se bazează pe „flex” și ne oferă toate capacitățile acestui model, care sunt disponibile în clase simple gata făcute. Posibilitățile includ alinierea verticală și orizontală.

4.1 Alinierea verticală

Pe lângă controlul alinierii prin „.row” părinte, puteți alinia coloanele dându-le clasele corespunzătoare:

4.2 Alinierea orizontală

În plus, Bootstrap 4 are în arsenal instrumente pentru aliniere orizontala coloane folosind prefixul „.justify-content-” pe „.row”.

4.3 Eliminarea marginilor dintre coloane

Foarte des există situații în care este necesară eliminarea marginilor dintre coloane. De exemplu, dacă creați o galerie și elementele trebuie plasate aproape unul de altul, astfel:

Pentru a face acest lucru, trebuie doar să setați clasa suplimentară „.no-gutters” la elementul „.row”.

4.4 Mutarea coloanelor pe o linie nouă

Dacă un rând (.row) este umplut cu un număr total de coloane mai mare de 12, următoarea coloană este mutată pe o nouă linie.

Totul aici este la fel ca în versiunea 3 a Bootstrap.

5. Ordinea elementelor

5.1 Clase de ordine de elemente

Puteți folosi clase speciale cu prefixul „.order-” pentru a defini ordinea elementelor. Dacă sunteți familiarizat cu Flex-layout, aceste reguli vă vor fi familiare. Bootstrap 4 vă oferă posibilitatea de a seta ordinea elementelor folosind clase. Puteți seta comanda direct (.order-1.order-md-2):

Sau puteți folosi clase speciale care determină ordinea primului și ultimului elemente (.order-first, .order-last):

5.2 Deplasarea coloanei

Prin analogie cu Bootstrap 3, versiunea 4 are și capacitatea de a compensa coloanele orizontal, dar acest lucru este implementat oarecum diferit și există clase speciale pentru aceasta cu prefixul „.offset-”.

5.2.1 Clase de deplasare

Puteți muta o coloană la dreapta folosind clasele „.offset-md-*”, care măresc indentarea din stânga cu * numărul de elemente. Din exemplul de mai jos, clasa „.offset-md-2” va muta coloana „.col-md-4” cu 2 coloane la dreapta, restul exemplelor funcționează în același mod:

Puteți reseta offset-ul la toate rezoluțiile datorită clasei „.offset-*-0”, unde * este sm, md, lg sau xl.

6. Cuibărire

Este de așteptat ca Bootstrap 4 să accepte imbricarea elementelor. Totul funcționează aici la fel ca în versiunea a treia - pentru a cuibărește coloanele în altele, trebuie să creați o clasă copil „.row” și să cuibărească coloanele în ea.

Ne-am uitat la principalele caracteristici ale lucrului cu grila Bootstrap 4. Dacă doriți să vă familiarizați mai mult cu toate capabilitățile cadrului, vă recomand să studiați documentația de pe site-ul oficial.

În lecția următoare, ne vom uita la configurarea grilei Bootstrap pentru proiectul dvs. specific folosind exemplul de utilizare a OptimizedHTML 4 în șablonul de pornire. Și anume, configurarea, lucrul cu variabile de indentări, puncte de întrerupere, număr de coloane și alte lucruri.

Vă mulțumim pentru atenție, prieteni, și ne vedem la următoarele lecții!

De la autor: Pe 19 august a fost lansată versiunea alfa a Bootstrap 4, la exact patru ani de la prima lansare oficială a Bootstrap v1 (Coincidență, nu-i așa?). Cadrul front-end mereu popular este acum complet și, în calitate de mare fan al Bootstrap, sunt foarte încântat și abia aștept să pun mâna pe noile funcții!

După un an întreg de dezvoltare, 1100 de comite și 12000 de linii de modificări de cod; Există atât de multe funcții cu care abia aștept să lucrez. Pentru a economisi timp de la citirea jurnalului de modificări, am compilat o listă de funcții noi pe care le-am găsit interesante.

Noul modul de resetare „Repornire”

Să începem de unde încep toate cadrele, cu modulul de resetare. Modul nou repornirea este construită pe normalize.css tradițional, dar toate selectoarele și stilurile de resetare obișnuite au fost mutate într-un fișier scss separat. De asemenea, puteți observa optiune noua, setarea cutie-dimensiune standard: border-box for etichetă html- acest lucru va permite moștenirea această proprietate toate elementele copil.

html ( dimensionarea casetei: border-box; ) *, *:înainte, *:după ( dimensionarea casetei: moștenire; )

Această abordare face mai bine să suprascrieți parametrii dacă este necesar, decât să folosiți!important.
Îi poți mulțumi lui Jon Neal pentru truc, dar pentru analiză detaliată aceasta metoda Site-ul CSS-Tricks.

Regulă Rem și Em!

De dragul optimizării, Bootstrap v4 a pierdut suportul pentru IE8 și o mulțime de polyfills CSS3. Începând cu IE9+, acum acceptă alte module CSS mai îndrăgite. Una dintre ele a fost unitățile rem (root em), acestea calculează dimensiunea fontului în raport cu elementul rădăcină (html).

Unitățile Rem ne vor ajuta să ne adâncim cu adevărat în tipografia receptivă. Deoarece toate dimensiunile fonturilor depind direct de elementul nostru rădăcină, putem crea interogări media pentru a modifica dimensiunea fontului la diferite dimensiuni de ecran. Să combinăm asta cu noul mixin grid pentru marimi diferite ecran și voila! Mai jos este un exemplu de modificare a dimensiunii fontului pe site-ul nostru web atunci când este vizualizat pe ecrane foarte mici:

html( font-size:16px; ) // creează o interogare media pentru ecrane de dimensiuni extrem de mici (0 - 34em) @include media-breakpoint-up(xs) ( html( font-size:18px; ) )

Eu aleg Flexbox

Din cutie, Bootstrap v4 nu acceptă Flexbox, utilizând în schimb metode standard de împachetare sau de afișare a tabelului. Acesta este conceput pentru a accepta IE9+, dar dacă puteți renunța și acceptați doar IE10+, atunci puteți conecta Flexbox la proiectul dvs. Acest lucru se poate face prin modificarea valorii booleene a variabilei din fișierul _variables.scss; după care CSS-ul dvs. compilat va conține stiluri Flexbox. Flexbox este utilizat nu numai datorită grilei, ci și datorită altor elemente, inclusiv noile componente carduri, grupuri de intrare și componente media.

Exemplu

Să trecem la un exemplu în care Flexbox poate fi util. De foarte multe ori am un set de coloane liniare (ca în imagine), unde conținutul unei coloane mărește și înălțimea celorlalte coloane. Dilema CSS clasică. Unul dintre avantajele Flexbox este că putem forța toate coloanele să aibă aceeași înălțime. Nu este nevoie să scrieți cod CSS suplimentar!

Fără Flexbox

Cu Flexbox

SCSS a „uzurpat” MAI puțin, la fel ca Preprocesor CSS a fost selectat în Bootstrap v4. Tot codul CSS a fost refactorizat în SCSS, fără nici un port oficial LESS la momentul scrierii. Mark explică câteva dintre motivele acestui lucru pe Twitter.

Dacă sunteți un mare fan al LESS original, atunci Mark a cerut ajutor pentru crearea și întreținerea portului LESS.

Carduri, un element de interfață unificat

Componentele clasice de puț, panou și miniaturi au fost eliminate din Bootstrap v4. au venit în locul lor componentă nouă: carduri!

Element nou cardul are părți similare din panouri, cum ar fi anteturi, anteturi și subsoluri, toate ambalate într-un container flexibil.

Și încă mai mult:

Suprapuneri de imagini și fundaluri

Puteți seta o imagine ca fundal și o suprapuneți peste text sau alt conținut. Toate acestea se fac fără un singur inutil șiruri CSS, trebuie doar să adăugați la card:

Clasa card-inverse face textul alb, permițându-vă să setați un fundal mai întunecat, dacă doriți. În ceea ce privește fundalurile, puteți folosi și cele standard culorile de fundal. De exemplu, card-primary va seta culoarea primară pentru card etc. și așa mai departe.

Cărți grupate

De asemenea, pe lângă grila standard cu umplutură, veți găsi opțiunea de a grupa cărțile fără umplutură între ele și modul de a seta blocurile la aceeași înălțime. În mod implicit, acest lucru se poate face cu display: table și table-layout: fix, dar dacă aveți Flexbox puteți folosi și display: flex.

Plasă - zidărie

Cărțile vin sub formă de coloane de cărămizi, ceea ce vă permite să mutați blocurile mai aproape unul de celălalt. Această opțiune nu este acceptată în IE9 - este necesară IE10 sau o versiune superioară!

Chiar mai multe clase de utilitate?!

În versiunile anterioare de Bootstrap, existau multe clase numite „clasa de utilitate”, acestea erau folosite pentru a schimba rapid și ușor conținutul, fără a afecta stilurile sale specifice. Modificările au fost, în general, limitate la floats (pull-left, pull-right), culoare (text-primar, etc.), clearfix-uri (.clearfix) și altele.

În Bootstrap v4 alpha, am avut acces la o serie întreagă de noi clase de utilitate legate de umplutură și margini. Deși aceasta poate fi o mișcare controversată, va permite utilizatorilor Bootstrap v4 să facă clic rapid pe un singur buton și să alinieze conținutul în aceeași distanță. Unii pot crede că aceasta este o abatere de la stilurile inline, dar aceste clase vă permit să stilați rapid și uniform componentele fără a fi nevoie să creați un selector separat pentru a face acest lucru.

Clasele de utilitate de umplutură și marjă sunt specificate cu mai multe valori pentru variabila distanțier. De exemplu:

// $spacer - variabilă sass egală cu 1rem sau 16px .m-a-0 ( margine: 0 !important; ) .m-a ( margine: $spacer !important; ) .m-a-md ( margine: ($spacer * 1.5) !important ; ) .m-a-lg ( margine: ($spacer * 3) !important; )

În code.m-a înseamnă căptușeală exterioară pe toate părțile. Pentru umplutura exista si cursuri pt partide individuale, axe, dimensiuni (folosind -0, -md și -lg). Mai jos este un exemplu de alte câteva clase:

// umplutură standard pe toate laturile.p-a ( padding: $spacer !important; ) // padding standard pe partea de sus.p-t ( padding-top: $spacer-y !important; ) // padding standard la dreapta.p-r ( padding -right: $spacer-x !important; ) // umplutură standard de jos.p-b ( padding-bottom: $spacer-y !important; ) // padding-stand standard.p-l ( padding-left: $spacer-x !important; ) // umplutură standard pentru axa X (stânga și dreapta).p-x ( padding-right: $spacer-x !important; padding-left: $spacer-x !important; ) // padding-standard pentru axa Y (sus și jos).p-y ( padding-top: $spacer-y !important; padding-bottom: $spacer-y !important; )

Ideea principală este de a reduce numărul de clase personalizate extrem de specializate care sunt create pentru a muta conținutul, mai degrabă decât să le adăugați ca metode de aliniere a conținutului.

Am vorbit rapid cu Mark Otto despre utilizarea acestor clase (@mdo co-fondatorul Bootstrap) pe canalul lor public Slack și iată ce a avut de spus:

„Ne-am dat seama că nu ne putem lipsi de ele; valorile implicite pentru multe componente au fost înlocuite prea des. Marja și umplutura par să își schimbe cel mai des sensul (împreună cu culoarea și fonturile)"

De asemenea, demn de menționat

Există literalmente alte sute de funcții noi și actualizări ale codului existent, prea multe pentru o singură postare. Vă voi spune despre încă câteva care nu au fost incluse în lista principală, dar merită menționate.

Noua documentatie

Documentația Bootstrap v4 a fost actualizată. Structura prin care funcțiile au fost împărțite în machete, conținut și componente s-a schimbat ușor. Ceea ce este cu adevărat cool la noua documentație este că fiecare componentă este acum activată pagină separată. Acest lucru le face mai ușor de găsit și le puteți verifica imediat adaptabilitatea jucându-vă cu dimensiunea ferestrei browserului.

Nou nivel de grilă

Adăugat la Bootstrap 4 nou nivel grile pentru ecrane mici (480px lățime), această dimensiune a ecranului a primit numele clasei celei precedente ecran mic(.col-xs-XX). În același timp, toate nivelurile grilei au crescut cu unul, creând astfel un nou nivel cel mai mare.col-xl-XX.

La exact 4 ani de la apariția primei versiuni de Bootstrap (este o coincidență?). Noua versiune a fost dezvoltată pe parcursul unui an, au fost făcute 1.100 de comiteri și au fost scrise 120.000 de linii de cod. În acest articol ne vom uita la principalele modificări din noua versiune.

Noul fișier de resetare a stilului „Repornire”

Noul modul se bazează pe normaliza. css iar acum toate stilurile au fost transferate în fișierul scss. Este posibil să observați și un truc inteligent, stil tradițional cutie - dimensionare : chenar - cutie instalat pt html element și apoi moștenit global de toate elementele:

html ( dimensionarea casetei: border-box; ) *, *:înainte, *:după ( dimensionarea casetei: moștenire; )

Acest lucru facilitează trecerea stilului dimensionarea cutiei fără a crește specificitatea utilizând ! important.

Rem și Ems

Bootstrap 4 alpha cedează suportul pentru IE8 și multe hack-uri CSS3. Acest lucru a permis utilizarea unor noi proprietăți CSS3. Unul din ei rem care calculează înălțimea fontului în funcție de înălțimea elementului rădăcină html .

Folosind rem putem crea o tipografie cu adevărat receptivă. Deoarece fontul depinde de elementul rădăcină, puteți crea reguli media pentru diverse rezoluțiiși vom obține management flexibil marimea fontului.

Exemplu de modificare a dimensiunii fontului pe ecrane mici:

html( font-size:16px; ) // Creează o interogare media pentru dispozitive foarte mici (0 - 34em) @include media-breakpoint-up(xs) ( html( font-size:18px; ) )

Suport Flexbox

Din cutie, Bootstrap 4 nu acceptă Flexbox, ajută cu suportul IE9+. Cu toate acestea, dacă doriți să utilizați Flexbox, îl puteți include în proiectul dvs. Acest lucru se face prin comutarea unei variabile booleene în fișierul _variables.scss. CSS-ul compilat va conține stiluri Flexbox. Flexbox este folosit nu numai ca grilă, ci și pentru alte elemente, cum ar fi carduri, grupuri de intrare și componente media.

Exemplu Flexbox

Să ne uităm la un exemplu în care Flexbox ne ajută. Sunt trei coloane dispuse pe rând. Pentru una dintre coloane, conținutul își crește înălțimea. Folosirea Flexbox vă permite să aliniați înălțimile coloanelor fără CSS suplimentar.

Trecerea de la Less la Sass

Toate CSS compilat folosind Sass, iar compilarea a fost accelerată folosind Libsass.

Carduri

Clasic bine , panouȘi miniatură au fost înlocuite cu o nouă componentă a cardului.

Suprapunerea imaginilor și imaginilor de fundal

Puteți impune imagine de fundal sau text fără CSS. Pentru a face acest lucru, trebuie să adăugați următorul element:

Clasă card - invers schimbați culoarea titlului în alb, pentru utilizare cu fundal întunecat.

Cărți de grupare

Pe lângă grila standard, puteți grupa cărți împreună, puteți elimina spațiul dintre ele și le puteți alinia pe înălțime. Implicit, folosit afisare: tabelȘi masa - aspect : fix, dar dacă flexbox este activat, va fi folosit display: flex în schimb.

Plasă de zidărie

Bootstrap 4 adaugă o grilă receptivă care aliniază înălțimea elementelor, menținând în același timp distanța verticală între elemente. Suportă IE10 și versiuni ulterioare.

Mai multe clase de ajutor

ÎN versiunea anterioara au fost incluse diverse clase numite „clase de ajutor”. Principalele clase utilizate au fost: trage - stânga , trage - dreapta, culoare ( . text – primar), clearfix( . clearfix).
Bootstrap v4 alpha a introdus o serie de clase care definesc elementele de umplutură și marjă.

// $spacer este o variabilă sass care este 1rem sau 16px .m-a-0 ( margin: 0 !important; ) .m-a ( margin: $spacer !important; ) .m-a-md ( margin: ($spacer * 1.5)! important ; ) .m-a-lg ( margine: ($spacer * 3) !important; )

M-a adaugă marginile din toate părțile elementelor. Există clase pentru fiecare parte individuală.
Alte clase:

// Adaugă padding pe toate laturile.p-a ( padding: $spacer !important; ) // Adaugă padding în partea de sus.p-t ( padding-top: $spacer-y !important; ) // Adaugă padding la dreapta.p-r ( padding- right: $spacer-x !important; ) // Adaugă umplutură în partea de jos.p-b ( padding-bottom: $spacer-y !important; ) // Adaugă padding la stânga.p-l ( padding-left: $ spacer-x !important; ) // Adaugă umplutură la stânga și la dreapta.p-x ( padding-right: $spacer-x !important; padding-left: $spacer-x !important; ) // Adaugă padding în partea de sus și jos.p-y ( padding-top: $spacer -y !important; padding-bottom: $spacer-y !important; )

O versiune stabilă a Bootstrap 4 va fi lansată foarte curând, deoarece la momentul scrierii acestui articol faza de testare alfa a fost finalizată și a doua versiune beta este deja disponibilă. Aceasta înseamnă că în versiune stabilă pot fi făcute unele modificări minore și timp schimbări dramatice terminat, puteți începe să testați și să utilizați Bootstrap 4 în proiecte reale.

Au trecut doi ani de când a fost lansată prima versiune alfa a Bootstrap 4, timp în care au fost făcute mii de comiteri și zeci de mii de linii de cod înlocuite. Au existat multe modificări și actualizări de la Bootstrap 3. Să ne uităm la ce este nou în cea de-a patra versiune a cadrului și care este diferența dintre Bootstrap 4 și Bootstrap 3.

Grilă nouă, suport FlexBox și componentă card

Un alt punct de întrerupere col-xl- a fost adăugat la grilă, în timp ce toate celelalte puncte de întrerupere au rămas, dar s-au mutat cu un nivel mai jos. Deci, cel mai mic - col-xs-, din al treilea bootstrap a declanșat la o lățime a ecranului de 767 px, iar acum se declanșează la 575 px. Acest lucru vă permite să adaptați mai precis paginile web la dispozitive mobile. Este de remarcat faptul că în Bootstrap 4 postfixul -xs- nu este specificat și se scrie pur și simplu col-? .

Noua rețea a devenit mai flexibilă datorită suportului tehnologiei " FlexBox" De exemplu, se întâmplă adesea ca conținutul unui bloc să fie mai mare decât conținutul altor blocuri aflate într-o linie; imaginea de mai jos arată cum se comportă astfel de blocuri atunci când se utilizează alinierea obișnuită " Pluti».

Utilizare " FlexBox» vă permite să faceți toate blocurile la aceeași înălțime, fără a fi nevoie să scrieți cod CSS suplimentar.

A apărut o componentă complet nouă" Card„(card), care le înlocuiește pe cele șterse: puțuri, miniaturi, panouri. Acesta este un instrument destul de flexibil și puternic, care include capacitățile tuturor celor trei componente la distanță. De asemenea, puteți grupa carduri și chiar implementați o grilă, așa-numita cărămidă.

Suport IE, tranziție la Sass, modul Reboot, abandonarea Glypicons și culoarea elementului

Bootstrap 4 acceptă IE 10 și versiuni anterioare Internet Explorer nu sunt suportate. Dacă este nevoie de asistență: IE8/IE9, Safari 8-, iOS 8- etc., atunci dezvoltatorii de cadru înșiși recomandă utilizarea Bootstrap 3.

S-a întâmplat eșec complet din " Mai puțin", acum compilarea codului sursă cadru se realizează numai pe " Sass", pentru a accelera compilarea, utilizați " Libsass».

Pentru compatibilitate între browsere, „ Reporniți", care include nucleul" Normalize.css” și extinzându-l. Toate setările pentru resetarea stilurilor standard de etichete HTML pentru browsere sunt într-un singur " Sass» fișier.

Bootstrap 4 a eliminat complet fontul pictogramei " Glipicoane", care este prezent în al treilea bootstrap. Dezvoltatorii framework-ului recomandă utilizarea bibliotecilor de pictograme terță parte care acceptă formatul SVG.

De asemenea, este de remarcat faptul că, în comparație cu al treilea bootstrap, unde au existat șase clase principale pentru designul color al elementelor, în al patrulea bootstrap au existat opt ​​astfel de clase.

Alte modificări ale cadrului

• Pixelii (px) sunt înlocuiți cu „ ei" Și " rem».
• Toate pluginurile JavaScript au fost rescrise la standardele ECMAScript 6.
• Designul tuturor componentelor (formulare, tabele, butoane etc.) a fost actualizat.
• Există mai multe clase de servicii.
• Funcționalitate îmbunătățită a sfaturii cu instrumente și a elementelor popover.
• Pentru Bootstrap 4, documentația a fost îmbunătățită și a fost dezvoltată o căutare convenabilă.