പ്രധാന ഉള്ളടക്കത്തിലേക്ക് പോകുക ഡോക്സ് നാവിഗേഷനിലേക്ക് പോകുക
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,
      )
    ),