Shfaq pronën
Ndryshoni me shpejtësi dhe në mënyrë të përgjegjshme vlerën e ekranit të komponentëve dhe më shumë me shërbimet tona të ekranit. Përfshin mbështetje për disa nga vlerat më të zakonshme, si dhe disa shtesë për kontrollin e ekranit gjatë printimit.
Ndryshoni vlerën e display
pronës me klasat tona të dobishme të ekranit të përgjegjshëm. Ne mbështesim qëllimisht vetëm një nëngrup të të gjitha vlerave të mundshme për display
. Klasat mund të kombinohen për efekte të ndryshme sipas nevojës.
Shfaqni klasat e shërbimeve që zbatohen për të gjitha pikat e ndërprerjes , nga xs
deri në xl
, nuk kanë asnjë shkurtim të pikës së ndërprerjes në to. Kjo është për shkak se ato klasa aplikohen nga min-width: 0;
dhe lart, dhe kështu nuk janë të lidhura nga një pyetje mediatike. Megjithatë, pikat e mbetura të ndërprerjes përfshijnë një shkurtim të pikës së ndërprerjes.
Si të tilla, klasat emërtohen duke përdorur formatin:
.d-{value}
përxs
.d-{breakpoint}-{value}
përsm
,md
,lg
, dhexl
.
Ku vlera është një nga:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
Kërkesat e medias ndikojnë në gjerësinë e ekranit me pikën e caktuar të ndërprerjes ose më të madhe . Për shembull, .d-lg-none
vendos display: none;
në të dyja lg
dhe xl
ekranet.
<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>
Për zhvillim më të shpejtë të përshtatshëm për celularin, përdorni klasa të ekranit të përgjegjshëm për shfaqjen dhe fshehjen e elementeve sipas pajisjes. Shmangni krijimin e versioneve krejtësisht të ndryshme të të njëjtit sajt, në vend të kësaj fshihni elementin në mënyrë të përgjegjshme për çdo madhësi ekrani.
Për të fshehur elementë, thjesht përdorni .d-none
klasën ose njërën nga .d-{sm,md,lg,xl}-none
klasat për çdo ndryshim të ekranit të përgjegjshëm.
Për të shfaqur një element vetëm në një interval të caktuar të madhësive të ekranit, mund të kombinoni një .d-*-none
klasë me një .d-*-*
klasë, për shembull .d-none .d-md-block .d-xl-none
do të fshehni elementin për të gjitha madhësitë e ekranit, përveç në pajisjet e mesme dhe të mëdha.
Madhësia e ekranit | Klasa |
---|---|
Fshehur mbi të gjitha | .d-none |
Fshehur vetëm në xs | .d-none .d-sm-block |
Fshehur vetëm në sm | .d-sm-none .d-md-block |
Fshehur vetëm në md | .d-md-none .d-lg-block |
Fshehur vetëm në lg | .d-lg-none .d-xl-block |
Fshehur vetëm në xl | .d-xl-none |
E dukshme në të gjitha | .d-block |
E dukshme vetëm në xs | .d-block .d-sm-none |
Shihet vetem ne sm | .d-none .d-sm-block .d-md-none |
E dukshme vetëm në md | .d-none .d-md-block .d-lg-none |
E dukshme vetëm në lg | .d-none .d-lg-block .d-xl-none |
E dukshme vetëm në xl | .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>
Ndryshoni display
vlerën e elementeve kur printoni me klasat tona të përdorimit të ekranit të printimit. Përfshin mbështetje për të njëjtat display
vlera si .d-*
shërbimet tona të përgjegjshme.
.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
Klasat e printimit dhe të ekranit mund të kombinohen.
<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>