Sistem grilă

Exemplu

Sistemul de grilă Bootstrap folosește o serie de containere, rânduri și coloane pentru a dispune și alinia conținutul. Este construit cu flexbox și este complet receptiv. Mai jos este un exemplu și o explicație aprofundată a modului în care sistemul de rețea se îmbină.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Exemplul de mai sus creează trei coloane cu lățime egală pe toate dispozitivele și ferestrele de vizualizare folosind clasele noastre de grilă predefinite. Aceste coloane sunt centrate în pagina cu părintele .container.

Cum functioneaza

Defalcând-o, iată cum se reunește sistemul de rețea:

• Grila noastră acceptă șase puncte de întrerupere receptive . Punctele de întrerupere se bazează pe min-widthinterogări media, ceea ce înseamnă că afectează acel punct de întrerupere și toate cele de deasupra acestuia (de exemplu, .col-sm-4se aplică pentru sm, md, lg, xl, și xxl). Aceasta înseamnă că puteți controla dimensiunea și comportamentul containerelor și coloanelor în funcție de fiecare punct de întrerupere.

• Containerele vă centrează și vă completează orizontal conținutul. Utilizați .containerpentru o lățime a pixelilor receptivi, .container-fluidpentru width: 100%toate ferestrele de vizualizare și dispozitivele, sau un container receptiv (de exemplu, .container-md) pentru o combinație de lățimi fluide și pixeli.

• Rândurile sunt învelișuri pentru coloane. Fiecare coloană are orizontală padding(numită jgheab) pentru controlul spațiului dintre ele. Acest lucru paddingeste apoi contracarat pe rândurile cu margini negative pentru a vă asigura că conținutul din coloanele dvs. este aliniat vizual în partea stângă. Rândurile acceptă, de asemenea, clase de modificatori pentru a aplica uniform dimensiunea coloanelor și clase de jgheab pentru a modifica spațierea conținutului.

• Coloanele sunt incredibil de flexibile. Există 12 coloane șablon disponibile pe rând, permițându-vă să creați diferite combinații de elemente care acoperă orice număr de coloane. Clasele de coloane indică numărul de coloane șablon care se întinde (de exemplu, col-4se întinde pe patru). widths sunt setate în procente, astfel încât să aveți întotdeauna aceeași dimensiune relativă.

• Jgheaburile sunt, de asemenea, receptive și personalizabile. Clasele de jgheab sunt disponibile în toate punctele de întrerupere, cu toate aceleași dimensiuni ca și marja noastră și spațierea de umplutură . Schimbați jgheaburi orizontale cu .gx-*clase, jgheaburi verticale cu .gy-*, sau toate jgheaburile cu .g-*clase. .g-0este disponibil și pentru îndepărtarea jgheaburilor.

• Variabilele Sass, hărțile și mixurile alimentează rețeaua. Dacă nu doriți să utilizați clasele de grilă predefinite în Bootstrap, puteți utiliza sursa grilei noastre Sass pentru a crea propria dvs. cu un marcaj mai semantic. Includem, de asemenea, câteva proprietăți personalizate CSS pentru a consuma aceste variabile Sass pentru o flexibilitate și mai mare pentru dvs.

Fiți conștienți de limitările și erorile din jurul flexbox , cum ar fi incapacitatea de a utiliza unele elemente HTML ca containere flexibile .

Opțiuni de grilă

Sistemul de grilă Bootstrap se poate adapta la toate cele șase puncte de întrerupere implicite și orice puncte de întrerupere pe care le personalizați. Cele șase niveluri implicite ale grilei sunt după cum urmează:

• Foarte mic (xs)
• mic (mp)
• Mediu (md)
• Mare (lg)
• foarte mare (xl)
• Extra foarte mare (xxl)

După cum sa menționat mai sus, fiecare dintre aceste puncte de întrerupere are propriul container, prefix unic de clasă și modificatori. Iată cum se modifică grila în aceste puncte de întrerupere:

Coloane cu aspect automat

Utilizați clase de coloane specifice punctului de întrerupere pentru o dimensionare ușoară a coloanei fără o clasă numerotată explicită, cum ar fi .col-sm-6.

Latime egala

De exemplu, iată două modele de grilă care se aplică fiecărui dispozitiv și fereastra de vizualizare, de la xspână la xxl. Adăugați orice număr de clase fără unități pentru fiecare punct de întrerupere de care aveți nevoie și fiecare coloană va avea aceeași lățime.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Setarea unei lățimi a coloanei

Așezarea automată pentru coloanele de grilă Flexbox înseamnă, de asemenea, că puteți seta lățimea unei coloane și că coloanele frate sunt redimensionate automat în jurul acesteia. Puteți utiliza clase de grilă predefinite (după cum se arată mai jos), mixuri de grile sau lățimi în linie. Rețineți că celelalte coloane se vor redimensiona indiferent de lățimea coloanei centrale.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Conținut cu lățime variabilă

Utilizați col-{breakpoint}-autoclase pentru a dimensiona coloanele în funcție de lățimea naturală a conținutului lor.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Clase receptive

Grila Bootstrap include șase niveluri de clase predefinite pentru construirea de layout-uri receptive complexe. Personalizați dimensiunea coloanelor dvs. pe dispozitive foarte mici, mici, medii, mari sau foarte mari, după cum doriți.

Toate punctele de întrerupere

Pentru grile care sunt aceleași de la cel mai mic dispozitiv la cel mai mare, utilizați clasele .colși . .col-*Specificați o clasă numerotată atunci când aveți nevoie de o coloană de dimensiuni deosebite; în caz contrar, nu ezitați să rămâneți la .col.

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

Stivuite la orizontală

Folosind un singur set de .col-sm-*clase, puteți crea un sistem de grilă de bază care începe stivuit și devine orizontal la punctul mic de întrerupere ( sm).

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Se amestecă și se potrivesc

Nu doriți ca coloanele dvs. să fie pur și simplu stivuite în niște niveluri de grilă? Utilizați o combinație de clase diferite pentru fiecare nivel, după cum este necesar. Consultați exemplul de mai jos pentru o idee mai bună despre cum funcționează totul.

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Coloane de rând

Utilizați .row-cols-*clasele responsive pentru a seta rapid numărul de coloane care redă cel mai bine conținutul și aspectul dvs. În timp ce clasele normale .col-*se aplică coloanelor individuale (de exemplu, .col-md-4), clasele coloanelor de rând sunt setate pe părinte .rowca o comandă rapidă. Cu .row-cols-autoputeți da coloanelor lățimea lor naturală.

Utilizați aceste clase de coloane de rând pentru a crea rapid machete de bază ale grilei sau pentru a vă controla aspectele cardurilor.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

De asemenea, puteți folosi mixin-ul Sass însoțitor row-cols(),

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Cuibărire

Pentru a vă îngloba conținutul cu grila implicită, adăugați un nou .rowși un set de .col-sm-*coloane într-o .col-sm-*coloană existentă. Rândurile imbricate ar trebui să includă un set de coloane care se adună până la 12 sau mai puțin (nu este necesar să utilizați toate cele 12 coloane disponibile).

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass

Când utilizați fișierele Sass sursă ale Bootstrap, aveți opțiunea de a utiliza variabile și mixuri Sass pentru a crea machete de pagină personalizate, semantice și receptive. Clasele noastre de grilă predefinite folosesc aceleași variabile și mixuri pentru a oferi o suită întreagă de clase gata de utilizare pentru layout-uri cu răspuns rapid.

Variabile

Variabilele și hărțile determină numărul de coloane, lățimea jgheabului și punctul de interogare media la care să înceapă coloanele plutitoare. Le folosim pentru a genera clasele de grilă predefinite documentate mai sus, precum și pentru mixurile personalizate enumerate mai jos.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Mixine

Mixinele sunt utilizate împreună cu variabilele grilei pentru a genera CSS semantic pentru coloanele de grilă individuale.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

Exemplu de utilizare

Puteți modifica variabilele la propriile valori personalizate sau pur și simplu utilizați mixin-urile cu valorile lor implicite. Iată un exemplu de utilizare a setărilor implicite pentru a crea un aspect cu două coloane cu un decalaj între.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Personalizarea grilei

Folosind variabilele și hărțile Sass ale grilei noastre încorporate, este posibil să personalizați complet clasele de grilă predefinite. Modificați numărul de niveluri, dimensiunile interogării media și lățimile containerului, apoi recompilați.

Coloane și jgheaburi

Numărul de coloane de grilă poate fi modificat prin variabilele Sass. $grid-columnseste folosit pentru a genera lățimile (în procente) ale fiecărei coloane individuale, în timp ce $grid-gutter-widthsetează lățimea pentru jgheaburile coloanei.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

Niveluri de grilă

Trecând dincolo de coloanele în sine, puteți personaliza și numărul de niveluri de grilă. Dacă doriți doar patru niveluri de grilă, ați actualiza $grid-breakpointsși $container-max-widthsla ceva de genul acesta:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Când faceți modificări ale variabilelor sau hărților Sass, va trebui să salvați modificările și să le recompilați. Procedând astfel, se va afișa un nou set de clase de grilă predefinite pentru lățimi, decalaje și ordine ale coloanelor. Utilitarele de vizibilitate receptive vor fi, de asemenea, actualizate pentru a utiliza punctele de întrerupere personalizate. Asigurați-vă că setați valorile grilei în px(nu rem, em, sau %).