in English

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

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

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

ನಮ್ಮ ರೆಸ್ಪಾನ್ಸಿವ್ ಡಿಸ್‌ಪ್ಲೇ ಯುಟಿಲಿಟಿ ತರಗತಿಗಳೊಂದಿಗೆ displayಆಸ್ತಿಯ ಮೌಲ್ಯವನ್ನು ಬದಲಾಯಿಸಿ . ನಾವು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಎಲ್ಲಾ ಸಂಭಾವ್ಯ ಮೌಲ್ಯಗಳ ಉಪವಿಭಾಗವನ್ನು ಮಾತ್ರ ಬೆಂಬಲಿಸುತ್ತೇವೆ display. ನಿಮಗೆ ಅಗತ್ಯವಿರುವಂತೆ ವಿವಿಧ ಪರಿಣಾಮಗಳಿಗೆ ತರಗತಿಗಳನ್ನು ಸಂಯೋಜಿಸಬಹುದು.

ಸಂಕೇತ

ಎಲ್ಲಾ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳಿಗೆ ಅನ್ವಯಿಸುವ ಡಿಸ್‌ಪ್ಲೇ ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್‌ಗಳು , ನಿಂದ xsವರೆಗೆ xl, ಅವುಗಳಲ್ಲಿ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಸಂಕ್ಷೇಪಣವಿಲ್ಲ. ಏಕೆಂದರೆ ಆ ವರ್ಗಗಳನ್ನು min-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

$displaysವೇರಿಯೇಬಲ್ ಅನ್ನು ಬದಲಾಯಿಸುವ ಮೂಲಕ ಮತ್ತು SCSS ಅನ್ನು ಮರುಕಂಪೈಲ್ ಮಾಡುವ ಮೂಲಕ ಪ್ರದರ್ಶನ ಮೌಲ್ಯಗಳನ್ನು ಬದಲಾಯಿಸಬಹುದು .

ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು ನೀಡಲಾದ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ಅಥವಾ ದೊಡ್ಡದರೊಂದಿಗೆ ಪರದೆಯ ಅಗಲದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತವೆ . ಉದಾಹರಣೆಗೆ, ಎರಡೂ ಮತ್ತು ಪರದೆಯ ಮೇಲೆ .d-lg-noneಹೊಂದಿಸುತ್ತದೆ .display: none;lgxl

ಉದಾಹರಣೆಗಳು

ಡಿ-ಇನ್ಲೈನ್
ಡಿ-ಇನ್ಲೈನ್ 
<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}-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
ಎಂಡಿಯಲ್ಲಿ ಮಾತ್ರ ಗೋಚರಿಸುತ್ತದೆ .d-none .d-md-block .d-lg-none
lg ನಲ್ಲಿ ಮಾತ್ರ ಗೋಚರಿಸುತ್ತದೆ .d-none .d-lg-block .d-xl-none
xl ನಲ್ಲಿ ಮಾತ್ರ ಗೋಚರಿಸುತ್ತದೆ .d-none .d-xl-block
lg ಮತ್ತು ವಿಶಾಲ ಪರದೆಯ ಮೇಲೆ ಮರೆಮಾಡಿ
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-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>