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, šest zadanih responzivnih razina, Sass varijablama i mixinovima te desecima unaprijed definiranih klasa.

Na ovoj stranici

Primjer

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. Ispod je primjer i detaljno objašnjenje kako se mrežni sustav spaja.

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

Stupac

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Gornji primjer stvara tri stupca jednake širine na svim uređajima i prozorima pomoću naših unaprijed definiranih klasa rešetke. Ti su stupci centrirani na stranici s roditeljem .container.

Kako radi

Raščlanjujući ga, evo kako se mrežni sustav sastavlja:

Naša mreža podržava šest osjetljivih prijelomnih točaka . Prijelomne točke temelje se na min-widthmedijskim upitima, što znači da utječu na tu prijelomnu točku i sve one iznad nje (npr. .col-sm-4odnosi se na sm, md, lg, xli xxl). To znači da možete kontrolirati veličinu i ponašanje spremnika i stupca prema svakoj prijelomnoj točki.
Spremnici centriraju i vodoravno postavljaju vaš sadržaj. Koristite .containerza responzivnu širinu piksela, .container-fluidza width: 100%sve okvire za prikaz i uređaje, ili responzivni spremnik (npr. .container-md) za kombinaciju fluidnih i pikselnih širina.
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 recima s negativnim marginama kako bi se osiguralo da je sadržaj u vašim stupcima vizualno poravnat s lijeve strane. Redovi također podržavaju klase modifikatora za jednoliku primjenu veličine stupca i klase oluka za promjenu razmaka vašeg sadržaja.
Kolone su nevjerojatno fleksibilne. Dostupno je 12 stupaca predloška po retku, što vam omogućuje stvaranje različitih kombinacija elemenata koji obuhvaćaju bilo koji broj stupaca. Klase stupaca označavaju broj stupaca predloška koje treba obuhvatiti (npr. col-4obuhvaća četiri). widths se postavljaju u postocima tako da uvijek imate istu relativnu veličinu.
Oluci su također osjetljivi i prilagodljivi. Klase oluka dostupne su u svim prijelomnim točkama, sa svim istim veličinama kao i naše margine i razmaci od ruba . Promijenite vodoravne oluke s .gx-*klasama, okomite oluke s .gy-*ili sve oluke s .g-*klasama. .g-0također je dostupan za uklanjanje oluka.
Sass varijable, karte i miksini pokreću mrežu. Ako ne želite koristiti unaprijed definirane klase rešetke u Bootstrapu, možete upotrijebiti naš izvorni Sass rešetke za stvaranje vlastite s više semantičkog označavanja. Također uključujemo neka CSS prilagođena svojstva za korištenje ovih Sass varijabli za još veću fleksibilnost za vas.

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

Mogućnosti mreže

Bootstrapov mrežni sustav može se prilagoditi na svih šest zadanih prijelomnih točaka i bilo kojim prijelomnim točkama koje prilagodite. Šest zadanih razina rešetke su sljedeći:

Ekstra mali (xs)
mali (sm)
Srednje (md)
velika (lg)
Ekstra veliki (xl)
Ekstra ekstra veliki (xxl)

Kao što je gore navedeno, svaka od ovih prijelomnih točaka ima vlastiti spremnik, jedinstveni prefiks klase i modifikatore. Evo kako se rešetka mijenja preko ovih prijelomnih točaka:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992 px	xl ≥1200 px	xxl ≥1400 px
Kontejner`max-width`	Ništa (automatski)	540 px	720 px	960 px	1140 px	1320 px
Prefiks klase	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
Broj stupaca	12
Širina oluka	1,5rem (0,75rem lijevo i desno)
Oluci po mjeri	Da
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 xxl. 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>

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>

Responzivni razredi

Bootstrapova mreža uključuje šest 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-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>

Redak stupaca

Koristite responzivne .row-cols-*klase za brzo postavljanje broja stupaca koji najbolje prikazuju vaš sadržaj i izgled. Dok se normalne .col-*klase primjenjuju na pojedinačne stupce (npr., .col-md-4), klase stupaca retka postavljene su na roditelju .rowkao zadane za sadržane stupce. Pomoću .row-cols-automožete dati stupcima njihovu prirodnu širinu.

Upotrijebite ove klase stupaca redaka za brzo stvaranje osnovnih rasporeda rešetki ili za kontrolu rasporeda kartica i nadjačavanje po potrebi na razini stupca.

Stupac

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

Stupac

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

Stupac

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Stupac

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

Stupac

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

Stupac

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

Stupac

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
  </div>
</div>

Također možete koristiti 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);
  }
}

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

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

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

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

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: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

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

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@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 {
  @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>

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: 1.5rem !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 %).