Source

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 prilagodljivu š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 (automatski)	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>

Kolone jednake širine mogu se razbiti u više redova, ali 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 ne bi trebala biti potrebna ako ste ažurni.

Kolona

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

Automatski raspored za stupce flexbox mreže također znači da možete postaviti širinu jedne kolone i da se srodnim kolonama automatski mijenja veličina oko nje. Možete koristiti unaprijed definirane klase mreže (kao što je prikazano ispod), grid mixine 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>

Višeredna jednaka širina

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

col

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

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

Naslagano do horizontale

Koristeći jedan skup .col-sm-*klasa, možete kreirati osnovni sistem mreže koja počinje naslagana prije nego što postane horizontalna sa na maloj tački prekida ( sm).

col-sm-8

col-sm-4

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

Koristite uslužne programe za poravnanje flexboxa za vertikalno i horizontalno poravnanje stupaca.

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 koristiti sa svim drugim unaprijed definiranim klasama mreže (uključujući širine stupaca, responzivne slojeve, promjene redoslijeda i još mnogo toga).

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

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

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

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

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, ali neuređeno

Drugo, ali poslednje

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>

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.

Prvo, ali poslednje

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>

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

Pored brisanja stupaca 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="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>

Margin komunalne usluge

Sa prelaskom na flexbox u v4, možete koristiti marginalne uslužne programe kao što .mr-autoje prisilno udaljavanje srodničkih 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>

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

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 – 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-widthdozvoljava širine specifične za tačku prekida koje su ravnomjerno podijeljene poprijeko padding-lefti padding-rightza 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 spremiti 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 %).