Үл хөдлөх хөрөнгийг харуулах
Манай дэлгэцийн хэрэгслүүдийн тусламжтайгаар бүрэлдэхүүн хэсгүүдийн дэлгэцийн утгыг хурдан бөгөөд хариу үйлдэлтэйгээр сэлгээрэй. Зарим нийтлэг утгуудын дэмжлэг, мөн хэвлэх үед дэлгэцийг хянах нэмэлт хэрэгслүүд багтсан болно.
Хэрхэн ажилладаг
Манай мэдрэмжтэй дэлгэцийн хэрэглээний ангиудын тусламжтайгаар 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
дунд болон том төхөөрөмжөөс бусад бүх дэлгэцийн хэмжээтэй элементийг нуух болно.
Дэлгэцийн хэмжээ | Анги |
---|---|
Бүгдэд нь нуусан | .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-xxl-block |
Зөвхөн xxl дээр нуугдсан | .d-xxl-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 .d-xxl-none |
Зөвхөн xxl дээр харагдана | .d-none .d-xxl-block |
<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
Дэлгэцийн хэрэгслүүдийг манай хэрэгслүүдийн API-д зарласан scss/_utilities.scss
. 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
),