ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
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,
      )
    ),