საკუთრების ჩვენება

სწრაფად და პასუხისმგებლობით გადართეთ კომპონენტების ჩვენების მნიშვნელობა და სხვა ჩვენი ეკრანის უტილიტები. მოიცავს ზოგიერთი უფრო გავრცელებული მნიშვნელობის მხარდაჭერას, ასევე დამატებით დამატებითებს ბეჭდვისას ჩვენების კონტროლისთვის.

ამ გვერდზე

Როგორ მუშაობს

შეცვალეთ ქონების ღირებულება displayჩვენი საპასუხო ჩვენების სასარგებლო კლასებით. ჩვენ მიზანმიმართულად ვუჭერთ მხარს ყველა შესაძლო მნიშვნელობის მხოლოდ ქვეჯგუფს display. კლასები შეიძლება გაერთიანდეს სხვადასხვა ეფექტებისთვის, როგორც საჭიროა.

აღნიშვნა

აჩვენეთ სასარგებლო კლასები, რომლებიც ვრცელდება ყველა წყვეტის წერტილზე , დან xsმდე xxl, არ აქვთ წყვეტის წერტილის აბრევიატურა. ეს იმიტომ ხდება, რომ ეს კლასები გამოიყენება ზემოდან და ზემოდან min-width: 0;და, შესაბამისად, არ არის შეზღუდული მედია მოთხოვნით. თუმცა, დარჩენილი წყვეტების წერტილები შეიცავს წყვეტის წერტილის აბრევიატურას.

როგორც ასეთი, კლასები დასახელებულია ფორმატის გამოყენებით:

.d-{value}ამისთვისxs
.d-{breakpoint}-{value}ამისთვის sm, md, lg, xlდა xxl.

სადაც ღირებულება არის ერთ-ერთი:

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

ჩვენების მნიშვნელობები შეიძლება შეიცვალოს SCSS- ში displayგანსაზღვრული მნიშვნელობების შეცვლით და ხელახლა შედგენით.$utilities

მედია მოთხოვნები გავლენას ახდენს ეკრანის სიგანეზე მოცემული წყვეტის წერტილით ან უფრო დიდით . მაგალითად, .d-lg-noneდაყენებულია display: none;, lg, xlდა xxlეკრანებზე.

მაგალითები

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>

დ-ბლოკი დ-ბლოკი

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>

ელემენტების დამალვა

მობილურისთვის უფრო სწრაფი განვითარებისთვის გამოიყენეთ საპასუხო ეკრანის კლასები მოწყობილობების მიხედვით ელემენტების საჩვენებლად და დასამალად. მოერიდეთ ერთი და იმავე საიტის სრულიად განსხვავებული ვერსიების შექმნას, სანაცვლოდ, დამალეთ ელემენტები რეაგირებად თითოეული ეკრანის ზომაზე.

ელემენტების დასამალად უბრალოდ გამოიყენეთ .d-noneკლასი ან ერთ-ერთი .d-{sm,md,lg,xl,xxl}-noneკლასი ნებისმიერი საპასუხო ეკრანის ვარიაციისთვის.

ელემენტის მხოლოდ ეკრანის ზომის მოცემულ ინტერვალზე საჩვენებლად, შეგიძლიათ დააკავშიროთ ერთი .d-*-noneკლასი .d-*-*კლასთან, მაგალითად .d-none .d-md-block .d-xl-none .d-xxl-none, დაიმალება ელემენტი ეკრანის ყველა ზომისთვის, გარდა საშუალო და დიდი მოწყობილობებისა.

Ეკრანის ზომა	Კლასი
ყველაზე დამალული	`.d-none`
დამალულია მხოლოდ xs-ზე	`.d-none .d-sm-block`
დამალულია მხოლოდ სმ	`.d-sm-none .d-md-block`
დამალულია მხოლოდ md	`.d-md-none .d-lg-block`
დამალულია მხოლოდ lg-ზე	`.d-lg-none .d-xl-block`
დამალულია მხოლოდ xl-ზე	`.d-xl-none`
დამალულია მხოლოდ xxl-ზე	`.d-xxl-none .d-xxl-block`
ყველაზე ხილული	`.d-block`
ჩანს მხოლოდ xs-ზე	`.d-block .d-sm-none`
ჩანს მხოლოდ სმ	`.d-none .d-sm-block .d-md-none`
ჩანს მხოლოდ md	`.d-none .d-md-block .d-lg-none`
ჩანს მხოლოდ lg-ზე	`.d-none .d-lg-block .d-xl-none`
ჩანს მხოლოდ xl-ზე	`.d-none .d-xl-block .d-xxl-none`
ჩანს მხოლოდ xxl-ზე	`.d-none .d-xxl-block`

დამალვა lg და უფრო ფართო ეკრანებზე

დამალვა 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>

ჩვენება ბეჭდვით

შეცვალეთ displayელემენტების მნიშვნელობა ჩვენი ბეჭდვის ჩვენების სასარგებლო კლასებით ბეჭდვისას. მოიცავს იგივე displayღირებულებების მხარდაჭერას, როგორც ჩვენი საპასუხო .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

ბეჭდვისა და ჩვენების კლასები შეიძლება გაერთიანდეს.

მხოლოდ ეკრანი (მხოლოდ დაბეჭდვისას დამალვა)

მხოლოდ ბეჭდვა (მხოლოდ ეკრანზე დამალვა)

დამალეთ ეკრანზე დიდამდე, მაგრამ ყოველთვის აჩვენეთ ბეჭდვით

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>

სას

Utilities API

ჩვენების უტილიტები გამოცხადებულია ჩვენს Utilities API-ში scss/_utilities.scss. ისწავლეთ როგორ გამოიყენოთ Utilities 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
    ),