Bootstrap 5 গ্রিড: মাঝারি ডিভাইস

মাঝারি ডিভাইসের গ্রিড ইনস্ট্যান্স

XSmall Small Medium Large Extra Large XXL
শ্রেণীর প্রতীক .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
স্ক্রিন প্রস্থ <576px >=576px >=768px >=992px >=1200px >=1400px

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

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

কিন্তু মাঝারি ডিভাইসে, ৫০% / ৫০% ভাগ করে দেওয়ার ডিজাইনটি ভালো হতে পারে。

মাঝারি ডিভাইসকে স্ক্রিন প্রস্থ হিসাবে নির্দিষ্ট করা হয়৭৬৮ পিক্সেল থেকে ৯৯১ পিক্সেলব্যবহার করবো

মাঝারি ডিভাইসের জন্য আমরা .col-md-* শ্রেণীঃ

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

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

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

ইনস্ট্যান্স

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

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

নোট:সমষ্টির পরিমাণ ১২ এর সমান বা কম হবে (সব দুইটি উপলব্ধ সারি ব্যবহার করা নয়):

মাঝারি ব্যবহার করি

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

ইনস্ট্যান্স

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

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

স্বয়ংক্রিয় সারি সাজা

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

যদি স্ক্রিন মাপকম করে 768pxএকত্রিত হবে:

<!-- দুই সারি: মাঝারির উপর সময়ে 50% প্রস্থ -->
<div class="row">
  <div class="col-md">1 of 2</div>
  <div class="col-md">2 of 2</div>
</div>
<!-- চার সারি: মাঝারির উপর সময়ে 25% প্রস্থ -->
<div class="row">
  <div class="col-md">1 of 4</div>
  <div class="col-md">2 of 4</div>
  <div class="col-md">3 of 4</div>
  <div class="col-md">4 of 4</div>
</div>

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

পরবর্তী চিঠিতে বিশাল ডিভাইসের জন্য ভিন্ন ভাগ প্রতিশতকে যোগ করার কিভাবন দেখানো হবে。