Source

Bontša thepa

Fetosa boleng ba ponts'o ea likarolo le tse ling ka potlako le ka mokhoa o bonolo ka lisebelisoa tsa rona tsa ponts'o. E kenyelletsa tšehetso bakeng sa tse ling tsa litekanyetso tse tloaelehileng, hammoho le tse ling tsa tlatsetso bakeng sa ho laola ponts'o ha o hatisa.

Kamoo e sebetsang kateng

Fetola boleng ba displaythepa ka litlelase tsa rona tse arabelang. Re tšehetsa ka boomo feela karoloana ea boleng bohle bo ka khonehang bakeng sa display. Lihlopha li ka kopanngoa bakeng sa liphello tse fapaneng kamoo u hlokang kateng.

Notation

Bontša litlelase tsa lisebelisoa tse sebetsang ho li -breakpoints tsohle , ho tloha xsho ea ho xl, ha li na khutsufatso ea li-breakpoint ho tsona. Lebaka ke hobane litlelase tseo li sebelisoa ho tloha min-width: 0;holimo le holimo, 'me ka hona ha li tlangoe ke potso ea media. Li-breakpoints tse setseng, leha ho le joalo, li kenyelletsa khutsufatso ea breakpoint.

Ka hona, litlelase li rehiloe ho sebelisoa sebopeho:

.d-{value}bakeng saxs
.d-{breakpoint}-{value}bakeng sa sm, md, lg, le xl.

Moo boleng e leng e 'ngoe ea:

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

Lipotso tsa mecha ea litaba li ama bophara ba skrine ka sebaka se fanoeng kapa se seholoanyane . Ka mohlala, .d-lg-nonee beha display: none;ka bobeli lgle xlskrineng.

Mehlala

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>

Ho pata likarolo

Bakeng sa nts'etsopele e potlakileng ea ho sebelisa mehala, sebelisa litlelase tse arabelang ho bonts'a le ho pata likarolo ka sesebelisoa. Qoba ho theha mefuta e fapaneng ka ho felletseng ea sebaka se le seng, ho e-na le hoo pata likarolo ka nepo bakeng sa boholo ba skrini ka seng.

Ho pata likarolo sebelisa feela .d-nonesehlopha kapa e 'ngoe ea .d-{sm,md,lg,xl}-nonelitlelase bakeng sa phapang efe kapa efe e arabelang skrineng.

Ho bonts'a ntho ka nako e itseng feela ea boholo ba skrine o ka kopanya .d-*-nonesehlopha se le seng le .d-*-*sehlopha, mohlala, o .d-none .d-md-block .d-xl-nonetla pata ntho ea boholo ba skrine ntle le lisebelisoa tse mahareng le tse kholo.

Boholo ba skrine	Sehlopha
E patiloeng ho tsohle	`.d-none`
E patiloe feela ho xs	`.d-none .d-sm-block`
E patiloe feela ka sm	`.d-sm-none .d-md-block`
E patiloe feela ho md	`.d-md-none .d-lg-block`
E patiloe feela ho lg	`.d-lg-none .d-xl-block`
E patiloe feela ho xl	`.d-xl-none`
E bonahala ho bohle	`.d-block`
E bonahala feela ho xs	`.d-block .d-sm-none`
E bonahala feela ka sm	`.d-none .d-sm-block .d-md-none`
E bonahala feela ho md	`.d-none .d-md-block .d-lg-none`
E bonahala feela ho lg	`.d-none .d-lg-block .d-xl-none`
E bonahala feela ho xl	`.d-none .d-xl-block`

hide on screens wider than lg

pata skrineng tse nyane ho feta 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>

Hlahisa ka mongolo

Fetola displayboleng ba lielemente ha u hatisa ka litlelase tsa rona tsa lisebelisoa tsa ho hatisa. E kenyelletsa tšehetso ea boleng bo ts'oanang le displaylits'ebeletso tsa rona tse arabelang .d-*.

.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

Litlelase tsa khatiso le lipontšo li ka kopanngoa.

Skrine Feela (Pata ho mongolo feela)

Print Only (Hide on screen only)

Ipate ho fihla ho tse kholo skrineng, empa ka linako tsohle li bonts'e khatisong

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