Source

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.

Si punon

Ndryshoni vlerën e displaypronë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.

Shënimi

Shfaqni klasat e shërbimeve që zbatohen për të gjitha pikat e ndërprerjes , nga xsderi 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ër sm, md, lg, dhe xl.

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-nonevendos display: none;në të dyja lgdhe xlekranet.

Shembuj

d-inline

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

d-blloku d-blloku

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

Fshehja e elementeve

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-noneklasën ose njërën nga .d-{sm,md,lg,xl}-noneklasat 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-*-noneklasë me një .d-*-*klasë, për shembull .d-none .d-md-block .d-xl-nonedo 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`

hide on screens wider than lg

fshihuni në ekrane më të vogla se lg

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

Shfaq në shtyp

Ndryshoni displayvlerën e elementeve kur printoni me klasat tona të përdorimit të ekranit të printimit. Përfshin mbështetje për të njëjtat displayvlera 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.

Vetëm ekrani (Fshih vetëm në printim)

Print Only (Hide on screen only)

Fshihni deri në të mëdha në ekran, por shfaqen gjithmonë në print

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