স্কিপ করে মূল কন্টেন্ট এ যাও ডক্স নেভিগেশন এড়িয়ে যান
in English

ভাসা

আমাদের প্রতিক্রিয়াশীল ফ্লোট ইউটিলিটিগুলি ব্যবহার করে যে কোনও ব্রেকপয়েন্ট জুড়ে যে কোনও উপাদানে ফ্লোটগুলি টগল করুন।

ওভারভিউ

এই ইউটিলিটি ক্লাসগুলি সিএসএস floatপ্রপার্টি ব্যবহার করে বর্তমান ভিউপোর্ট সাইজের উপর ভিত্তি করে বাম বা ডানে একটি উপাদান ভাসিয়ে দেয় বা ভাসমান অক্ষম করে । !importantনির্দিষ্টতা সমস্যা এড়াতে অন্তর্ভুক্ত করা হয়. এগুলি আমাদের গ্রিড সিস্টেমের মতো একই ভিউপোর্ট ব্রেকপয়েন্ট ব্যবহার করে। অনুগ্রহ করে সচেতন হোন যে ফ্লোট ইউটিলিটিগুলি ফ্লেক্স আইটেমগুলিতে কোনও প্রভাব ফেলে না।

সমস্ত ভিউপোর্ট আকারে ফ্লোট শুরু

সমস্ত ভিউপোর্ট আকারে ফ্লোট শেষ

সমস্ত ভিউপোর্ট আকারে ভাসবেন না
<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

ফ্লোট ইউটিলিটিগুলি আমাদের ইউটিলিটি API-এ ঘোষণা করা হয়েছে scss/_utilities.scssইউটিলিটি API কীভাবে ব্যবহার করবেন তা শিখুন।

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