ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ತೆರಳಿ ಡಾಕ್ಸ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ತೆರಳಿ
Check
in English

ಫ್ಲೋಟ್

ನಮ್ಮ ರೆಸ್ಪಾನ್ಸಿವ್ ಫ್ಲೋಟ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಯಾವುದೇ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ನಾದ್ಯಂತ ಯಾವುದೇ ಅಂಶದ ಮೇಲೆ ಫ್ಲೋಟ್‌ಗಳನ್ನು ಟಾಗಲ್ ಮಾಡಿ.

ಅವಲೋಕನ

ಈ ಉಪಯುಕ್ತತೆಯ ವರ್ಗಗಳು CSS floatಆಸ್ತಿಯನ್ನು ಬಳಸಿಕೊಂಡು ಪ್ರಸ್ತುತ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ಎಡ ಅಥವಾ ಬಲಕ್ಕೆ ಒಂದು ಅಂಶವನ್ನು ತೇಲುತ್ತವೆ ಅಥವಾ ಫ್ಲೋಟಿಂಗ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತವೆ . !importantನಿರ್ದಿಷ್ಟ ಸಮಸ್ಯೆಗಳನ್ನು ತಪ್ಪಿಸಲು ಸೇರಿಸಲಾಗಿದೆ. ಇವುಗಳು ನಮ್ಮ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್‌ನಂತೆ ಅದೇ ವ್ಯೂಪೋರ್ಟ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಬಳಸುತ್ತವೆ. ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳ ಮೇಲೆ ಫ್ಲೋಟ್ ಉಪಯುಕ್ತತೆಗಳು ಯಾವುದೇ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ತಿಳಿದುಕೊಳ್ಳಿ.

ಎಲ್ಲಾ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರಗಳಲ್ಲಿ ಫ್ಲೋಟ್ ಪ್ರಾರಂಭ

ಎಲ್ಲಾ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರಗಳಲ್ಲಿ ಫ್ಲೋಟ್ ಎಂಡ್

ಎಲ್ಲಾ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರಗಳಲ್ಲಿ ತೇಲಬೇಡಿ
html
<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

ರೆಸ್ಪಾನ್ಸಿವ್

floatಪ್ರತಿ ಮೌಲ್ಯಕ್ಕೂ ಸ್ಪಂದಿಸುವ ವ್ಯತ್ಯಾಸಗಳು ಸಹ ಅಸ್ತಿತ್ವದಲ್ಲಿವೆ .

SM (ಸಣ್ಣ) ಅಥವಾ ಅಗಲವಾದ ವ್ಯೂಪೋರ್ಟ್‌ಗಳಲ್ಲಿ ಫ್ಲೋಟ್ ಪ್ರಾರಂಭ

MD (ಮಧ್ಯಮ) ಅಥವಾ ಅಗಲವಾದ ವ್ಯೂಪೋರ್ಟ್‌ಗಳಲ್ಲಿ ಫ್ಲೋಟ್ ಪ್ರಾರಂಭ

LG ಗಾತ್ರದ (ದೊಡ್ಡದು) ಅಥವಾ ಅಗಲವಾದ ವ್ಯೂಪೋರ್ಟ್‌ಗಳಲ್ಲಿ ಫ್ಲೋಟ್ ಪ್ರಾರಂಭ

XL ಗಾತ್ರದ (ಹೆಚ್ಚುವರಿ-ದೊಡ್ಡದು) ಅಥವಾ ಅಗಲವಾದ ವ್ಯೂಪೋರ್ಟ್‌ಗಳಲ್ಲಿ ಫ್ಲೋಟ್ ಪ್ರಾರಂಭ

html
<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>

ಎಲ್ಲಾ ಬೆಂಬಲ ವರ್ಗಗಳು ಇಲ್ಲಿವೆ:

  • .float-start
  • .float-end
  • .float-none
  • .float-sm-start
  • .float-sm-end
  • .float-sm-none
  • .float-md-start
  • .float-md-end
  • .float-md-none
  • .float-lg-start
  • .float-lg-end
  • .float-lg-none
  • .float-xl-start
  • .float-xl-end
  • .float-xl-none
  • .float-xxl-start
  • .float-xxl-end
  • .float-xxl-none

ಸಾಸ್

ಉಪಯುಕ್ತತೆಗಳ API

ಫ್ಲೋಟ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ನಮ್ಮ ಉಪಯುಕ್ತತೆಗಳ API ನಲ್ಲಿ ಘೋಷಿಸಲಾಗಿದೆ scss/_utilities.scss. ಉಪಯುಕ್ತತೆಗಳ API ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ತಿಳಿಯಿರಿ.

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),