Үл хөдлөх хөрөнгийг харуулах

Манай дэлгэцийн хэрэгслүүдийн тусламжтайгаар бүрэлдэхүүн хэсгүүдийн дэлгэцийн утгыг хурдан бөгөөд хариу үйлдэлтэйгээр сэлгээрэй. Зарим нийтлэг утгуудын дэмжлэг, мөн хэвлэх үед дэлгэцийг хянах нэмэлт хэрэгслүүд багтсан болно.

Хэрхэн ажилладаг

Манай мэдрэмжтэй дэлгэцийн хэрэглээний ангиудын тусламжтайгаар displayүл хөдлөх хөрөнгийн үнэ цэнийг өөрчил . Бид боломжит утгуудын зөвхөн нэг хэсгийг л зориудаар дэмждэг display. Ангиудыг янз бүрийн эффектүүдээр нэгтгэж болно.

Тэмдэглэгээ

-аас - хүртэлх бүх таслах цэгүүдэд хамаарах хэрэглээний ангиудад таслах цэгийн товчлол байхгүй байна. Учир нь эдгээр ангиуд нь эхлээд ба түүнээс дээш хэрэглэгддэг тул медиа асуулгад холбогддоггүй. Харин үлдсэн таслах цэгүүд нь таслах цэгийн товчлолыг агуулдаг.xsxlmin-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;lgxl

Жишээ

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>

d-блок d-блок

<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`
Зөвхөн sm дээр нуугдсан	`.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`
Зөвхөн sm дээр харагдана	`.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>