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.

Salah siji saka telung kolom

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

	Ekstra cilik <576px	Cilik ≥576px	Sedheng ≥768px	Gedhe ≥992px	Ekstra gedhe ≥1200px
Jembaré wadhah maksimal	Ora ana (otomatis)	540px	720px	960px	1140px
Ater-ater kelas	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# kolom	12
Jembaré talang	30px (15px ing saben sisih kolom)
Nestable	ya wis
Urutan kolom	ya wis

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

1 saka 2

2 saka 2

1 saka 3

2 saka 3

3 saka 3

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

Wiyaripun multi-line padha

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

Ana bug Safari flexbox sing nyegah iki bisa digunakake tanpa eksplisit flex-basisutawa border. Ana solusi kanggo versi browser lawas, nanging ora perlu yen browser target sampeyan ora kalebu ing versi buggy.

col

<div class="container">
  <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>
</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.

1 saka 3

2 saka 3 (luwih jembar)

3 saka 3

1 saka 3

2 saka 3 (luwih jembar)

3 saka 3

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

1 saka 3

Isi jembaré variabel

3 saka 3

1 saka 3

Isi jembaré variabel

3 saka 3

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

col

col-8

col-4

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

col-sm-8

col-sm-4

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

.col-md-8

.col-6 .col-md-4

.col-6

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

talang

Talang bisa diatur kanthi responsif kanthi bantalan khusus breakpoint lan kelas sarana margin negatif. Kanggo ngganti talang ing baris diwenehi, masangake sarana wates negatif ing .rowlan cocog padding keperluan ing .cols. Wong tuwa .containerutawa .container-fluidwong tuwa uga kudu diatur supaya ora kebanjiran, nggunakake sarana bantalan sing cocog maneh.

Punika conto ngatur kothak Bootstrap ing lgbreakpoint gedhe () lan ndhuwur. We wis tambah .colpadding karo .px-lg-5, counteracted sing karo .mx-lg-n5ing tiyang sepah .rowlan banjur nyetel .containerpambungkus karo .px-lg-5.

Padding kolom khusus

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</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.

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

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>

Kolom

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

Kolom

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

Kolom

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

Kolom

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

Alignment

Gunakake utilitas alignment flexbox kanggo nyelarasake kolom vertikal lan horisontal. Internet Explorer 10-11 ora ndhukung keselarasan vertikal saka item lentur nalika wadhah lentur duwe min-heightminangka kapacak ing ngisor iki. Waca Flexbugs #3 kanggo rincian liyane.

Alignment vertikal

Salah siji saka telung kolom

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

Salah siji saka telung kolom

<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

Salah siji saka rong kolom

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

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.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.

.col-9

.col-4
Wiwit 9 + 4 = 13 > 12, div 4-kolom-sudhut iki bakal kebungkus menyang baris anyar minangka siji unit contiguous.

.col-6
Kolom sakteruse terus ing baris anyar.

<div class="container">
  <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>
</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.

.col-6 .col-sm-3

<div class="container">
  <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>
</div>

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

.col-6 .col-sm-4

<div class="container">
  <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>
</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.

Pisanan ing DOM, ora ana urutan sing ditrapake

Kapindho ing DOM, kanthi urutan sing luwih gedhe

Katelu ing DOM, kanthi urutan 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </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.

Pisanan ing DOM, dhawuh pungkasan

Kapindho ing DOM, unordered

Katelu ing DOM, dhawuh dhisik

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered 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.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <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>
</div>

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

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <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>
</div>

Utilitas margin

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

.col-md-4

.col-md-4 .ml-otomatis

.col-md-3 .ml-md-otomatis

.col-otomatis .mr-otomatis

.col-otomatis

<div class="container">
  <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>
</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).

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

<div class="container">
  <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>
</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 {
  @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);
  }
}

Isi utama

Isi sekunder

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