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.

Leqepheng lena

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

Moo boleng e leng e 'ngoe ea:

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

Lipalo tsa ponts'o li ka fetoloa ka ho fetola displayboleng bo hlalositsoeng $utilitiesle ho khutlisa SCSS.

Lipotso tsa media li ama bophara ba skrini ka sebaka se fanoeng kapa se seholoanyane . Mohlala, .d-lg-noneseta , , le display: none;li -skrini.lgxlxxl

Mehlala

d-inline

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-block d-block

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

Ho pata likarolo

Bakeng sa nts'etsopele e potlakileng ea ho sebelisa mohala, 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,xxl}-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-none .d-xxl-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 patiloe feela ho xxl	`.d-xxl-none .d-xxl-block`
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 .d-xxl-none`
E bonahala feela ho xxl	`.d-none .d-xxl-block`

ipate ho lg le skrineng se pharaletseng

pata skrineng tse nyane ho feta lg

html

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

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

Hatisa Feela (Pata skrineng feela)

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

html

<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

Lisebelisoa tsa ponts'o li phatlalatsoa lits'ebetsong tsa rona tsa API ho scss/_utilities.scss. Ithute ho sebelisa lisebelisoa tsa API.

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