课程表

Bootstrap 5 শিক্ষাক্রম

• BS5 教程
• BS5 入门
• BS5 容器
• BS5 网格基础
• BS5 排版
• BS5 颜色
• BS5 表格
• BS5 图像
• BS5 Jumbotron
• BS5 警告框
• BS5 按钮
• BS5 按钮组
• BS5 徽章
• BS5 进度条
• BS5 加载器
• BS5 分页
• BS5 列表组
• BS5 卡片
• BS5 下拉菜单
• BS5 折叠
• BS5 导航
• BS5 导航栏
• BS5 轮播
• BS5 模态
• BS5 工具提示
• BS5 弹出框
• BS5 Toast
• BS5 Scrollspy
• BS5 Offcanvas
• BS5 উপযোগী সাজ
• BS5 Flex

Bootstrap 5 ফর্ম

• BS5 ফর্ম
• BS5 选择菜单
• BS5 复选框和单选按钮
• BS5 范围
• BS5 输入组
• BS5 浮动标签
• BS5 表单验证

Bootstrap 5 গ্রিড

• BS5 网格系统
• BS5 堆叠/水平
• BS5 网格 XSmall
• BS5 网格 Small
• BS5 网格 Medium
• BS5 网格 Large
• BS5 网格 XLarge
• BS5 网格 XXL
• BS5 网格实例

Bootstrap 5 其他

• BS5 基础模板
• BS5 测验

选修课

课程推荐：

• CodeW3C.com কুস্তিপাত

弹性框

Bootstrap 3 和 Bootstrap 4 & 5 的最大区别在于 Bootstrap 5 现在使用 flexbox 而不是浮动来处理布局。

弹性的框布局模块，可以更轻松地设计弹性响应式布局结构，而无需使用浮动或定位。

如果您不熟悉 flex，可以在我们的 CSS Flexbox 教程 中学习。

মন্তব্য:IE9 及更早版本不支持 Flexbox。

মন্তব্য:如果您需要 IE8-9 支持，请使用 Bootstrap 3。它是最稳定的 Bootstrap 版本，团队仍然支持它进行关键错误修复和文档更改。但是不会向其中添加任何新功能。

উদাহরণ

ফ্লেক্সবক্স কন্টেনার তৈরি করতে এবং সরাসরি সাবকন্টেনারকে ফ্লেক আইটেম হিসাবে রূপান্তরিত করতে, ব্যবহার করুন d-flex শ্রেণী:}

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">ফ্লেক্স প্রক্রিয়া 1</div>
  <div class="p-2 bg-warning">ফ্লেক্স প্রক্রিয়া 2</div>
  <div class="p-2 bg-primary">ফ্লেক্স প্রক্রিয়া 3</div>
</div>

আপনার নিজের করে চেষ্টা করুন

উদাহরণ

একসাথে ফ্লেক্সবক্স কন্টেনার তৈরি করতে, ব্যবহার করুন d-inline-flex শ্রেণী:}

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">ফ্লেক্স প্রক্রিয়া 1</div>
  <div class="p-2 bg-warning">ফ্লেক্স প্রক্রিয়া 2</div>
  <div class="p-2 bg-primary">ফ্লেক্স প্রক্রিয়া 3</div>
</div>

আপনার নিজের করে চেষ্টা করুন

বিস্তৃত ভারগত

ব্যবহার করুন .flex-row সমস্ত প্রক্রিয়াকে বিস্তৃতভাবে দেখানো (একে অপরকে বাইরে দিয়ে দেখানো), এটা প্রবণ সমূহ সমূহ হল:

সুঝান:স্বয়ংক্রিয় মার্জিন ব্যবহার করে .flex-row-reverse সমস্ত প্রক্রিয়াকে ডানদিকে সমানভাবে সামান্য স্থান দিতে পারে:

উদাহরণ

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">ফ্লেক্স প্রক্রিয়া 1</div>
  <div class="p-2 bg-warning">ফ্লেক্স প্রক্রিয়া 2</div>
  <div class="p-2 bg-primary">ফ্লেক্স প্রক্রিয়া 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">ফ্লেক্স প্রক্রিয়া 1</div>
  <div class="p-2 bg-warning">ফ্লেক্স প্রক্রিয়া 2</div>
  <div class="p-2 bg-primary">ফ্লেক্স প্রক্রিয়া 3</div>
</div>

আপনার নিজের করে চেষ্টা করুন

উপরোক্ত ভারগত

ব্যবহার করুন .flex-column flex প্রক্রিয়াকে উপরোক্ত ভারগত দিয়ে দেখানো (একে অপরকে ঠিক ঠাকা করে), বা ব্যবহার করুন .flex-column-reverse উপরোক্ত ভারগত পার্থক্য বাড়ানো:

উদাহরণ

<div class="d-flex flex-column">
  <div class="p-2 bg-info">ফ্লেক্স প্রক্রিয়া 1</div>
  <div class="p-2 bg-warning">ফ্লেক্স প্রক্রিয়া 2</div>
  <div class="p-2 bg-primary">ফ্লেক্স প্রক্রিয়া 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">ফ্লেক্স প্রক্রিয়া 1</div>
  <div class="p-2 bg-warning">ফ্লেক্স প্রক্রিয়া 2</div>
  <div class="p-2 bg-primary">ফ্লেক্স প্রক্রিয়া 3</div>
</div>

আপনার নিজের করে চেষ্টা করুন

প্রক্রিয়াকে একীভূত করুন

স্বয়ংক্রিয় মার্জিন ব্যবহার করে .justify-content-* শ্রেণী এলাস্টিক প্রক্রিয়ার অবস্থান পরিবর্তন করতে পারে।কার্যকরী শ্রেণী হল:：

• start（ডিফল্ট）
• end
• center
• between
• around

উদাহরণ

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

আপনার নিজের করে চেষ্টা করুন

একই প্রস্থ

ফ্লেক্স প্রক্রিয়ায় .flex-fill তাদের একই প্রস্থ করা যেতে পারে:

উদাহরণ

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">এলাস্টিক প্রক্রিয়া 1</div>
  <div class="p-2 bg-warning flex-fill">এলাস্টিক প্রক্রিয়া 2</div>
  <div class="p-2 bg-primary flex-fill">এলাস্টিক প্রক্রিয়া 3</div>
</div>

আপনার নিজের করে চেষ্টা করুন

স্থান বাড়ানো

ফ্লেক্স প্রক্রিয়ায় .flex-grow-1 অতিরিক্ত জায়গা ব্যবহার করা যেতে পারে।নিচের উদাহরণে, প্রথম দুই flex প্রক্রিয়া প্রয়োজনীয় জায়গা দিয়েছে, এবং শেষটি বাকি উপলব্ধ জায়গা দিয়েছে:

উদাহরণ

<div class="d-flex">
  <div class="p-2 bg-info">ফ্লেক্স প্রক্রিয়া 1</div>
  <div class="p-2 bg-warning">ফ্লেক্স প্রক্রিয়া 2</div>
  <div class="p-2 bg-primary flex-grow-1">ফ্লেক্স প্রক্রিয়া 3</div>
</div>

আপনার নিজের করে চেষ্টা করুন

সুঝান:ফ্লেক্স প্রক্রিয়ায় .flex-shrink-1 যদি প্রয়োজন হয় তবে তা সামঞ্জস্যপূর্ণভাবে সক্ষম হতে পারে。

ক্রম

স্বয়ংক্রিয় মার্জিন ব্যবহার করে .order শ্রেণীগুলি নির্দিষ্ট ফ্লেক্স প্রক্রিয়াকে দৃশ্যমান ক্রমবিন্যাস পরিবর্তন করতে পারে। কার্যকরী শ্রেণীগুলি 0 থেকে 5 পর্যন্ত, যেখানে সর্বনিম্ন সংখ্যাটি সর্বোচ্চ প্রাথমিকতা পায় (order-1, order-2-র আগে দেখা যায়):

উদাহরণ

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">ফ্লেক্স প্রক্রিয়া 1</div>
  <div class="p-2 bg-warning order-2">ফ্লেক্স প্রক্রিয়া 2</div>
  <div class="p-2 bg-primary order-1">ফ্লেক্স প্রক্রিয়া 3</div>
</div>

আপনার নিজের করে চেষ্টা করুন

স্বয়ংক্রিয় বাহ্যিক মার্জিন

স্বয়ংক্রিয় মার্জিন ব্যবহার করে .ms-auto（প্রক্রিয়াকে ডানে এগিয়ে নিয়ে যায়）বা .me-auto（প্রক্রিয়াকে ডানে এগিয়ে নিয়ে যায়）ফ্লেক্স প্রক্রিয়াগুলিকে স্বয়ংক্রিয় মার্জিন যোগ করার জন্য সহজ:

উদাহরণ

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">ফ্লেক্স প্রক্রিয়া 1</div>
  <div class="p-2 bg-warning">ফ্লেক্স প্রক্রিয়া 2</div>
  <div class="p-2 bg-primary">ফ্লেক্স প্রক্রিয়া 3</div>
</div>
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">ফ্লেক্স প্রক্রিয়া 1</div>
  <div class="p-2 bg-warning">ফ্লেক্স প্রক্রিয়া 2</div>
  <div class="p-2 me-auto bg-primary">ফ্লেক্স প্রক্রিয়া 3</div>
</div>

আপনার নিজের করে চেষ্টা করুন

পার্শ্বস্থ লাইন

দ্বারা .flex-nowrap（ডিফল্ট）、.flex-wrap বা .flex-wrap-reverseযা ফ্লেক্স কনটেনারে ফ্লেক্স প্রক্রিয়াকরণকে নিয়ন্ত্রণ করে。

উদাহরণ

<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>

আপনার নিজের করে চেষ্টা করুন

প্রক্রিয়াকে একীভূত করুন

ব্যবহার করুন .align-content-* শৃঙ্গীতক উপাদানগুলির ভিক্তিগত সামান্যতা নিয়ন্ত্রণ করে। কার্যকরী শ্রেণীগুলি হল:

• .align-content-start（ডিফল্ট）
• .align-content-end
• .align-content-center
• .align-content-between
• .align-content-around
• .align-content-stretch

মন্তব্য:এই শ্রেণীগুলি একলীন অলঙ্কৃত এলাকার উপর কোন প্রভাব পাবে না。

নিচের বাটনটি ক্লিক করে, একলীন এলাকার বর্গীয় অবস্থান পরিবর্তন করে পাঁচটি শ্রেণীর মধ্যে পার্থক্য দেখুন:

উদাহরণ

<div class="d-flex flex-wrap align-content-start">..</div>
<div class="d-flex flex-wrap align-content-end">..</div>
<div class="d-flex flex-wrap align-content-center">..</div>
<div class="d-flex flex-wrap align-content-around">..</div>
<div class="d-flex flex-wrap align-content-stretch">..</div>

আপনার নিজের করে চেষ্টা করুন

প্রক্রিয়াকে একীভূত করুন

ব্যবহার করুন .align-items-* শ্রেণী নিয়ন্ত্রণএকলীনঅলঙ্কৃত এলাকার বর্গীয় অবস্থান

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch（ডিফল্ট）

নিচের বাটনটি ক্লিক করে পাঁচটি শ্রেণীর মধ্যে পার্থক্য দেখুন:

উদাহরণ

<div class="d-flex align-items-start">..</div>
<div class="d-flex align-items-end">..</div>
<div class="d-flex align-items-center">..</div>
<div class="d-flex align-items-baseline">..</div>
<div class="d-flex align-items-stretch">..</div>

আপনার নিজের করে চেষ্টা করুন

স্ববর্গীয় অবস্থান

ব্যবহার করুন .align-self-* শ্রেণী নিয়ন্ত্রণঅলঙ্কৃত এলাকা নির্দিষ্ট করুনবর্গীয় মানুষের বর্গীয় অবস্থান

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch（ডিফল্ট）

নিচের বাটনটি ক্লিক করে পাঁচটি শ্রেণীর মধ্যে পার্থক্য দেখুন：

উদাহরণ

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">ফ্লেক্স আইটেম ১</div>
  <div class="p-2 border align-self-start">ফ্লেক্স আইটেম ২</div>
  <div class="p-2 border">ফ্লেক্স আইটেম ৩</div>
</div>

আপনার নিজের করে চেষ্টা করুন

রেসপন্সিভ ফ্লেক্স শ্রেণী

সব গতিশীল শ্রেণীতে অতিরিক্ত প্রতিক্রিয়া শ্রেণী আছে যা বিশেষ স্ক্রিন পরিমাপের উপর গতিশীল শ্রেণী নিয়ে সহজ করে

* সংকেতটি সম্পূর্ণরূপে sm, md, lg, xl বা xxl হতে পারে যা ছোট, মধ্যম, বড়, বড় এবং খুব বড় স্ক্রিনকে নির্দেশ করে

বিশেষ গতিশীল শ্রেণী সংক্রান্ত অনুসন্ধান করুন ..

টুলস অ্যাক্স

JavaScript পরীক্ষা

এসপন্সর লিঙ্ক