in English

Sistem grilă

Folosiți grila noastră puternică flexbox pentru mobil pentru a construi machete de toate formele și dimensiunile datorită unui sistem cu douăsprezece coloane, cinci niveluri receptive implicite, variabile și mixuri Sass și zeci de clase predefinite.

Cum functioneaza

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 privire în profunzime asupra modului în care se reunește grila.

Nou sau nu sunteți familiarizat cu Flexbox? Citiți acest ghid CSS Tricks flexbox pentru fundal, terminologie, linii directoare și fragmente de cod.

Una din cele trei coloane

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Exemplul de mai sus creează trei coloane cu lățime egală pe dispozitive mici, medii, mari și foarte mari folosind clasele noastre de grilă predefinite. Aceste coloane sunt centrate în pagina cu părintele .container.

Defalcând-o, iată cum funcționează:

Containerele oferă un mijloc de a centra și de a completa orizontal conținutul site-ului dvs. Utilizați .containerpentru o lățime a pixelilor receptivi sau .container-fluidpentru width: 100%toate dimensiunile de ferestre și dispozitive.
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. În acest fel, tot conținutul din coloanele dvs. este aliniat vizual în partea stângă.
Într-un aspect cu grilă, conținutul trebuie plasat în coloane și numai coloanele pot fi copii imediati ai rândurilor.
Datorită flexbox, coloanele de grilă fără o specificație widthvor dispune automat ca coloane cu lățime egală. De exemplu, patru instanțe de .col-smvor avea fiecare automat o lățime de 25% de la punctul de întrerupere mic și în sus. Consultați secțiunea coloane cu aspect automat pentru mai multe exemple.
Clasele de coloane indică numărul de coloane pe care doriți să le utilizați din cele 12 posibile pe rând. Deci, dacă doriți trei coloane de lățime egală, puteți utiliza .col-4.
Coloanele widthsunt setate în procente, deci sunt întotdeauna fluide și dimensionate în raport cu elementul lor părinte.
Coloanele au orizontale paddingpentru a crea jgheaburi între coloanele individuale, cu toate acestea, puteți elimina margindin rânduri și paddingdin coloane cu .no-gutterspe .row.
Pentru ca grila să răspundă, există cinci puncte de întrerupere a grilei, câte unul pentru fiecare punct de întrerupere receptiv : toate punctele de întrerupere (foarte mici), mici, medii, mari și foarte mari.
Punctele de întrerupere ale grilei se bazează pe interogări media cu lățime minimă, adică se aplică aceluia punct de întrerupere și tuturor celor de deasupra acestuia (de exemplu, .col-sm-4se aplică dispozitivelor mici, medii, mari și foarte mari, dar nu și primului punct de xsîntrerupere).
Puteți utiliza clase de grilă predefinite (cum ar fi .col-4) sau mix- uri Sass pentru un marcaj mai semantic.

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ă

În timp ce Bootstrap folosește ems sau rems pentru a defini majoritatea dimensiunilor, pxs-urile sunt folosite pentru punctele de întrerupere a grilei și lățimile containerului. Acest lucru se datorează faptului că lățimea ferestrei de vizualizare este în pixeli și nu se modifică odată cu dimensiunea fontului .

Vedeți cum funcționează aspectele sistemului de grilă Bootstrap pe mai multe dispozitive cu un tabel la îndemână.

	Foarte mic <576px	Mic ≥576px	Mediu ≥768px	Mare ≥992px	Foarte mare ≥1200px
Lățimea maximă a containerului	Niciuna (auto)	540px	720px	960px	1140px
Prefixul clasei	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# de coloane	12
Latimea jgheabului	30px (15px pe fiecare parte a unei coloane)
Încadrabil	da
Ordinea coloanelor	da

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 xl. 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.

1 din 2

2 din 2

1 din 3

2 din 3

3 din 3

<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>

Multi-linie cu lățime egală

Creați coloane cu lățime egală care se întind pe mai multe linii inserând un .w-100loc unde doriți ca coloanele să se despartă la o nouă linie. Faceți pauzele receptive amestecând .w-100cu unele utilitare de afișare receptive .

A existat o eroare Safari flexbox care a împiedicat acest lucru să funcționeze fără un mesaj explicit flex-basissau border. Există soluții pentru versiunile mai vechi de browser, dar acestea nu ar trebui să fie necesare dacă browserele țintă nu se încadrează în versiunile cu erori.

col

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</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.

1 din 3

2 din 3 (mai larg)

3 din 3

1 din 3

2 din 3 (mai larg)

3 din 3

<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.

1 din 3

Conținut cu lățime variabilă

3 din 3

1 din 3

Conținut cu lățime variabilă

3 din 3

<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 cinci 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.

col

col-8

col-4

<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).

col-sm-8

col-sm-4

col-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.

.col-md-8

.col-6 .col-md-4

.col-6

<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>

Jgheaburi

Jgheaburile pot fi ajustate în mod receptiv prin umplutură specifică punctului de întrerupere și clase de utilitate cu marjă negativă. Pentru a schimba jgheaburile dintr-un rând dat, împerecheați un utilitar de marjă negativă pe utilitățile de .rowumplutură potrivite pe .cols. Este posibil ca .containerși .container-fluidpărintele să fie ajustat pentru a evita depășirea nedorită, folosind din nou utilitarul de umplutură potrivit.

Iată un exemplu de personalizare a grilei Bootstrap la punctul de lgîntrerupere mare ( ) și mai sus. Am mărit .colcăptușeala cu .px-lg-5, am contracarat-o cu .mx-lg-n5pe părinte .rowși apoi am ajustat .containerînvelișul cu .px-lg-5.

Umplutură personalizată a coloanei

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</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ă.

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.

Coloană

<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>

Coloană

<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>

Coloană

<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>

Coloană

<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>

Coloană

<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);
  }
}

Aliniere

Utilizați utilitarele de aliniere flexbox pentru a alinia vertical și orizontal coloanele. Internet Explorer 10-11 nu acceptă alinierea verticală a elementelor flexibile atunci când containerul flexibil are un min-heightca în imaginea de mai jos. Consultați Flexbugs #3 pentru mai multe detalii.

Aliniere verticală

Una din cele trei coloane

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Una din cele trei coloane

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Aliniere orizontala

Una din cele două coloane

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Fără jgheaburi

Jgheaburile dintre coloane din clasele noastre de grile predefinite pot fi eliminate cu .no-gutters. Acest lucru elimină surile negative margindin .rowși orizontalul paddingdin toate coloanele secundare imediate.

Iată codul sursă pentru crearea acestor stiluri. Rețineți că suprascrierile de coloane se limitează la primele coloane secundare și sunt vizate prin selectorul de atribute . Deși acest lucru generează un selector mai specific, umplutura coloanei poate fi personalizată în continuare cu utilități de spațiere .

Ai nevoie de un design de la margine la margine? Aruncă părintele .containersau .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

În practică, iată cum arată. Rețineți că puteți continua să utilizați acest lucru cu toate celelalte clase de grilă predefinite (inclusiv lățimi de coloane, niveluri receptive, reordonări și multe altele).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Înfășurarea coloanei

Dacă mai mult de 12 coloane sunt plasate într-un singur rând, fiecare grup de coloane suplimentare se va încheia, ca o singură unitate, pe o nouă linie.

.col-9

.col-4
Deoarece 9 + 4 = 13 > 12, această div pe 4 coloane este înfășurată pe o nouă linie ca o unitate contigue.

.col-6
Coloanele ulterioare continuă de-a lungul noii linii.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Rupe de coloană

Spărgerea coloanelor într-o nouă linie în flexbox necesită un mic hack: adăugați un element cu width: 100%oriunde doriți să înfășurați coloanele la o nouă linie. În mod normal, acest lucru se realizează cu mai multe .rows, dar nu orice metodă de implementare poate explica acest lucru.

.col-6 .col-sm-3

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

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

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

De asemenea, puteți aplica această pauză la anumite puncte de întrerupere cu utilitatile noastre de afișare receptive .

.col-6 .col-sm-4

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

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

Reordonare

Comanda cursuri

Utilizați .order-clase pentru a controla ordinea vizuală a conținutului dvs. Aceste clase sunt receptive, așa că puteți seta punctul orderde întrerupere (de exemplu, .order-1.order-md-2). Include suport pentru 1toate 12cele cinci niveluri de grilă.

Mai întâi în DOM, nu sa aplicat nicio comandă

Al doilea în DOM, cu o comandă mai mare

Al treilea în DOM, cu un ordin de 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Există, de asemenea , clase responsive .order-firstși care schimbă caracterul unui element prin aplicarea și respectiv ( ). Aceste clase pot fi, de asemenea, amestecate cu clasele numerotate după cum este necesar..order-lastorderorder: -1order: 13order: $columns + 1.order-*

Primul în DOM, ultimul comandat

Al doilea în DOM, neordonat

Al treilea în DOM, comandat primul

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Coloane compensate

Puteți compensa coloanele de grilă în două moduri: .offset-clasele noastre de grilă receptive și utilitățile noastre de marjă . Clasele de grilă sunt dimensionate pentru a se potrivi coloanelor, în timp ce marginile sunt mai utile pentru layout-uri rapide în care lățimea decalajului este variabilă.

Clasele offset

Mutați coloanele la dreapta folosind .offset-md-*clase. Aceste clase măresc marginea stângă a unei coloane cu *coloane. De exemplu, .offset-md-4se deplasează .col-md-4pe patru coloane.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

Pe lângă ștergerea coloanelor la punctele de întrerupere receptive, poate fi necesar să resetați decalajele. Vedeți acest lucru în acțiune în exemplul de grilă .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Utilități de marjă

Odată cu trecerea la flexbox în v4, puteți utiliza utilități de marjă, cum ar fi .mr-autosă forțați coloanele frate la distanță una de alta.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

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).

Nivelul 1: .col-sm-9

Nivelul 2: .col-8 .col-sm-6

Nivelul 2: .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .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 mixins

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: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

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();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@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);
  }
}

Conținut principal

Conținut secundar

<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: 30px !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 %).