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.
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
<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>
Co-thaobhadh còmhnard
<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 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.
Bho 9 + 4 = 13 > 12, bidh an div 4-colbh seo air a phasgadh air loidhne ùr mar aon aonad ri thaobh.
colbhan a leanas a' leantainn air adhart air an loidhne ùr.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 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 .row
s, ach chan urrainn a h-uile dòigh gnìomhachaidh cunntas a thoirt air seo.
<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>
Faodaidh tu cuideachd am briseadh seo a chuir an sàs aig amannan briseadh sònraichte leis na goireasan taisbeanaidh freagairteach againn .
<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>
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 order
le briseadh (me, .order-1.order-md-2
). A’ toirt a-steach taic airson 1
tro 5
na sia ìrean clèithe.
<div class="container">
<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-first
eileamaid 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-last
order
order: -1
order: 6
.order-*
<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>
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-4
gluais .col-md-4
thairis air ceithir colbhan.
<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>
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 .
<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>
Goireasan iomall
Leis a’ ghluasad gu flexbox ann an v4, faodaidh tu goireasan iomaill a chleachdadh mar .me-auto
a bhith a’ toirt air colbhan peathraichean a bhith air falbh bho chèile.
<div class="container">
<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 .row
gus leud sònraichte a thoirt do eileamaid. Nuair a bhios clasaichean colbh air an cleachdadh mar chlann neo-dhìreach ann an sreath, thèid na pleadhagan fhàgail air falbh.
<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 .clearfix
pasgan 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.
<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>