Seilbh taisbeanaidh
Tog gu sgiobalta agus gu ciallach luach taisbeanaidh phàirtean agus barrachd leis na goireasan taisbeanaidh againn. A’ toirt a-steach taic airson cuid de na luachan as cumanta, a bharrachd air cuid de rudan a bharrachd airson smachd a chumail air taisbeanadh nuair a thathar a’ clò-bhualadh.
Atharraich luach an display
togalaich leis na clasaichean goireas taisbeanaidh freagairteach againn. Chan eil sinn a’ toirt taic ach do fho-sheata de gach luach a dh’ fhaodadh a bhith ann airson display
. Faodar clasaichean a chur còmhla airson diofar bhuaidhean mar a dh’ fheumas tu.
Taisbeanaibh clasaichean goireis a tha a’ buntainn ris a h-uile puing briseadh , bho xs
gu xl
, aig nach eil giorrachadh puing-brisidh annta. Tha seo air sgàth gu bheil na clasaichean sin air an cur an sàs bho min-width: 0;
agus suas, agus mar sin chan eil iad air an ceangal le ceist mheadhanan. Tha na puingean brisidh a tha air fhàgail, ge-tà, a’ toirt a-steach giorrachadh puing-bhriseadh.
Mar sin, tha na clasaichean air an ainmeachadh a’ cleachdadh an cruth:
.d-{value}
airsonxs
.d-{breakpoint}-{value}
airsonsm
,md
,lg
, agusxl
.
Far a bheil luach mar aon de:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
Bidh na ceistean meadhanan a’ toirt buaidh air leud sgrion leis a’ phuing brisidh a chaidh a thoirt seachad no nas motha . Mar eisimpleir, .d-lg-none
seataichean display: none;
air an dà chuid lg
agus xl
sgrionaichean.
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>
Airson leasachadh gluasadach nas luaithe, cleachd clasaichean taisbeanaidh freagairteach airson a bhith a’ sealltainn agus a’ falach eileamaidean le inneal. Seachain a bhith a’ cruthachadh dreachan gu tur eadar-dhealaichte den aon làrach, an àite sin cuir am falach eileamaid gu freagairteach airson gach meud sgrion.
Gus eileamaidean fhalach dìreach cleachd an .d-none
clas no aon de na .d-{sm,md,lg,xl}-none
clasaichean airson atharrachadh sgrion freagairteach sam bith.
Gus eileamaid a shealltainn a-mhàin air eadar-ama sònraichte de mheudan sgrion faodaidh tu aon .d-*-none
chlas a chur còmhla ri .d-*-*
clas, mar eisimpleir .d-none .d-md-block .d-xl-none
cuiridh e am falach an eileamaid airson gach meud sgrion ach a-mhàin air innealan meadhanach agus mòr.
Meud sgrion | Clas |
---|---|
Falaichte air na h-uile | .d-none |
Falaichte a-mhàin air xs | .d-none .d-sm-block |
Falaichte a-mhàin air sm | .d-sm-none .d-md-block |
Falaichte a-mhàin air md | .d-md-none .d-lg-block |
Falaichte a-mhàin air lg | .d-lg-none .d-xl-block |
Falaichte a-mhàin air xl | .d-xl-none |
Ri fhaicinn air na h-uile | .d-block |
Ri fhaicinn air xs a-mhàin | .d-block .d-sm-none |
Ri fhaicinn a-mhàin air sm | .d-none .d-sm-block .d-md-none |
Ri fhaicinn air md a-mhàin | .d-none .d-md-block .d-lg-none |
Ri fhaicinn a-mhàin air lg | .d-none .d-lg-block .d-xl-none |
Ri fhaicinn air xl a-mhàin | .d-none .d-xl-block |
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
Atharraich display
luach nan eileamaidean nuair a bhios tu a’ clò-bhualadh leis na clasaichean goireas taisbeanaidh clò-bhualaidh againn. A’ toirt a-steach taic airson na h-aon display
luachan ris na .d-*
goireasan freagairteach againn.
.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex
Faodar na clasaichean clò-bhualaidh is taisbeanaidh a chur còmhla.
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>