Source

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

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

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

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

აღნიშვნა

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

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

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

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

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

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

მაგალითები

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>

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

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

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

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

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

ელემენტის მხოლოდ ეკრანის ზომის მოცემულ ინტერვალზე საჩვენებლად, შეგიძლიათ დააკავშიროთ ერთი .d-*-noneკლასი .d-*-*კლასთან, მაგალითად .d-none .d-md-block .d-xl-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`
ყველაზე ხილული	`.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`

hide on screens wider than lg

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

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

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

Print Only (Hide on screen only)

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

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