de Elena-Cristina Conacel

Aflați sistemul Bootstrap 4 Grid în 10 minute

Aflati sistemul Bootstrap 4 Grid in 10 minute
Un exemplu cu sistemul Bootstrap 4 Grid.

Sistemul Bootstrap 4 Grid este utilizat pentru aspectele receptive.

Un aspect receptiv reprezintă modul în care elementele se aliniază în pagină la diferite rezoluții. Este important să înțelegeți cum să utilizați grila înainte de a afla despre orice altă componentă Bootstrap 4, deoarece orice element pe care îl utilizați, va trebui să îl plasați undeva pe ecran.

Să începem!

Aflati sistemul Bootstrap 4 Grid in 10 minute
Credit foto pentru Animade pentru a lui lovitură.

Cuprins

  • Bootstrap 4 Containere
  • Bootstrap 4 rânduri
  • Bootstrap 4 Coloane
  • Lecturi suplimentare

Grila Bootstrap 4 este formată din containere, rânduri și coloane. Le vom lua pe rând și le vom explica.

ad-banner

Bootstrap 4 Containere

Un container Bootstrap 4 este un element al clasei .container. Containerul este rădăcina sistemului de rețea Bootstrap 4 și este utilizat pentru a controla lățimea aspectului.

Containerul Bootstrap 4 conține toate elementele dintr-o pagină. Aceasta înseamnă că pagina dvs. ar trebui să aibă următoarea structură: mai întâi corpul paginii HTML, în interiorul acesteia ar trebui să adăugați containerul și toate celelalte elemente din interiorul containerului.

<body>
   <div class="container">
    ...
   </div>
</body>

Simplul .container class setează lățimea aspectului în funcție de lățimea ecranului. Acesta plasează conținutul în mijlocul paginii, alinindu-l orizontal. Există spațiu egal între containerul Bootstrap 4 și marginea stângă și dreapta a paginii.

.container se micșorează în lățime pe măsură ce lățimea ecranului se îngustează și devine lățime completă pe mobil. Lățimea containerului este definită în biblioteca Bootstrap 4 pentru fiecare dimensiune a ecranului. Puteți vedea exact dimensiuni aici.

Un container cu lățime completă ia 100% din dimensiunea ecranului, indiferent de lățimea ecranului. Pentru ao utiliza trebuie să adăugați clasa.container-fluid.

1611700809 881 Aflati sistemul Bootstrap 4 Grid in 10 minute
<div class="container">
  Hello! I am in a simple container.
</div>

<div class="container-fluid">
  Hello! I am in a full-width container.
</div>

Puteți vizualiza CodePen aici.

Pentru a vedea diferențele dintre cele două tipuri de containere, puteți deschide stiloul din consolă și puteți comuta între dimensiunile ecranului.

Bootstrap 4 rânduri

Bootstrap 4 rânduri sunt felii orizontale ale ecranului. Ele sunt folosite doar ca ambalaje pentru coloane. Pentru a le utiliza, aveți nevoie de .row clasă.

<div class="row">
  ...
</div>

Iată cele mai importante lucruri pe care trebuie să le rețineți despre Bootstrap 4 rânduri:

  • Acestea sunt utilizate numai pentru conținerea coloanelor. Dacă plasați alte elemente în interiorul rândului împreună cu coloanele, nu veți obține rezultatul scontat.
  • Trebuie puse în containere. Dacă nu faceți acest lucru, veți obține un scroll orizontal pe pagina dvs. Acest lucru se întâmplă deoarece rândurile au margini negative la stânga și la dreapta de 15. Containerul are umpluturi de 15 px, astfel încât să contracareze marginile.
  • Coloanele trebuie să fie copiii rândului. Altfel nu se vor alinia. Rândurile și coloanele sunt create pentru a lucra împreună în această ierarhie strictă.

Bootstrap 4 Coloane

Acum putem ajunge la partea frumoasă a acestui tutorial, coloanele Bootstrap 4. Coloanele sunt grozave! Vă ajută să împărțiți ecranul pe orizontală.

Dacă așezați o singură coloană în rândul dvs., aceasta va ocupa toată lățimea. Dacă adăugați două coloane, fiecare va lua 1/2 din lățime. Și așa este valabil pentru orice număr de coloane.

1611700809 56 Aflati sistemul Bootstrap 4 Grid in 10 minute
<div class="container">
  <div class="row">
    <div class="col">
      ...
    </div>
  </div>
  <div class="row">
    <div class="col">
      ...
    </div>
    <div class="col">
       ...
    </div>
  </div>
  <div class="row">
    <div class="col">
      ...
    </div>
    <div class="col">
       ...
    </div>
    <div class="col">
      ...
    </div>
    <div class="col">
       ...
    </div>
    <div class="col">
       ...
    </div>
  </div>
</div>

Puteți vedea codul live CodePen.

Notă marginală: Coloanele nu sunt colorate. Tocmai am adăugat culori pentru o descriere mai convingătoare din punct de vedere vizual / așa că arată frumos.

Setarea dimensiunilor pentru coloane

Folosind .col class setează lățimea coloanei în mod dinamic. Asta înseamnă că, în funcție de numărul de coloane dintr-un rând, lățimea unei coloane va fi lățimea containerului împărțită la numărul de coloane.

Dar există un alt mod de a defini coloanele. Puteți utiliza clase pentru coloane și defini dimensiunea acestora.

În mod implicit, grila Bootstrap 4 este formată din 12 coloane. Puteți selecta orice dimensiune de la 1 la 12 pentru coloana dvs. Dacă doriți 3 coloane egale, puteți utiliza .col-4 pentru fiecare (deoarece câte 3 * 4 coli = 12). Sau le puteți seta diferite dimensiuni. Aici sunt cateva exemple:

1611700809 428 Aflati sistemul Bootstrap 4 Grid in 10 minute
<div class="row">
  <div class="col-6">
    ...
  </div>
  <div class="col-6">
     ...     
  </div>
</div>
<div class="row">
  <div class="col-5">
    ...
  </div>
  <div class="col-7">
     ...     
  </div>
</div>
<div class="row">
  <div class="col-3">
    ...
  </div>
  <div class="col-4">
     ...     
  </div>
</div>
<div class="row">
  <div class="col-6">
    ...
  </div>
  <div class="col-7">
     ...     
  </div>
</div>

Puteți vedea codul live CodePen.

Dacă suma colilor din rândul tău nu ajunge la 12, atunci acestea nu umple întregul rând. Dacă suma coloanelor depășește 12, atunci va trece la linia următoare. Prima linie va afișa doar primele elemente care adună până la 12 sau mai puțin.

Setarea punctelor de întrerupere pentru coloane

Dacă luați exemplul de mai sus și doriți să-l afișați pe mobil, este posibil să întâmpinați unele probleme. Afișarea a cinci coloane pe mobil va face conținutul ilizibil.

Aici intră în joc una dintre cele mai puternice componente Bootstrap 4. Pentru a avea machete diferite pe diferite ecrane, nu va trebui să scrieți interogări media, în schimb puteți utiliza punctele de întrerupere ale coloanei.

Un punct de întrerupere este o variabilă Bootstrap 4 care reprezintă o rezoluție a ecranului. Când specificați un punct de întrerupere pentru o clasă, îi spuneți clasei să fie activă numai pentru rezoluții care sunt cel puțin la fel de mari ca numărul pe care îl deține punctul de întrerupere.

Cea mai simplă clasă despre care vom învăța este .col-[breakpoint] clasă. Când utilizați această clasă, definiți comportamentul coloanelor numai atunci când acestea sunt afișate pe dispozitive care au o rezoluție de cel puțin punctul de întrerupere definit. Până la punctul de întrerupere dat, coloanele dvs. se vor alinia vertical în mod implicit. Și după punctul tău de întrerupere, se vor alinia orizontal din cauza clasei.

Bootstrap are 4 puncte de întrerupere pe care le puteți utiliza:

  • .col-sm pentru telefoane mobile mai mari (dispozitive cu rezoluții ≥ 576px);
  • .col-md pentru tablete (≥768px);
  • .col-lg pentru laptopuri (≥992px);
  • .col-xl pentru desktopuri (≥1200px)

Să presupunem că doriți să afișați două coloane una după alta pe verticală pe ecrane mici și pe aceeași linie pe ecrane mai mari. Va trebui să specificați punctul de întrerupere în care coloanele merg pe aceeași linie.

În exemplul nostru vom folosi .col-lg punctul de întrerupere și vedeți cum arată coloanele pe diferite ecrane. Pentru rezoluții mai mici decât punctul de întrerupere dat (<992px) coloanele vor fi afișate vertical. Aceasta înseamnă că pe dispozitivele mobile și tablete, coloanele vor arăta astfel:

1611700809 522 Aflati sistemul Bootstrap 4 Grid in 10 minute
Afișajul pentru rezoluții <992px (dispozitive mobile).

Și pentru dispozitivele care au o rezoluție mai mare sau egală cu punctul de întrerupere (≥992px), coloanele vor merge pe același rând. Aceasta înseamnă că pe laptopuri și desktopuri veți obține acest rezultat:

1611700810 998 Aflati sistemul Bootstrap 4 Grid in 10 minute
Afișajul pentru rezoluții> = 992px (laptopuri și ecrane mai mari).
<div class="row">
 <div class="col-lg">
   ...
 </div>
 <div class="col-lg">
    ...   
 </div>
</div>

Puteți vedea codul live CodePen. Dacă deschideți Codepen într-o altă fereastră și vedeți pagina la diferite rezoluții, veți vedea coloanele care își schimbă poziționarea.

Dacă ați dori ca cele 2 coloane să meargă pe aceeași linie, începând cu telefoane mobile mai mari pe care le-ați folosi .col-sm, pentru tablete .col-md și pentru ecrane foarte mari .col-xl.

Setarea dimensiunilor și a punctelor de întrerupere pentru coloane

Puteți combina dimensiunile și punctele de întrerupere și puteți utiliza o singură clasă cu formatul .col-[breakpoint]-[size].

De exemplu, dacă doriți ca trei coloane de dimensiuni diferite să se alinieze pe un rând începând cu rezoluția laptopului, trebuie să faceți acest lucru:

<div class="row">
  <div class="col-lg-4">
    ...
  </div>
  <div class="col-lg-3">
    ...
  </div>
  <div class="col-lg-5">
    ...     
  </div>
</div>

Veți obține acest rezultat la rezoluții <992px:

1611700810 320 Aflati sistemul Bootstrap 4 Grid in 10 minute

Și pentru ecranele cu dimensiunea ≥992px:

1611700810 713 Aflati sistemul Bootstrap 4 Grid in 10 minute

Din nou, puteți vedea codul live CodePen.

Dar dacă doriți să afișați o coloană pe rând pe rezoluții mobile mici, două coloane pe rând pe tablete și patru pe laptopuri sau dispozitive cu rezoluții mai mari?

Apoi adăugați mai multe clase pentru o singură coloană pentru a descrie comportamentul pentru fiecare rezoluție. Folosind mai multe clase, specificați că conținutul va ocupa șase sloturi pe tablete și trei pe laptopuri.

<div class="row">
  <div class="col-sm-6 col-lg-3">
    ...
  </div>
  <div class="col-sm-6 col-lg-3">
    ...
  </div>
  <div class="col-sm-6 col-lg-3">
     ...     
  </div>
  <div class="col-sm-6 col-lg-3">
     ...     
  </div>
</div>

Rezultatul va apărea astfel pe tablete:

1611700810 371 Aflati sistemul Bootstrap 4 Grid in 10 minute

Și așa pe laptopuri și rezoluții mai mari:

1611700810 719 Aflati sistemul Bootstrap 4 Grid in 10 minute

Acest exemplu este, de asemenea, live CodePen.

Ca exercițiu, puteți încerca să creați rânduri cu un număr diferit de coloane în funcție de dimensiunea ecranului și să verificați comportamentul în consola browserului.

Compensarea coloanelor

Dacă nu doriți ca coloanele dvs. să fie una lângă alta, puteți folosi clasa .offset-[breakpoint]-[size] împreună cu .col-[breakpoint]-[size].

Utilizarea acestei clase este la fel ca adăugarea unei coloane goale înainte de coloana dvs. Iată un exemplu simplu:

1611700811 374 Aflati sistemul Bootstrap 4 Grid in 10 minute
<div class="row">
  <div class="col-md-4 offset-md-4">
     ...     
  </div>  
  <div class="col-md-4">
     ...     
  </div>  
</div>

Puteți vedea codul live CodePen.

Puteți utiliza clasa pe orice coloană din rând. Iată câteva exemple:

1611700811 76 Aflati sistemul Bootstrap 4 Grid in 10 minute
<div class="row">
  <div class="col-md-4">
     ...     
  </div>  
  <div class="col-md-4 offset-md-4">
     ...     
  </div>  
</div>
<div class="row">
  <div class="col-md-4 offset-md-2">
     ...    
  </div>  
  <div class="col-md-4 offset-md-2">
     ...     
  </div>  
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">
     ...
  </div>   
</div>

Coloane de cuibărire

Acest lucru poate fi o surpriză, dar puteți adăuga un rând în interiorul unei coloane!

Rândul în cauză (care va avea lățimea coloanei sale părinte) va fi apoi împărțit în 12 coloane (mai mici) pe care le puteți referi prin .col-* clase.

Să aruncăm o privire la ce se întâmplă atunci când introducem un rând nou în interiorul unei coloane:

1611700811 637 Aflati sistemul Bootstrap 4 Grid in 10 minute
<div class="row">
    <div class="col-md-8">
        ...
        <div class="row">
            <div class="col-md-5">
               ...
            </div>
            <div class="col-md-7">
               ...   
            </div>
        </div>
      </div>     
    </div>
    <div class="col-md-4">
       ...
    </div>
</div>

Puteți vedea codul live CodePen.

Știind acest lucru, puteți parcurge mai multe niveluri pentru a vă organiza informațiile. Coloanele vă vor oferi un mod simplu de a vă gestiona spațiul.

Aceasta înfășoară cunoștințele de bază cu privire la sistemul de rețea receptiv Bootstrap 4. Dacă aveți întrebări, vă rog să-mi spuneți în comentarii, voi fi bucuros să vă răspund.

Lecturi suplimentare

Dacă aveți mai mult timp, iată câteva resurse utile:

Acest articol a fost inițial postat pe Blog BootstrapBay. Face parte dintr-o serie mai mare de tutoriale Bootstrap 4 numite 14 zile de bootstrap 4. Dacă doriți să continuați să aflați despre componentele Bootstrap 4, aceste articole sunt un loc bun pentru a începe.

Și dacă doriți să începeți dezvoltarea cu un șablon Bootstrap, puteți să consultați piata de desfacere.

Dar, înainte de a aprofunda, ia-ți un moment pentru a sărbători abilitățile nou dobândite !?

1611700812 748 Aflati sistemul Bootstrap 4 Grid in 10 minute
Credit foto pentru Jonas Mosesson pentru a lui lovitură.