Mrežni sistem

Upotrijebite našu moćnu flexbox mrežu koja je na prvom mjestu za mobilne uređaje da biste izgradili rasporede svih oblika i veličina zahvaljujući sistemu od dvanaest stupaca, pet zadanih responzivnih nivoa, Sass varijablama i miksinama i desetinama unaprijed definiranih klasa.

Kako radi

Bootstrap-ov grid sistem koristi niz kontejnera, redova i kolona za raspored i poravnanje sadržaja. Napravljen je sa flexboxom i potpuno je prilagodljiv. Ispod je primjer i detaljan pogled na to kako se mreža spaja.

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

Jedna od tri kolone

<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 kreira tri kolone jednake širine na malim, srednjim, velikim i ekstra velikim uređajima koristeći naše unaprijed definirane klase mreže. Ti stupci su centrirani na stranici s roditeljem .container.

Ako ga rastavite, evo kako to funkcionira:

Kontejneri pružaju način za centriranje i vodoravno postavljanje sadržaja vaše stranice. Koristite .containerza responzivnu širinu piksela ili .container-fluidza width: 100%sve veličine prozora i uređaja.
Redovi su omoti za kolone. Svaki stupac ima horizontalni padding(koji se naziva žlijeb) za kontrolu prostora između njih. To paddingse onda suprotstavlja na redovima s negativnim marginama. Na ovaj način, sav sadržaj u vašim kolonama je vizuelno poravnat na lijevoj strani.
U rasporedu mreže, sadržaj mora biti smješten unutar kolona i samo stupci mogu biti neposredno podređeni redovima.
Zahvaljujući flexboxu, kolone mreže bez specificiranog widthće automatski biti postavljene kao kolone jednake širine. Na primjer, četiri instance .col-smće automatski biti po 25% široke od male točke prekida i više. Za više primjera pogledajte odjeljak kolona sa automatskim rasporedom .
Klase kolona označavaju broj kolona koje želite koristiti od mogućih 12 po redu. Dakle, ako želite tri kolone jednake širine, možete koristiti .col-4.
Kolone widths su postavljene u procentima, tako da su uvijek fluidne i veličine u odnosu na njihov roditeljski element.
Kolone su horizontalne paddingza stvaranje oluka između pojedinačnih kolona, međutim, možete ukloniti marginiz redova i paddingiz kolona sa .no-guttersna .row.
Da bi mreža bila prilagodljiva, postoji pet prelomnih tačaka mreže, po jedna za svaku tačku prekida : sve tačke prekida (ekstra male), male, srednje, velike i ekstra velike.
Prelomne tačke mreže su zasnovane na medijskim upitima minimalne širine, što znači da se primenjuju na tu jednu tačku prekida i sve one iznad nje (npr. .col-sm-4primenjuju se na male, srednje, velike i ekstra velike uređaje, ali ne i na prvu xstačku prekida).
Možete koristiti unaprijed definirane klase mreže (poput .col-4) ili Sass miksine za više semantičkog označavanja.

Budite svjesni ograničenja i grešaka oko flexbox-a , poput nemogućnosti korištenja nekih HTML elemenata kao flex kontejnera .

Opcije mreže

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

Pogledajte kako aspekti Bootstrap grid sistema funkcionišu na više uređaja uz praktičnu tablicu.

	Izuzetno mali <576px	Mala ≥576px	Srednje ≥768px	Velika ≥992px	Ekstra velika ≥1200px
Maksimalna širina kontejnera	Ništa (auto)	540px	720px	960px	1140px
Prefiks klase	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
Broj kolona	12
Širina oluka	30px (15px sa svake strane kolone)
Nestable	Da
Redosled kolona	Da

Automatski raspored kolona

Koristite klase stupaca specifične za tačku prekida za jednostavno određivanje veličine stupaca bez eksplicitne numerisane klase kao što je .col-sm-6.

Jednake širine

Na primjer, evo dva rasporeda mreže koja se primjenjuju na svaki uređaj i okvir za prikaz, od xsdo xl. Dodajte bilo koji broj klasa bez jedinica za svaku tačku prekida koja vam je potrebna i svaki stupac će 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>

Višelinijski jednake širine

Kreirajte kolone jednake širine koji se protežu na više redova tako što ćete umetnuti a .w-100gdje želite da se stupci razdvoje na novi red. Učinite pauze responzivnim miješanjem .w-100s nekim uslužnim programima za prikaz .

Postojala je greška Safari flexbox koja je spriječila ovo da radi bez eksplicitnog flex-basisili border. Postoje zaobilazna rješenja za starije verzije pretraživača, ali ona ne bi trebala biti potrebna ako vaši ciljni pretraživači ne spadaju u verzije sa greškama.

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>

Postavljanje širine jedne kolone

Automatski raspored za kolone flexbox mreže takođe znači da možete postaviti širinu jedne kolone i da se srodnim kolonama automatski menja veličina oko nje. Možete koristiti unapred definisane klase mreže (kao što je prikazano ispod), mešavine mreže ili inline širine. Imajte na umu da će se veličina ostalih kolona promijeniti bez obzira na širinu središnje kolone.

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 veličinu kolona na osnovu 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>

Responsive classes

Bootstrap mreža uključuje pet nivoa unapred definisanih klasa za izgradnju složenih responzivnih izgleda. Prilagodite veličinu svojih stupaca na izuzetno malim, malim, srednjim, velikim ili ekstra velikim uređajima kako god smatrate prikladnim.

Sve tačke prekida

Za mreže koje su iste od najmanjeg uređaja do najvećeg, koristite .coli .col-*klase. Odredite numerisanu klasu kada vam je potrebna kolona posebne veličine; inače, slobodno 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>

Naslagano do horizontale

Koristeći jedan skup .col-sm-*klasa, možete kreirati osnovni sistem mreže koji počinje naslagano i postaje horizontalan na maloj tački prekida ( sm).

col-sm-8

col-sm-4

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

Ne želite da se vaše kolone jednostavno slažu u nekoliko slojeva mreže? Koristite kombinaciju različitih klasa za svaki nivo po potrebi. Pogledajte primjer u nastavku za bolju ideju kako sve to funkcionira.

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

Oluci

Oluci se mogu prilagodljivo podesiti pomoću dopuna specifičnih za tačku prekida i klasa korisnosti negativne margine. Da biste promijenili oluke u datom redu, uparite negativnu marginu uslužnog programa na .rowi odgovarajuće pomoćne programe za popunjavanje na .cols. .containerIli će možda morati da se podesi i .container-fluidroditelj da bi se izbeglo neželjeno prelivanje, koristeći ponovo odgovarajući uslužni program za popunjavanje.

Evo primjera prilagođavanja Bootstrap mreže na velikoj ( lg) tački prekida i iznad. Povećali smo .colpadding sa .px-lg-5, suprotstavili se tome sa .mx-lg-n5na roditelju .row, a zatim smo podesili .containeromot sa .px-lg-5.

Prilagođeno punjenje kolona

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

Red kolone

Koristite responzivne .row-cols-*klase da brzo postavite broj kolona koje najbolje prikazuju vaš sadržaj i izgled. Dok se normalne .col-*klase primenjuju na pojedinačne kolone (npr. .col-md-4), klase kolona reda se postavljaju na roditelju .rowkao prečica.

Koristite ove klase stupaca reda za brzo kreiranje osnovnih rasporeda mreže ili za kontrolu izgleda vaših kartica.

Kolona

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

Kolona

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

Kolona

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

Kolona

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

Kolona

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

Možete koristiti i prateći 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);
  }
}

Poravnanje

Koristite uslužne programe za poravnanje flexboxa za vertikalno i horizontalno poravnanje stupaca. Internet Explorer 10-11 ne podržava vertikalno poravnanje flex stavki kada flex kontejner ima a min-heightkao što je prikazano ispod. Pogledajte Flexbugs #3 za više detalja.

Vertikalno poravnanje

Jedna od tri kolone

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

Jedna od tri kolone

<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

Jedna od dvije kolone

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

Nema oluka

Oluci između stupaca u našim predefiniranim mrežnim klasama mogu se ukloniti pomoću .no-gutters. Ovo uklanja negativne margins .rowi horizontale paddingiz svih neposrednih podređenih stupaca.

Evo izvornog koda za kreiranje ovih stilova. Imajte na umu da su nadjačavanja stupaca ograničena na samo prve podređene stupce i ciljana su preko selektora atributa . Iako ovo generiše specifičniji selektor, dopuna kolone se i dalje može dodatno prilagoditi pomoću uslužnih programa za razmak .

Trebate dizajn od ruba do ivice? Odbacite roditelja .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 da koristite sa svim drugim unapred definisanim klasama mreže (uključujući širine kolona, responzivne slojeve, promene redosleda i još mnogo toga).

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

Omotavanje kolone

Ako je više od 12 kolona postavljeno unutar jednog reda, svaka grupa dodatnih kolona će se, kao jedna jedinica, premotati u novi red.

.col-9

.col-4
Pošto je 9 + 4 = 13 > 12, ovaj div širine 4 kolone se umotava u novi red kao jedna susedna jedinica.

.col-6
Naredne kolone se nastavljaju duž novog reda.

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

Razbijanje kolona u novi red u flexbox-u zahtijeva mali hak: dodajte element width: 100%gdje god želite da premotate svoje kolone u novi red. Obično se to postiže s višestrukim .rows, ali ne može svaka metoda implementacije to uzeti u obzir.

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

Ovu pauzu možete primijeniti i na određenim prijelomnim tačkama s našim responzivnim uslužnim programima za 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

Naručite časove

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

Prvo u DOM-u, nije primijenjena narudžba

Drugi u DOM-u, sa većom narudžbom

Treći u DOM-u, sa redoslijedom od 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>

Postoje i responsive .order-firsti .order-lastklase koje mijenjaju orderelement primjenom order: -1i order: 13( order: $columns + 1), respektivno. Ove klase se takođe mogu mešati sa numerisanim .order-*klasama po potrebi.

Prvi u DOM-u, naručen zadnji

Drugi u DOM-u, neuređen

Treći u DOM-u, naručen prvi

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

Offseting kolone

Možete pomaknuti stupce mreže na dva načina: naše responzivne .offset-mrežne klase i naše margine . Mrežne klase su veličine tako da odgovaraju kolonama, dok su margine korisnije za brze izglede gdje je širina pomaka promjenjiva.

Offset klase

Pomjerite stupce udesno koristeći .offset-md-*klase. Ove klase povećavaju lijevu marginu kolone po *kolone. Na primjer, .offset-md-4kreće se .col-md-4preko četiri kolone.

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

Pored brisanja kolona na odgovarajućim prijelomnim tačkama, možda ćete morati resetirati 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="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 komunalne usluge

Sa prelaskom na flexbox u v4, možete koristiti marginalne uslužne programe 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="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

Da biste svoj sadržaj ugnijezdili u zadanu mrežu, dodajte novu .rowi skup .col-sm-*kolona unutar postojeće .col-sm-*kolone. Ugniježđeni redovi bi trebali uključivati skup kolona koji zajedno čine 12 ili manje (nije potrebno da koristite svih 12 dostupnih kolona).

Nivo 1: .col-sm-9

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

Nivo 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

Kada koristite izvorne Sass datoteke Bootstrapa, imate mogućnost korištenja Sass varijabli i miksina za kreiranje prilagođenih, semantičkih i responzivnih izgleda stranica. Naše predefinirane mrežne klase koriste iste varijable i miksine kako bi pružile cijeli paket klasa spremnih za korištenje za brzo reagiranje izgleda.

Varijable

Varijable i mape određuju broj kolona, širinu žlijeba i tačku medijskog upita u kojoj će početi plutajuće kolone. Koristimo ih za generiranje unaprijed definiranih grid klasa 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 zajedno sa varijablama mreže za generiranje semantičkog CSS-a za pojedinačne stupce 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);

Primjer upotrebe

Možete modificirati varijable na svoje vlastite prilagođene vrijednosti ili jednostavno koristiti miksine sa njihovim zadanim vrijednostima. Evo primjera korištenja zadanih postavki za kreiranje rasporeda s dvije kolone s razmakom između.

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

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>

Prilagođavanje mreže

Koristeći naše ugrađene grid Sass varijable i mape, moguće je potpuno prilagoditi unaprijed definirane mrežne klase. Promijenite broj slojeva, dimenzije medijskog upita i širine kontejnera - a zatim ponovo kompajlirajte.

Stubovi i oluci

Broj stupaca mreže može se mijenjati preko Sass varijabli. $grid-columnskoristi se za generiranje širine (u procentima) svake pojedinačne kolone dok $grid-gutter-widthpostavlja širinu za oluke stupaca.

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

Mrežni slojevi

Idući dalje od samih kolona, možete prilagoditi i broj slojeva mreže. Ako želite samo četiri nivoa 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 pravite bilo kakve promjene u Sass varijablama ili mapama, morat ćete sačuvati promjene i ponovo kompajlirati. Na taj način će se dobiti potpuno novi skup unaprijed definiranih klasa mreže za širine stupaca, pomake i redoslijed. Ažurirani uslužni programi za vidljivost će također biti ažurirani da koriste prilagođene tačke prekida. Obavezno postavite vrijednosti mreže u px(ne rem, em, ili %).