in English

Colbhan

Ionnsaich mar a dh’ atharraicheas tu colbhan le dòrlach de roghainnean airson co-thaobhadh, òrdachadh agus cuir an-aghaidh le taing don t-siostam clèithe flexbox againn. A bharrachd air an sin, faic mar a chleachdas tu clasaichean colbh gus leud eileamaidean neo-clèithe a riaghladh.

Air an duilleig seo

Cinn suas! Dèan cinnteach gun leugh thu an duilleag Grid an- toiseach mus tum thu a-steach mar as urrainn dhut na colbhan clèithe agad atharrachadh agus a ghnàthachadh.

Mar a tha iad ag obair

Bidh colbhan a’ togail air ailtireachd flexbox a’ ghriod. Tha Flexbox a’ ciallachadh gu bheil roghainnean againn airson colbhan fa leth atharrachadh agus buidhnean de cholbhan atharrachadh aig ìre na loidhne . Bidh thu a’ taghadh mar a bhios colbhan a’ fàs, a’ crìonadh, no ag atharrachadh air dhòigh eile.
Nuair a bhios tu a’ togail dealbhadh clèithe, thèid a h-uile susbaint a-steach do cholbhan. Bidh rangachd cliath Bootstrap a’ dol bho shoitheach gu sreath gu colbh chun t-susbaint agad. Aig amannan ainneamh, faodaidh tu susbaint agus colbh a chur còmhla, ach bi mothachail gum faod builean gun dùil a bhith ann.
Tha Bootstrap a’ toirt a-steach clasaichean ro-mhìnichte airson dealbhadh luath, freagairteach a chruthachadh. Le sia puingean briseadh agus dusan colbhan aig gach sreath clèithe, tha dusanan de chlasaichean againn mu thràth air an togail dhut gus na dreachan a tha thu ag iarraidh a chruthachadh. Faodar seo a chur à comas tro Sass ma thogras tu.

Co-thaobhadh

Cleachd goireasan co-thaobhadh flexbox gus colbhan a cho-thaobhadh gu dìreach agus gu còmhnard.

Co-thaobhadh dìreach

Aon de thrì colbhan

html

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

Aon de thrì colbhan

html

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

Co-thaobhadh còmhnard

Aon de dhà cholbh

html

<div class="container text-center">
  <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 class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Còmhdach colbh

Ma tha barrachd air 12 colbhan air an cur ann an aon sreath, bidh gach buidheann de cholbhan a bharrachd, mar aon aonad, a’ ceangal ri loidhne ùr.

.col-9

.col-4
Bho 9 + 4 = 13 > 12, bidh an div 4-colbh seo air a phasgadh air loidhne ùr mar aon aonad ri thaobh.

.col-6 Tha
colbhan a leanas a' leantainn air adhart air an loidhne ùr.

html

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

Bidh colbh a 'briseadh

Gus colbhan a bhriseadh gu loidhne ùr ann am bogsa flex tha feum air beagan hack: cuir eileamaid ris width: 100%ge bith càite a bheil thu airson do cholbhan a phasgadh gu loidhne ùr. Mar as trice tha seo air a choileanadh le ioma .rows, ach chan urrainn a h-uile dòigh gnìomhachaidh cunntas a thoirt air seo.

.col-6 .col-sm-3

html

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

Faodaidh tu cuideachd am briseadh seo a chuir an sàs aig amannan briseadh sònraichte leis na goireasan taisbeanaidh freagairteach againn .

.col-6 .col-sm-4

html

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

Ag ath-òrdachadh

Òrdaich clasaichean

Cleachd .order-clasaichean airson smachd a chumail air òrdugh lèirsinneach an t -susbaint agad. Tha na clasaichean sin freagairteach, agus mar sin faodaidh tu an suidheachadh a shuidheachadh orderle briseadh (me, .order-1.order-md-2). A’ toirt a-steach taic airson 1tro 5na sia ìrean clèithe.

An toiseach ann an DOM, cha deach òrdugh sam bith a chuir an sàs

San dàrna àite ann an DOM, le òrdugh nas motha

San treas àite ann an DOM, le òrdugh 1

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Tha clasaichean freagairteach ann cuideachd a bhios ag atharrachadh .order-firsteileamaid le bhith a’ cur a -steach agus , fa leth. Faodar na clasaichean sin a mheasgadh cuideachd leis na clasaichean àireamhaichte mar a dh’ fheumar..order-lastorderorder: -1order: 6.order-*

An toiseach ann an DOM, air òrdachadh mu dheireadh

San dàrna àite ann an DOM, gun òrdugh

San treas àite ann an DOM, air òrdachadh an toiseach

html

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

Colbhan dheth

Faodaidh tu colbhan clèithe a chothromachadh ann an dà dhòigh: na .offset-clasaichean clèithe freagairteach againn agus na goireasan iomaill againn . Tha clasaichean clèithe air am meud gus a bhith co-ionnan ri colbhan fhad ‘s a tha oirean nas fheumail airson dealbhadh sgiobalta far a bheil leud a’ chothromachadh caochlaideach.

Clasaichean dheth

Gluais colbhan air an taobh cheart a’ cleachdadh .offset-md-*chlasaichean. Bidh na clasaichean sin ag àrdachadh iomall clì colbh le *colbhan. Mar eisimpleir, .offset-md-4gluais .col-md-4thairis air ceithir colbhan.

.col-md-4

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

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

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

html

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

A bharrachd air a bhith a’ glanadh colbhan aig puingean brisidh freagairteach, is dòcha gum feum thu cuir dheth ath-shuidheachadh. Faic seo ann an gnìomh san eisimpleir clèithe .

.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

html

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

Goireasan iomall

Leis a’ ghluasad gu flexbox ann an v4, faodaidh tu goireasan iomaill a chleachdadh mar .me-autoa bhith a’ toirt air colbhan peathraichean a bhith air falbh bho chèile.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Clasaichean colbh air leth

Faodar na .col-*clasaichean a chleachdadh cuideachd taobh a-muigh a .rowgus leud sònraichte a thoirt do eileamaid. Nuair a thèid clasaichean colbh a chleachdadh mar chlann neo-dhìreach ann an sreath, thèid na pleadhagan fhàgail air falbh.

.col-3: leud 25%

.col-sm-9: leud 75% os cionn sm breakpoint

html

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

Faodar na clasaichean a chleachdadh còmhla ri goireasan gus ìomhaighean fleòdraidh freagairteach a chruthachadh. Dèan cinnteach gun paisg thu an susbaint ann am .clearfixpasgan gus an fleòdradh a ghlanadh ma tha an teacsa nas giorra.

Paragraf de theacsa neach-àite. Tha sinn ga chleachdadh an seo gus cleachdadh a’ chlas clearfix a shealltainn. Tha sinn a’ cur grunn abairtean gun bhrìgh an seo gus sealltainn mar a tha na colbhan ag eadar-obrachadh an seo leis an ìomhaigh air bhog.

Mar a chì thu tha na paragrafan timcheall air an ìomhaigh fleòdraidh gu gràsmhor. A-nis smaoinich air mar a bhiodh seo a’ coimhead le fìor shusbaint an seo, seach dìreach an teacsa tollaidh seo de neach-àite a tha a’ dol air adhart agus air adhart, ach nach eil a’ toirt seachad fiosrachadh susbainteach aig. Bidh e dìreach a’ gabhail àite agus cha bu chòir dha a leughadh.

Agus fhathast, seo thu, fhathast a’ leantainn le bhith a’ leughadh an teacsa seo le neach-àite, an dòchas beagan a bharrachd lèirsinn, no ugh falaichte na Càisge de shusbaint. Fealla-dhà, is dòcha. Gu mì-fhortanach, chan eil gin de sin an seo.

html

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>