Bootstrap 5 ระบบเครือง

গ্রিড সিস্টেম

Bootstrap গ্রিড সিস্টেম flexbox-এর উপর ভিত্তি করে নির্মিত, এবং পাতায় সর্বোচ্চ 12টি কলা অনুমোদিত হয়。

যদি আপনি সব 12টি কলাকে এককভাবে ব্যবহার করতে চান না, তবে এই কলাগুলিকে মিলিয়ে দিয়ে আরও বড় কলা তৈরি করতে পারবেন:

গ্রিড সিস্টেম দ্রুত প্রতিক্রিয়াশীল, এবং কলাগুলি স্ক্রিন প্রস্থ অনুযায়ী স্বচ্ছতা সম্পন্নভাবে পুনর্গঠিত হয়。

নিশ্চিত করুন যে, সমগ্রটি 12-এর সমান বা কম (সব 12টি সক্রিয় করা প্রয়োজন নেই)。

গ্রিড শ্রেণী

Bootstrap 5 গ্রিড সিস্টেম দুটি শ্রেণী প্রদান করে:

  • .col- (অত্যন্ত ছোট ডিভাইস - স্ক্রিন প্রস্থ 576px-র কম)
  • .col-sm- (ছোট ডিভাইস - স্ক্রিন প্রস্থ সমান বা বড় হয় 576px বেশি)
  • .col-md- (মাঝারি ডিভাইস - স্ক্রিন প্রস্থ সমান বা বড় হয় 768px বেশি)
  • .col-lg- (বড় ডিভাইস - স্ক্রিন প্রস্থ সমান বা বড় হয় 992px বেশি)
  • .col-xl- (অত্যাধিক বড় ডিভাইস - স্ক্রিন প্রস্থ সমান বা বড় হয় 1200px বেশি)
  • .col-xxl- (অত্যাধিক বড় ডিভাইস - স্ক্রিন প্রস্থ সমান বা বড় হয় 1400px বেশি)

এই শ্রেণীগুলিকে মিলিয়ে দিয়ে আপনি আরও গতিময় এবং স্বচ্ছতা সম্পন্ন লেআউট তৈরি করতে পারবেন。

সুঝান:প্রত্যেক শ্রেণীকে আপেক্ষিকভাবে প্রসারিত করা হয়, তাই আপনি যদি sm এবং md-এর জন্য একই প্রস্থ নিতে চান, তবে আপনাকে শুধুমাত্র sm-কে নির্দিষ্ট করতে হবে。

Bootstrap 5 গ্রিডের মূল কাঠামো

এখানে Bootstrap 5 গ্রিডের মূল কাঠামো হল:

亲自试一试

第一个例子：创建一行（

）。然后，添加所需数量的列（带有 .col-*-* 类的标签）。第一颗星 (*) 代表响应度：sm、md、lg、xl 或 xxl，而第二颗星代表一个数字，每行加起来应为 12。

第二个例子：不是给每个 col 添加一个数字，而是让 bootstrap 处理布局，来创建等宽的列：两个 "col" 元素 = 每个列的 50% 宽度，而三个列 = 每个列的 33.33% 宽度。四列 = 25% 宽度等。您还可以使用 .col-sm|md|lg|xl|xxl 使列具有响应性。

网格选项

下表总结了 Bootstrap 5 网格系统如何在不同的屏幕尺寸上工作：

超小型 (<576px) 小型 (>=576px) 中型 (>=768px) 大型 (>=992px) 超大型 (>=1200px) 特大型 (>=1400px)
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
网格行为 始终水平 折叠开始，在断点之上水平 折叠开始，在断点之上水平 折叠开始，在断点之上水平 折叠开始，在断点之上水平 折叠开始，在断点之上水平
কনটেনার প্রস্থ কোনও না (auto) 540px 720px 960px 1140px 1320px
উপযোগী মোবাইল উঁচু মোবাইল পাশাপাশি ট্যাবলেট ল্যাপটপ ল্যাপটপ এবং ডেস্কটপ ল্যাপটপ এবং ডেস্কটপ
স্তম্ভের # 12 12 12 12 12 12
গাটার প্রস্থ 1.5rem (স্তম্ভের প্রত্যেক পাশে .75rem ) 1.5rem (স্তম্ভের প্রত্যেক পাশে .75rem ) 1.5rem (স্তম্ভের প্রত্যেক পাশে .75rem ) 1.5rem (স্তম্ভের প্রত্যেক পাশে .75rem ) 1.5rem (স্তম্ভের প্রত্যেক পাশে .75rem ) 1.5rem (স্তম্ভের প্রত্যেক পাশে .75rem )
এককালীন হ্যাঁ হ্যাঁ হ্যাঁ হ্যাঁ হ্যাঁ হ্যাঁ
অফসেট হ্যাঁ হ্যাঁ হ্যাঁ হ্যাঁ হ্যাঁ হ্যাঁ
স্তম্ভ ক্রমানুক্রম হ্যাঁ হ্যাঁ হ্যাঁ হ্যাঁ হ্যাঁ হ্যাঁ