পাত্রে

তারা কিভাবে কাজ করে

কন্টেইনার হল বুটস্ট্র্যাপের সবচেয়ে মৌলিক লেআউট উপাদান এবং আমাদের ডিফল্ট গ্রিড সিস্টেম ব্যবহার করার সময় প্রয়োজন হয় । কন্টেইনারগুলি ধারণ, প্যাড এবং (কখনও কখনও) তাদের মধ্যে থাকা বিষয়বস্তুকে কেন্দ্র করতে ব্যবহৃত হয়। যদিও কন্টেইনারগুলি নেস্ট করা যায়, বেশিরভাগ লেআউটে নেস্টেড কন্টেইনারের প্রয়োজন হয় না।

বুটস্ট্র্যাপ তিনটি ভিন্ন পাত্রে আসে:

• .container, যা max-widthপ্রতিটি প্রতিক্রিয়াশীল ব্রেকপয়েন্টে একটি সেট করে
• .container-fluid, যা width: 100%সব ব্রেকপয়েন্ট এ
• .container-{breakpoint}, যা width: 100%নির্দিষ্ট ব্রেকপয়েন্ট পর্যন্ত

নীচের সারণীটি ব্যাখ্যা করে যে কীভাবে প্রতিটি কন্টেইনার আসল এবং প্রতিটি ব্রেকপয়েন্ট জুড়ে max-widthতুলনা করে ।.container.container-fluid

তাদের কর্মে দেখুন এবং আমাদের গ্রিড উদাহরণে তাদের তুলনা করুন ।

ডিফল্ট ধারক

আমাদের ডিফল্ট .containerক্লাস একটি প্রতিক্রিয়াশীল, স্থির-প্রস্থের ধারক, যার অর্থ max-widthপ্রতিটি ব্রেকপয়েন্টে এর পরিবর্তন।

<div class="container">
  <!-- Content here -->
</div>

প্রতিক্রিয়াশীল পাত্রে

প্রতিক্রিয়াশীল কন্টেইনারগুলি আপনাকে নির্দিষ্ট ব্রেকপয়েন্টে না পৌঁছানো পর্যন্ত 100% প্রশস্ত একটি ক্লাস নির্দিষ্ট করতে দেয়, তারপরে আমরা max-widthউচ্চতর ব্রেকপয়েন্টগুলির প্রতিটির জন্য s প্রয়োগ করি। উদাহরণস্বরূপ, ব্রেকপয়েন্টে না পৌঁছানো .container-smপর্যন্ত শুরু করার জন্য 100% প্রশস্ত sm, যেখানে এটি md, lg, xl, এবং দিয়ে স্কেল করা হবে xxl।

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

তরল পাত্রে

.container-fluidভিউপোর্টের পুরো প্রস্থ জুড়ে পূর্ণ প্রস্থের পাত্রের জন্য ব্যবহার করুন।

<div class="container-fluid">
  ...
</div>

সস

উপরে দেখানো হিসাবে, বুটস্ট্র্যাপ আপনাকে আপনার পছন্দসই লেআউটগুলি তৈরি করতে সহায়তা করার জন্য পূর্বনির্ধারিত কন্টেইনার ক্লাসের একটি সিরিজ তৈরি করে। আপনি Sass মানচিত্র (এ পাওয়া গেছে) পরিবর্তন করে এই পূর্বনির্ধারিত কন্টেইনার ক্লাসগুলি কাস্টমাইজ করতে পারেন _variables.scssযা তাদের ক্ষমতা দেয়:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Sass কাস্টমাইজ করার পাশাপাশি, আপনি আমাদের Sass মিক্সিন দিয়ে আপনার নিজস্ব পাত্র তৈরি করতে পারেন।

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

আমাদের Sass মানচিত্র এবং ভেরিয়েবলগুলি কীভাবে সংশোধন করতে হয় সে সম্পর্কে আরও তথ্য এবং উদাহরণের জন্য, অনুগ্রহ করে গ্রিড ডকুমেন্টেশনের Sass বিভাগটি পড়ুন ।