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

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

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

შეცვალეთ ქონების ღირებულება 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

ჩვენების მნიშვნელობები შეიძლება შეიცვალოს $displaysცვლადის შეცვლით და SCSS-ის ხელახალი შედგენით.

მედია მოთხოვნები გავლენას ახდენს ეკრანის სიგანეზე მოცემული წყვეტის წერტილით ან უფრო დიდით . მაგალითად, .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`

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

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

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

შეცვალეთ 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

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

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

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

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

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