in English

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

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

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

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

Манай мэдрэмжтэй дэлгэцийн хэрэглээний ангиудын тусламжтайгаар 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

Дэлгэцийн утгыг SCSS display-д тодорхойлсон утгуудыг өөрчлөх, дахин эмхэтгэх замаар өөрчилж болно .$utilities

Медиа асуулга нь өгөгдсөн завсарлага эсвэл түүнээс дээш хэмжээтэй дэлгэцийн өргөнд нөлөөлдөг . Жишээлбэл , , , дэлгэц дээр тохируулна .d-lg-none.display: none;lgxlxxl

Жишээ

d-inline

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

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

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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`
Зөвхөн xxl дээр нуугдсан	`.d-xxl-none .d-xxl-block`
Бүгдэд харагдана	`.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`

lg болон илүү өргөн дэлгэц дээр нуугдах

lg-ээс жижиг дэлгэц дээр нуугдах

html

<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

Хэвлэх болон дэлгэцийн ангиудыг нэгтгэж болно.

Зөвхөн дэлгэц (Зөвхөн хэвлэсэн дээр нуух)

Зөвхөн хэвлэх (Зөвхөн дэлгэц дээр нуух)

Дэлгэц дээр том болтол нуух боловч хэвлэмэл дээр үргэлж харуулах

html

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