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.

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

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.

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

Comhionann-leithead il-líne

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

Bhí fabht Safari flexbox ann a chuir cosc ​​air seo oibriú gan focal sonrach flex-basisnó border. Tá réitigh oibre ann do leaganacha níos sine de bhrabhsálaí, ach níor cheart go mbeadh gá leo mura dtagann do spriocbhrabhsálaithe isteach sna leaganacha bugaí.

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

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.

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

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

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.

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

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 agus a thiocfaidh cothrománach ag an brisphointe beag ( 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>

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.

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

gáitéir

Is féidir gáitéir a choigeartú go sofhreagrach trí stuáil a bhaineann go sonrach le brisphointe agus ranganna fóntais corrlaigh diúltacha. Chun na gáitéir a athrú i ndiaidh a chéile, péireáil áirgiúlacht corrlaigh diúltach ar na .rowfóntais stuála meaitseála ar an .cols. Seans go mbeidh gá an tuismitheoir .containernó an .container-fluidtuismitheoir a choigeartú freisin chun róshreabhadh nach dteastaíonn a sheachaint, agus úsáid á baint as áirgiúlacht stuála meaitseála arís.

Seo sampla den ghreille Bootstrap a shaincheapadh ag an lgbrisphointe mór ( ) agus os a chionn. Mhéadaigh muid an .colstuáil le .px-lg-5, frithghníomhaíodh é sin leis .mx-lg-n5an tuismitheoir .rowagus ansin choigeartaíodh an .containerclúdach le .px-lg-5.

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

Colúin as a chéile

Bain úsáid as na ranganna sofhreagracha .row-cols-*chun líon na gcolún a shocrú go tapa is fearr a thugann d’inneachar agus do leagan amach. Cé go .col-*mbaineann na gnáth-aicmí leis na colúin aonair (m.sh., .col-md-4), socraítear ranganna na gcolún rónna ar an tuismitheoir .rowmar aicearra.

Bain úsáid as na ranganna colúin rónna seo chun leagan amach bunúsach greille a chruthú go tapa nó chun leagan amach do chárta a rialú.

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

Is féidir leat an Sass mixin a théann leis a úsáid freisin, 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);
  }
}

Ailíniú

Úsáid fóntais ailínithe flexbox chun colúin a ailíniú go hingearach agus go cothrománach. Ní thacaíonn Internet Explorer 10-11 le hailíniú ingearach na n-ítimí solúbtha nuair a bhíonn an coimeádán flex min-heightmar a thaispeántar thíos. Féach Flexbugs #3 le haghaidh tuilleadh sonraí.

Ailíniú ingearach

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

Ailíniú cothrománach

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

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

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.

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

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.

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

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

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

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

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

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

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

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.

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

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 .

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

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.

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

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

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

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

<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-columnsa úsáidtear chun leithead (i faoin gcéad) de gach colún aonair a ghiniúint agus a $grid-gutter-widthleagann an leithead do 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ó %).