Sistem grid

Gunakake kothak flexbox pisanan seluler sing kuat kanggo nggawe tata letak kabeh wangun lan ukuran amarga sistem rolas kolom, limang tingkat responsif standar, variabel lan campuran Sass, lan puluhan kelas sing wis ditemtokake.

Cara kerjane

Sistem kothak Bootstrap nggunakake seri wadhah, larik, lan kolom kanggo ngatur lan nyelarasake isi. Dibangun nganggo flexbox lan responsif kanthi lengkap. Ing ngisor iki minangka conto lan tampilan sing luwih jero babagan cara kothak kasebut.

Anyar utawa ora kenal karo flexbox? Waca pandhuan flexbox Trik CSS iki kanggo latar mburi, terminologi, pedoman, lan potongan kode.

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

Conto ing ndhuwur nggawe telung kolom kanthi jembar sing padha ing piranti cilik, medium, gedhe, lan ekstra gedhe nggunakake kelas kothak sing wis ditemtokake. Kolom kasebut dipusatake ing kaca karo wong tuwa .container.

Mbusak mudhun, iki cara kerjane:

• Kontainer nyedhiyakake sarana kanggo pusat lan horisontal isi situs sampeyan. Gunakake .containerkanggo jembar piksel responsif utawa .container-fluidkanggo width: 100%kabeh viewport lan ukuran piranti.
• Baris minangka bungkus kanggo kolom. Saben kolom nduweni horisontal padding(disebut talang) kanggo ngontrol spasi ing antarane. Iki paddingbanjur counteracted ing baris karo wates negatif. Kanthi cara iki, kabeh konten ing kolom sampeyan didadekake visual ing sisih kiwa.
• Ing tata letak kothak, isi kudu diselehake ing kolom lan mung kolom bisa dadi anak langsung saka baris.
• Thanks kanggo flexbox, kolom kothak tanpa ditemtokake widthbakal kanthi otomatis ditata minangka kolom lebar sing padha. Contone, papat kedadean saka .col-smsaben bakal otomatis 25% sudhut saka breakpoint cilik lan munggah. Deleng bagean kolom tata letak otomatis kanggo conto liyane.
• Kelas kolom nuduhake jumlah kolom sing pengin digunakake saka kemungkinan 12 saben baris. Dadi, yen sampeyan pengin telung kolom jembaré padha, sampeyan bisa nggunakake .col-4.
• Kolom widths disetel ing persentase, supaya padha tansah adi lan ukuran relatif kanggo unsur induk.
• Kolom duwe horisontal paddingkanggo nggawe talang antarane kolom individu, nanging sampeyan bisa mbusak marginsaka larik lan paddingsaka kolom kanthi .no-guttersing .row.
• Kanggo nggawe grid responsif, ana limang breakpoints kothak, siji kanggo saben breakpoint responsif : kabeh breakpoints (ekstra cilik), cilik, medium, gedhe, lan ekstra gedhe.
• Breakpoints kothak adhedhasar pitakon media jembar minimal, tegese padha ditrapake kanggo breakpoint siji lan kabeh sing ana ing ndhuwur kasebut (contone, .col-sm-4ditrapake kanggo piranti cilik, medium, gedhe, lan ekstra gedhe, nanging dudu xsbreakpoint pisanan).
• Sampeyan bisa nggunakake kelas kothak sing wis ditemtokake (kayata .col-4) utawa campuran Sass kanggo markup semantik liyane.

Waca watesan lan bug ing flexbox , kayata ora bisa nggunakake sawetara unsur HTML minangka wadhah fleksibel .

Pilihan kothak

Nalika Bootstrap nggunakake ems utawa rems kanggo nemtokake ukuran paling, pxs digunakake kanggo breakpoints kothak lan jembaré wadhah. Iki amarga ambane viewport ing piksel lan ora ngganti karo ukuran font .

Delengen carane aspèk sistem kothak Bootstrap bisa digunakake ing pirang-pirang piranti kanthi meja sing praktis.

Kolom tata letak otomatis

Gunakake kelas kolom khusus breakpoint kanggo ukuran kolom sing gampang tanpa kelas nomer sing jelas kaya .col-sm-6.

Wiyaripun padha

Contone, ing kene ana rong tata letak kothak sing ditrapake kanggo saben piranti lan viewport, saka xsnganti xl. Tambah sawetara kelas unit-kurang kanggo saben breakpoint sampeyan perlu lan saben kolom bakal padha jembaré.

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

Kolom sing padha karo jembaré bisa dipérang dadi pirang-pirang baris, nanging ana bug Safari flexbox sing nyegah iki bisa digunakake tanpa eksplisit flex-basisutawa border. Ana solusi kanggo versi browser lawas, nanging ora perlu yen sampeyan lagi anyar.

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

Nyetel siji jembar kolom

Tata letak otomatis kanggo kolom kothak flexbox uga tegese sampeyan bisa nyetel jembar siji kolom lan duwe kolom sadulur kanthi otomatis ngowahi ukurane. Sampeyan bisa nggunakake kelas kothak sing wis ditemtokake (kaya sing kapacak ing ngisor iki), campuran kothak, utawa jembar inline. Elinga yen kolom liyane bakal ngowahi ukuran ora ketompo jembar 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>

Isi jembaré variabel

Gunakake col-{breakpoint}-autokelas kanggo ukuran kolom adhedhasar jembar alami saka isi.

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

Multi-baris padha karo jembaré

Gawe kolom kanthi jembar sing padha karo pirang-pirang baris kanthi nglebokake kolom sing .w-100pengin dipecah menyang baris anyar. Nggawe istirahat responsif kanthi nyampur .w-100karo sawetara utilitas tampilan responsif .

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

Kelas responsif

Kothak Bootstrap kalebu limang undakan kelas sing wis ditemtokake kanggo mbangun tata letak responsif sing kompleks. Kustomisasi ukuran kolom sampeyan ing piranti sing luwih cilik, cilik, medium, gedhe, utawa luwih gedhe, sanajan sampeyan cocog.

Kabeh breakpoints

Kanggo kothak sing padha saka piranti paling cilik nganti paling gedhe, gunakake kelas .collan .col-*. Nemtokake kelas nomer nalika sampeyan mbutuhake kolom ukuran khusus; digunakake, aran gratis kanggo kelet kanggo .col.

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

Ditumpuk menyang horisontal

Nggunakake pesawat siji saka .col-sm-*kelas, sampeyan bisa nggawe sistem kothak dhasar sing wiwit metu dibandhingke sadurunge dadi horisontal karo ing breakpoint cilik ( 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>

Nyampur lan cocog

Ora pengin kolom sampeyan mung tumpukan ing sawetara undakan kothak? Gunakake kombinasi kelas sing beda kanggo saben undakan yen perlu. Deleng conto ing ngisor iki kanggo ide sing luwih apik babagan cara kerjane.

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

Alignment

Gunakake utilitas alignment flexbox kanggo nyelarasake kolom vertikal lan horisontal.

Alignment vertikal

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

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

Alignment horisontal

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

Ora ana talang

Talang ing antarane kolom ing kelas kothak sing wis ditemtokake bisa dicopot nganggo .no-gutters. Iki mbusak s negatif marginsaka .rowlan horisontal paddingsaka kabeh kolom anak langsung.

Punika kode sumber kanggo nggawe gaya kasebut. Elinga yen timpa kolom mung ditrapake kanggo kolom anak pisanan lan ditargetake liwat pamilih atribut . Nalika iki ngasilake pamilih sing luwih spesifik, padding kolom isih bisa disesuaikan karo keperluan spasi .

Perlu desain pinggiran-kanggo-pinggiran? Selehake wong tuwa .containerutawa .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Ing laku, iki carane katon. Elinga, sampeyan bisa terus nggunakake iki karo kabeh kelas kothak liyane sing wis ditemtokake (kalebu jembar kolom, tingkat responsif, reorders, lan liya-liyane).

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

Pambungkus kolom

Yen luwih saka 12 kolom diselehake ing baris siji, saben klompok kolom ekstra bakal, minangka siji unit, mbungkus menyang baris anyar.

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

Pecah kolom

Mbusak kolom menyang baris anyar ing flexbox mbutuhake hack cilik: nambah unsur ing width: 100%ngendi wae sampeyan pengin mbungkus kolom menyang baris anyar. Biasane iki wis rampung karo sawetara .rows, nanging ora saben cara implementasine bisa akun iki.

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

Sampeyan uga bisa nglamar istirahat iki ing breakpoints tartamtu karo utilitas tampilan responsif .

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

Ngatur maneh

Mesen kelas

Gunakake .order-kelas kanggo ngontrol urutan visual konten sampeyan. Kelas iki responsif, supaya sampeyan bisa nyetel orderbreakpoint (contone, .order-1.order-md-2). Kalebu dhukungan kanggo 1liwat 12kabeh limang undakan kothak.

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

Ana uga responsif .order-firstlan .order-lastkelas sing ngganti orderunsur kanthi nglamar order: -1lan order: 13( order: $columns + 1), mungguh. Kelas kasebut uga bisa dicampur karo .order-*kelas sing dinomer yen perlu.

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

Ngimbangi kolom

Sampeyan bisa ngimbangi kolom kothak kanthi rong cara: .offset-kelas kothak responsif lan utilitas margin . Kelas kothak ukuran kanggo cocog kolom nalika wates luwih migunani kanggo tata letak cepet ngendi jembaré offset iku maneko rupo.

Offset kelas

Pindhah kolom menyang tengen nggunakake .offset-md-*kelas. Kelas iki nambah wates kiwa kolom kanthi *kolom. Contone, .offset-md-4gerakane .col-md-4liwat papat kolom.

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

Saliyane ngresiki kolom ing breakpoints responsif, sampeyan bisa uga kudu ngreset offset. Deleng tumindak iki ing conto kothak .

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

Utilitas margin

Kanthi pamindhahan menyang flexbox ing v4, sampeyan bisa nggunakake utilitas wates kaya .mr-automeksa kolom sedulur saka siji liyane.

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

nyarang

Kanggo nyelehake konten sampeyan nganggo kothak gawan, tambahake kolom anyar .rowlan set .col-sm-*ing .col-sm-*kolom sing wis ana. Baris sing disusun kudu kalebu sakumpulan kolom sing nambah nganti 12 utawa kurang (ora perlu nggunakake kabeh 12 kolom sing kasedhiya).

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

Nalika nggunakake file Sass sumber Bootstrap, sampeyan duwe pilihan nggunakake variabel Sass lan mixin kanggo nggawe tata letak kaca khusus, semantik, lan responsif. Kelas kothak sing wis ditemtokake nggunakake variabel lan campuran sing padha kanggo nyedhiyakake kabeh kelas sing siap digunakake kanggo tata letak responsif kanthi cepet.

Variabel

Variabel lan peta nemtokake jumlah kolom, jembaré talang, lan titik pitakon media kanggo miwiti kolom ngambang. Iki digunakake kanggo ngasilake kelas kothak sing wis ditemtokake sing didokumentasikake ing ndhuwur, uga kanggo campuran khusus sing kapacak ing ngisor iki.

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

Campuran

Mixin digunakake bebarengan karo variabel kothak kanggo ngasilake CSS semantik kanggo kolom kothak 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();
@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 panggunaan

Sampeyan bisa ngowahi variabel menyang nilai khusus, utawa mung nggunakake mixin kanthi nilai standar. Iki conto nggunakake setelan gawan kanggo nggawe tata letak loro-kolom karo longkangan antarane.

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

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

Ngatur kothak

Nggunakake variabel lan peta Sass kothak sing dibangun, sampeyan bisa ngatur kabeh kelas kothak sing wis ditemtokake. Ganti nomer undakan, dimensi query media, lan ambane wadah—banjur kompilasi maneh.

Kolom lan talang

Jumlah kolom kothak bisa diowahi liwat variabel Sass. $grid-columnsdigunakake kanggo generate jembaré (ing persen) saben kolom individu nalika $grid-gutter-widthngidini jembaré breakpoint-tartamtu sing dipérang roto-roto padding-leftlan padding-rightkanggo talang kolom.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Tiers kothak

Ngalih ngluwihi kolom dhewe, sampeyan uga bisa ngatur jumlah undakan kothak. Yen sampeyan pengin mung papat kothak kothak, sampeyan bakal nganyari $grid-breakpointslan $container-max-widthskaya iki:

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

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

Nalika nggawe owah-owahan ing variabel utawa peta Sass, sampeyan kudu nyimpen pangowahan lan ngumpulake maneh. Mengkono bakal ngasilake set anyar saka kelas kothak sing wis ditemtokake kanggo jembar kolom, offset, lan pesenan. Utilitas visibilitas responsif uga bakal dianyari kanggo nggunakake breakpoints khusus. Priksa manawa kanggo nyetel nilai kothak ing px(ora rem, em, utawa %).