ಆಸ್ತಿಯನ್ನು ಪ್ರದರ್ಶಿಸಿ

ನಮ್ಮ ಡಿಸ್‌ಪ್ಲೇ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ಘಟಕಗಳ ಪ್ರದರ್ಶನ ಮೌಲ್ಯ ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ತ್ವರಿತವಾಗಿ ಮತ್ತು ಸ್ಪಂದಿಸುವಂತೆ ಟಾಗಲ್ ಮಾಡಿ. ಕೆಲವು ಸಾಮಾನ್ಯ ಮೌಲ್ಯಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ಹಾಗೆಯೇ ಮುದ್ರಣ ಮಾಡುವಾಗ ಪ್ರದರ್ಶನವನ್ನು ನಿಯಂತ್ರಿಸಲು ಕೆಲವು ಹೆಚ್ಚುವರಿಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.

ಈ ಪುಟದಲ್ಲಿ

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ನಮ್ಮ ರೆಸ್ಪಾನ್ಸಿವ್ ಡಿಸ್‌ಪ್ಲೇ ಯುಟಿಲಿಟಿ ತರಗತಿಗಳೊಂದಿಗೆ 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;lgxlxxl

ಉದಾಹರಣೆಗಳು

ಡಿ-ಇನ್ಲೈನ್

<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`
ಎಂಡಿಯಲ್ಲಿ ಮಾತ್ರ ಗೋಚರಿಸುತ್ತದೆ	`.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>

ಸಾಸ್

ಉಪಯುಕ್ತತೆಗಳ 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
    ),