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

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

Энэ хуудсан дээр

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

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

Тэмдэглэгээ

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

Жишээ

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

hide on lg and wider screens

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

Сасс

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