Maoin taispeána

Scoránaigh go tapa agus go freagrach luach taispeána na gcomhpháirteanna agus níos mó lenár bhfóntais taispeána. Áirítear leis tacaíocht do chuid de na luachanna is coitianta, chomh maith le roinnt rudaí breise chun taispeáint a rialú agus tú ag priontáil.

Ar an leathanach seo

Conas a oibríonn sé

Athraigh luach na displaymaoine lenár ranganna fóntais taispeána sofhreagracha. Ní thacaímid d'aon ghnó ach le fo-thacar de na luachanna féideartha go léir le haghaidh display. Is féidir ranganna a chomhcheangal le haghaidh éifeachtaí éagsúla de réir mar is gá duit.

Nodaireacht

Taispeáin ranganna fóntais a bhaineann le gach brisphointe , ó xsgo xxl, nach bhfuil aon ghiorrúchán brisphointe iontu. Tá sé seo amhlaidh toisc go gcuirtear na ranganna sin i bhfeidhm ó min-width: 0;agus suas, agus mar sin níl siad faoi cheangal ag ceist mheáin. Áiríonn na brisphointí atá fágtha, áfach, giorrúchán brisphointe.

Mar sin, ainmnítear na ranganna ag baint úsáide as an bhformáid:

.d-{value}le haghaidhxs
.d-{breakpoint}-{value}le haghaidh sm, md, lg, xl, agus xxl.

Áit a bhfuil luach ar cheann de:

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

Is féidir na luachanna taispeána a athrú trí na displayluachanna atá sainithe sa $utilitiesSCSS a athrú agus a chur le chéile.

Bíonn tionchar ag ceisteanna na meán ar leithead an scáileáin leis an brisphointe tugtha nó níos mó . Mar shampla, .d-lg-nonetacair display: none;ar lg, xl, agus xxlscáileáin.

Samplaí

d-inlíne

html

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

d-bhloc d-bhloc

html

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

Eilimintí bhfolach

Ar mhaithe le forbairt níos tapúla atá éasca le húsáid soghluaiste, bain úsáid as ranganna taispeána sofhreagracha chun gnéithe a thaispeáint agus a cheilt trí ghléas. Seachain leaganacha iomlána éagsúla den suíomh céanna a chruthú, ina ionad sin folaigh gnéithe go sofhreagrach do gach méid scáileáin.

Chun eilimintí a cheilt, ní gá ach an .d-nonerang nó ceann de na .d-{sm,md,lg,xl,xxl}-noneranganna a úsáid le haghaidh aon athrú sofhreagrach ar an scáileán.

Chun eilimint a thaispeáint ar eatramh ar leith de mhéideanna scáileáin amháin, is féidir leat rang amháin a chomhcheangal .d-*-nonele .d-*-*haicme, mar shampla .d-none .d-md-block .d-xl-none .d-xxl-nonebeidh an eilimint i bhfolach do gach scáileán ach amháin ar ghléasanna meánmhéide agus mór.

Méid an scáileáin	Aicme
I bhfolach ar fad	`.d-none`
I bhfolach ar xs amháin	`.d-none .d-sm-block`
I bhfolach ar sm	`.d-sm-none .d-md-block`
I bhfolach ar md amháin	`.d-md-none .d-lg-block`
I bhfolach ar lg amháin	`.d-lg-none .d-xl-block`
I bhfolach ar xl amháin	`.d-xl-none`
I bhfolach ar xxl amháin	`.d-xxl-none .d-xxl-block`
Infheicthe ar fad	`.d-block`
Le feiceáil ar xs amháin	`.d-block .d-sm-none`
Le feiceáil ar sm	`.d-none .d-sm-block .d-md-none`
Le feiceáil ar md amháin	`.d-none .d-md-block .d-lg-none`
Le feiceáil ar lg amháin	`.d-none .d-lg-block .d-xl-none`
Le feiceáil ar xl amháin	`.d-none .d-xl-block .d-xxl-none`
Le feiceáil ar xxl amháin	`.d-none .d-xxl-block`

cheilt ar lg agus scáileáin níos leithne

cheilt ar scáileáin níos lú ná lg

html

<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>

Taispeáin i gcló

Athraigh displayluach na n-eilimintí agus tú ag priontáil lenár ranganna fóntais taispeána priontála. Áirítear leis tacaíocht do na displayluachanna céanna lenár .d-*bhfóntas sofhreagrach.

.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

Is féidir na ranganna priontála agus taispeána a chur le chéile.

Scáileán Amháin (Folaigh ar phriontáil amháin)

Priontáil Amháin (Folaigh ar an scáileán amháin)

Folaigh suas go dtí an scáileán mór, ach taispeáin ar phriontáil i gcónaí

html

<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

Déantar fóntais taispeána a dhearbhú inár n-API fóntais i scss/_utilities.scss. Foghlaim conas an API fóntais a úsáid.

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