... Dacă aveți nevoie de coloane cu lățime inegală, atunci trebuie doar să respectați condiția ca numerele după col-xs- din toate cele trei clase să adună până la 12 (de exemplu, 2-4-6). Dar mai întâi, să ne uităm la ce este „xs” în această intrare și ce înseamnă?

Mai jos în zona „Opțiuni grilă” veți găsi o explicație a celor de mai sus patru dimensiuni de plasă bootstrap modern.

1. Mai întâi vine o grilă foarte mică (în coloana „Dispozitive foarte mici”), concepută pentru dispozitive mobile, cu o dimensiune a ecranului care este mai mică de 768 pixeli lățime (citiți linkul de mai jos). Va fi întotdeauna orizontal pentru orice dimensiune de ecran și ce este, voi încerca să explic puțin mai jos. Rețineți că prefixul de clasă pentru acest tip de grilă va fi doar col-xs, ca în exemplul discutat mai sus.
2. Dacă dimensiunea ecranului dispozitivului se află în intervalul de la 768 la 992 de pixeli (acum acestea sunt cel mai adesea tablete), atunci grila Bootstrap, concepută pentru dispozitive mici, este potrivită pentru acestea. Se numește mic, iar prefixele de clasă sunt folosite pentru a-l defini. col-sm.
3. Pentru dispozitivele cu dimensiunea ecranului mai mare de 992, dar mai mică de 1200 (în principal monitoare de computere desktop sau laptopuri), există o grilă pentru dispozitive medii. Se numește mijloc și are un prefix de clasă col-md.
4. Ei bine, pentru monitoare cu o lățime de peste 1200 de pixeli, există cea mai mare grilă cu un prefix de clasă col-lg.

Ultimele trei grile vor fi orizontale numai dacă lățimea ecranului este mai mare decât punctul în care are loc „colapsul”. De exemplu, pentru o grilă mare pe ecrane mai mici de 1200 de pixeli, aceasta va înceta să mai fie orizontală și se va transforma în verticală. Pe site-ul oficial GetBootstrap.com, pe care îl examinăm în prezent, există exemple și explicații în acest sens. Totuși, după părerea mea, totul este oarecum confuz și complicat acolo.

Un exemplu despre modul în care sistemul de grilă Bootstrap 3 funcționează cu diferite lățimi de ecran

Voi încerca să explic toate acestea exemplu terminat... Va trebui doar să copiați fișierul setka.html(pentru a face acest lucru, selectați elementul „Salvare prin link ca...” din meniul contextual). Dacă deschideți acest fișier direct în browser (făcând clic pe linkul furnizat cu butonul stâng al mouse-ului), atunci nimic nu va funcționa, deoarece framework-ul Bootstrap nu se va conecta.

Puneți fișierul setka.html descărcat în folderul Bootstrap, despre care am vorbit. Ar trebui să fie la același nivel cu fișierul index.html pe care l-am creat mai devreme.

Acum deschideți acest fișier setka.html în orice browser doriți și experimentați cu dimensiunea ferestrei browserului dvs. pentru a vedea Bootstrap 3 în acțiune și pentru a înțelege cum funcționează sistemul de grilă. Care? Voi explica acum.

Am o rezoluție a ecranului monitorului de 1280 de pixeli lățime, ceea ce este mai mult decât punctul de întrerupere de 1200 de pixeli setat pentru grila mare. Ce vedem ca rezultat? Ceva de genul:

Iată cinci exemple de aspect al site-ului construit pe baza tipuri diferite ochiuri:

1. Primul rând este descris folosind toate cele patru sisteme de grilă disponibile pe acest momentîn Bootstrap. În funcție de rezoluția ecranului dispozitivului pe care este vizualizată aspectul, acolo va fi afișat numele grilei care este utilizată în fiecare dintre celule (acum este scris deasupra primului rând că se folosește o grilă grosieră, iar în celulele „cl-lg” - prefixul clasei de grilă mare) ... Pe măsură ce lățimea ecranului scade, aceste etichete se vor schimba.
2. În rândurile rămase de mai jos, se folosește un singur sistem de dimensiune a grilei - foarte mic, mic, mediu și mare (în această ordine).

În acest fel, putem observa și compara modul în care aceste grile din arsenalul Bootstrap 3 funcționează împreună și cum funcționează separat (când se utilizează un singur tip). pentru că Când am făcut captura de ecran anterioară, browserul meu a fost extins la ecran complet (mai mare de 1200 de pixeli lățime), apoi toate aceste cinci exemple de aspect al site-ului sunt extinse pe orizontală (coloanele sunt situate una lângă cealaltă pe lățimea ecranului) .

Acum să restrângem puțin dimensiunea ferestrei browserului, astfel încât să putem, și să observăm prăbușirea (colapsul) care a avut loc.

Textul de deasupra rândului de sus și prefixele de clasă din celulele acestuia s-au schimbat (pentru aceasta s-au folosit clasele de vizibilitate despre care vom vorbi mai târziu). Grila din mijloc este acum utilizată și este încă afișată pe orizontală. În același timp, rândul cel mai de jos (care ilustrează utilizarea numai plasă grosieră) s-a pliat vertical, adică blocurile adiacente sunt acum afișate nu unul lângă celălalt în lățime, ci unul sub celălalt (în înălțime).

Se pare că grila grosieră, în absența oricărei influențe externe, se comportă exact așa - se pliază vertical pe toate dispozitivele a căror dimensiune a ecranului este mai mică de 1200 de pixeli lățime. Acest lucru redă toate celelalte utilizate în grila exemplu pe orizontală. Primul rând folosește o combinație de grile, așa că acum este controlat de sistemul de grilă medie (sistemul mare nu mai are efect).

Să redimensionăm din nou fereastra browserului în lățime, astfel încât să devină. Următoarea casare va avea loc:

Acum (pe baza dimensiunii ecranului) lucrăm cu o grilă mică. În consecință, nu numai grila mare, ci și cea medie s-a pliat și pe verticală. Ei bine, în primul rând, care folosește o combinație de grile, totul este acum controlat de sistemul de grilă mică Bootstrap. În același timp, în fișierul setka.html se modifică și distribuția coloanelor din acest prim rând, ceea ce nu este deloc necesar, dar acest lucru se poate face pentru a satisface unele dintre nevoile dvs. în ceea ce privește aspectul (și pe „una -două”, fără nicio problemă).

Continuăm să reducem lățimea ferestrei browser la valori. Are loc o altă casare:

Drept urmare, nu numai grilele mari și medii trec pe verticală pe pagină, ci și cele mici li s-au alăturat. Singurul o grilă foarte mică a rămas orizontală care rămâne așa (cum tocmai am văzut) în toate împrejurările. Chiar dacă restrângeți pagina la o lățime ultra-mică, grila ultra-mică nu se va transforma într-una verticală (chiar și atunci când conținutul nu se va încadra în celule).

Acest exemplu (fișier setka.html) este făcut exact. Vom vorbi în detaliu despre cum este aranjat totul acolo. Dar, deocamdată, vreau să vă atrag atenția doar asupra unor nuanțe pe care le puteți observa în codul sursă al fișierului setka.html.

Explicații pentru codul sursă al exemplului nostru

Mai sus cu stiluri adăugate pentru design vizual layout-uri (indentări, culori ale grilei etc.), care nu poartă o încărcătură semantică specială. Dacă derulați în jos codul sursă, veți observa un bloc ca acesta:

lg Utilizați o grilă grosieră pentru ecrane mai mari de 1200px.

md Grila medie este utilizată pentru ecrane mai mici de 1200 dar mai mari de 992px.

sm Small grid este folosit pentru ecrane mai mici de 992 dar mai mari de 768px.

xs Utilizează o grilă ultra-mică pentru dimensiunile ecranului sub 768px, care rămâne întotdeauna orizontală.

Sunt patru containere alocate diferite clase(Citește despre). Acestea vă permit să afișați conținut specific pe baza interogărilor media care se potrivesc marimi diferite plasă. Cum functioneaza? Toate cele patru titluri sunt încărcate în browser (dacă te uiți la sursă), dar un singur titlu este afișat în funcție de rezoluția curentă a ecranului sau de dimensiunea ferestrei browserului.

Acest plasă principală unde sunt combinate toate cele patru sisteme de grile (puteți vedea acest lucru după atributele celulei, cum ar fi class = "col-lg-4 col-md-1 col-sm-5 col-xs-5", care listează prefixele de clasă ale tuturor celor patru grile ) ... Rândul în sine, așa cum am menționat mai sus, este stabilit prin plasarea tuturor elementelor sale constitutive într-un container cu clasa class = „row” (în exemplul nostru, acesta este un container bazat pe div).

Vă rugăm să rețineți că grila noastră principală este formată din trei celule (coloane) și dacă adunați toate numerele care sunt atribuite fiecărei coloane, de exemplu, pentru prefixele grilei ultra-mice Bootstrap (col-xs), veți obțineți în total 12. același lucru va fi valabil și pentru numerele de după prefixele tuturor celorlalte sisteme. Este de înțeles, deoarece acest cadru, așa cum s-a menționat mai sus, are o structură de 12 coloane, i.e. pe orizontală, tot spațiul disponibil pentru aspect este împărțit în douăsprezece coloane egale(invizibile pe site - sunt ca celulele din caietele școlare).

Ei bine, folosind numerele de după prefixele clasei, pur și simplu setați proporțiile pentru fiecare dintre celule (coloane reale) ale aspectului dvs. Acestea. proporțiile pot fi, de exemplu:

În general, puteți utiliza unul, două, trei sau toate cele patru sisteme de rețeaîntr-un singur aspect (linie). Totul depinde de preferințele dvs. de design și de ceea ce încercați să obțineți din pagina dvs. web (cum ar trebui să arate la diferite extensii de ecran). Un exemplu este dat pe site-ul oficial:

Crearea de rânduri și celule cu clase Bootstrap

Să creăm acum, pentru cea mai bună înțelegere Pagina HTML amintește oarecum de pagina web reala(cu un antet, conținut text și imagine și un subsol) și marcați-l folosind sistemul de grilă Bootstrap 3.

Mai precis, voi crea eu un gol și vă voi oferi doar, prin analogie cu exemplul anterior, să descărcați fișierul sait.html(pentru aceasta, selectați elementul „Salvare ca...” din meniul contextual), pentru ca mai târziu împreună să putem adăuga clasele bootstrap necesare acestui „pește”. De asemenea, va trebui să fie plasat în folderul Bootstrap la același nivel cu fișierul index.html pe care l-am creat în primul articol (și setka.html, cu care am lucrat puțin mai sus).

Dacă vă uitați la codul sursă pentru fișierul sait.html, veți vedea că acesta include deja Bootstrap și jquery și a adăugat conținut pentru a imita aspectul unei pagini web obișnuite. Da, veți avea nevoie și de un tătic cu imaginile folosite pe această pagină. Îl poți descărca de aici - img.zip... Doar dezarhivați arhiva și plasați folderul img (asigurați-vă că există fișiere imagine în ea, nu un alt folder img) în folderul Bootstrap, la un nivel cu fișierul sait.html. Structura va arăta astfel:

Acum, (din folderul Bootstrap) în browser, veți vedea pagina web pe care am folosit-o ca exemplu. Este izbitor că toate blocurile de pe pagină sunt situate unul sub celălalt, iar acest lucru interferează foarte mult cu percepția vizuală corectă a informațiilor. Ar fi logic să le plasăm în coloane și astfel încât atunci când dimensiunea ecranului este redusă, „designul să răspundă” la aceasta, modificând numărul de coloane pentru a crea o experiență de vizualizare mai bună pe dispozitivele cu lățimea diferită a zonei vizibile.

V html original Cod fișier html pe care l-am folosit pentru a afișa limitele presupuselor mele rânduri (rânduri), pentru care vom personaliza afișarea coloanelor folosind un fel de sisteme de grilă Bootstrap. Există doar patru rânduri (sunt numerotate în captura de ecran de mai sus) - antet (antet cu numele site-ului și logo-ul), titlul și descrierea paginii, conținutul (conținutul principal format din anunțuri a patru articole) și subsol.

Acum va trebui să adăugăm marcajul Bootstrap la fișierul sait.html, care. Pentru a crea rânduri, după cum vă amintiți, va fi suficient să înfășurați tot conținutul său într-un container (cel mai adesea acestea sunt etichete Div, deși pot fi altele) și să scrieți o clasă în el clasa = "rând"... Pentru primul rând, va arăta astfel:

Același lucru trebuie făcut pentru toate celelalte rânduri (linii) - puneți o etichetă de deschidere

- la sfârșitul. Nu voi arăta întregul cod al fișierului sait.html cu modificările făcute, deoarece este prea voluminos.

Utilizarea diferitelor grile pentru a crea coloane de conținut la diferite lățimi de ecran

Acum hai să hai sa incepem sa formam celuleîn acele linii (rânduri) în care are sens să o faci. Ar fi destul de logic să plasăm anunțurile articolelor (din al treilea rând) în patru coloane, iar când lățimea ecranului scade, aceste patru coloane să fie convertite în două. Cum să o facă? Să aruncăm o privire.

Deci, în Bootstrap 3, există o grilă cu 12 coloane despre care am vorbit mai sus. Deoarece am conceput să facem patru coloane cu anunțuri, ar fi logic să le facem egale ca lățime, ceea ce înseamnă că fiecare dintre coloane va avea trei celule (celule) lățime în sistemul nostru de grile invizibile (indiferent de dimensiunea grilei pe care o alegem). - ultra-mic, mic, mediu sau mare).

Ce plasă să alegi pentru job? Să începem cu media ca opțiune de compromis. În acest caz, clasa „col-md-3” va trebui adăugată la containerele tuturor celor patru celule -