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

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

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

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

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

მაგალითები

<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,xxl}-noneკლასი ნებისმიერი საპასუხო ეკრანის ვარიაციისთვის.

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

<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

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

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