Source

Ratidza zvinhu

Kurumidza uye nekudaira shandura kukosha kwekuratidzira kwezvikamu uye nezvimwe nezvishandiso zvedu zvekuratidzira. Inosanganisira tsigiro yehumwe hunhu hwakajairika, pamwe nezvimwe zvekuwedzera pakudzora chiratidziro paunenge uchidhinda.

Zvinoshanda sei

Shandura kukosha displaykwechivakwa nemakirasi edu anoteerera ekushandisa. Isu tinotsigira nemaune chete chikamu chidiki chezvose zvinogoneka zvakakosha zve display. Makirasi anogona kusanganiswa kune akasiyana mhedzisiro sezvaunoda.

Notation

Ratidza utility makirasi anoshanda kune ese mabreakpoints , kubva xskuenda kusvika xl, haana breakpoint pfupiso mazviri. Izvi zvinodaro nekuti iwo makirasi anoshandiswa kubva min-width: 0;nekukwira, uye nekudaro haana kusungwa nemubvunzo wenhau. Iwo asara mabreakpoints, zvisinei, anosanganisira chidimbu chebreakpoint.

Saka nekudaro, makirasi anopihwa mazita achishandisa iyo fomati:

.d-{value}nokutixs
.d-{breakpoint}-{value}nokuti sm, md, lg, uye xl.

Iko kukosha kune imwe ye:

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

Iwo maitiro ekuratidzira anogona kuchinjwa nekuchinja $displaysshanduko uye kudzorera iyo SCSS.

Iyo midhiya inobvunza inobata upamhi hwescreen neiyo yakapihwa breakpoint kana yakakura . Semuenzaniso, .d-lg-noneseti display: none;pane ese ari maviri lguye xlskrini.

Mienzaniso

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

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

Kuviga zvinhu

Kuti kukurumidza kusimudzira nharembozha, shandisa makirasi ekuratidzira ekuratidza uye kuviga zvinhu nemudziyo. Regedza kugadzira mavhezheni akasiyana esaiti imwe chete, panzvimbo pacho viga zvinhu zvinoteera kune yega yega skrini saizi.

Kuvanza zvinhu zvinongoshandisa .d-nonekirasi kana imwe .d-{sm,md,lg,xl}-noneyemakirasi kune chero inopindura skrini inosiyana.

To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.

Screen Size	Class
Hidden on all	`.d-none`
Hidden only on xs	`.d-none .d-sm-block`
Hidden only on sm	`.d-sm-none .d-md-block`
Hidden only on md	`.d-md-none .d-lg-block`
Hidden only on lg	`.d-lg-none .d-xl-block`
Hidden only on xl	`.d-xl-none`
Visible on all	`.d-block`
Visible only on xs	`.d-block .d-sm-none`
Visible only on sm	`.d-none .d-sm-block .d-md-none`
Visible only on md	`.d-none .d-md-block .d-lg-none`
Visible only on lg	`.d-none .d-lg-block .d-xl-none`
Visible only on xl	`.d-none .d-xl-block`

viga pamascreens akafara kupfuura lg

hide on screens smaller than 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>

Display in print

Change the display value of elements when printing with our print display utility classes. Includes support for the same display values as our responsive .d-* utilities.

.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

The print and display classes can be combined.

Screen Only (Hide on print only)

Print Only (Hide on screen only)

Viga kusvika zvakakura pachiratidziri, asi gara uchiratidzira pane zvakadhindwa

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