Sistema ti grid

Usaren ti nabileg a mobile-first flexbox grid-mi tapno mangbangon kadagiti layout ti amin a sukog ken kadakkel gapu iti sangapulo ket dua a sistema ti adigi, lima a default a responsive tier, dagiti variable ken mixin ti Sass, ken pinulpullo a nasakbay a naikeddeng a klase.

No kasano ti panagandar dayta

Ti sistema ti grid ti Bootstrap ket agus-usar ti serye dagiti pagkargaan, dagiti hilera, ken dagiti adigi tapno mangilayout ken mangitunos ti linaon. Naaramid dayta iti flexbox ken naan-anay a makasungbat. Iti baba ket maysa a pagarigan ken ti nauneg a panangkita no kasano nga agtitipon ti grid.

Baro wenno saan kadi a pamiliar ti flexbox? Basaen daytoy a giya ti flexbox ti CSS Tricks para iti likudan, terminolohia, pagannurotan, ken dagiti snippet ti kodigo.

Maysa kadagiti tallo a kolum

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

Ti pagarigan iti ngato ket mangpartuat kadagiti tallo nga agpapada-a-kalawa a kolum kadagiti babassit, kalalainganna, dadakkel, ken ekstra a dadakkel nga alikamen babaen ti panagusar kadagiti nasakbay a naikeddeng a klase ti gridtayo. Dagita a kolum ket naisentro iti panid nga addaan iti nagannak .container.

Breaking it down, kastoy ti panagandar daytoy:

Dagiti container ket mangipaay iti pamay-an a mangisentro ken horizontal a mangi-pad kadagiti linaon ti site-mo. Usaren .containerpara iti makasungbat a kalawa ti pixel wenno .container-fluidpara iti width: 100%ballasiw dagiti amin a kadakkel ti viewport ken alikamen.
Dagiti hilera ket balkot para kadagiti adigi. Tunggal adigi ket addaan iti horizontal padding(maawagan iti gutter) a pangkontrol iti espasio iti nagbaetan dagitoy. Kalpasanna padding, makontra daytoy kadagiti hilera nga addaan kadagiti negatibo a pingir. Iti daytoy a wagas, amin a linaon kadagiti kolummo ket makita a naitunos nga agpababa iti kannigid a sikigan.
Iti maysa a layout ti grid, ti linaon ket masapul a maikabil iti uneg dagiti adigi ken dagiti laeng adigi ket mabalin a dagus nga annak dagiti hilera.
Gapu ti flexbox, dagiti adigi ti grid nga awan ti naikeddeng widthket automatiko a maiplastar a kas dagiti agpapada a kalawa a adigi. Kas pagarigan, uppat nga instansia ti .col-smket tunggal maysa ket automatiko a 25% ti kalawana manipud iti bassit a breakpoint ken agpangato. Kitaen ti benneg dagiti kolum ti auto-layout para kadagiti ad-adu pay a pagarigan.
Dagiti klase ti adigi ket mangipakita ti bilang dagiti adigi a kayatmo nga usaren manipud kadagiti mabalin a 12 iti tunggal maysa a linia. Isu a no kayatmo ti tallo nga agpapada ti kalawana a kolum iti ballasiw, mabalinmo nga usaren ti .col-4.
Dagiti kolum widths ket naikeddeng kadagiti porsiento, isu a kanayon a pluido ken kadakkelda a relatibo iti nagannak nga elementoda.
Dagiti adigi ket addaan kadagiti horisontal paddingtapno mangpartuat kadagiti kanal iti nagbaetan dagiti indibidual nga adigi, nupay kasta, mabalinmo nga ikkaten ti marginmanipud kadagiti hilera ken paddingmanipud kadagiti adigi nga addaan .no-guttersiti .row.
Tapno agbalin ti grid a makasungbat, adda dagiti lima a grid breakpoint, maysa para iti tunggal maysa a sumungbat a breakpoint : amin a breakpoint (extra small), bassit, kalalainganna, dakkel, ken ekstra a dakkel.
Dagiti puntos ti panagburak ti grid ket naibatay kadagiti kabassitan a kalawa a panagsaludsod ti media, a ti kayatna a sawen ket agaplikar dagitoy iti dayta a maysa a puntos ti panagburak ken amin dagitoy iti ngato daytoy (kas pagarigan, .col-sm-4agaplikar kadagiti babassit, kalalainganna, dakkel, ken ekstra a dakkel nga alikamen, ngem saan nga umuna a puntos ti xspanagburak).
Mabalinmo nga usaren dagiti nasakbay a naikeddeng a klase ti grid (kas ti .col-4) wenno dagiti Sass mixins para iti ad-adu a semantiko a panagmarka.

Ammuem dagiti limitasion ken dagiti bug iti aglawlaw ti flexbox , a kas ti saan a pannakabael nga agusar kadagiti sumagmamano nga elemento ti HTML a kas dagiti paglaon ti flex .

Dagiti pagpilian iti grid

Bayat a ti Bootstrap ket agus-usar emti s wenno rems para iti panangipalawag kadagiti kaaduan a kadakkel, pxdagiti s ket maus-usar para kadagiti puntos ti panagburak ti grid ken dagiti kalawa ti pagkargaan. Daytoy ket gapu ta ti kalawa ti viewport ket adda kadagiti pixel ken saan nga agbaliw babaen ti kadakkel ti letra .

Kitaen no kasano nga agtrabaho dagiti aspeto ti sistema ti grid ti Bootstrap iti ballasiw dagiti adu nga alikamen nga addaan iti nalaka a mausar a lamisaan.

	Ekstra nga bassit <576px	Bassit nga ≥576px	Kalalainganna nga ≥768px	Dakkel nga ≥992px	Ekstra nga dakkel ≥1200px
Max kalawa ti pagkargaan	Awan (auto) .	540px nga	720px nga	960px nga	1140px nga
Prefix ti klase	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# ti kolum	12 nga
Lapad ti kanal	30px (15px iti tunggal sikigan ti maysa a kolum) .
Mabalin nga umok	Wen
Panag-order iti kolum	Wen

Auto-layout dagiti kolum

Usaren dagiti breakpoint-espesipiko a klase ti adigi para iti nalaka a panagdakkel ti adigi nga awan ti nalawag a nanumeroan a klase a kas ti .col-sm-6.

Agpapada ti kalawana

Kas pagarigan, ditoy ket dua a layout ti grid a maipakat iti tunggal maysa nga alikamen ken viewport, manipud xsiti aginggana iti xl. Inayon ti ania man a bilang dagiti unit-less a klase para iti tunggal maysa a breakpoint a kasapulam ken tunggal maysa a kolum ket agpapada ti kalawana.

1 ti 2

2 ti 2

1 ti 3

2 ti 3

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

Agpapada ti kalawana a multi-line

Mangpartuat kadagiti agpapada ti kalawana a kolum a mangsaklaw kadagiti adu a linia babaen ti panangikabil ti a .w-100no sadino ti kayatmo a pagburaksan dagiti adigi iti baro a linia. Pagbalinen dagiti break a makasungbat babaen ti panaglaok .w-100kadagiti sumagmamano a makasungbat a display utilities .

Adda ti Safari flexbox bug a nanglapped iti daytoy nga agtrabaho nga awan ti nalawag flex-basiswenno border. Adda dagiti workaround para kadagiti daan a bersion ti browser, ngem saan koma a kasapulan dagitoy no dagiti target a browsermo ket saan a matnag kadagiti buggy a bersion.

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>

Panangisaad iti kalawa ti maysa a kolum

Ti auto-layout para kadagiti adigi ti grid ti flexbox ket kayatna pay a sawen a mabalinmo nga ikeddeng ti kalawa ti maysa a kolum ken dagiti agkabsat a kolum ket automatiko a mangbalbaliw ti kadakkel iti aglawlawna. Mabalinmo nga usaren dagiti nasakbay a naikeddeng a klase ti grid (kas naipakita iti baba), dagiti grid mixins, wenno dagiti kalawa ti inline. Imutektekanyo a dagiti dadduma a kolum ket agbaliwto ti kadakkelda urayno kasano ti kalawa ti tengnga a kolum.

1 ti 3

2 ti 3 (nalawlawa) .

3 ti 3

1 ti 3

2 ti 3 (nalawlawa) .

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

Nadumaduma ti kalawa a linaon

Usaren col-{breakpoint}-autodagiti klase tapno kadakkel dagiti kolum a naibatay iti natural a kalawa ti linaonda.

1 ti 3

Nadumaduma ti kalawa a linaon

3 ti 3

1 ti 3

Nadumaduma ti kalawa a linaon

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

Dagiti makasungbat a klase

Ti grid ti Bootstrap ket mangiraman kadagiti lima a tukad dagiti nasakbay a naikeddeng a klase para iti panagbangon kadagiti komplikado a sumungbat a layout. Ipasayaat ti kadakkel dagiti kolummo kadagiti ekstra a bassit, bassit, kalalainganna, dakkel, wenno ekstra a dakkel nga alikamen nupay kasta makitam a maitutop.

Amin a breakpoint

Para kadagiti grid nga agpapada manipud kadagiti kabassitan kadagiti alikamen aginggana kadagiti kadakkelan, usaren ti .colken .col-*dagiti klase. Ibaga ti maysa a nanumeroan a klase no kasapulam ti partikular a kadakkel a kolum; no saan, agwayawayakayo a mangpetpet iti .col.

col

col-8 nga

col-4 nga

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

Naurnong agingga iti horizontal

Babaen ti panagusar ti maymaysa a grupo dagiti .col-sm-*klase, mabalinmo ti mangpartuat ti batayan a sistema ti grid a mangrugi a naurnong ken agbalin a horisontal iti bassit a breakpoint ( sm).

col-sm-8 nga

col-sm-4 nga

col-sm nga

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

Ilaok ken pagtunos

Dimo kayat a dagiti kolummo ket basta agtumpok iti sumagmamano a grid tier? Usaren ti kombinasion ti nadumaduma a klase para iti tunggal tier no kasapulan. Kitaen ti pagarigan iti baba para iti nasaysayaat nga ideya no kasano nga agtrabaho amin dayta.

.kol-md-8 nga

.kol-6 .kol-md-4

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

Dagiti kanal

Dagiti kanal ket mabalin a makasungbat a maitunos babaen ti breakpoint-espesipiko a padding ken dagiti negatibo a klase ti utilidad ti margin. Tapno mabaliwan dagiti kanal iti naited a linia, iparis ti negatibo a margin utility iti .rowken agpapada a padding utilities iti .cols. Mabalin a kasapulan met a maitunos ti .containerwenno .container-fluidnagannak tapno maliklikan ti di matarigagayan a panaglablabes, nga agusar manen iti matching padding utility.

Adda ditoy ti pagarigan ti panangipasayaat ti grid ti Bootstrap iti dakkel ( lg) a breakpoint ken iti ngato. Pinaadumi ti .colpadding babaen ti .px-lg-5, kinontrami dayta nga addaan .mx-lg-n5iti nagannak .rowket kalpasanna inurnosmi ti .containerbalkot babaen ti .px-lg-5.

Kostumbre nga padding ti kolum

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

Hilera dagiti kolum

Usaren dagiti sumungbat .row-cols-*a klase tapno napardas nga ikeddeng ti bilang dagiti kolum a kasayaatan a mangiparang iti linaon ken layoutmo. Idinto a dagiti gagangay a .col-*klase ket agaplikar kadagiti indibidual a kolum (kas pagarigan, .col-md-4), dagiti klase dagiti adigi ti hilera ket naikeddeng iti nagannak .rowa kas ti ab-ababa a dalan.

Usaren dagitoy a klase dagiti adigi ti hilera tapno napardas a mangpartuat kadagiti batayan a layout ti grid wenno tapno makontrol dagiti layout ti kardmo.

Kolum

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

Kolum

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

Kolum

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

Kolum

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

Kolum

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

Mabalinmo pay nga usaren ti naipakuyog a 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);
  }
}

Panagtunos

Usaren dagiti flexbox alignment utilities tapno bertikal ken horizontal a mangitunos kadagiti adigi. Ti Internet Explorer 10-11 ket saan a mangsuporta ti bertikal a panagtunos dagiti flex a banag no ti flex a pagkargaan ket addaan iti min-heightkas naipakita iti baba. Kitaen ti Flexbugs #3 para kadagiti ad-adu pay a detalye.

Bertikal a panagtunos

Maysa kadagiti tallo a kolum

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

Maysa kadagiti tallo a kolum

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

Paisaad a panagtunos

Maysa kadagiti dua a kolum

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

Awan dagiti kanal

Dagiti kanal iti nagbaetan dagiti adigi kadagiti nasakbay a naikeddeng a klasetayo ti grid ket mabalin a maikkat babaen ti .no-gutters. Daytoy ket mangikkat ti negatibo nga margins manipud .rowken ti horisontal paddingmanipud kadagiti amin a dagus nga ubbing a kolum.

Ania ti taudan a kodigo para iti panagpartuat kadagitoy nga estilo. Imutektekanyo a dagiti panangibabawi ti adigi ket naisakop kadagiti laeng umuna nga ubbing a kolum ken naipuntiria babaen ti agpili ti attribute . Bayat a daytoy ket mangpataud ti ad-adu nga espesipiko a mangpili, ti panag-padding ti adigi ket mabalin pay laeng a mapasayaat babaen dagiti utilidad ti panagsisina .

Kasapulan kadi ti disenio manipud iti igid agingga iti igid? Ibaba ti nagannak .containerwenno .container-fluid.

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

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

Iti praktis, adtoy ti langana. Imutektekanyo mabalinmo nga itultuloy nga usaren daytoy kadagiti amin a dadduma pay a nasakbay a naikeddeng a klase ti grid (a mairaman dagiti kalawa ti adigi, dagiti sumungbat a tukad, dagiti panagurnos manen, ken dadduma pay).

.kol-sm-6 .kol-md-8

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

Panagbalkot iti adigi

No nasurok a 12 nga adigi ti naikabil iti uneg ti maymaysa a linia, tunggal grupo dagiti ekstra nga adigi ket, kas maysa a yunit, agbalkot iti baro a linia.

.kol-9 nga

.col-4
Gapu ta 9 + 4 = 13 > 12, daytoy nga 4-kolum-a-kalawa a div ket makagun-od ti nabalkot iti baro a linia a kas maysa nga agsasaruno a yunit.

.col-6
Agtultuloy dagiti sumaganad a kolum iti baro a linia.

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

Agburak ti adigi

Ti panangburak kadagiti adigi iti baro a linia iti flexbox ket agkasapulan ti bassit a hack: manginayon ti maysa nga elemento nga addaan width: 100%sadinoman a kayatmo a baluten dagiti adigim iti baro a linia. Gagangay daytoy ket maibanag babaen ti adu nga .rows, ngem saan a tunggal maysa a pamay-an ti pannakaipatungpal ket mabalin a mangibaga iti daytoy.

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

Mabalinmo pay nga iyaplikar daytoy a break kadagiti espesipiko a breakpoint babaen dagiti responsive display utilities mi .

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

Panagurnos manen

Ag-order kadagiti klase

Usaren .order-dagiti klase para iti panangkontrol iti makita nga urnos ti linaonmo. Dagitoy a klase ket makasungbat, isu a mabalinmo nga ikeddeng ti orderbabaen ti breakpoint (kas pagarigan, .order-1.order-md-2). Iramanna ti suporta para iti 1babaen 12iti ballasiw ti amin a lima a grid tiers.

Umuna iti DOM, awan ti naipakat nga order

Maikadua iti DOM, addaan iti dakdakkel nga order

Maikatlo iti DOM, nga addaan iti order a 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>

Adda pay dagiti responsive .order-firstken .order-lastdagiti klase a mangbalbaliw ti orderti maysa nga elemento babaen ti panangipakat order: -1ken order: 13( order: $columns + 1), a nagsasaruno. Mabalin met a mailaok dagitoy a klase kadagiti nanumeroan .order-*a klase no kasapulan.

Umuna iti DOM, naorder a maudi

Maikadua iti DOM, unordered

Maikatlo iti DOM, naorder nga umuna

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

Panang-offset kadagiti kolum

Mabalinmo nga i-offset dagiti kolum ti grid iti dua a wagas: dagiti sumungbat .offset-a klasemi ti grid ken dagiti utilidad ti marginmi . Dagiti klase ti grid ket nadakkel tapno maipada kadagiti adigi bayat a dagiti pingir ket ad-adda a makatulong para kadagiti napardas a layout a sadiay ti kalawa ti offset ket agdumaduma.

Dagiti klase ti offset

Iyakar dagiti kolum iti kannawan babaen ti panagusar kadagiti .offset-md-*klase. Dagitoy a klase ket paaduenda ti kannigid a pingir ti maysa a kolum babaen dagiti *adigi. Kas pagarigan, .offset-md-4aggaraw .col-md-4iti rabaw ti uppat a kolum.

.kol-md-4 nga

.kol-md-4 .offset-md-4

.kol-md-3 .ti-offset-md-3

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

Malaksid ti panagikkat ti kolum kadagiti sumungbat a breakpoint, mabalin a kasapulam nga i-reset dagiti offset. Kitaen daytoy nga agtigtignay iti pagarigan ti grid .

.kol-sm-5 .kol-md-6

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

.kol-sm-6 .kol-md-5 .kol-lg-6

.kol-sm-6 .kol-md-5 .offset-md-2 .kol-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>

Dagiti utilidad ti margin

Iti panagakar iti flexbox iti v4, mabalinmo nga usaren dagiti margin utilities a kas .mr-autoti panangpilit kadagiti kakabsat a kolum nga umadayo iti maysa ken maysa.

.kol-md-4 nga

.kol-md-4 .ml-nga-auto

.kol-md-3 .ml-md-auto nga

.kol-auto .mr-auto nga auto

.kol-auto nga

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

Panag-umok

Tapno mai-nest ti linaonmo babaen ti default a grid, manginayon ti baro .rowken grupo dagiti .col-sm-*adigi iti uneg ti addan a .col-sm-*kolum. Dagiti naisanglad a hilera ket rumbeng a mangiraman ti maysa a grupo dagiti adigi a mangnayon aginggana ti 12 wenno basbassit (saan a kasapulan nga usarem amin dagiti 12 a magun-od a kolum).

Antas 1: .col-sm-9

Lebel 2: .kol-8 .kol-sm-6

Lebel 2: .kol-4 .kol-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 nga mixins

No agus-usar kadagiti taudan a Sass a papeles ti Bootstrap, addaanka iti pagpilian nga agusar kadagiti variable ken mixin ti Sass tapno mangpartuat kadagiti kostumbre, semantiko, ken makasungbat a layout ti panid. Dagiti nasakbay a naikeddeng a klasemi ti grid ket agus-usar kadagitoy met laeng a variable ken dagiti mixin tapno mangipaay ti sibubukel a suite dagiti nakasagana nga usaren a klase para kadagiti napardas a sumungbat a layout.

Dagiti Variable

Dagiti variable ken mapa ket mangikeddeng ti bilang dagiti adigi, ti kalawa ti kanal, ken ti puntos ti panagsaludsod ti media a pangrugian kadagiti agtaytayab nga adigi. Usarenmi dagitoy tapno mangpataud kadagiti nasakbay a naikeddeng a klase ti grid a nadokumento iti ngato, ken kasta met para kadagiti kostumbre a mixin a nailista iti baba.

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

Dagiti mixin

Dagiti mixin ket naus-usar a maikuyog kadagiti grid a variable tapno mangpataud ti semantiko a CSS para kadagiti indibidual a grid a kolum.

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

Pagarigan ti panagusar

Mabalinmo a baliwan dagiti variable kadagiti bukodmo a kostumbre a pateg, wenno usarem laeng dagiti mixin nga addaan kadagiti default a pategda. Adda ditoy ti pagarigan ti panagusar kadagiti default a panagitunos tapno mangpartuat ti dua-a-kolum a layout nga addaan iti giwang iti nagbaetan.

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

Kangrunaan a linaon

Segundario a linaon

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

Panangpasayaat iti grid

Babaen ti panagusar kadagiti naibangon a grid Sass a variable ken mapami, mabalin a naan-anay a maibagay dagiti nasakbay a naikeddeng a klase ti grid. Baliwan ti bilang dagiti tier, dagiti dimension ti panagsaludsod ti media, ken dagiti kalawa ti pagkargaan—kalpasanna ti panagtipon manen.

Adigi ken kanal

Ti bilang dagiti adigi ti grid ket mabalin a mabaliwan babaen dagiti variable ti Sass. $grid-columnsket maus-usar a mangpataud kadagiti kalawa (iti porsiento) ti tunggal maysa nga indibidual nga adigi bayat nga $grid-gutter-widthikeddeng ti kalawa para kadagiti kanal ti adigi.

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

Dagiti tukad ti grid

Iti panaglabas dagiti adigi a mismo, mabalinmo pay nga ipasadaan ti bilang dagiti grid tier. No kayatmo laeng ti uppat a grid tier, i-update-mo ti $grid-breakpointsken $container-max-widthsiti maysa a banag a kas iti daytoy:

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

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

No mangaramidka kadagiti ania man a panagbalbaliw kadagiti variable wenno mapa ti Sass, kasapulam nga idulinen dagiti panagbalbaliwmo ken agtipon manen. Ti panagaramid iti daytoy ket mangiruar ti baro a grupo dagiti nasakbay a naikeddeng a klase ti grid para kadagiti kalawa ti adigi, dagiti offset, ken panagurnos. Dagiti responsibo a utilidad ti pannakakita ket ma-update pay tapno agusar kadagiti kostumbre a breakpoint. Siguraduen nga ikeddeng dagiti pateg ti grid iti px(saan a rem, em, wenno %).