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-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-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
.col-md-4
.col-md-4

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.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Mixed: mobile and desktop

The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Mixed: mobile, tablet, and desktop

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

Containers

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.

.container
.container-sm
.container-md
.container-lg
.container-xl
.container-fluid