মূল বিষয়বস্তুলৈ এৰি যাওক নথিপত্ৰ নেভিগেচনলৈ এৰি যাওক
in English

উপঙি থকা

যিকোনো উপাদানত, যিকোনো ব্ৰেকপইণ্টৰ ওপৰেৰে, আমাৰ প্ৰতিক্ৰিয়াশীল ফ্ল'ট সঁজুলিসমূহ ব্যৱহাৰ কৰি ফ্ল'টসমূহ টগল কৰক।

অভাৰভিউ

এই সঁজুলি শ্ৰেণীসমূহে এটা উপাদান বাওঁফালে বা সোঁফালে ভাসমান কৰে, বা ভাসমান নিষ্ক্ৰিয় কৰে, CSS floatবৈশিষ্ট্য ব্যৱহাৰ কৰি বৰ্তমান দৰ্শনপৰ্ট আকাৰৰ ওপৰত ভিত্তি কৰি । !importantনিৰ্দিষ্টতাৰ সমস্যাৰ পৰা হাত সাৰিবলৈ অন্তৰ্ভুক্ত কৰা হৈছে। এইবোৰে আমাৰ গ্ৰীড চিষ্টেমৰ দৰে একেটা ভিউপৰ্ট ব্ৰেকপইণ্ট ব্যৱহাৰ কৰে। অনুগ্ৰহ কৰি সচেতন হওক float utilities ৰ flex বস্তুৰ ওপৰত কোনো প্ৰভাৱ নাই।

সকলো ভিউপৰ্ট আকাৰত ফ্ল'ট আৰম্ভ

সকলো ভিউপৰ্ট আকাৰত ফ্ল'ট এণ্ড

সকলো ভিউপৰ্ট আকাৰত ওপঙি নাযাব
<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 (অতিৰিক্ত-বৃহৎ) বা বহল আকাৰৰ দৰ্শনপৰ্টসমূহত ফ্ল'ট আৰম্ভ

<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 ত ঘোষণা কৰা হৈছে scss/_utilities.scss. সঁজুলি API কেনেকৈ ব্যৱহাৰ কৰিব লাগে শিকিব।

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