Source

Mrežni sustav

Upotrijebite našu snažnu flexbox mrežu za mobilne uređaje za izradu izgleda svih oblika i veličina zahvaljujući sustavu od dvanaest stupaca, pet zadanih responzivnih razina, Sass varijablama i mixinovima te desecima unaprijed definiranih klasa.

Kako radi

Bootstrapov mrežni sustav koristi seriju spremnika, redaka i stupaca za raspored i poravnavanje sadržaja. Izrađen je s flexboxom i potpuno je osjetljiv. U nastavku je primjer i detaljan pogled na to kako se mreža sastavlja.

Novi ste ili niste upoznati s flexboxom? Pročitajte ovaj CSS Tricks flexbox vodič za pozadinu, terminologiju, smjernice i isječke koda.

Jedan od tri stupca

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

Gornji primjer stvara tri stupca jednake širine na malim, srednjim, velikim i ekstra velikim uređajima pomoću naših unaprijed definiranih klasa mreže. Ti su stupci centrirani na stranici s roditeljem .container.

Ukratko, evo kako funkcionira:

Kontejneri omogućuju centriranje i vodoravno postavljanje sadržaja vaše stranice. Koristite .containerza responzivnu širinu piksela ili .container-fluidza width: 100%sve veličine prikaza i uređaja.
Redovi su omoti za stupce. Svaki stup ima vodoravni padding(koji se naziva oluk) za kontrolu prostora između njih. To paddingse zatim kompenzira na redovima s negativnim marginama. Na taj je način sav sadržaj u vašim stupcima vizualno poravnat s lijeve strane.
U rasporedu mreže, sadržaj mora biti postavljen unutar stupaca i samo stupci mogu biti neposredni potomci redaka.
Zahvaljujući flexboxu, stupci mreže bez navedenog widthautomatski će izgledati kao stupci jednake širine. Na primjer, .col-smsvaka od četiri instance automatski će biti široka 25% od male prijelomne točke pa naviše. Više primjera potražite u odjeljku stupaca s automatskim rasporedom .
Klase stupaca označavaju broj stupaca koje želite koristiti od mogućih 12 po retku. Dakle, ako želite tri stupca jednake širine, možete koristiti .col-4.
Stupci widthsu postavljeni u postocima, tako da su uvijek fluidni i veličine u odnosu na roditeljski element.
Stupci su vodoravni paddingza stvaranje oluka između pojedinačnih stupaca, međutim, možete ukloniti marginiz redaka i paddingiz stupaca pomoću .no-guttersna .row.
Kako bi rešetka bila prilagodljiva, postoji pet prijelomnih točaka mreže, po jedna za svaku responzivnu prijelomnu točku : sve prijelomne točke (ekstra male), male, srednje, velike i ekstra velike.
Prijelomne točke mreže temelje se na medijskim upitima minimalne širine, što znači da se primjenjuju na tu jednu prijelomnu točku i sve one iznad nje (npr. .col-sm-4primjenjuje se na male, srednje, velike i ekstra velike uređaje, ali ne i na prvu xsprijelomnu točku).
Možete koristiti unaprijed definirane klase rešetki (kao što je .col-4) ili Sass mixins za više semantičkog označavanja.

Budite svjesni ograničenja i grešaka oko flexboxa , poput nemogućnosti korištenja nekih HTML elemenata kao flex spremnika .

Mogućnosti mreže

Dok Bootstrap koristi ems ili rems za definiranje većine veličina, pxs se koriste za prijelomne točke mreže i širine spremnika. To je zato što je širina okvira za prikaz u pikselima i ne mijenja se s veličinom fonta .

Pomoću praktične tablice pogledajte kako aspekti Bootstrap grid sustava funkcioniraju na više uređaja.

	Izuzetno mali <576px	Mali ≥576px	Srednje ≥768 px	Veliki ≥992 px	Iznimno velika ≥1200px
Maksimalna širina spremnika	Ništa (automatski)	540 px	720 px	960 px	1140 px
Prefiks klase	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
Broj stupaca	12
Širina oluka	30px (15px sa svake strane stupca)
Nestabilan	Da
Redoslijed stupaca	Da

Automatski raspored stupaca

Upotrijebite klase stupaca specifične za prijelomne točke za jednostavno dimenzioniranje stupaca bez eksplicitne numerirane klase kao što je .col-sm-6.

Jednake širine

Na primjer, ovdje su dva izgleda rešetke koja se primjenjuju na svaki uređaj i okvir za prikaz, od xsdo xl. Dodajte bilo koji broj klasa bez jedinica za svaku prijelomnu točku koja vam je potrebna i svaki će stupac biti iste širine.

1 od 2

2 od 2

1 od 3

2 od 3

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

Stupci jednake širine mogu se podijeliti u više redaka, ali postojala je greška Safari flexbox koja je spriječila da ovo radi bez eksplicitnog flex-basisili border. Postoje rješenja za starije verzije preglednika, ali ne bi trebala biti potrebna ako ste ažurirani.

Stupac

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Postavljanje širine jednog stupca

Automatski raspored za stupce rešetke flexboxa također znači da možete postaviti širinu jednog stupca i automatski promijeniti veličinu srodnih stupaca oko njega. Možete koristiti unaprijed definirane klase rešetki (kao što je prikazano u nastavku), mješavine rešetki ili unutarnje širine. Imajte na umu da će drugi stupci promijeniti veličinu bez obzira na širinu središnjeg stupca.

1 od 3

2 od 3 (šire)

3 od 3

1 od 3

2 od 3 (šire)

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

Sadržaj promjenjive širine

Koristite col-{breakpoint}-autoklase za dimenzioniranje stupaca na temelju prirodne širine njihovog sadržaja.

1 od 3

Sadržaj promjenjive širine

3 od 3

1 od 3

Sadržaj promjenjive širine

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

Višeredni jednake širine

Stvorite stupce jednake širine koji se protežu kroz više redaka tako da umetnete mjesto .w-100gdje želite da se stupci prijelome u novi redak. Učinite prekide osjetljivima miješanjem .w-100s nekim uslužnim programima za responzivni zaslon .

kol

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

Responzivni razredi

Bootstrapova mreža uključuje pet razina unaprijed definiranih klasa za izgradnju složenih responzivnih izgleda. Prilagodite veličinu svojih stupaca na iznimno malim, malim, srednjim, velikim ili iznimno velikim uređajima kako god vam odgovara.

Sve prijelomne točke

Za mreže koje su iste od najmanjeg uređaja do najvećeg, koristite klase .coli . .col-*Odredite numeriranu klasu kada trebate stupac posebne veličine; inače se slobodno držite .col.

kol

stupac-8

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

Složeno vodoravno

Koristeći jedan skup .col-sm-*klasa, možete stvoriti osnovni mrežni sustav koji počinje složen i postaje vodoravan na maloj prijelomnoj točki ( sm).

stupac-sm-8

stupac-sm-4

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

Pomiješajte i uskladite

Ne želite da se vaši stupci jednostavno slažu u nekoliko slojeva mreže? Po potrebi koristite kombinaciju različitih klasa za svaku razinu. Pogledajte primjer u nastavku za bolji uvid u to kako sve to funkcionira.

.col-12 .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-12 col-md-8">.col-12 .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>

Oluci

Oluci se mogu prilagoditi odgovarajućim klasama korisnosti za prekidne točke i negativne margine. Da biste promijenili oluke u određenom retku, uparite pomoćni program negativne margine na .rowi odgovarajuće pomoćne programe za podmetanje na .cols. Možda će se također morati prilagoditi roditelj .containerili kako bi se izbjeglo neželjeno prelijevanje, korištenjem uslužnog programa za popunjavanje ponovnog podudaranja..container-fluid

Evo primjera prilagođavanja mreže Bootstrap na velikoj ( lg) prijelomnoj točki i više. Povećali smo .colispunu s .px-lg-5, eliminirali to s .mx-lg-n5na roditelju .rowi zatim prilagodili .containeromot s .px-lg-5.

Prilagođeno punjenje stupaca

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

Poravnanje

Upotrijebite pomoćne programe za poravnanje flexbox za okomito i vodoravno poravnavanje stupaca.

Okomito poravnanje

Jedan od tri stupca

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

Jedan od tri stupca

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

Horizontalno poravnanje

Jedan od dva stupca

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

Bez oluka

Oluci između stupaca u našim unaprijed definiranim klasama mreže mogu se ukloniti pomoću .no-gutters. Time se uklanjaju negativni margins .rowi horizontala paddingiz svih neposrednih podređenih stupaca.

Evo izvornog koda za stvaranje ovih stilova. Imajte na umu da su nadjačavanja stupaca obuhvaćena samo prvim podređenim stupcima i ciljana su putem birača atributa . Iako ovo generira specifičniji selektor, ispuna stupaca još uvijek se može dodatno prilagoditi pomoću pomoćnih programa za razmake .

Trebate dizajn od ruba do ruba? Ispustite roditelj .containerili .container-fluid.

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

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

U praksi, evo kako to izgleda. Imajte na umu da ovo možete nastaviti koristiti sa svim drugim unaprijed definiranim klasama rešetki (uključujući širine stupaca, responzivne razine, promjene redoslijeda i više).

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

.col-6 .col-md-4

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

Omatanje stupaca

Ako je više od 12 stupaca postavljeno unutar jednog retka, svaka grupa dodatnih stupaca će se, kao jedna cjelina, prebaciti u novi redak.

.col-9

.col-4
Budući da je 9 + 4 = 13 > 12, ovaj div sa širinom od 4 stupca premotava se u novi redak kao jedna susjedna jedinica.

.col-6
Sljedeći stupci nastavljaju duž novog retka.

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

Lomovi stupaca

Razbijanje stupaca u novi redak u flexboxu zahtijeva mali hack: dodajte element width: 100%gdje god želite prelomiti svoje stupce u novi redak. Obično se to postiže s više .rows, ali ne može svaka metoda implementacije to objasniti.

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

Ovaj prekid također možete primijeniti na određenim prijelomnim točkama s našim uslužnim programima za responzivni prikaz .

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

Preuređivanje

Red klase

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

First, but unordered

Second, but last

Third, but first

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

First, but last

Second, but unordered

Third, but first

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

Offsetting columns

You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

Offset classes

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

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

In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in the grid example.

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

Margin utilities

With the move to flexbox in v4, you can use margin utilities like .mr-auto to force sibling columns away from one another.

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

Nesting

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-9

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

Level 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

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variables

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

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

Mixins

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

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

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.

.example-container {
  width: 800px;
  @include make-container();
}

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

Main content

Secondary content

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

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual column while $grid-gutter-width sets the width for the column gutters.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Grid tiers

Osim samih stupaca, možete prilagoditi i broj slojeva rešetke. Ako želite samo četiri razine mreže, ažurirali biste $grid-breakpointsi $container-max-widthsna nešto poput ovoga:

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

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

Kada radite bilo kakve promjene na Sass varijablama ili mapama, morat ćete spremiti svoje promjene i ponovno ih kompajlirati. Na taj ćete način ispisati potpuno novi skup unaprijed definiranih klasa rešetke za širine stupaca, pomake i redoslijed. Responzivni uslužni programi za vidljivost također će se ažurirati za korištenje prilagođenih prijelomnih točaka. Obavezno postavite vrijednosti rešetke u px(ne rem, em, ili %).