Seilbh taisbeanaidh

Mar a tha e ag obair

Atharraich luach an displaytogalaich 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.

Comharrachadh

Taisbeanaibh clasaichean goireis a tha a’ buntainn ris a h-uile puing briseadh , bho xsgu xxl, 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}airson sm, md, lg, , xl, agus xxl.

Far a bheil luach mar aon de:

• none
• inline
• inline-block
• block
• grid
• table
• table-cell
• table-row
• flex
• inline-flex

Faodar na luachan taisbeanaidh atharrachadh le bhith ag atharrachadh nan displayluachan a tha air am mìneachadh anns $utilitiesan SCSS agus ag ath-chruinneachadh.

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-noneseataichean display: none;air lg, xl, agus xxlsgrionaichean.

Eisimpleirean

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

A 'falach eileamaidean

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 eileamaidean gu freagairteach airson gach meud sgrion.

Gus eileamaidean fhalach dìreach cleachd an .d-noneclas no aon de na .d-{sm,md,lg,xl,xxl}-noneclasaichean 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-*-nonechlas a chur còmhla ri .d-*-*clas, mar eisimpleir .d-none .d-md-block .d-xl-none .d-xxl-nonecuiridh e am falach an eileamaid airson gach meud sgrion ach a-mhàin air innealan meadhanach agus mòr.

<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Taisbeanadh ann an clò

Atharraich displayluach 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 displayluachan ris na .d-*goireasan freagairteach againn.

• .d-print-none
• .d-print-inline
• .d-print-inline-block
• .d-print-block
• .d-print-grid
• .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>

Sass

Utilities API

Tha goireasan taisbeanaidh air an ainmeachadh anns na goireasan API againn ann an scss/_utilities.scss. Ionnsaich mar a chleachdas tu an API Utilities.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),