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.
Athraigh luach na display
maoine 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.
Taispeáin ranganna fóntais a bhaineann le gach brisphointe , ó xs
go xl
, 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 haghaidhsm
,md
,lg
, agusxl
.
Áit a bhfuil luach ar cheann de:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
Cuireann na ceisteanna meáin i bhfeidhm ar leithead an scáileáin leis an brisphointe tugtha nó níos mó . Mar shampla, .d-lg-none
tacair display: none;
ar an dá lg
agus xl
scáileáin.
<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>
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 an eilimint go sofhreagrach do gach méid scáileáin.
Chun eilimintí a cheilt, ní gá ach an .d-none
rang nó ceann de na .d-{sm,md,lg,xl}-none
ranganna 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-*-none
le .d-*-*
haicme, mar shampla .d-none .d-md-block .d-xl-none
beidh 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 |
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 |
<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>
Athraigh display
luach na n-eilimintí agus tú ag priontáil lenár ranganna fóntais taispeána priontála. Áirítear leis tacaíocht do na display
luachanna céanna lenár .d-*
bhfóntas sofhreagrach.
.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
Is féidir na ranganna priontála agus taispeána a chur le chéile.
<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>