Source

Córas greille

Bain úsáid as ár n-eangach flexbox chumhachtach soghluaiste chun leagan amach de gach cruth agus méid a thógáil a bhuíochas le córas dhá cholún déag, cúig shraith freagrúla réamhshocraithe, athróga agus meascáin Sass, agus mórán ranganna réamhshainithe.

Conas a oibríonn sé

Úsáideann córas greille Bootstrap sraith coimeádán, sraitheanna agus colúin chun ábhar a leagan amach agus a ailíniú. Tá sé tógtha le flexbox agus tá sé go hiomlán sofhreagrach. Anseo thíos tá sampla agus léargas domhain ar conas a thagann an eangach le chéile.

Nua nó cur amach ar flexbox? Léigh an treoir flexbox seo CSS Tricks le haghaidh cúlra, téarmaíocht, treoirlínte agus gearrthóga cóid.

Ceann de thrí cholún

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

Cruthaíonn an sampla thuas trí cholún ar chomhleithead ar ghléasanna beaga, meánacha, móra agus móra breise ag baint úsáide as ár ranganna greille réamhshainithe. Tá na colúin sin dírithe ar an leathanach leis an tuismitheoir .container.

Ag briseadh síos é, seo conas a oibríonn sé:

Soláthraíonn coimeádáin bealach chun inneachar do shuíomh a lárú agus a stuáil go cothrománach. Úsáid .containerle haghaidh leithead picteilín sofhreagrach nó .container-fluidle haghaidh width: 100%gach méid radhairc agus gléis.
Is cumhdaigh do cholúin iad sraitheanna. Tá cothrománach ag gach colún padding(ar a dtugtar gutter) chun an spás eatarthu a rialú. Déantar paddingé seo a fhrithghníomhú ansin ar na sraitheanna le corrlaigh dhiúltacha. Ar an mbealach seo, tá an t-ábhar go léir i do cholúin ailínithe go radhairc síos ar an taobh clé.
I leagan amach greille, ní mór ábhar a chur laistigh de cholúin agus ní fhéadfaidh ach colúin a bheith ina leanaí láithreacha de shraitheanna.
Buíochas le flexbox, leagfar widthamach go huathoibríoch colúin ghreille gan sonraíocht mar cholúin ar leithead comhionann. Mar shampla, .col-smbeidh ceithre chás an ceann 25% ar leithead go huathoibríoch ón brisphointe beag agus suas. Féach rannán na gcolún le leagan amach uathoibríoch le haghaidh tuilleadh samplaí.
Léiríonn ranganna colún líon na gcolún ar mhaith leat a úsáid as an 12 féideartha in aghaidh an tsraith. Mar sin, más mian leat trí cholún ar chomhleithead trasna, is féidir leat .col-4.
Socraítear widthna colúin i gcéatadáin, mar sin bíonn siad i gcónaí sreabhán agus ar mhéid i gcoibhneas lena máthairghné.
Tá cothrománach ag colúin paddingchun na gáitéir a chruthú idir na colúin aonair, áfach, is féidir leat na sraitheanna a bhaint as na marginsraitheanna agus na paddingcolúin leis .no-guttersan .row.
Chun an eangach a dhéanamh sofhreagrach, tá cúig bhriseadh greille ann, ceann do gach brisphointe sofhreagrach : gach brisphointe (beag breise), beag, meánach, mór agus mór breise.
Tá bristephointí eangaí bunaithe ar cheisteanna meánleithead íosta, rud a chiallaíonn go mbaineann siad leis an brisphointe amháin sin agus leo siúd go léir os a chionn (m.sh., .col-sm-4baineann sé le gléasanna beaga, meánacha, móra agus móra breise, ach ní bhaineann siad leis an gcéad xsbhriseadh).
Is féidir leat ranganna greille réamhshainithe (cosúil le .col-4) nó meascáin Sass a úsáid le haghaidh marcáil shéimeantach níos mó.

Bí ar an eolas faoi na teorainneacha agus na fabhtanna a bhaineann le flexbox , cosúil leis an éagumas chun roinnt eilimintí HTML a úsáid mar choimeádáin flex .

Roghanna greille

Cé go n-úsáideann Bootstrap ems nó rems chun an chuid is mó de mhéideanna a shainiú, pxúsáidtear s le haghaidh bristephointí greille agus leithid coimeádáin. Tá sé seo amhlaidh toisc go bhfuil leithead an amhairc i bpicteilíní agus nach n-athraíonn sé leis an gclómhéid .

Féach ar an gcaoi a n-oibríonn gnéithe de chóras eangaí Bootstrap thar ilfheistí le tábla áisiúil.

	Beag breise <576px	Beag ≥576px	Meánach ≥768px	Mór ≥992px	Mór breise ≥1200px
Leithead uasta coimeádáin	Dada (uathoibríoch)	540px	720px	960px	1140px
Réimír ranga	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# colún	12
Leithead gutter	30px (15px ar gach taobh de cholún)
Neadaí	Tá
Ordú colún	Tá

Colúin uathleagan amach

Bain úsáid as ranganna colúin a bhaineann go sonrach le brisphointe le haghaidh méide éasca colúin gan aicme uimhrithe sainráite mar .col-sm-6.

Comh-leithead

Mar shampla, seo dhá leagan amach eangaí a bhaineann le gach feiste agus radharcphort, ó xsgo xl. Cuir líon ar bith ranganna gan aonad isteach le haghaidh gach brisphointe atá uait agus beidh gach colún ar an leithead céanna.

1 de 2

2 de 2

1 de 3

2 de 3

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

Is féidir colúin chomhleitheadais a bhriseadh ina n-iliomad línte, ach bhí fabht Safari flexbox ann a chuir cosc air seo oibriú gan chomhartha sainráite flex-basisnó border. Tá réitigh oibre ann do leaganacha níos sine de bhrabhsálaí, ach níor cheart go mbeadh gá leo má tá tú cothrom le dáta.

Colún

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

Leithead colún amháin a shocrú

Ciallaíonn leagan amach uathoibríoch do cholúin ghreille flexbox freisin gur féidir leat leithead colúin amháin a shocrú agus na colúin siblíní a athrú go huathoibríoch timpeall air. Is féidir leat aicmí greille réamhshainithe (mar a thaispeántar thíos), meascáin eangaí, nó leithid inlíne a úsáid. Tabhair faoi deara go n-athróidh na colúin eile méid beag beann ar leithead an cholúin láir.

1 de 3

2 de 3 (níos leithne)

3 de 3

1 de 3

2 de 3 (níos leithne)

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

Ábhar leithead athraitheach

Úsáid col-{breakpoint}-autoranganna chun colúin a mhéid bunaithe ar leithead nádúrtha a n-ábhar.

1 de 3

Ábhar leithead athraitheach

3 de 3

1 de 3

Ábhar leithead athraitheach

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

Comhionann-leithead il-a chéile

Cruthaigh colúin ar chomhleithead a chuimsíonn sraitheanna iolracha trí .w-100líne nua a chur isteach inar mian leat go mbrisfidh na colúin. Déan na sosanna sofhreagrach trí na fóntais taispeána sofhreagracha.w-100 a mheascadh .

col

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

Ranganna freagrúla

Áiríonn eangach Bootstrap cúig shraith de ranganna réamhshainithe chun leagan amach casta freagrúil a thógáil. Saincheap méid do cholúin ar fheistí breise beaga, beaga, meánacha, móra nó móra breise, cibé acu is cuí leat.

Gach brisphointí

Maidir le greillí atá mar an gcéanna, ó na gléasanna is lú go dtí an ceann is mó, bain úsáid as an .colagus .col-*ranganna. Sonraigh rang uimhrithe nuair a bheidh colún ar leith de mhéid uait; ar shlí eile, ná bíodh drogall ort cloí leis .col.

col

col-8

col-4

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

Cruachta go cothrománach

Ag baint úsáide as sraith amháin de .col-sm-*ranganna, is féidir leat a chruthú córas greille bunúsach a thosaíonn amach Cruachta sula n-éiríonn cothrománach leis ag an brisphointe beag ( sm).

col-sm-8

col-sm-4

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

Measc agus meaitseáil

Nár mhaith leat do cholúin a chruachadh i roinnt sraitheanna eangaí? Úsáid meascán de ranganna éagsúla do gach sraith de réir mar is gá. Féach ar an sampla thíos le haghaidh smaoineamh níos fearr ar conas a oibríonn sé ar fad.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

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

Ailíniú

Úsáid fóntais ailínithe flexbox chun colúin a ailíniú go hingearach agus go cothrománach.

Ailíniú ingearach

Ceann de thrí cholún

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

Ceann de thrí cholún

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

Ailíniú cothrománach

Ceann de dhá cholún

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

Gan gáitéir

Is féidir na gáitéir idir na colúin inár ranganna greille réamhshainithe a bhaint le .no-gutters. Baineann sé seo na margins diúltacha as .rowagus an cothrománach paddingó gach neascholún leanaí.

Seo é an cód foinse chun na stíleanna seo a chruthú. Tabhair faoi deara nach ndéantar sáruithe colúin a scóip ach go dtí na chéad cholúin leanaí agus go ndírítear orthu trí roghnóir tréithe . Cé go gcruthaíonn sé seo roghnóir níos sainiúla, is féidir stuáil colún a shaincheapadh tuilleadh le fóntais spásála .

An riachtanas is gá dearadh imeall-go-imeall? Buail an tuismitheoir .containernó .container-fluid.

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

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

Go praiticiúil, seo conas tá sé. Tabhair faoi deara gur féidir leat leanúint ar aghaidh ag baint úsáide as seo le gach rang greille réamhshainithe eile (lena n-áirítear leithid colúin, sraitheanna freagrúla, athorduithe, agus níos mó).

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

.col-6 .col-md-4

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

Timfhilleadh colún

Má chuirtear níos mó ná 12 cholún laistigh de shraith amháin, cuimseoidh gach grúpa colún breise mar aonad amháin ar líne nua.

.col-9

.col-4
Ós rud é 9 + 4 = 13 > 12, filltear an div 4 cholún seo ar líne nua mar aonad tadhlach amháin.

.col-6
Leanann colúin ina dhiaidh sin feadh na líne nua.

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

Briseann colún

Teastaíonn hack beag le colúin a bhriseadh go líne nua i flexbox: cuir eilimint leis width: 100%cibé áit is mian leat do cholúin a fhilleadh ar líne nua. De ghnáth baintear é seo amach le s iolracha .row, ach ní féidir le gach modh cur chun feidhme é seo a áireamh.

.col-6 .col-sm-3

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

Is féidir leat an briseadh seo a chur i bhfeidhm ag brisphointí ar leith lenár bhfóntais taispeána sofhreagracha .

.col-6 .col-sm-4

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

Athordú

Ranganna a ordú

Úsáid .order-ranganna chun ord amhairc d’ ábhar a rialú. Tá na ranganna seo sofhreagrach, ionas gur féidir leat an briseadhphointe a shocrú order(m.sh., .order-1.order-md-2). Áirítear leis tacaíocht le haghaidh 1tríd 12na cúig shraith eangaí.

Gcéad dul síos, ach neamhordú

Dara, ach seo caite

Tríú, ach ar dtús

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

Tá ranganna freagrúla .order-firstagus .order-lastranganna ann freisin a athraíonn ordergné eilimint trí chur i bhfeidhm order: -1agus order: 13( order: $columns + 1), faoi seach. Is féidir na ranganna seo a mheascadh freisin leis na .order-*ranganna uimhrithe de réir mar is gá.

Ar dtús, ach ar deireadh

Dara, ach neamhordú

Tríú, ach ar dtús

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

Colúin fhritháireamh

Is féidir leat colúin ghreille a fhritháireamh ar dhá bhealach: ár .offset-ranganna greille freagrúla agus ár n- áiseanna corrlaigh . Déantar ranganna eangaí a mheaitseáil le colúin agus bíonn corrlaigh níos úsáidí le haghaidh leagan amach tapa nuair a bhíonn leithead an fhritháirimh inathraithe.

Ranganna fritháireamh

Bog na colúin ar dheis ag úsáid .offset-md-*ranganna. Méadaíonn na haicmí seo imeall clé colúin de réir *colúin. Mar shampla, .offset-md-4bogann sé .col-md-4thar cheithre cholún.

.col-md-4

.col-md-4 .fritháireamh-md-4

.col-md-3 .fritháireamh-md-3

.col-md-6 .fritháireamh-md-3

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

Chomh maith le himréiteach colún ag brisphointí sofhreagracha, seans go mbeidh ort fritháirimh a athshocrú. Féach é seo i ngníomh sa sampla greille .

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

Fóntais corrlach

Agus tú ag bogadh go flexbox in v4, is féidir leat úsáid a bhaint as fóntais corrlaigh cosúil .mr-autole colúin siblíní a bhrú óna chéile.

.col-md-4

.col-md-4 .ml-uathoibríoch

.col-md-3 .ml-md-uathoibríoch

.col-auto .mr-auto

.col-uathoibríoch

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

Neadaithe

Chun d'ábhar a neadú leis an eangach réamhshocraithe, cuir sraith nua .rowagus sraith .col-sm-*colún laistigh de .col-sm-*cholún atá ann cheana féin. Ba cheart go gcuimseodh sraitheanna neadaithe sraith colún a chuireann suas le 12 nó níos lú (níl sé riachtanach go n-úsáideann tú gach ceann de na 12 cholún atá ar fáil).

Leibhéal 1: .col-sm-9

Leibhéal 2: .col-8 .col-sm-6

Leibhéal 2: .col-4 .col-sm-6

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

meascáin Sass

Agus comhaid foinse Bootstrap Sass á n-úsáid agat, tá an rogha agat athróga agus meascáin Sass a úsáid chun leagan amach leathanach saincheaptha, shéimeantach agus sofhreagrach a chruthú. Úsáideann ár ranganna greille réamhshainithe na hathróga agus na meascáin chéanna seo chun sraith iomlán de ranganna réidh le húsáid a sholáthar le haghaidh leagan amach tapa freagrúil.

Athróga

Cinneann athróga agus léarscáileanna líon na gcolún, leithead an gháitéir, agus an pointe fiosrúcháin meán ag a gcuirfear tús le colúin ar snámh. Bainimid úsáid astu seo chun na haicmí greille réamhshainithe atá doiciméadaithe thuas a ghiniúint, chomh maith le haghaidh na meascáin shaincheaptha atá liostaithe thíos.

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

Meascáin

Úsáidtear meascáin i gcomhar leis na hathróga eangaí chun CSS shéimeantach a ghiniúint do cholúin ghreille aonair.

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

Sampla úsáide

Is féidir leat na hathróga a mhodhnú le do luachanna saincheaptha féin, nó úsáid a bhaint as na meascáin lena luachanna réamhshocraithe. Seo sampla de na socruithe réamhshocraithe a úsáid chun leagan amach dhá cholún a chruthú le bearna idir.

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

Príomh-ábhar

Ábhar tánaisteach

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

Saincheapadh an eangach

Ag baint úsáide as ár n-athróga agus léarscáileanna Sass greille ionsuite, is féidir na ranganna greille réamhshainithe a shaincheapadh go hiomlán. Athraigh líon na sraitheanna, toisí na bhfiosruithe meán, agus leithid an choimeádáin - athchruinnigh ansin.

Colúin agus gáitéir

Is féidir líon na gcolún greille a mhionathrú trí athróga Sass. $grid-columnsúsáidtear é chun leithid (i gcéatadán) gach colúin ar leith a ghiniúint agus $grid-gutter-widthceadaíonn sé leithid a bhaineann go sonrach le brisphointe a roinntear go cothrom trasna padding-leftagus padding-rightdo gháitéir an cholúin.

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

Sraitheanna greille

Ag bogadh thar na colúin iad féin, féadfaidh tú líon na sraitheanna eangaí a shaincheapadh freisin. Dá mba rud é nach raibh uait ach ceithre shraith eangaí, dhéanfá an nuashonrú $grid-breakpointsagus $container-max-widthsrud éigin mar seo:

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

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

Nuair a bheidh aon athruithe á ndéanamh ar athróga nó ar léarscáileanna Sass, beidh ort do chuid athruithe a shábháil agus a chur le chéile. Má dhéantar é sin, déanfar sraith úrnua d'aicmí greille réamhshainithe a aschuir le haghaidh leithid, fritháirimh agus ordú colún. Déanfar fóntais infheictheachta sofhreagracha a nuashonrú freisin chun na pointí saincheaptha a úsáid. Bí cinnte luachanna eangaí a shocrú i px(ní rem, em, nó %).