Bootstrap 5 গ্রিড: অত্যন্ত বড় ডিভাইস

অতিরিক্ত বড় ডিভাইসের গ্রিড ইনস্ট্যান্স

XSmall ছোট মাঝারি বড় অতিরিক্ত বড় XXL
শ্রেণীপূর্ব প্রতীক .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
স্ক্রিন প্রস্থতা <576px >=576px >=768px >=992px >=1200px >=1400px

পূর্ববর্তী চাপে, আমরা একটি গ্রিড ইনস্ট্যান্স দেখিয়েছি যা ছোট, মাঝারি এবং বড় ডিভাইসের জন্য উপযোগী শ্রেণীগুলি নিয়ে আসে। আমরা দুটি div (স্তম্ভ) ব্যবহার করেছি এবং ছোট ডিভাইসে ২৫%/৭৫% ভাগ করে, মাঝারি ডিভাইসে ৫০%/৫০% ভাগ করে, বড় ডিভাইসে ৩৩%/৬৬% ভাগ করে:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

কিন্তু xlarge ডিভাইসে ২০% / ৮০% ভাগ করের ডিজাইন উপযুক্ত হতে পারে।

অতিরিক্ত বড় ডিভাইসটি স্ক্রিন প্রস্থতা হিসাবে ১২০০ পিক্সেল বা তার উপর।

xlarge ডিভাইসের জন্য আমরা ব্যবহার করবো .col-xl-* শ্রেণী:

<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>

এই উদাহরণটি ছোট ডিভাইসে ২৫/৭৫% ভাগ করে, মাঝারি ডিভাইসে ৫০/৫০% ভাগ করে, বড় ডিভাইসে ৩৩/৬৬% ভাগ করে এবং xlarge এবং xxlarge-এ ২০/৮০% ভাগ করে। অত্যন্ত ছোট ডিভাইসে, এটি স্বয়ংক্রিয়ভাবে স্ট্যাক (১০০%) হয়:

উদাহরণ

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>বিশ্ব প্রাকৃতিক সংরক্ষণ ফাউন্ডেশন (WWF), ১৯৬১ সালের ২৯ এপ্রিল স্থাপিত, তার প্রতীক একটি বিশাল পাহাড়ী হাতি ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>১৯৮০ সালে, WWF সর্বপ্রথম চীনে আসে, চীন সরকারের আমন্ত্রণে বিশাল পাহাড়ী হাতি এবং তার আবাসস্থলের সুরক্ষা কাজ করতে এসেছে ...</p>
    </div>
  </div>
</div>

স্বয়ং প্রয়াস করুন

নোট:নিশ্চিত করুন যে সমগ্রতা সবসময় 12 হয়

শুধুমাত্র XLarge

নিচের উদাহরণে, আমরা কেবল .col-xl-6 শ্রেণী (কোনও .col-lg-*、.col-md-* এবং/বা .col-sm-*）。এর মানে এক্সলার্জ এবং এক্সক্সলার্জ ডিভাইসগুলি 50/50% ভাগ করে নেবে। কিন্তু, বড়, মাঝারি, ছোট এবং সুপার সম্পাদিত ডিভাইসের জন্য, এটি উঁচুতে স্তম্ভবর্তী হবে (100% প্রস্থ):

উদাহরণ

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>বিশ্ব প্রাকৃতিক সংরক্ষণ ফাউন্ডেশন (WWF), ১৯৬১ সালের ২৯ এপ্রিল স্থাপিত, তার প্রতীক একটি বিশাল পাহাড়ী হাতি ...</p>
    </div>
    <div class="col-xl-6">
      <p>১৯৮০ সালে, WWF সর্বপ্রথম চীনে আসে, চীন সরকারের আমন্ত্রণে বিশাল পাহাড়ী হাতি এবং তার আবাসস্থলের সুরক্ষা কাজ করতে এসেছে ...</p>
    </div>
  </div>
</div>

স্বয়ং প্রয়াস করুন

স্বয়ংক্রিয় সাজানো স্তম্ভ

Bootstrap 5-তে, সকল ডিভাইসের জন্য সমান প্রস্থের স্তম্ভ তৈরির একটি সহজ পদ্ধতি রয়েছে: শুধুমাত্র .col-xl-* সংখ্যা মুক্ত করে এবং কেবল কল ইলিমেন্টের উপর ব্যবহার করুন .col-xl শ্রেণী। ব্রাউজার সংখ্যক স্তম্ভ পরিশীল করবে এবং প্রত্যেক স্তম্ভকে একই প্রস্থ দেবে

যদি স্ক্রিনের মাপকম করে 1200pxএবং স্তম্ভগুলি অনুক্রমে স্তম্ভবর্তী হবে:

<!-- দুই স্তম্ভ: সুপার ব্যাগ বা বড় বড় ডিভাইসে 50% প্রস্থ -->
<div class="row">
  <div class="col-xl">1 of 2</div>
  <div class="col-xl">2 of 2</div>
</div>
<!-- চার স্তম্ভ: সুপার ব্যাগ বা বড় বড় ডিভাইসে 25% প্রস্থ -->
<div class="row">
  <div class="col-xl">1 of 4</div>
  <div class="col-xl">2 of 4</div>
  <div class="col-xl">3 of 4</div>
  <div class="col-xl">4 of 4</div>
</div>

স্বয়ং প্রয়াস করুন