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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <!-- 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 prečica. Pomoću .row-cols-autonjih možete dati stupovima njihovu prirodnu širinu.

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

<div class="container text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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);
  }
}

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 text-center">
  <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-row-columns:  6;

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

// Offset with margins
@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

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual column while $grid-gutter-width sets the width for the column gutters. $grid-row-columns is used to set the maximum number of columns of .row-cols-*, any number over this limit is ignored.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

Grid tiers

Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the $grid-breakpoints and $container-max-widths to something like this:

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

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

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand-new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in px (not rem, em, or %).