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