in English

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 phetoho $displaysle ho khutlisa SCSS.

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

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,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 skrini	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 .d-xxl-block`
E patiloe feela ho xxl	`.d-xxl-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 .d-xxl-none`
E bonahala feela ho xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

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

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)

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>

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