Bootstrap 5 গ্রিড: অতি ছোট ডিভাইস
- পূর্ববর্তী পৃষ্ঠা BS5 স্ট্যাক/আড়চুম্বক
- পরবর্তী পৃষ্ঠা BS5 গ্রিড সমল
অত্যন্ত ছোট ডিভাইস গ্রিড ইনস্ট্যান্স
| XSmall | ছোট | মাঝারি | বড় | অত্যন্ত বড় | XXL | |
|---|---|---|---|---|---|---|
| শ্রেণীর প্রথম বর্ণ | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| স্ক্রিন প্রস্থ | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
আমরা একটি দুই স্তম্ভ সহ একটি সাধারণ সাজানো করবো। আমরা চাই যে স্তম্ভগুলিসকলডিভাইস ভাগ 25% / 75%。
আমরা নিচের ক্যাটাগরি দুই স্তম্ভে যোগ করবো:
<div class="col-3">....</div> <div class="col-9">....</div>
এই উদাহরণটি সকল ডিভাইস (অত্যন্ত ছোট, ছোট, মাঝারি, বড়, অত্যন্ত বড় এবং বিশাল) 25% / 75% ভাগ করা হবে。
প্রমাণ
<div class="container-fluid">
<div class="row">
<div class="col-3 bg-primary">
<p>প্রকৃতির স্বাধীন ফান্ড (WWF), ১৯৬১ সালের ২৯ এপ্রিল প্রতিষ্ঠিত, তার প্রতীক একটি পাহাড়ি হিমালয়ের প্রকৃতি ...</p>
</div>
<div class="col-9 bg-dark">
<p>১৯৮০ সালে, WWF সরকারীভাবে চীনে এসেছিল, চীন সরকারের আমন্ত্রণে পাহাড়ি হিমালয়ের প্রকৃতি এবং তার বাসস্থান সুরক্ষা কাজ করতে এসেছিল ...</p>
</div>
</div>
</div>
প্রত্যাহার করুন:অনুমোদন করুন যে, মোটমূল্য 12 (সব 12টি উপলব্ধ স্তম্ভকে ব্যবহার করা নয়):
33.3% / 66.6% ভাগ করার জন্য .col-4 এবং .col-850% / 50% ভাগ করার জন্য .col-6 এবং .col-6）：
প্রমাণ
<!-- 33.3%/66.6% split -->
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-primary">
<p>প্রকৃতির স্বাধীন ফান্ড (WWF), ১৯৬১ সালের ২৯ এপ্রিল প্রতিষ্ঠিত, তার প্রতীক একটি পাহাড়ি হিমালয়ের প্রকৃতি ...</p>
</div>
<div class="col-8 bg-dark">
<p>১৯৮০ সালে, WWF সরকারীভাবে চীনে এসেছিল, চীন সরকারের আমন্ত্রণে পাহাড়ি হিমালয়ের প্রকৃতি এবং তার বাসস্থান সুরক্ষা কাজ করতে এসেছিল ...</p>
</div>
</div>
</div>
<!-- 50%/50% split -->
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-primary">
<p>প্রকৃতির স্বাধীন ফান্ড (WWF), ১৯৬১ সালের ২৯ এপ্রিল প্রতিষ্ঠিত, তার প্রতীক একটি পাহাড়ি হিমালয়ের প্রকৃতি ...</p>
</div>
<div class="col-6 bg-dark">
<p>১৯৮০ সালে, WWF সরকারীভাবে চীনে এসেছিল, চীন সরকারের আমন্ত্রণে পাহাড়ি হিমালয়ের প্রকৃতি এবং তার বাসস্থান সুরক্ষা কাজ করতে এসেছিল ...</p>
</div>
</div>
</div>
স্বচালিত লেআউট স্তম্ভ
Bootstrap 5-তে, সকল ডিভাইসের জন্য সহজভাবেএকই প্রস্থের স্তম্ভথেকে .col-* মধ্যে সংখ্যা সরিয়ে কেবল col ইউনিটে ব্যবহার করুন .col শ্রেণী। Bootstrap কতটা স্তম্ভ আছে তা পরিগণনা করবে, এবং প্রত্যেক স্তম্ভকে একই প্রস্থ প্রদান করবে:
<!-- দুই স্তম্ভ: 50% প্রস্থ --> <div class="row"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <!-- চার স্তম্ভ: 25% প্রস্থ --> <div class="row"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div>
পরবর্তী চপ্তরে কিভাবে ছোট ডিভাইসের জন্য ভিন্ন ভাগ প্রতিশত যোগ করা হবে তা দেখানো হবে。
- পূর্ববর্তী পৃষ্ঠা BS5 স্ট্যাক/আড়চুম্বক
- পরবর্তী পৃষ্ঠা BS5 গ্রিড সমল
