Sistem grid

Tuladha

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 panjelasan sing luwih jero babagan cara sistem kothak kasebut.

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

Conto ing ndhuwur nggawe telung kolom sing ambane padha ing kabeh piranti lan viewports nggunakake kelas kothak sing wis ditemtokake. Kolom kasebut dipusatake ing kaca karo wong tuwa .container.

Cara kerjane

Mbusak mudhun, iki carane sistem kothak teka bebarengan:

• Kothak kita ndhukung enem breakpoints responsif . Breakpoints adhedhasar min-widthpitakon media, tegese padha mengaruhi breakpoint kasebut lan kabeh sing ana ing ndhuwur (contone, .col-sm-4ditrapake kanggo sm, md, lg, xllan xxl). Iki tegese sampeyan bisa ngontrol ukuran lan prilaku wadhah lan kolom kanthi saben breakpoint.

• Kontainer tengah lan isi horisontal isi sampeyan. Gunakake .containerkanggo jembaré piksel responsif, .container-fluidkanggo width: 100%kabeh viewports lan piranti, utawa wadhah responsif (contone, .container-md) kanggo kombinasi jembaré adi lan piksel.

• Baris minangka bungkus kanggo kolom. Saben kolom nduweni horisontal padding(disebut talang) kanggo ngontrol spasi ing antarane. Iki paddingbanjur ditanggulangi ing larik kanthi wates negatif kanggo mesthekake isi ing kolom sampeyan didadekake visual ing sisih kiwa. Baris uga ndhukung kelas modifier supaya seragam ngetrapake ukuran kolom lan kelas talang kanggo ngganti jarak konten sampeyan.

• Kolom sing luar biasa fleksibel. Ana 12 kolom template kasedhiya saben baris, ngijini sampeyan kanggo nggawe kombinasi beda saka unsur sing jengkal nomer kolom. Kelas kolom nuduhake jumlah kolom cithakan kanggo span (contone, col-4span papat). widths disetel ing persentasi supaya sampeyan tansah duwe ukuran relatif padha.

• Gutters uga responsif lan bisa disesuaikan. Kelas gutter kasedhiya ing kabeh breakpoints, kanthi ukuran sing padha karo jarak margin lan padding . Ganti talang horisontal nganggo .gx-*kelas, talang vertikal nganggo .gy-*, utawa kabeh talang karo .g-*kelas. .g-0uga kasedhiya kanggo mbusak talang.

• Variabel, peta, lan campuran Sass nguwasani kothak. Yen sampeyan ora pengin nggunakake kelas kothak sing wis ditemtokake ing Bootstrap, sampeyan bisa nggunakake sumber kothak kita Sass kanggo nggawe dhewe kanthi markup semantik liyane. Kita uga nyakup sawetara properti khusus CSS kanggo nggunakake variabel Sass iki kanggo keluwesan sing luwih gedhe kanggo sampeyan.

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

Pilihan kothak

Sistem kothak Bootstrap bisa adaptasi ing kabeh enem breakpoint standar, lan breakpoints apa wae sing sampeyan atur. Enem tingkatan kothak standar kaya ing ngisor iki:

• Ekstra cilik (xs)
• Cilik (sm)
• Sedheng (md)
• Gedhe (lg)
• Ekstra gedhe (xl)
• Ekstra gedhe (xxl)

Kaya sing kasebut ing ndhuwur, saben breakpoints iki duwe wadhah dhewe, awalan kelas unik, lan modifiers. Mangkene carane owah-owahan kothak ing breakpoints iki:

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

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>

Kelas responsif

Kothak Bootstrap kalebu enem 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="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 menyang horisontal

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

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.

<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

Gunakake .row-cols-*kelas responsif kanggo nyetel kanthi cepet jumlah kolom sing paling apik kanggo nggawe konten lan tata letak sampeyan. Dene kelas normal .col-*ditrapake kanggo kolom individu (contone, .col-md-4), kelas kolom baris disetel ing induk .rowminangka trabasan. Kanthi .row-cols-autosampeyan bisa menehi kolom jembaré alam.

Gunakake kelas kolom baris iki kanggo nggawe tata letak kothak dhasar kanthi cepet utawa ngontrol tata letak kertu.

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

Sampeyan uga bisa nggunakake mixin Sass sing diiringi 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

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

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

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

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

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 widths (ing persen) saben kolom individu nalika $grid-gutter-widthnyetel jembaré kanggo talang kolom.

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