in English

স্তূপ

সংক্ষিপ্ত সাহায্যকারী যা আমাদের ফ্লেক্সবক্স ইউটিলিটিগুলির উপরে তৈরি করে কম্পোনেন্ট লেআউটকে আগের চেয়ে দ্রুত এবং সহজ করতে।

এই পৃষ্ঠায়

বুটস্ট্র্যাপে দ্রুত এবং সহজে লেআউট তৈরি করতে স্ট্যাকগুলি বেশ কয়েকটি ফ্লেক্সবক্স বৈশিষ্ট্য প্রয়োগ করার জন্য একটি শর্টকাট অফার করে। ধারণা এবং বাস্তবায়নের জন্য সমস্ত কৃতিত্ব ওপেন সোর্স পাইলন প্রকল্পের কাছে যায় ।

মাথা আপ! ফ্লেক্সবক্সের সাথে গ্যাপ ইউটিলিটিগুলির জন্য সমর্থন সম্প্রতি সাফারিতে যোগ করা হয়েছে, তাই আপনার অভিপ্রেত ব্রাউজার সমর্থন যাচাই করার কথা বিবেচনা করুন। গ্রিড লেআউটে কোন সমস্যা থাকা উচিত নয়। আরও পড়ুন

উল্লম্ব

.vstackউল্লম্ব লেআউট তৈরি করতে ব্যবহার করুন । স্ট্যাক করা আইটেমগুলি ডিফল্টরূপে পূর্ণ-প্রস্থ। .gap-*আইটেমগুলির মধ্যে স্থান যোগ করতে ইউটিলিটিগুলি ব্যবহার করুন৷

প্রথম আইটেম

দ্বিতীয় আইটেম

তৃতীয় আইটেম

html

<div class="vstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

অনুভূমিক

.hstackঅনুভূমিক লেআউটের জন্য ব্যবহার করুন । স্ট্যাক করা আইটেমগুলি ডিফল্টরূপে উল্লম্বভাবে কেন্দ্রীভূত হয় এবং শুধুমাত্র তাদের প্রয়োজনীয় প্রস্থ নেয়। .gap-*আইটেমগুলির মধ্যে স্থান যোগ করতে ইউটিলিটিগুলি ব্যবহার করুন৷

প্রথম আইটেম

দ্বিতীয় আইটেম

তৃতীয় আইটেম

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

অনুভূমিক মার্জিন ইউটিলিটিগুলি .ms-autoযেমন স্পেসার হিসাবে ব্যবহার করা:

প্রথম আইটেম

দ্বিতীয় আইটেম

তৃতীয় আইটেম

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

এবং উল্লম্ব নিয়ম সহ :

প্রথম আইটেম

দ্বিতীয় আইটেম

তৃতীয় আইটেম

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>

উদাহরণ

.vstackবোতাম এবং অন্যান্য উপাদান স্ট্যাক করতে ব্যবহার করুন :

html

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Save changes</button>
  <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>

এর সাথে একটি ইনলাইন ফর্ম তৈরি করুন .hstack:

html

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

সস

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}