Mrežni sistem

Uporabite našo zmogljivo mrežo flexbox za mobilne naprave, da ustvarite postavitve vseh oblik in velikosti zahvaljujoč sistemu dvanajstih stolpcev, petim privzetim odzivnim nivojem, spremenljivkam Sass in miksinom ter desetinam vnaprej določenih razredov.

Kako deluje

Mrežni sistem Bootstrapa uporablja niz vsebnikov, vrstic in stolpcev za postavitev in poravnavo vsebine. Zgrajen je s flexboxom in je popolnoma odziven. Spodaj je primer in podroben pogled na to, kako se mreža združi.

Ste novi ali ne poznate flexbox? Preberite ta priročnik za CSS Tricks flexbox za ozadje, terminologijo, smernice in delčke kode.

Eden od treh stolpcev

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

Zgornji primer ustvari tri enako široke stolpce na majhnih, srednjih, velikih in zelo velikih napravah z uporabo naših vnaprej določenih mrežnih razredov. Ti stolpci so na sredini strani z nadrejenim .container.

Če razčlenimo, deluje takole:

Vsebniki omogočajo sredinsko in vodoravno oblazinjenje vsebine vašega spletnega mesta. Uporabite .containerza odzivno širino slikovnih pik ali .container-fluidza width: 100%vsa vidna okna in velikosti naprav.
Vrstice so ovoji za stolpce. Vsak stolpec ima vodoravno padding(imenovano žleb) za nadzor prostora med njimi. To paddingse nato izniči v vrsticah z negativnimi robovi. Na ta način je vsa vsebina v vaših stolpcih vizualno poravnana po levi strani.
V mrežni postavitvi mora biti vsebina postavljena znotraj stolpcev in samo stolpci so lahko neposredni podrejeni vrsticam.
Zahvaljujoč flexboxu bodo stolpci mreže brez določenega widthsamodejno razporejeni kot stolpci enake širine. Na primer, štirje primerki .col-smbodo samodejno široki 25 % od majhne prelomne točke naprej. Za več primerov si oglejte razdelek o stolpcih s samodejno postavitvijo .
Razredi stolpcev označujejo število stolpcev, ki jih želite uporabiti od možnih 12 na vrstico. Torej, če želite tri enako široke stolpce čez, lahko uporabite .col-4.
Stolpci widthso nastavljeni v odstotkih, tako da so vedno tekoči in velikosti glede na nadrejeni element.
Stolpci so vodoravni paddingza ustvarjanje žlebov med posameznimi stolpci, vendar lahko odstranite marginiz vrstic in paddingiz stolpcev z .no-guttersna .row.
Da bi bila mreža odzivna, obstaja pet prelomnih točk mreže, ena za vsako odzivno prelomno točko : vse prelomne točke (zelo majhne), majhne, srednje, velike in zelo velike.
Prelomne točke mreže temeljijo na medijskih poizvedbah z najmanjšo širino, kar pomeni, da veljajo za to eno prelomno točko in vse tiste nad njo (npr. .col-sm-4velja za majhne, srednje velike in zelo velike naprave, vendar ne za prvo xsprelomno točko).
Za več semantičnega označevanja lahko uporabite vnaprej določene razrede mreže (kot je .col-4) ali mešanice Sass .

Zavedajte se omejitev in napak okoli flexboxa , kot je nezmožnost uporabe nekaterih elementov HTML kot vsebnikov flex .

Možnosti mreže

Medtem ko Bootstrap uporablja ems ali rems za definiranje večine velikosti, pxse s uporabljajo za prelomne točke mreže in širine vsebnika. To je zato, ker je širina vidnega polja v slikovnih pikah in se ne spreminja z velikostjo pisave .

Oglejte si, kako vidiki mrežnega sistema Bootstrap delujejo v več napravah s priročno tabelo.

	Zelo majhen <576 slikovnih pik	Majhna ≥576 slikovnih pik	Srednje ≥768 slikovnih pik	Velika ≥992 slikovnih pik	Zelo velik ≥1200 slikovnih pik
Največja širina posode	Brez (samodejno)	540 slikovnih pik	720 slikovnih pik	960 slikovnih pik	1140 slikovnih pik
Predpona razreda	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# stolpcev	12
Širina žleba	30 slikovnih pik (15 slikovnih pik na vsaki strani stolpca)
Nestabilen	ja
Urejanje stolpcev	ja

Samodejna postavitev stolpcev

Uporabite razrede stolpcev, specifične za prekinitvene točke, za preprosto določanje velikosti stolpcev brez izrecnega oštevilčenega razreda, kot je .col-sm-6.

Enake širine

Tukaj sta na primer dve postavitvi mreže, ki veljata za vsako napravo in vidno polje, od xsdo xl. Dodajte poljubno število razredov brez enot za vsako prelomno točko, ki jo potrebujete, in vsak stolpec bo enako širok.

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>

Enako široka večvrstična

Ustvarite enako široke stolpce, ki zajemajo več vrstic, tako da vstavite mesto, .w-100kjer želite, da se stolpci prelomijo v novo vrstico. Naredite odmore odzivne z mešanjem .w-100z nekaterimi pripomočki za odziven zaslon .

Prišlo je do napake Safari flexbox , ki je preprečila, da bi to delovalo brez izrecnega flex-basisali border. Obstajajo rešitve za starejše različice brskalnika, vendar ne bi smele biti potrebne, če vaši ciljni brskalniki ne sodijo v različice z napakami.

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>

Nastavitev širine enega stolpca

Samodejna postavitev za stolpce mreže flexbox pomeni tudi, da lahko nastavite širino enega stolpca in samodejno spremenite velikost sorodnih stolpcev okoli njega. Uporabite lahko vnaprej določene mrežne razrede (kot je prikazano spodaj), mešane mreže ali širine vrstic. Upoštevajte, da se bo velikost drugih stolpcev spremenila ne glede na širino osrednjega stolpca.

1 od 3

2 od 3 (širše)

3 od 3

1 od 3

2 od 3 (širše)

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>

Vsebina spremenljive širine

Uporabite col-{breakpoint}-autorazrede za določanje velikosti stolpcev glede na naravno širino njihove vsebine.

1 od 3

Vsebina spremenljive širine

3 od 3

1 od 3

Vsebina spremenljive š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>

Odzivni razredi

Bootstrapova mreža vključuje pet stopenj vnaprej določenih razredov za gradnjo kompleksnih odzivnih postavitev. Prilagodite velikost svojih stolpcev na zelo majhnih, majhnih, srednjih, velikih ali zelo velikih napravah, kakor se vam zdi primerno.

Vse prekinitvene točke

Za mreže, ki so enake od najmanjše naprave do največje, uporabite razrede .colin . .col-*Podajte oštevilčen razred, ko potrebujete stolpec posebne velikosti; sicer pa se držite .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>

Zloženo vodoravno

Z uporabo enega samega nabora .col-sm-*razredov lahko ustvarite osnovni mrežni sistem, ki se začne kot zložen in postane vodoraven na majhni prelomni točki ( 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>

Zmešaj in poveži

Ne želite, da bi bili vaši stolpci preprosto zloženi v nekaj mrežnih nivojih? Po potrebi uporabite kombinacijo različnih razredov za vsako raven. Oglejte si spodnji primer za boljšo predstavo o tem, kako vse skupaj deluje.

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

Žlebovi

Žlebove je mogoče odzivno prilagoditi z oblazinjenjem, specifičnim za prekinitveno točko, in razredi uporabnosti negativnega roba. Če želite spremeniti žlebove v dani vrstici, združite pripomoček za negativno maržo na .rowin ujemajoče se pripomočke za oblazinjenje na .cols. Morda bo treba prilagoditi tudi nadrejenega elementa ali, da se izognete neželenemu prelivanju, in sicer s ponovnim ujemanjem pripomočka za oblazinjenje .container..container-fluid

Tukaj je primer prilagajanja mreže Bootstrap na veliki ( lg) prelomni točki in več. Povečali smo .coloblazinjenje z .px-lg-5, to preprečili z .mx-lg-n5nadrejenim .rowin nato prilagodili .containerovoj z .px-lg-5.

Oblazinjenje stolpcev po meri

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

Stolpci vrstic

Uporabite odzivne .row-cols-*razrede za hitro nastavitev števila stolpcev, ki najbolje upodabljajo vašo vsebino in postavitev. Medtem ko običajni .col-*razredi veljajo za posamezne stolpce (npr. .col-md-4), so razredi stolpcev vrstic nastavljeni na nadrejenem .rowkot bližnjica.

Uporabite te razrede stolpcev vrstic za hitro ustvarjanje osnovnih postavitev mreže ali za nadzor postavitev kartic.

Stolpec

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

Stolpec

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

Stolpec

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

Stolpec

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

Stolpec

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

Uporabite lahko tudi priložen Sass mixin, 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);
  }
}

Poravnava

Za navpično in vodoravno poravnavo stolpcev uporabite pripomočke za poravnavo flexbox. Internet Explorer 10–11 ne podpira navpične poravnave elementov flex, če ima vsebnik flex, min-heightkot je prikazano spodaj. Glejte Flexbugs #3 za več podrobnosti.

Navpična poravnava

Eden od treh stolpcev

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

Eden od treh stolpcev

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

Vodoravna poravnava

Eden od dveh stolpcev

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

Brez žlebov

Žlebove med stolpci v naših vnaprej določenih mrežnih razredih lahko odstranite z .no-gutters. S tem se odstranijo negativni margins .rowin vodoravna črta paddingiz vseh neposrednih podrejenih stolpcev.

Tukaj je izvorna koda za ustvarjanje teh slogov. Upoštevajte, da so preglasitve stolpcev omejene samo na prve podrejene stolpce in so ciljane prek izbirnika atributov . Medtem ko to ustvari bolj specifičen izbirnik, je oblazinjenje stolpcev še vedno mogoče dodatno prilagoditi s pripomočki za razmik .

Potrebujete dizajn od roba do roba? Izpustite nadrejeno .containerali .container-fluid.

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

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

V praksi je takole videti. Upoštevajte, da lahko to še naprej uporabljate z vsemi drugimi vnaprej določenimi razredi mreže (vključno s širinami stolpcev, odzivnimi stopnjami, preurejanjem in drugim).

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

Ovijanje stolpcev

Če je v eni vrstici več kot 12 stolpcev, bo vsaka skupina dodatnih stolpcev kot ena enota prešla v novo vrstico.

.col-9

.col-4
Ker je 9 + 4 = 13 > 12, se ta div s 4 stolpci zavije v novo vrstico kot ena sosednja enota.

.col-6
Naslednji stolpci se nadaljujejo v novi vrstici.

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

Prelomi stolpcev

Prekinitev stolpcev v novo vrstico v flexboxu zahteva majhen vdor: dodajte element s katerimkoli mestom width: 100%želite zaviti svoje stolpce v novo vrstico. Običajno se to doseže z več .rows-ji, vendar tega ne more upoštevati vsaka implementacijska metoda.

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

Ta prekinitev lahko uporabite tudi na določenih prelomnih točkah z našimi odzivnimi prikazovalnimi pripomočki .

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

Preurejanje

Naroči razrede

Uporabite .order-razrede za nadzor vizualnega reda vaše vsebine. Ti razredi so odzivni, tako da lahko nastavite orderprekinitveno točko (npr. .order-1.order-md-2). Vključuje podporo za 1skozi 12vseh pet stopenj omrežja.

Prvič v DOM-u, brez vrstnega reda

Drugič v DOM-u, z večjim naročilom

Tretji v DOM, z vrstnim redom 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>

Obstajajo tudi odzivni razredi .order-firstin .order-lastrazredi, ki spremenijo orderelement elementa z uporabo order: -1oziroma order: 13( order: $columns + 1). Te razrede je mogoče po potrebi tudi mešati z oštevilčenimi .order-*razredi.

Prva v DOMU, naročena zadnja

Drugo v DOM-u, neurejeno

Tretji v DOMU, prvi naročen

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

Poravnalni stolpci

Stolpce mreže lahko izravnate na dva načina: z našimi odzivnimi .offset-razredi mreže in našimi pripomočki za robove . Razredi mrež so velikosti tako, da se ujemajo s stolpci, medtem ko so robovi bolj uporabni za hitre postavitve, kjer je širina odmika spremenljiva.

Poravnalni razredi

Premaknite stolpce v desno z uporabo .offset-md-*razredov. Ti razredi povečujejo levi rob stolpca za *stolpcem. Na primer, .offset-md-4premika se .col-md-4po štirih stolpcih.

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

Poleg čiščenja stolpcev na odzivnih prelomnih točkah boste morda morali ponastaviti odmike. Oglejte si to v akciji v primeru 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="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>

Pripomočki za marže

S prehodom na flexbox v različici 4 lahko uporabite pripomočke za margine, .mr-autona primer prisilite sorodne stolpce drug od drugega.

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

Gnezdenje

Če želite svojo vsebino ugnezditi s privzeto mrežo, dodajte nov .rowin nabor .col-sm-*stolpcev znotraj obstoječega .col-sm-*stolpca. Ugnezdene vrstice morajo vključevati nabor stolpcev, katerih seštevek je 12 ali manj (ni potrebno, da uporabite vseh 12 razpoložljivih stolpcev).

Raven 1: .col-sm-9

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

2. stopnja: .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 mešanice

Ko uporabljate Bootstrapove izvorne datoteke Sass, imate možnost uporabe spremenljivk in mešanic Sass za ustvarjanje semantičnih in odzivnih postavitev strani po meri. Naši vnaprej določeni mrežni razredi uporabljajo iste spremenljivke in mešanice, da zagotovijo celotno zbirko razredov, pripravljenih za uporabo, za hitro odzivne postavitve.

Spremenljivke

Spremenljivke in zemljevidi določajo število stolpcev, širino žleba in točko medijske poizvedbe, na kateri se začnejo plavajoči stolpci. Uporabljamo jih za ustvarjanje vnaprej določenih razredov mreže, dokumentiranih zgoraj, kot tudi za mešanice po meri, navedene spodaj.

$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 uporabljajo v povezavi s spremenljivkami mreže za ustvarjanje semantičnega CSS za posamezne stolpce mreže.

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

Primer uporabe

Spremenljivke lahko spremenite v svoje lastne vrednosti po meri ali preprosto uporabite miksine z njihovimi privzetimi vrednostmi. Tukaj je primer uporabe privzetih nastavitev za ustvarjanje postavitve v dveh stolpcih z vrzeljo med njima.

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

Glavna vsebina

Sekundarna vsebina

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

Prilagajanje mreže

Z uporabo naših vgrajenih mrežnih spremenljivk in zemljevidov Sass je mogoče popolnoma prilagoditi vnaprej določene razrede mreže. Spremenite število nivojev, dimenzije medijske poizvedbe in širine vsebnika – nato znova prevedite.

Stebri in žlebovi

Število stolpcev mreže je mogoče spremeniti s spremenljivkami Sass. $grid-columnsse uporablja za ustvarjanje širin (v odstotkih) vsakega posameznega stolpca, medtem ko $grid-gutter-widthnastavi širino za žlebove stolpcev.

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

Stopnje mreže

Poleg samih stolpcev lahko prilagodite tudi število stopenj mreže. Če bi želeli le štiri mrežne ravni, bi posodobili $grid-breakpointsin $container-max-widthsna nekaj takega:

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

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

Ko spreminjate spremenljivke ali zemljevide Sass, boste morali shraniti spremembe in jih znova prevesti. S tem boste ustvarili povsem nov niz vnaprej določenih razredov mreže za širine stolpcev, odmike in vrstni red. Odzivni pripomočki za vidnost bodo prav tako posodobljeni za uporabo prekinitvenih točk po meri. Ne pozabite nastaviti mrežnih vrednosti v px(ne rem, em, ali %).