Samplaí greille bootstrap

Leagan amach bunúsach eangaí chun eolas a chur ort ar thógáil laistigh de chóras eangaí Bootstrap.

Sna samplaí seo cuirtear an .themed-grid-colrang leis na colúin chun roinnt téamaí a chur leis. Ní rang é seo atá ar fáil i Bootstrap de réir réamhshocraithe.

Cúig shraith eangaí

Tá cúig shraith ag baint le córas eangaí Bootstrap, ceann amháin do gach raon gléasanna a dtacaímid leo. Tosaíonn gach sraith ag íosmhéid an amhairc agus baineann sé go huathoibríoch leis na gléasanna níos mó ach amháin má sháraítear iad.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Trí cholún comhionann

Faigh trí cholún ar chomhleithead ag tosú ag deasc agus ag scála go deasc mhór . Ar ghléasanna soghluaiste, táibléad agus thíos, déanfar na colúin a chruachadh go huathoibríoch.

.col-md-4

Rogha eile trí cholún comhionann

Trí úsáid a bhaint as na .row-cols-*ranganna, is féidir leat greille a chruthú go héasca le colúin chomhionann.

.colleanbh de .row-cols-md-3

Trí cholún mhíchothrom

Faigh trí cholún ag tosú ag deasc agus ag scálú chuig deasc mhóra de leithid éagsúla. Cuimhnigh gur chóir go mbeadh suas le dhá cheann déag sna colúin ghreille le haghaidh bloc amháin cothrománach. Níos mó ná sin, agus tosaíonn na colúin ag cruachadh is cuma an radharc.

.col-md-3

.col-md-6

.col-md-3

Dhá cholún

Faigh dhá cholún ag tosú ag deasc agus ag scála go deasc mhór .

.col-md-8

.col-md-4

Leithead iomlán, colún singil

Níl aon ranganna greille riachtanach le haghaidh eilimintí lánleithead.

Dhá cholún le dhá cholún neadaithe

De réir na ndoiciméad, tá sé éasca le neadú - níl le déanamh ach sraith colún a chur laistigh de cholún atá ann cheana féin. Tugann sé seo duit dhá cholún ag tosú ag deasc agus ag scálú go deasc mhór , le dhá cheann eile (leithead comhionann) laistigh den cholún níos mó.

Ag méideanna gléasanna soghluaiste, táibléad agus síos, cruachfaidh na colúin seo agus a gcolúin neadaithe.

.col-md-8

.col-md-6

.col-md-4

Measctha: soghluaiste agus deasc

Tá sé shraith de ranganna i gcóras greille Bootstrap v5: xs (beag breise, ní úsáidtear an infix aicme seo), sm (beag), md (meán), lg (mór), xl (x-mór), agus xxl (xx -mór). Is féidir leat beagnach aon teaglaim de na ranganna seo a úsáid chun leagan amach níos dinimiciúla agus níos solúbtha a chruthú.

Méadaíonn gach sraith ranganna, rud a chiallaíonn má tá sé ar intinn agat na leithead céanna a shocrú do md, lg, xl agus xxl, ní gá duit ach md a shonrú.

.col-md-8

.col-6 .col-md-4

.col-6

Measctha: soghluaiste, táibléad agus deisce

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

gáitéir

Le .gx-*ranganna, is féidir na gutters cothrománacha a choigeartú.

.colle .gx-4gáitéir

Bain úsáid as na .gy-*ranganna chun na gáitéir ingearacha a rialú.

.colle .gy-4gáitéir

Le .g-*ranganna, is féidir na gáitéir sa dá threo a choigeartú.

.colle .g-3gáitéir

Coimeádáin

Ceadaíonn ranganna breise a cuireadh leis i Bootstrap v4.4 coimeádáin atá 100% ar leithead go dtí briseadh áirithe. Cuireann v5 xxlbrisphointe nua leis.

.coimeádán

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid