课程表

بوت اسپین 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

بوت اسپین 5 فرم

• BS5 فرم
• BS5 选择菜单
• BS5 复选框和单选按钮
• BS5 范围
• BS5 输入组
• BS5 浮动标签
• BS5 表单验证

بوت اسپین 5 گرڈ

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

Bootstrap 5 其他

• BS5 基础模板
• BS5 测验

选修课

课程推荐：

• کدوو3 کمپنی کا سائٹ کی بیتلی

弹性框

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

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

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

نوٹ:آئی ای 9 اور اس سے پچھلے ورژن فلیکس باکس کو نہیں سپورٹ کرتے ہیں。

نوٹ:اگر آپ کا نیا بیکس آئی ای 8-9 کا سپورٹ چاہئے تو بروئسٹپ 3 استعمال کریں۔ یہ سب سے مستحکم بروئسٹپ ورژن ہے، ٹیم اب بھی اس کو کلیدی غلطیوں کی تصحیح اور دستاویزات میں تبدیلی کیلئے سپورٹ کرتی ہے، لیکن اس میں کسی نئی خصوصیت کو شامل نہیں کیا جائے گا。

مثال

کسی کا چاہئے کہ وہ فلیکس باکس کا ایند رینج کریں اور مستقیم ذریعہ فرزندوں کو فلیکس آئٹموں میں تبدیل کریں تو اس کے لئے استعمال کریں 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-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 از .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 از .flex-grow-1 باریک سے بہت زیادہ فضائی کو استعمال کرسکتا ہے۔ نیچے کے مثال میں، پہلے دو فلیکس آئٹمز ضروری فضائی کو استعمال کرتی ہیں، اور آخری آئٹم بقیہ قابل استعمال فضائی کو استعمال کرتا ہے:

مثال

<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 از .flex-shrink-1 می‌تواند آن‌ها را در صورت نیاز کوچک کند.

ترتیب

استفاده شود .order کلاس‌ها ترتیب خاصی از پروژه‌های flex را تغییر می‌دهند. کلاس‌های معتبر از 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، کنترل می‌کند که پروژه‌های flex چگونه در جعبه flex بسته‌بندی شوند.

مثال

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

خود سنجیدگی کریں

محتوا کو جگہ دینا

استفاده کریں .align-content-* کلاس کنترل تراز عمودی پروژه‌های انعطاف‌پذیر.

• .start-content-align(مقصد پر)
• .end-content-align
• .center-content-align
• .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">فلیکس آئیٹم 1</div>
  <div class="p-2 border align-self-start">فلیکس آئیٹم 2</div>
  <div class="p-2 border">فلیکس آئیٹم 3</div>
</div>

خود سنجیدگی کریں

جوابدار فلیکس کلاس

تمام فلیکس کلاسوں میں اضافی جوابدار کلاس شامل ہیں، جس سے مخصوص سکرین سائز پر مخصوص فلیکس کلاس کو سستا طور پر سیٹ کیا جاسکتا ہے

* نمبر کو sm،md،lg،xl یا xxl میں تبدیل کریں جو کوچک، وسطی، بڑا، بہت بڑا اور بہت بڑا سکرین کے طور پر پیمانہ میں استعمال کیا جاتا ہے

مخصوص فلیکس کلاس کی تلاش کریں ..

آلہ کا دکان

جاوااسکریپٹ معائنہ

سپانسر لنکس