পাত্ৰসমূহ

তেওঁলোকে কেনেকৈ কাম কৰে

ধাৰকসমূহ বুটষ্ট্ৰেপত আটাইতকৈ মৌলিক পৰিকল্পনা উপাদান আৰু আমাৰ অবিকল্পিত গ্ৰীড ব্যৱস্থাপ্ৰণালী ব্যৱহাৰ কৰাৰ সময়ত প্ৰয়োজনীয় । পাত্ৰসমূহক ইয়াৰ ভিতৰত বিষয়বস্তু ৰখা, পেড, আৰু (কেতিয়াবা) কেন্দ্ৰীভূত কৰিবলৈ ব্যৱহাৰ কৰা হয়। ধাৰকসমূহক নেষ্ট কৰিব পাৰি যদিও, বেছিভাগ পৰিকল্পনাত এটা নেষ্ট কৰা ধাৰকৰ প্ৰয়োজন নাই।

বুটষ্ট্ৰেপ তিনিটা ভিন্ন পাত্ৰৰ সৈতে আহে:

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

তলৰ তালিকাখনে দেখুৱাইছে যে প্ৰতিটো পাত্ৰৰ মূলৰ সৈতে আৰু প্ৰতিটো ব্ৰেকপইণ্টৰ ওপৰেৰে কেনেকৈ max-widthতুলনা কৰা হয় ।.container.container-fluid

সিহঁতক কাৰ্য্যত চাওক আৰু আমাৰ গ্ৰীড উদাহৰণত সিহঁতক তুলনা কৰক ।

অবিকল্পিত ধাৰক

আমাৰ অবিকল্পিত .containerশ্ৰেণীটো এটা প্ৰতিক্ৰিয়াশীল, নিৰ্দিষ্ট-প্ৰস্থৰ পাত্ৰ, অৰ্থাৎ max-widthপ্ৰতিটো ব্ৰেকপইণ্টত ইয়াৰ পৰিৱৰ্তন।

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

প্ৰতিক্ৰিয়াশীল পাত্ৰ

প্ৰতিক্ৰিয়াশীল ধাৰকসমূহে আপোনাক এটা শ্ৰেণী ধাৰ্য্য কৰাৰ অনুমতি দিয়ে যি ধাৰ্য্য কৰা ব্ৰেকপইন্টত উপনীত নোহোৱালৈকে ১০০% বহল, তাৰ পিছত আমি max-widthউচ্চ ব্ৰেকপইন্টসমূহৰ প্ৰতিটোৰ বাবে s প্ৰয়োগ কৰো। উদাহৰণস্বৰূপ, ব্ৰেকপইন্ট .container-smপোৱালৈকে আৰম্ভ কৰিবলৈ ১০০% বহল হয় , য'ত ই , , , আৰু smৰ সৈতে স্কেল আপ কৰিব ।mdlgxlxxl

<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>

ছাছ

ওপৰত দেখুৱাৰ দৰে, Bootstrap এ আপুনি বিচৰা পৰিকল্পনাসমূহ নিৰ্মাণ কৰাত সহায় কৰিবলে পূৰ্বনিৰ্ধাৰিত ধাৰক শ্ৰেণীসমূহৰ এটা শৃংখলা সৃষ্টি কৰে। আপুনি এই পূৰ্বনিৰ্ধাৰিত ধাৰক শ্ৰেণীসমূহ স্বনিৰ্বাচিত কৰিব পাৰে Sass মেপ পৰিবৰ্তন কৰি (ত পোৱা যায় _variables.scss) যি সিহতক শক্তি দিয়ে:

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

Sass কাষ্টমাইজ কৰাৰ উপৰিও আপুনি আমাৰ Sass mixin ৰ সহায়ত আপোনাৰ নিজৰ কণ্টেইনাৰ তৈয়াৰ কৰিব পাৰে।

// 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 অংশ চাওক ।