Mrežni sistem

Primjer

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 detaljno objašnjenje kako se grid sistem spaja.

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

Kako radi

Ako ga rastavite, evo kako se grid sistem spaja:

• Naša mreža podržava šest tačaka prekida . Prelomne tačke su zasnovane na min-widthmedijskim upitima, što znači da utiču na tu tačku prekida i sve one iznad nje (npr. .col-sm-4odnosi se na sm, md, lg, xl, i xxl). To znači da možete kontrolirati veličinu i ponašanje spremnika i stupaca za svaku tačku prekida.

• Kontejneri 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 kontejner (npr. .container-md) za kombinaciju širine fluida i piksela.

• Redovi su omoti za kolone. Svaki stupac ima horizontalni padding(koji se naziva žlijeb) za kontrolu prostora između njih. To paddingse zatim suprotstavlja na redovima s negativnim marginama kako bi se osiguralo da je sadržaj u vašim stupcima vizualno poravnat prema lijevoj strani. Redovi također podržavaju klase modifikatora za ujednačenu primjenu veličine stupaca i klasa oluka za promjenu razmaka vašeg sadržaja.

• Kolone su neverovatno fleksibilne. Dostupno je 12 stupaca šablona po redu, što vam omogućava da kreirate različite kombinacije elemenata koji obuhvataju bilo koji broj kolona. Klase kolona označavaju broj kolona šablona koje treba obuhvatiti (npr. col-4rasponi četiri). widths se postavljaju u procentima tako da uvijek imate istu relativnu veličinu.

• Oluci su također prilagodljivi i prilagodljivi. Klase oluka dostupne su na svim prijelomnim tačkama, sa svim istim veličinama kao i naše margine i razmaci između polja . Promijenite horizontalne oluke sa .gx-*klasama, vertikalne oluke sa .gy-*, ili sve oluke sa .g-*klasama. .g-0dostupan je i za uklanjanje oluka.

• Sass varijable, mape i miksine napajaju mrežu. Ako ne želite koristiti unaprijed definirane grid klase u Bootstrapu, možete koristiti izvorni Sass naše mreže da kreirate vlastitu s više semantičkih oznaka. Uključujemo i 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 kontejnera .

Opcije mreže

Bootstrap-ov grid sistem se može prilagoditi na svih šest zadanih tačaka prekida i bilo koje tačke prekida koje prilagodite. Šest zadanih nivoa mreže su sljedeći:

• Ekstra mali (xs)
• mali (sm)
• srednji (md)
• veliki (lg)
• Ekstra veliki (xl)
• Ekstra veliki (xxl)

Kao što je gore navedeno, svaka od ovih tačaka prekida ima svoj vlastiti kontejner, jedinstveni prefiks klase i modifikatore. Evo kako se mreža mijenja na ovim prijelomnim tačkama:

Automatski raspored kolona

Koristite klase stupaca specifične za tačku prekida za jednostavno određivanje veličine stupaca bez eksplicitne numerirane 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 xxl. Dodajte bilo koji broj klasa bez jedinica za svaku tačku prekida koja vam je potrebna i svaka kolona će biti iste širine.

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

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

<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 šest 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; u suprotnom, slobodno se držite .col.

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

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

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

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 primjenjuju na pojedinačne stupce (npr. .col-md-4), klase stupaca reda su postavljene na roditelju .rowkao default za sadržane stupce. Pomoću .row-cols-autonjih možete dati stupovima njihovu prirodnu širinu.

Koristite ove klase kolona redova da brzo kreirate osnovne rasporede mreže ili da kontrolišete rasporede kartica i po potrebi ih nadjačate na nivou kolone.

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

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

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

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

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

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

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

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

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

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

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

<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-widthpostavlja širinu za oluke stupaca.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !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 %).