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

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

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

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

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

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

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

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

Preuređivanje

Red klase

Koristite .order-klase za kontrolu vizualnog poretka vašeg sadržaja. Ove su klase responzivne, tako da možete postaviti ordertočku prekida (npr. .order-1.order-md-2). Uključuje podršku za 1kroz 12svih pet razina mreže.

Prvi, ali neuređen

Drugi, ali posljednji

Treće, ali prvo

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

Također postoje responsive .order-firsti .order-lastklase koje mijenjaju orderelement primjenom order: -1i order: 13( order: $columns + 1), redom. Ove se klase također mogu po potrebi miješati s numeriranim .order-*klasama.

Prvi, ali posljednji

Drugo, ali neuređeno

Treće, ali prvo

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

Odstupanje stupaca

Stupce rešetke možete pomaknuti na dva načina: našim responzivnim .offset-klasama rešetke i našim alatima za margine . Klase mreže veličine su tako da odgovaraju stupcima, dok su margine korisnije za brze rasporede gdje je širina pomaka varijabilna.

Offset klase

Pomaknite stupce udesno koristeći .offset-md-*klase. Ove klase povećavaju lijevu marginu stupca po *stupac. Na primjer, .offset-md-4pomiče se .col-md-4preko četiri stupca.

.col-md-4

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

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

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

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

Uz brisanje stupaca na responzivnim prijelomnim točkama, možda ćete morati ponovno postaviti pomake. Pogledajte ovo na djelu u primjeru mreže .

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

Marginalne usluge

S prelaskom na flexbox u v4, možete koristiti pomoćne programe za margine kao što .mr-autoje prisilno udaljavanje srodnih stupaca jedan od drugog.

.col-md-4

.col-md-4 .ml-auto

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

.col-auto .mr-auto

.col-auto

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

Gniježđenje

Da biste ugniježdili svoj sadržaj sa zadanom mrežom, dodajte novi .rowi skup .col-sm-*stupaca unutar postojećeg .col-sm-*stupca. Ugniježđeni retci trebaju uključivati skup stupaca koji zbroje 12 ili manje (nije potrebno da koristite svih 12 dostupnih stupaca).

Razina 1: .col-sm-9

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

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

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

Sass mixini

Kada koristite Bootstrapove izvorne Sass datoteke, imate mogućnost korištenja Sass varijabli i mixina za stvaranje prilagođenih, semantičkih i responzivnih izgleda stranica. Naše unaprijed definirane klase rešetki koriste te iste varijable i miksine za pružanje čitavog paketa klasa spremnih za korištenje za brzo responzivne izglede.

Varijable

Varijable i mape određuju broj stupaca, širinu oluka i točku medijskog upita na kojoj počinju plutajući stupci. Koristimo ih za generiranje unaprijed definiranih klasa rešetki koje su gore dokumentirane, kao i za prilagođene miksine navedene u nastavku.

$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

Miksini se koriste u kombinaciji s varijablama rešetke za generiranje semantičkog CSS-a za pojedinačne stupce rešetke.

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

Primjer upotrebe

Možete modificirati varijable prema vlastitim prilagođenim vrijednostima ili jednostavno koristiti miksine s njihovim zadanim vrijednostima. Evo primjera korištenja zadanih postavki za izradu izgleda u dva stupca s razmakom između.

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

Glavni sadržaj

Sekundarni sadržaj

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

Prilagodba mreže

Korištenjem naših ugrađenih Sass varijabli i mapa mreže, moguće je u potpunosti prilagoditi unaprijed definirane klase mreže. Promijenite broj razina, dimenzije medijskih upita i širine spremnika—a zatim ponovno kompajlirajte.

Stupovi i oluci

Broj stupaca mreže može se mijenjati putem Sass varijabli. $grid-columnskoristi se za generiranje širina (u postocima) svakog pojedinačnog stupca dok $grid-gutter-widthpostavlja širinu za oluke stupaca.

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

Slojevi mreže

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