Shfaq pronësinë

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.

Në këtë faqe

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ë xxl, 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, xl, dhe xxl.

Ku vlera është një nga:

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

Vlerat e ekranit mund të ndryshohen duke ndryshuar $displaysvariablin dhe duke rikompiluar SCSS.

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ë lg, xl, dhe xxlekranet.

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 fshehni elementët 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,xxl}-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-none .d-xxl-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 .d-xxl-block`
Fshehur vetëm në xxl	`.d-xxl-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 .d-xxl-none`
E dukshme vetëm në xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

fshihuni në ekrane më të vogla se lg

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

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

Sass

Utilities API

Shërbimet e shfaqjes janë deklaruar në API të shërbimeve tona në scss/_utilities.scss. Mësoni se si të përdorni API të shërbimeve.

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