Bootstrap 5 গ্রিড: বড় ডিভাইস

কোর্স সুপারিশ:

Large Device Grid Instance XSmall Small Medium Large Extra Large
XXL শ্রেণীপ্রতিকী .col- .col-sm- .col-md- .col-lg- .col-xl-
.col-xxl- সক্রিয় পরিমাপন চাপ <576px >=768px >=992px >=1200px >=1400px

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

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

কিন্তু বড় ডিভাইসে, ৩৩% / ৬৬% ভাগ করে দেওয়ানো ডিজাইন বেশি ভালো হতে পারে。

বড় ডিভাইস হল সক্রিয় পরিমাপন চাপ৯৯২ পিক্সেল থেকে ১১৯৯ পিক্সেল।

বড় ডিভাইসের জন্য আমরা .col-lg-* শ্রেণী:

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

ছোট ডিভাইসে, আপনাকে শ্রেণীটি ব্যবহার করুন -sm- এর শ্রেণী। মাঝের ডিভাইসে, আপনাকে শ্রেণীটি ব্যবহার করুন -md- এর শ্রেণী। বড় ডিভাইসে, আপনাকে শ্রেণীটি ব্যবহার করুন -lg- এর শ্রেণী。

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

প্রকল্প

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

আপনার হাতে পরীক্ষা করুন

নোট:সুনির্দিষ্ট হয়, কিন্তু সব কিছু ১২টি সংখ্যা প্রয়োগ করা হবে না (সব সংখ্যা ব্যবহার করা নয়):

লার্জ ব্যবহার করি

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

প্রকল্প

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

আপনার হাতে পরীক্ষা করুন

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

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

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

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

আপনার হাতে পরীক্ষা করুন