Eisimpleirean de griod bootstrap

Dealbhadh clèithe bunaiteach gus eòlas fhaighinn air togail taobh a-staigh siostam clèithe Bootstrap.

Anns na h-eisimpleirean seo tha an .themed-grid-colclas air a chur ris na colbhan gus cuspairean a chur ris. Chan e clas a tha seo a tha ri fhaighinn ann am Bootstrap gu bunaiteach.

Còig ìrean cliath

Tha còig ìrean ann an siostam clèithe Bootstrap, aon airson gach raon de dh’ innealan ris a bheil sinn a’ toirt taic. Bidh gach sreath a’ tòiseachadh aig meud seallaidh as ìsle agus a’ buntainn gu fèin-ghluasadach ris na h-innealan nas motha mura tèid an toirt thairis.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Trì colbhan co-ionann

Faigh trì colbhan den aon leud a’ tòiseachadh aig deasg agus a’ sgèileadh gu deasgaichean mòra . Air innealan gluasadach, clàran agus gu h-ìosal, thèid na colbhan a chruachadh gu fèin-ghluasadach.

.col-md-4

Roghainn trì colbhan co-ionann

Le bhith a’ cleachdadh nan .row-cols-*clasaichean, is urrainn dhut cliath a chruthachadh gu furasta le colbhan co-ionann.

.colleanabh de .row-cols-md-3

Trì colbhan neo-ionann

Faigh trì colbhan a’ tòiseachadh aig deasg agus a’ sgèileadh gu deasgaichean mòra de dhiofar leud. Cuimhnich gum bu chòir colbhan clèithe suas ri dusan a chur airson aon bhloc còmhnard. A bharrachd air an sin, agus bidh colbhan a’ tòiseachadh a’ cruachadh ge bith dè an sealladh-seallaidh a th’ ann.

.col-md-3

.col-md-6

.col-md-3

Dà cholbh

Faigh dà cholbh a’ tòiseachadh aig deasg agus a’ sgèileadh gu deasgaichean mòra .

.col-md-8

.col-md-4

Leud iomlan, colbh singilte

Chan eil feum air clasaichean clèithe airson eileamaidean làn-leud.

Dà cholbh le dà cholbh neadachaidh

A rèir na sgrìobhainnean, tha e furasta neadachadh - dìreach cuir sreath de cholbhan taobh a-staigh colbh a tha ann mu thràth. Bheir seo dhut dà cholbh a’ tòiseachadh aig deasg agus a’ sgèileadh gu deasgaichean mòra , le dhà eile (leud co-ionann) taobh a-staigh a’ cholbh as motha.

Aig meudan innealan gluasadach, clàran agus sìos, thèid na colbhan sin agus na colbhan neadachaidh aca a chruachadh.

.col-md-8

.col-md-6

.col-md-4

Measgaichte: gluasadach agus deasg

Tha sia sreathan de chlasaichean ann an siostam clèithe Bootstrap v5: xs (beag a bharrachd, chan eilear a’ cleachdadh an infix clas seo), sm (beag), md (meadhanach), lg (mòr), xl (x-mòr), agus xxl (xx - mòr). Faodaidh tu cha mhòr measgachadh sam bith de na clasaichean sin a chleachdadh gus dealbhadh nas beothaile agus nas sùbailte a chruthachadh.

Bidh gach sreath de chlasaichean a’ leudachadh, a’ ciallachadh ma tha thu an dùil na h-aon leudan a shuidheachadh airson md, lg, xl agus xxl, cha leig thu leas ach md a shònrachadh.

.col-md-8

.col-6 .col-md-4

.col-6

Measgaichte: gluasadach, clàr, agus deasg

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

.col-6 .col-lg-4

.col-6 .col-sm-4

cutairean

Le .gx-*clasaichean, faodar na cutairean còmhnard atharrachadh.

.colle .gx-4cutairean

Cleachd na .gy-*clasaichean gus smachd a chumail air na cutairean dìreach.

.colle .gy-4cutairean

Le .g-*clasaichean, faodar na cutairean an dà thaobh atharrachadh.

.colle .g-3cutairean

Gabhadairean

Tha clasaichean a bharrachd air an cur ris ann am Bootstrap v4.4 a’ ceadachadh soithichean a tha 100% de leud gu àite brisidh sònraichte. v5 a’ cur puing-briseadh ùr ris xxl.

.container

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid