Colúin
Foghlaim conas colúin a mhodhnú le dornán roghanna le haghaidh ailíniú, ordú agus fritháireamh a bhuíochas lenár gcóras eangaí flexbox. Chomh maith leis sin, féach ar conas ranganna colún a úsáid chun leithead eilimintí neamhghreille a bhainistiú.
Conas a oibríonn siad
-
Tógann colúin ar ailtireacht flexbox na heangaí. Ciallaíonn Flexbox go bhfuil roghanna againn chun colúin aonair a athrú agus grúpaí colún a mhodhnú ag leibhéal an rónna . Roghnaíonn tú conas a fhásann, a chrapadh nó a athraíonn colúin ar bhealach eile.
-
Agus leagan amach greille á thógáil, téann an t-ábhar go léir i gcolúin. Téann ordlathas ghreille Bootstrap ó choimeádán go líne go colún chuig d’inneachar. Go hannamh, is féidir leat ábhar agus colún a chomhcheangal, ach bí ar an eolas go bhféadfadh iarmhairtí neamhbheartaithe a bheith ann.
-
Áirítear le Bootstrap ranganna réamhshainithe chun leagan amach tapa, sofhreagrach a chruthú. Le sé phointe briste agus dosaen colún ag gach sraith ghreille, tá mórán ranganna tógtha againn cheana féin chun na leagan amach atá uait a chruthú. Is féidir é seo a dhíchumasú trí Sass más mian leat.
Ailíniú
Úsáid fóntais ailínithe flexbox chun colúin a ailíniú go hingearach agus go cothrománach.
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 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>
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.
Ós rud é 9 + 4 = 13 > 12, filltear an div 4 cholún seo ar líne nua mar aonad tadhlach amháin.
Leanann colúin ina dhiaidh sin feadh na 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 > 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 1
tríd 5
na sé shraith eangaí.
<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>
Tá ranganna freagrúla .order-first
agus .order-last
ranganna ann freisin a athraíonn order
gné eilimint trí chur i bhfeidhm order: -1
agus order: 6
, 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-4
bogann sé .col-md-4
thar 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 .me-auto
le 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 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>
Ranganna colún aonair
Is féidir na .col-*
ranganna a úsáid freisin lasmuigh de .row
chun leithead ar leith a thabhairt d’eilimint. Aon uair a úsáidtear ranganna colún mar leanaí neamhdhíreacha as a chéile, fágtar na stuáil ar lár.
<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>
Is féidir na ranganna a úsáid mar aon le fóntais chun íomhánna sofhreagracha ar snámh a chruthú. Bí cinnte an t-ábhar a fhilleadh i .clearfix
bhfillteán chun an snámhán a ghlanadh má tá an téacs níos giorra.
Alt de théacs an tsealbhóra. Táimid á úsáid anseo chun úsáid an ranga clearfix a thaispeáint. Táimid ag cur go leor frásaí gan brí leis anseo chun a léiriú conas a idirghníomhaíonn na colúin anseo leis an íomhá ar snámh.
Mar is féidir leat a fheiceáil na míreanna wrap gracefully thart ar an íomhá floated. Anois, samhlaigh an chuma a bheadh air seo le roinnt ábhar iarbhír anseo, seachas an téacs leadránach seo a théann ar aghaidh agus ar aghaidh, ach nach dtugann aon fhaisnéis inláimhsithe ag. Tógann sé suas spás agus níor cheart é a léamh i ndáiríre.
Agus fós féin, seo sibh, fós ag leanúint ar aghaidh ag léamh an téacs sealbhóra seo, ag súil le tuilleadh léargais, nó ubh éigin folaithe de chuid ábhar na Cásca. A joke, b'fhéidir. Ar an drochuair, níl aon cheann de sin anseo.
<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>