Sistim grid

Contona

Sistem grid Bootstrap ngagunakeun runtuyan wadah, baris, jeung kolom pikeun perenah jeung align eusi. Éta diwangun ku flexbox sareng pinuh responsif. Di handap ieu conto jeung katerangan di-jero kumaha sistem grid datangna babarengan.

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

Conto di luhur nyiptakeun tilu kolom lebar anu sami dina sadaya alat sareng viewports nganggo kelas grid anu tos disetel. Kolom-kolom éta dipuseurkeun dina halaman sareng indungna .container.

Kumaha gawéna

Ngarecahna, ieu kumaha sistem grid ngahiji:

• grid kami ngarojong genep breakpoints responsif . Breakpoints dumasar kana min-widthqueries média, hartina maranéhna mangaruhan breakpoints sarta sakabeh jalma di luhur eta (misalna .col-sm-4lumaku pikeun sm, md, lg, xl, jeung xxl). Ieu hartosna anjeun tiasa ngontrol ukuran wadah sareng kolom sareng paripolah ku unggal titik putus.

• Wadahna tengah sareng sacara horisontal pad eusi anjeun. Paké .containerpikeun lebar piksel responsif, .container-fluidpikeun width: 100%sakabéh viewports jeung alat, atawa wadah responsif (misalna, .container-md) pikeun kombinasi lega cairan jeung piksel.

• Baris mangrupakeun wrappers pikeun kolom. Unggal kolom boga horizontal padding(disebut talang a) pikeun ngadalikeun spasi antara aranjeunna. Ieu paddinglajeng counteracted dina barisan kalawan margins négatip pikeun mastikeun eusi dina kolom anjeun visually Blok handap sisi kénca. Baris ogé ngadukung kelas modifier pikeun nerapkeun seragam ukuran kolom sareng kelas talang pikeun ngarobih jarak eusi anjeun.

• Kolom anu incredibly fléksibel. Aya 12 kolom template sadia per baris, ngidinan Anjeun pikeun nyieun kombinasi béda elemen anu bentang sagala jumlah kolom. Kelas kolom nunjukkeun jumlah kolom template pikeun bentang (contona, bentang col-4opat). widths diatur dina percentages jadi Anjeun salawasna boga ukuran relatif sarua.

• Gutters ogé responsif sarta customizable. Kelas talang sayogi di sadaya titik putus, kalayan ukuran anu sami sareng jarak margin sareng padding kami . Ganti talang horisontal nganggo .gx-*kelas, talang nangtung nganggo .gy-*, atanapi sadayana talang nganggo .g-*kelas. .g-0oge sadia pikeun miceun talang.

• Variabel Sass, peta, sareng campuran ngagedekeun grid. Upami anjeun henteu hoyong nganggo kelas grid anu tos ditetepkeun dina Bootstrap, anjeun tiasa nganggo sumber grid kami Sass pikeun nyiptakeun sorangan kalayan markup anu langkung semantik. Urang ogé ngawengku sababaraha sipat custom CSS pikeun meakeun variabel Sass ieu pikeun kalenturan malah leuwih gede pikeun anjeun.

Waspada kana watesan sareng bug di sabudeureun flexbox , sapertos henteu mampuh ngagunakeun sababaraha elemen HTML salaku wadah fleksibel .

Pilihan grid

Sistem grid Bootstrap tiasa adaptasi dina sadaya genep titik putus standar, sareng titik putus naon waé anu anjeun sasuai. Genep tingkat grid standar nyaéta kieu:

• Ekstra leutik (xs)
• Leutik (sm)
• Sedeng (md)
• ageung (lg)
• Ekstra badag (xl)
• Ekstra ageung (xxl)

Sakumaha didadarkeun di luhur, unggal breakpoints ieu gaduh wadahna sorangan, awalan kelas unik, sareng modifiers. Kieu kumaha grid ngarobih dina titik-titik ieu:

Kolom perenah otomatis

Anggo kelas kolom khusus breakpoint pikeun ukuran kolom anu gampang tanpa kelas wilangan anu eksplisit sapertos .col-sm-6.

Sarua-lebar

Contona, di dieu aya dua layouts grid nu dilarapkeun ka unggal alat jeung viewport, ti xska xxl. Tambahkeun sajumlah kelas unit-kurang pikeun tiap breakpoint nu peryogi tur unggal kolom bakal lebar sarua.

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

Nyetel hiji lebar kolom

Layout otomatis pikeun kolom grid flexbox ogé hartosna anjeun tiasa nyetél lebar hiji kolom sareng gaduh kolom duduluran sacara otomatis ngarobih ukuranana. Anjeun tiasa nganggo kelas grid anu tos ditetepkeun (sapertos anu dipidangkeun di handap), campuran grid, atanapi lebar inline. Catet yén kolom anu sanés bakal ngarobih ukuran henteu paduli lebar kolom tengah.

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

Eusi lebar variabel

Anggo col-{breakpoint}-autokelas pikeun ukuran kolom dumasar kana lebar alami eusina.

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

kelas responsif

Grid Bootstrap kalebet genep tingkatan kelas anu tos siap pikeun ngawangun perenah responsif anu kompleks. Sesuaikeun ukuran kolom anjeun dina alat anu langkung alit, alit, sedeng, ageung, atanapi langkung ageung kumaha waé anu anjeun pikahoyong.

Kabéh breakpoints

Pikeun grids anu sarua ti pangleutikna alat ka nu panggedéna, make .coljeung .col-*kelas. Sebutkeun kelas wilanganana nalika anjeun peryogi kolom ukuran khusus; disebutkeun, ngarasa Luncat ka lengket .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>

Ditumpuk ka horizontal

Ngagunakeun set tunggal .col-sm-*kelas, Anjeun bisa nyieun sistem grid dasar nu dimimitian kaluar tumpuk tur jadi horizontal di breakpoint leutik ( 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>

Campur jeung patandingan

Naha anjeun henteu hoyong kolom anjeun ngan saukur tumpukan dina sababaraha tingkatan grid? Anggo kombinasi kelas anu béda pikeun tiap tingkatan upami diperyogikeun. Tingali conto di handap pikeun ide anu langkung saé kumaha éta sadayana jalan.

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

Kolom baris

Anggo .row-cols-*kelas responsif pikeun gancang ngeset jumlah kolom anu paling hadé ngajantenkeun eusi sareng perenah anjeun. Padahal kelas normal .col-*dilarapkeun ka kolom individu (misalna, .col-md-4), kelas kolom baris diatur dina indungna .rowsalaku standar pikeun kolom ngandung. Kalayan .row-cols-autoanjeun tiasa masihan kolom lebar alam maranéhanana.

Anggo kelas kolom baris ieu pikeun gancang nyieun perenah grid dasar atawa ngadalikeun perenah kartu anjeun sarta override lamun diperlukeun dina tingkat kolom.

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

Anjeun ogé tiasa nganggo mixin Sass anu dibarengan 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);
  }
}

Nyarang

Pikeun nyarang eusi anjeun sareng grid standar, tambahkeun kolom anyar .rowsareng set dina .col-sm-*kolom anu tos aya .col-sm-*. Baris Nested kedah ngawengku sakumpulan kolom nu nambahan nepi ka 12 atawa kurang (teu diperlukeun nu make sakabeh 12 kolom sadia).

<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

Nalika nganggo file Sass sumber Bootstrap, anjeun gaduh pilihan ngagunakeun variabel Sass sareng mixin pikeun nyiptakeun perenah halaman khusus, semantik, sareng responsif. Kelas grid tos siap kami nganggo ieu variabel sarua jeung mixins nyadiakeun sakabeh suite tina kelas siap pake pikeun layouts responsif gancang.

Variabel

Variabel sareng peta nangtukeun jumlah kolom, lebar talang, sareng titik query media dimana ngawitan kolom ngambang. Kami nganggo ieu pikeun ngahasilkeun kelas grid anu tos siap didokumentasikeun di luhur, ogé pikeun campuran khusus anu didaptarkeun di handap.

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

Campuran

Mixins dipaké ditéang jeung variabel grid keur ngahasilkeun CSS semantis pikeun kolom grid individu.

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

Conto pamakéan

Anjeun tiasa ngarobih variabel kana nilai khusus anjeun nyalira, atanapi ngan ukur nganggo mixin kalayan nilai standarna. Ieu conto ngagunakeun setélan standar pikeun nyieun tata perenah dua kolom kalayan sela antara.

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

Ngaropea grid

Nganggo variabel sareng peta Sass grid anu diwangun, anjeun tiasa ngarobih kelas grid anu tos siap. Robah jumlah undakan, dimensi query media, sareng lebar wadahna-teras kompilkeun deui.

Kolom jeung talang

Jumlah kolom grid bisa dirobah via variabel Sass. $grid-columnsdipaké pikeun ngahasilkeun lebar (dina persen) unggal kolom individu bari $grid-gutter-widthsusunan lebar pikeun talang kolom.

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

Tiers grid

Pindah saluareun kolom sorangan, anjeun ogé tiasa ngaropea jumlah tiers grid. Upami anjeun hoyong ngan ukur opat undakan grid, anjeun badé ngapdet $grid-breakpointssareng $container-max-widthska anu sapertos kieu:

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

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

Nalika ngalakukeun parobahan naon waé kana variabel atanapi peta Sass, anjeun kedah nyimpen parobihan anjeun sareng nyusun ulang. Lakukeun kitu bakal ngahasilkeun set anyar kelas grid tos siap pikeun lebar kolom, offsets, sarta susunan. Utiliti pisibilitas responsif ogé bakal diénggalan pikeun nganggo titik putus khusus. Pastikeun pikeun ngeset nilai grid dina px(sanes rem, em, atawa %).