Bootstrap 5 ក្រដាស: ឧបករណ៍តូច
- পূর্ববর্তী পৃষ্ঠা BS5 গ্রিড XXL
- পরবর্তী পৃষ্ঠা BS5 বেসিক টেমপ্লেট
আমরা নিচে Bootstrap 5 গ্রিড লেআউটের কিছু উদাহরণ সাজানো হয়েছে。
তিনটি সমান সাপেক্ষিক
সুনির্দিষ্ট সংখ্যক উপাদানের উপর ব্যবহার করুন .col শ্রেণী, Bootstrap কতটা উপাদান থাকে (এবং সমান প্রশস্ততা সাপেক্ষিক তৈরি করবে)। নিচের উদাহরণটিতে, আমরা তিনটি col উপাদান ব্যবহার করেছি, এবং প্রত্যেক উপাদানের প্রশস্ততা 33.33% হবে。
প্রতিমান
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
সংখ্যা ব্যবহারের তিনটি সমান সাপেক্ষিক
আপনি সংখ্যা ব্যবহার করে সাপেক্ষিক প্রশস্ততা নিয়ন্ত্রণ করতে পারেন। নিশ্চিত করুন যে, সমগ্রটি 12 (সব সাপেক্ষিককেই ব্যবহার করতে প্রয়োজন) বা তার কম হবে:
প্রতিমান
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
তিনটি অসমান সাপেক্ষিক
অসমান সাপেক্ষিক তৈরি করতে, আপনি সংখ্যা ব্যবহার করতে হবে। নিচের উদাহরণটি 25%/50%/25% ভাগ তৈরি করবে:
প্রতিমান
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
সাপেক্ষিক প্রশস্ততা সমাপ্ত করুন
তবে, শুধুমাত্র একটি সাপেক্ষিক প্রশস্ততা সমাপ্ত করতে পর্যাপ্ত, এবং ভাইরা সাপেক্ষিককে আসন্ন স্থান থেকে স্বচ্ছতাপূর্বক সমায়োজন করতে হবে। নিচের উদাহরণটি 25%/50%/25% ভাগ তৈরি করবে:
প্রতিমান
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
আরও সমান সাপেক্ষিক
প্রতিমান
<!-- দুইটি সমান সাপেক্ষিক --> <div class="row"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <!-- চারটি সমান সাপেক্ষিক --> <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> <!-- ছয়টি সমান সাপেক্ষিক --> <div class="row"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
Row Cols
আপনি এছাড়াও ব্যবহার করতে পারেন .row-cols-* শ্রেণী নিয়ন্ত্রককে একে অপরের পাশে থাকা সাপেক্ষিক সংখ্যা (কতটা সাপেক্ষিক থাকতো):
প্রতিমান
<div class="row row-cols-1"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <div class="row row-cols-2"> <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> <div class="row row-cols-3"> <div class="col">1 of 6</div> <div class="col">2 of 6</div> <div class="col">3 of 6</div> <div class="col">4 of 6</div> <div class="col">5 of 6</div> <div class="col">6 of 6</div> </div>
আরও অসমান সাপেক্ষিক
প্রতিমান
<!-- দুইটি অসমান সাপেক্ষিক --> <div class="row"> <div class="col-8">1 of 2</div> <div class="col-4">2 of 2</div> </div> <!-- Four unequal columns --> <div class="row"> <div class="col-2">1 of 4</div> <div class="col-2">2 of 4</div> <div class="col-2">3 of 4</div> <div class="col-6">4 of 4</div> </div> <!-- Setting two column widths --> <div class="row"> <div class="col-4">1 of 4</div> <div class="col-6">2 of 4</div> <div class="col">3 of 4</div> <div class="col">4 of 4</div> </div>
একই উঁচতা
যদি একটি কলাম অন্যটির থেকে উঁচু (টেক্সট বা CSS উঁচতা জন্য)
প্রতিমান
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
একত্রিত কলাম
এই উদাহরণটি দিয়ে দেখা যায় কিভাবে দুটি কলাম লেআউট তৈরি করা যায়, যেখানে একটি কলামে আরও দুটি কলাম রয়েছে:
প্রতিমান
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
রেসপন্সিভ শ্রেণী
Bootstrap 5 গ্রিড সিস্টেমটিতে পাঁচটি শ্রেণী রয়েছে:
.col-(সুপার সমক্ষ ডিভাইস - সমস্তরেখা প্রস্থতা ৫৭৬px থেকে কম).col-sm-(ছোট ডিভাইস - সমস্তরেখা প্রস্থতা ৫৭৬px বা বেশি).col-md-(মধ্যম ডিভাইস - সমস্তরেখা প্রস্থতা ৭৬৮ পিক্সেল বা বেশি).col-lg-(বড় ডিভাইস - সমস্তরেখা প্রস্থতা ৯৯২ পিক্সেল বা বেশি).col-xl-(এক্সলার্জ ডিভাইস - সমস্তরেখা প্রস্থতা ১২০০px বা বেশি).col-xxl-(এক্সলার্জ ডিভাইস - সমস্তরেখা প্রস্থতা ১৪০০px বা বেশি)
এই শ্রেণীগুলোকে মিলিয়ে একটি আরও গতিময় এবং নিবৃত্ত লেআউট তৈরি করা যেতে পারে。
সুঝাওয়া:প্রত্যেক শ্রেণীকে অনুপাতিকভাবে বৃদ্ধি করা হয়, তাই আপনি যদি চান তবে: sm এবং md একই প্রস্থা নির্ধারণ করতে হলে, শুধুমাত্র নির্দিষ্ট করতে হবে: sm。
স্তব্য থেকে সমক্ষ
এই উদাহরণটি দিয়ে দেখা যায় কিভাবে কলাম লেআউট তৈরি করা যায়, যা সুপার সমক্ষ ডিভাইসের জন্য স্ট্যাক (স্তব্য) হয়, এবং বড় ডিভাইস (sm, md, lg এবং xl) তে পরিমাপকৃত হয় হয়ে যায়:
প্রতিমান
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
মিক্স এবং ম্যাচ
প্রতিমান
<!-- অতি-ছোট ডিভাইসে 50%/50% বিভাজন, বড় ডিভাইসে 75%/25% বিভাজন --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- অতি-ছোট, ছোট, মাঝারি ডিভাইসে 58%/42% বিভাজন, বড় এবং অতি-বড় ডিভাইসে 66.3%/33.3% বিভাজন --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- ছোট ডিভাইসে 25%/75% বিভাজন, মাঝারি ডিভাইসে 50%/50% বিভাজন, বড় এবং অতি-বড় ডিভাইসে 33%/66% বিভাজন। অতি-ছোট ডিভাইসে, স্বচালিতভাবে স্ট্যাক (100%) হবে --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
কোনও gutter নেই
স্তম্ভের মধ্যে বিচ্ছেদ (অতিরিক্ত জায়গা) পরিবর্তন করতে, কোনও সাধারণ .g-1|2|3|4|5 শ্রেণী (.g-4 এটি ডিফল্ট মান)।
কাপড়লাইন (gutter) সম্পূর্ণভাবে মুছতে, নিচের ওয়ার্ড ব্যবহার করুন .g-0：
প্রতিমান
<div class="row g-0">
- পূর্ববর্তী পৃষ্ঠা BS5 গ্রিড XXL
- পরবর্তী পৃষ্ঠা BS5 বেসিক টেমপ্লেট
