v5 میں منتقلی
بوٹسٹریپ سورس فائلوں، دستاویزات، اور اجزاء میں تبدیلیوں کو ٹریک کریں اور ان کا جائزہ لیں تاکہ آپ کو v4 سے v5 میں منتقل کرنے میں مدد ملے۔
انحصار
- jQuery کو گرا دیا گیا۔
- Popper v1.x سے Popper v2.x میں اپ گریڈ کیا گیا۔
- Libsass کو Dart Sass سے تبدیل کر دیا گیا کیونکہ ہمارے Sass مرتب کرنے والے Libsass کو فرسودہ کر دیا گیا تھا۔
- ہماری دستاویزات بنانے کے لیے جیکیل سے ہیوگو منتقل ہوئے۔
براؤزر سپورٹ
- انٹرنیٹ ایکسپلورر 10 اور 11 کو چھوڑ دیا گیا۔
- ڈراپ مائیکروسافٹ ایج <16 (لیگیسی ایج)
- فائر فاکس <60 کو چھوڑ دیا گیا۔
- گرا دیا گیا سفاری <12
- iOS Safari <12 کو چھوڑ دیا گیا۔
- کروم <60 کو چھوڑ دیا گیا۔
دستاویزی تبدیلیاں
- ہوم پیج، دستاویزات لے آؤٹ، اور فوٹر کو دوبارہ ڈیزائن کیا گیا۔
- نیا پارسل گائیڈ شامل کیا گیا۔
- Sass، عالمی ترتیب کے اختیارات، رنگ سکیمیں، CSS متغیرات، اور مزید پر نئی تفصیلات کے ساتھ، v4 کے تھیمنگ صفحہ کو تبدیل کرتے ہوئے، نیا حسب ضرورت سیکشن شامل کیا گیا۔
- تمام فارم دستاویزات کو نئے فارمز سیکشن میں دوبارہ ترتیب دیا، مواد کو مزید فوکس شدہ صفحات میں توڑ دیا۔
- اسی طرح، لے آؤٹ سیکشن کو اپ ڈیٹ کیا ، تاکہ گرڈ کے مواد کو مزید واضح طور پر ظاہر کیا جا سکے۔
- "Navs" جزو والے صفحہ کا نام بدل کر "Navs اور Tabs" رکھ دیا گیا۔
- "چیکز" صفحہ کا نام بدل کر "چیک اور ریڈیوز" رکھ دیا گیا۔
- navbar کو دوبارہ ڈیزائن کیا اور ایک نیا subnav شامل کیا تاکہ ہماری سائٹس اور دستاویزات کے ورژن کے ارد گرد جانا آسان ہو جائے۔
- تلاش کے میدان کے لیے نیا کی بورڈ شارٹ کٹ شامل کیا گیا: Ctrl + /.
سس
-
فالتو اقدار کو ہٹانا آسان بنانے کے لیے ہم نے ڈیفالٹ ساس میپ انضمام کو ختم کر دیا ہے۔ ذہن میں رکھیں کہ اب آپ کو ساس نقشوں میں تمام اقدار کی وضاحت کرنی ہوگی
$theme-colors
۔ Sass نقشوں سے نمٹنے کا طریقہ دیکھیں ۔ -
توڑنے
color-yiq()
فنکشن اور متعلقہ متغیرات کا نام تبدیل کر دیاcolor-contrast()
کیونکہ اب یہ YIQ کلر اسپیس سے متعلق نہیں ہے۔ ملاحظہ کریں نمبر 30168۔$yiq-contrasted-threshold
کا نام تبدیل کر دیا گیا ہے$min-contrast-ratio
۔$yiq-text-dark
اور$yiq-text-light
بالترتیب نام بدل کر$color-contrast-dark
اور رکھا گیا ہے$color-contrast-light
۔
-
توڑنےزیادہ منطقی نقطہ نظر کے لیے میڈیا کے استفسار کے مکسنس کے پیرامیٹرز تبدیل ہو گئے ہیں۔
media-breakpoint-down()
media-breakpoint-down(lg)
اگلے بریک پوائنٹ کی بجائے خود بریک پوائنٹ کا استعمال کرتا ہے (مثال کے طور پر،media-breakpoint-down(md)
ٹارگٹ ویو پورٹ سے چھوٹےlg
)۔- اسی طرح، میں دوسرا پیرامیٹر
media-breakpoint-between()
بھی اگلے بریک پوائنٹ کی بجائے خود بریک پوائنٹ کا استعمال کرتا ہے (مثلاً اور کے درمیان ویو پورٹس کو ٹارگٹmedia-between(sm, lg)
کرنے کی بجائے )۔media-breakpoint-between(sm, md)
sm
lg
-
توڑنے
$enable-print-styles
پرنٹ شیلیوں اور متغیر کو ہٹا دیا گیا ۔ پرنٹ ڈسپلے کلاسز اب بھی آس پاس ہیں۔ ملاحظہ کریں نمبر 28339 -
توڑنےمتغیر کے حق میں
color()
ڈراپ، اورtheme-color()
افعال ۔ ملاحظہ کریں نمبر 29083gray()
-
توڑنے
theme-color-level()
فنکشن کا نام تبدیل کر دیا گیاcolor-level()
اور اب صرف$theme-color
رنگوں کی بجائے کسی بھی رنگ کو قبول کرتا ہے۔ دیکھیں #29083 دھیان سے:color-level()
بعد میں ڈراپ کیا گیا تھاv5.0.0-alpha3
۔ -
توڑنےنام تبدیل کر دیا گیا
$enable-prefers-reduced-motion-media-query
اور اختصار کے لیے ۔$enable-pointer-cursor-for-buttons
$enable-reduced-motion
$enable-button-pointers
-
توڑنےمکسچر کو ہٹا دیا
bg-gradient-variant()
۔ تیار کردہ کلاسوں.bg-gradient
کے بجائے عناصر میں گریڈینٹ شامل کرنے کے لیے کلاس کا استعمال کریں ۔.bg-gradient-*
-
توڑنے پہلے سے فرسودہ مکسنس کو ہٹا دیا گیا:
hover
،،،، اورhover-focus
_plain-hover-focus
hover-focus-active
float()
form-control-mixin()
nav-divider()
retina-img()
text-hide()
(متعلقہ یوٹیلیٹی کلاس کو بھی گرا دیا،.text-hide
)visibility()
form-control-focus()
-
توڑنےSass کے اپنے کلر اسکیلنگ فنکشن کے ساتھ ٹکراؤ سے بچنے کے لیے
scale-color()
فنکشن کا نام تبدیل کر دیا گیا۔shift-color()
-
box-shadow
mixins اب قدروں کی اجازت دیتے ہیں اور متعدد دلائل سےnull
ڈراپ کرتے ہیں۔ ملاحظہ کریں نمبر 30394none
-
مکسین کی
border-radius()
اب ڈیفالٹ ویلیو ہے۔
رنگین نظام
-
کلر سسٹم جس کے ساتھ کام کیا گیا تھا
color-level()
اور$theme-color-interval
اسے ایک نئے رنگ سسٹم کے حق میں ہٹا دیا گیا تھا۔ ہمارے کوڈبیس میں تمامlighten()
اور فنکشنز کو اور سے بدل دیا گیا ہے۔ یہ فنکشنز رنگ کو ایک مقررہ مقدار میں ہلکا پن تبدیل کرنے کے بجائے سفید یا سیاہ کے ساتھ ملا دیں گے۔ یا تو رنگ کو رنگ یا سایہ دے گا اس پر منحصر ہے کہ آیا اس کا وزن پیرامیٹر مثبت ہے یا منفی۔ مزید تفصیلات کے لیے #30622 دیکھیں ۔darken()
tint-color()
shade-color()
shift-color()
-
ہر رنگ کے لیے نئے ٹنٹ اور شیڈز شامل کیے گئے، ہر بنیادی رنگ کے لیے نو الگ الگ رنگ فراہم کیے گئے، بطور نئے Sass متغیرات۔
-
بہتر رنگ کے برعکس۔ WCAG 2.1 AA کنٹراسٹ کو یقینی بنانے کے لیے 3:1 سے 4.5:1 تک رنگین کنٹراسٹ ریشو کو ٹکرایا اور نیلے، سبز، سیان، اور گلابی رنگوں کو اپ ڈیٹ کیا گیا۔ ہمارے رنگ کے برعکس رنگ کو سے میں تبدیل کر
$gray-900
دیا$black
۔ -
اپنے رنگوں کے نظام کو سپورٹ کرنے کے لیے، ہم نے اپنے رنگوں کو مناسب طریقے سے مکس کرنے کے لیے نئی حسب ضرورت
tint-color()
اور افعال شامل کیے ہیں۔shade-color()
گرڈ اپ ڈیٹس
-
نیا بریک پوائنٹ! کے لیے اور اوپر نیا
xxl
بریک پوائنٹ شامل1400px
کیا گیا۔ دیگر تمام بریک پوائنٹس میں کوئی تبدیلی نہیں۔ -
بہتر گٹر۔ گٹر اب ریمز میں سیٹ ہیں، اور v4 (
1.5rem
، یا تقریبا24px
، نیچے سے30px
) سے تنگ ہیں۔ یہ ہمارے گرڈ سسٹم کے گٹروں کو ہماری وقفہ کاری کی افادیت کے ساتھ سیدھ میں کرتا ہے۔- افقی/عمودی گٹروں، افقی گٹروں، اور عمودی گٹروں کو کنٹرول کرنے کے لیے نئی گٹر کلاس (
.g-*
,.gx-*
, and ) شامل کی گئی۔.gy-*
- توڑنےگٹر کی نئی افادیت سے ملنے کے لیے نام تبدیل کر دیا
.no-gutters
گیا ۔.g-0
- افقی/عمودی گٹروں، افقی گٹروں، اور عمودی گٹروں کو کنٹرول کرنے کے لیے نئی گٹر کلاس (
-
کالمز اب
position: relative
لاگو نہیں ہوئے ہیں، لہذا آپ کو.position-relative
اس رویے کو بحال کرنے کے لیے کچھ عناصر شامل کرنے پڑ سکتے ہیں۔ -
توڑنے
.order-*
کئی کلاسوں کو گرا دیا جو اکثر غیر استعمال شدہ ہوتے ہیں۔ اب ہم صرف آؤٹ آف دی باکس فراہم.order-1
کرتے ہیں۔.order-5
-
توڑنےجزو کو گرا دیا
.media
کیونکہ یہ آسانی سے افادیت کے ساتھ نقل کیا جا سکتا ہے. مثال کے لیے #28265 اور فلیکس یوٹیلیٹیز صفحہ دیکھیں ۔ -
توڑنے
bootstrap-grid.css
box-sizing: border-box
اب عالمی باکس کے سائز کو دوبارہ ترتیب دینے کے بجائے صرف کالم پر لاگو ہوتا ہے۔ اس طرح، ہمارے گرڈ اسٹائل کو بغیر کسی مداخلت کے زیادہ جگہوں پر استعمال کیا جا سکتا ہے۔ -
$enable-grid-classes
کنٹینر کلاسز کی نسل کو مزید غیر فعال نہیں کرتا ہے۔ دیکھیے نمبر 29146۔ -
make-col
مکسین کو بغیر کسی مخصوص سائز کے برابر کالموں میں ڈیفالٹ میں اپ ڈیٹ کیا ۔
مواد، ریبوٹ، وغیرہ
-
RFS اب بطور ڈیفالٹ فعال ہے۔ مکسین کا استعمال کرتے ہوئے سرخیاںکے ساتھ اپنے پیمانے پر
font-size()
ایڈجسٹ ہو جائیں گییہ خصوصیت پہلے v4 کے ساتھ آپٹ ان تھی۔font-size
-
توڑنے
$display-*
ہمارے متغیرات کو تبدیل کرنے اور$display-font-sizes
ساس نقشہ کے ساتھ ہماری ڈسپلے ٹائپوگرافی کو اوور ہال کیا ۔ ایک واحد اور ایڈجسٹ s$display-*-weight
کے لیے انفرادی متغیرات کو بھی ہٹا دیا ۔$display-font-weight
font-size
-
.display-*
سرخی کے دو نئے سائز شامل کیے گئے ،.display-5
اور.display-6
. -
لنکس کو بطور ڈیفالٹ انڈر لائن کیا جاتا ہے (صرف ہوور پر نہیں)، جب تک کہ وہ مخصوص اجزاء کا حصہ نہ ہوں۔
-
ٹیبلز کو ان کے اسٹائل کو ریفریش کرنے کے لیے دوبارہ ڈیزائن کیا گیا اور اسٹائلنگ پر مزید کنٹرول کے لیے انہیں CSS متغیرات کے ساتھ دوبارہ بنایا گیا۔
-
توڑنےنیسٹڈ ٹیبلز اب سٹائلز کا وارث نہیں ہیں۔
-
توڑنے
.thead-light
اور مختلف قسم کی کلاسوں.thead-dark
کے حق میں چھوڑ دیا گیا ہے.table-*
جو تمام ٹیبل عناصر (thead
,tbody
,tfoot
,tr
,th
andtd
) کے لیے استعمال کیا جا سکتا ہے۔ -
توڑنے
table-row-variant()
مکسین کا نام تبدیل کر دیا گیا ہے اورtable-variant()
صرف 2 پیرامیٹرز کو قبول کرتا ہے:$color
(رنگ کا نام) اور$value
(رنگ کوڈ)۔ بارڈر کا رنگ اور لہجے کے رنگ خود بخود ٹیبل فیکٹر متغیر کی بنیاد پر شمار کیے جاتے ہیں۔ -
ٹیبل سیل پیڈنگ متغیر کو
-y
اور میں تقسیم کریں-x
۔ -
توڑنےکلاس چھوڑ
.pre-scrollable
دی۔ دیکھیے نمبر 29135 -
توڑنے
.text-*
یوٹیلیٹیز اب لنکس میں ہوور اور فوکس سٹیٹس کو شامل نہیں کرتی ہیں۔.link-*
اس کے بجائے مددگار کلاسز استعمال کی جا سکتی ہیں۔ دیکھیے نمبر 29267 -
توڑنےکلاس چھوڑ
.text-justify
دی۔ دیکھیے نمبر 29793 -
ڈیفالٹ افقی
padding-left
آن<ul>
اور<ol>
عناصر کو براؤزر ڈیفالٹ سے40px
ری سیٹ کریں2rem
۔ -
شامل
$enable-smooth-scroll
کیا گیا، جو عالمی سطح پر لاگو ہوتا ہے—سوائے ان صارفین کے جو میڈیا کے استفسارscroll-behavior: smooth
کے ذریعے کم حرکت کا مطالبہ کرتے ہیں ۔ دیکھیں نمبر 31877prefers-reduced-motion
RTL
- افقی سمت کے مخصوص متغیرات، یوٹیلیٹیز، اور مکسنز کا نام تبدیل کر دیا گیا ہے تاکہ منطقی خصوصیات کو استعمال کیا جا سکے جیسا کہ فلیکس باکس لے آؤٹ میں پایا جاتا ہے—جیسے،
start
اور اور کےend
بدلے میں ۔left
right
فارمز
-
نئی تیرتی شکلیں شامل کی گئیں! ہم نے فلوٹنگ لیبلز کی مثال کو مکمل طور پر تعاون یافتہ فارم کے اجزاء میں فروغ دیا ہے۔ نئے فلوٹنگ لیبلز کا صفحہ دیکھیں۔
-
توڑنے مقامی اور اپنی مرضی کے مطابق فارم عناصر کو یکجا کیا گیا ہے۔ چیک باکسز، ریڈیوز، سلیکٹس، اور دیگر ان پٹس جن کی v4 میں مقامی اور حسب ضرورت کلاسز تھیں ان کو اکٹھا کر دیا گیا ہے۔ اب ہمارے تقریباً تمام فارم عناصر مکمل طور پر حسب ضرورت ہیں، زیادہ تر حسب ضرورت HTML کی ضرورت کے بغیر۔
.custom-check
اب.form-check
ہے.custom-check.custom-switch
اب.form-check.form-switch
ہے.custom-select
اب.form-select
ہے.custom-file
اور.form-file
اس کے اوپر اپنی مرضی کے انداز سے تبدیل کر دیا گیا ہے.form-control
۔.custom-range
اب.form-range
ہے- دیسی
.form-control-file
اور.form-control-range
.
-
توڑنےگرا دیا
.input-group-append
اور.input-group-prepend
. اب آپ صرف بٹن اور.input-group-text
ان پٹ گروپس کے براہ راست بچوں کے طور پر شامل کر سکتے ہیں۔ -
توثیق کے تاثرات والے بگ کے ساتھ ان پٹ گروپ پر دیرینہ گم شدہ سرحدی رداس کو آخر کار توثیق کے ساتھ ان پٹ گروپس میں ایک اضافی
.has-validation
کلاس شامل کرکے ٹھیک کر دیا گیا ہے۔ -
توڑنے ہمارے گرڈ سسٹم کے لیے فارم کے لیے مخصوص لے آؤٹ کلاسز کو چھوڑ دیا گیا۔ ہماری گرڈ اور یوٹیلیٹیز کو , یا کے بجائے
.form-group
استعمال.form-row
کریں.form-inline
۔ -
توڑنےفارم لیبلز کی اب ضرورت ہے
.form-label
۔ -
توڑنے
.form-text
اب سیٹ نہیں کرتاdisplay
، آپ کو صرف HTML عنصر کو تبدیل کرکے ان لائن بنانے یا مدد کے متن کو بلاک کرنے کی اجازت دیتا ہے۔ -
توثیق کی شبیہیں اب
<select>
s کے ساتھ لاگو نہیں ہوتی ہیںmultiple
۔ -
scss/forms/
ان پٹ گروپ اسٹائل سمیت، کے تحت سورس فائلوں کو دوبارہ ترتیب دیا گیا ۔
اجزاء
padding
انتباہات، بریڈ کرمبس، کارڈز، ڈراپ ڈاؤن، فہرست گروپس، ماڈلز، پاپ اوور، اور ٹول ٹپس کے لیے متحد اقدار جو ہمارے$spacer
متغیر پر مبنی ہوں۔ ملاحظہ کریں نمبر 30564
ایکارڈین
- نئے accordion جزو شامل کر دیا گیا.
انتباہات
-
انتباہات میں اب شبیہیں کے ساتھ مثالیں موجود ہیں ۔
-
<hr>
ہر الرٹ میں s کے لیے حسب ضرورت اسٹائل ہٹا دیے گئے ہیں کیونکہ وہ پہلے سے ہی استعمال کر رہے ہیںcurrentColor
۔
بیجز
-
توڑنے
.badge-*
پس منظر کی افادیت کے لیے تمام کلر کلاسز کو گرا دیا گیا (مثال کے طور پر،.bg-primary
اس کے بجائے استعمال کریں.badge-primary
)۔ -
توڑنےگرا ہوا — اس کے بجائے یوٹیلیٹی
.badge-pill
استعمال کریں۔.rounded-pill
-
توڑنے
<a>
اور<button>
عناصر کے لیے ہوور اور فوکس اسٹائل کو ہٹا دیا گیا ۔ -
.25em
/ سے /.5em
تک.35em
بیجز کے.65em
لیے ڈیفالٹ پیڈنگ میں اضافہ
بریڈ کرمبس
-
padding
,background-color
, اور کو ہٹا کر بریڈ کرمبس کی ڈیفالٹ ظاہری شکل کو آسان بنایاborder-radius
۔ -
--bs-breadcrumb-divider
سی ایس ایس کو دوبارہ کمپائل کرنے کی ضرورت کے بغیر آسان حسب ضرورت کے لیے نئی سی ایس ایس کسٹم پراپرٹی شامل کی گئی۔
بٹن
-
توڑنے ٹوگل بٹن ، چیک باکسز یا ریڈیوز کے ساتھ، اب جاوا اسکرپٹ کی ضرورت نہیں ہے اور نیا مارک اپ ہے۔ ہمیں اب ریپنگ عنصر کی ضرورت نہیں ہے، میں شامل کریں
.btn-check
،<input>
اور اسے کسی بھی.btn
کلاس<label>
۔ ملاحظہ کریں نمبر 30650 اس کے لیے دستاویزات ہمارے بٹن صفحہ سے نئے فارم سیکشن میں منتقل ہو گئی ہیں۔ -
توڑنے
.btn-block
افادیت کے لیے گرا دیا گیا۔.btn-block
پر استعمال کرنے کے بجائے ، اپنے بٹنوں کو ضرورت کے مطابق جگہ دینے کے لیے اپنے بٹنوں کو.btn
لپیٹ دیں۔ ان پر مزید کنٹرول کے لیے ریسپانسیو کلاسز پر جائیں۔ کچھ مثالوں کے لیے دستاویزات پڑھیں۔.d-grid
.gap-*
-
اضافی پیرامیٹرز کو سپورٹ کرنے کے لیے ہمارے
button-variant()
اور مکسز کو اپ ڈیٹ کیا۔button-outline-variant()
-
ہوور اور فعال حالتوں میں بڑھتے ہوئے تضاد کو یقینی بنانے کے لیے بٹنوں کو اپ ڈیٹ کیا گیا۔
-
غیر فعال بٹن اب ہیں
pointer-events: none;
.
کارڈ
-
توڑنے
.card-deck
ہمارے گرڈ کے حق میں گرا دیا . اپنے کارڈز کو کالم کلاسوں میں لپیٹیں اور کارڈ ڈیک کو دوبارہ بنانے کے لیے پیرنٹ.row-cols-*
کنٹینر شامل کریں (لیکن ریسپانسیو الائنمنٹ پر زیادہ کنٹرول کے ساتھ)۔ -
توڑنے
.card-columns
معمار کے حق میں گرا دیا ۔ ملاحظہ کریں نمبر 28922 -
توڑنے
.card
پر مبنی ایکارڈین کو ایک نئے ایکارڈین جزو سے بدل دیا گیا ۔
Carousel
-
گہرے متن، کنٹرولز، اور اشارے کے لیے نئی
.carousel-dark
قسم شامل کی گئی (ہلکے پس منظر کے لیے بہترین)۔ -
بوٹسٹریپ آئیکنز سے نئے SVGs کے ساتھ carousel کنٹرولز کے لیے شیوران آئیکنز کو تبدیل کیا گیا ۔
بٹن بند کریں۔
-
توڑنےکم عام نام کے لیے نام تبدیل کر دیا
.close
گیا ۔.btn-close
-
بند کریں بٹن اب HTML میں
background-image
a کی بجائے (ایمبیڈڈ SVG) استعمال کرتے ہیں×
، جس سے آپ کے مارک اپ کو چھونے کی ضرورت کے بغیر آسانی سے تخصیص کی اجازت ملتی ہے۔ -
نیا
.btn-close-white
ویرینٹ شامل کیا گیا جوfilter: invert(1)
گہرے پس منظر کے خلاف اعلی کنٹراسٹ برخاست آئیکنز کو فعال کرنے کے لیے استعمال کرتا ہے۔
گرنے
- accordions کے لیے اسکرول اینکرنگ کو ہٹا دیا گیا۔
ڈراپ ڈاؤن
-
آن ڈیمانڈ ڈارک ڈراپ ڈاؤنز کے لیے نئے
.dropdown-menu-dark
ویریئنٹ اور متعلقہ متغیرات شامل کیے گئے۔ -
کے لیے نیا متغیر شامل کیا گیا
$dropdown-padding-x
۔ -
بہتر کنٹراسٹ کے لیے ڈراپ ڈاؤن ڈیوائیڈر کو گہرا کر دیا۔
-
توڑنےڈراپ ڈاؤن کے لیے تمام ایونٹس اب ڈراپ ڈاؤن ٹوگل بٹن پر ٹرگر ہوتے ہیں اور پھر بنیادی عنصر تک ببل ہوتے ہیں۔
-
ڈراپ ڈاؤن مینو میں اب ایک
data-bs-popper="static"
خاصیت سیٹ ہوتی ہے جب ڈراپ ڈاؤن کی پوزیشننگ مستحکم ہوتی ہے اورdata-bs-popper="none"
جب ڈراپ ڈاؤن نیوبار میں ہوتا ہے۔ یہ ہمارے جاوا اسکرپٹ کے ذریعہ شامل کیا گیا ہے اور پوپر کی پوزیشننگ میں مداخلت کیے بغیر اپنی مرضی کے مطابق پوزیشن اسٹائل استعمال کرنے میں ہماری مدد کرتا ہے۔ -
توڑنےمقامی پوپر
flip
کنفیگریشن کے حق میں ڈراپ ڈاؤن پلگ ان کے لیے ڈراپ کردہ آپشن۔ اب آپ فلپ موڈیفائرfallbackPlacements
میں آپشن کے لیے خالی صف کو پاس کر کے فلپنگ رویے کو غیر فعال کر سکتے ہیں ۔ -
ڈراپ ڈاؤن مینو اب آٹو کلوز رویے
autoClose
کو ہینڈل کرنے کے لیے ایک نئے آپشن کے ساتھ کلک کے قابل ہو سکتا ہے ۔ آپ ڈراپ ڈاؤن مینو کے اندر یا باہر کلک کو قبول کرنے کے لیے اس اختیار کو استعمال کر سکتے ہیں تاکہ اسے انٹرایکٹو بنایا جا سکے۔ -
ڈراپ ڈاؤن اب
.dropdown-item
s میں لپیٹے ہوئے کو سپورٹ کرتے<li>
ہیں۔
جمبوٹرون
- توڑنےجمبوٹرون جزو کو گرا دیا کیونکہ اسے افادیت کے ساتھ نقل کیا جا سکتا ہے۔ ڈیمو کے لیے ہماری نئی جمبوٹرون مثال دیکھیں۔
فہرست گروپ
- فہرست گروپوں میں نیا
.list-group-numbered
ترمیم کنندہ شامل کیا گیا۔
Navs اور ٹیبز
- , , , اور کلاس میں نئے
null
متغیرات شامل کیے گئے ۔font-size
font-weight
color
:hover
color
.nav-link
نوبارس
- توڑنےNavbars کو اب اندر ایک کنٹینر کی ضرورت ہوتی ہے (اسپیسنگ کی ضروریات اور CSS کی ضرورت کو بڑی حد تک آسان بنانے کے لیے)۔
آف کینوس
- نیا آف کینوس جزو شامل کیا گیا ۔
صفحہ بندی
-
صفحہ بندی کے لنکس اب حسب ضرورت
margin-left
ہیں جو ایک دوسرے سے الگ ہونے پر تمام کونوں پر متحرک طور پر گول ہوتے ہیں۔ -
transition
صفحہ بندی کے لنکس میں s کو شامل کیا گیا۔
پاپورز
-
توڑنےہمارے ڈیفالٹ پاپ اوور ٹیمپلیٹ میں نام تبدیل کر دیا
.arrow
گیا ۔.popover-arrow
-
whiteList
آپشن کا نام تبدیل کر دیا گیاallowList
۔
اسپنرز
-
اسپنرز اب
prefers-reduced-motion: reduce
متحرک تصاویر کو کم کرکے عزت دیتے ہیں۔ ملاحظہ کریں نمبر 31882 -
بہتر اسپنر عمودی سیدھ.
ٹوسٹس
-
ٹوسٹ کو اب پوزیشننگ یوٹیلیٹیز
.toast-container
کی مدد سے ایک میں رکھا جا سکتا ہے ۔ -
ڈیفالٹ ٹوسٹ کا دورانیہ 5 سیکنڈ میں تبدیل کر دیا گیا۔
-
overflow: hidden
toasts سے ہٹا دیا اور افعال کے ساتھ مناسبborder-radius
s کے ساتھ تبدیل کر دیا.calc()
ٹول ٹپس
-
توڑنےہمارے ڈیفالٹ ٹول ٹپ ٹیمپلیٹ میں نام تبدیل کر دیا
.arrow
گیا ۔.tooltip-arrow
-
توڑنےپاپر عناصر کی بہتر جگہ کے لیے پہلے سے طے شدہ قدر کو
fallbackPlacements
تبدیل کر دیا گیا ہے ۔['top', 'right', 'bottom', 'left']
-
توڑنے
whiteList
آپشن کا نام تبدیل کر دیا گیاallowList
۔
افادیت
-
توڑنےRTL سپورٹ کے اضافے کے ساتھ دشاتمک ناموں کے بجائے منطقی پراپرٹی کے ناموں کو استعمال کرنے کے لیے کئی یوٹیلیٹیز کا نام تبدیل کر دیا گیا:
- نام تبدیل کر دیا گیا
.left-*
اور اور.right-*
سے ۔.start-*
.end-*
- نام تبدیل کر دیا گیا
.float-left
اور اور.float-right
سے ۔.float-start
.float-end
- نام تبدیل کر دیا گیا
.border-left
اور اور.border-right
سے ۔.border-start
.border-end
- نام تبدیل کر دیا گیا
.rounded-left
اور اور.rounded-right
سے ۔.rounded-start
.rounded-end
- نام تبدیل کر دیا گیا
.ml-*
اور اور.mr-*
سے ۔.ms-*
.me-*
- نام تبدیل کر دیا گیا
.pl-*
اور اور.pr-*
سے ۔.ps-*
.pe-*
- نام تبدیل کر دیا گیا
.text-left
اور اور.text-right
سے ۔.text-start
.text-end
- نام تبدیل کر دیا گیا
-
توڑنےمنفی مارجن کو بطور ڈیفالٹ غیر فعال کر دیا گیا۔
-
اضافی عناصر کے پس منظر کو تیزی سے ترتیب دینے کے لیے نئی
.bg-body
کلاس شامل کی گئی۔<body>
-
, , , اور کے لیے نئی پوزیشن کی افادیتیں شامل کی گئیں ۔ قدروں میں شامل ہیں ، اور ہر پراپرٹی کے لیے۔
top
right
bottom
left
0
50%
100%
-
افقی یا عمودی طور پر مرکز مطلق/فکسڈ پوزیشن والے عناصر میں نئی
.translate-middle-x
اور افادیتیں شامل کی گئیں۔.translate-middle-y
-
نئی
border-width
افادیتیں شامل کی گئیں ۔ -
توڑنےنام بدل کر رکھ دیا
.text-monospace
گیا.font-monospace
۔ -
توڑنےہٹا دیا گیا
.text-hide
کیونکہ یہ متن کو چھپانے کا ایک قدیم طریقہ ہے جسے اب استعمال نہیں کیا جانا چاہیے۔ -
.fs-*
افادیت کے لیے یوٹیلیٹیز شامل کیfont-size
گئی (RFS فعال کے ساتھ)۔ یہ وہی پیمانہ استعمال کرتے ہیں جیسا کہ HTML کے پہلے سے طے شدہ عنوانات (1-6، بڑے سے چھوٹے)، اور ساس نقشہ کے ذریعے ترمیم کی جا سکتی ہے۔ -
توڑنےاختصار اور مستقل مزاجی کے لیے
.font-weight-*
یوٹیلیٹیز کا نام تبدیل کر دیا گیا۔.fw-*
-
توڑنےاختصار اور مستقل مزاجی کے لیے
.font-style-*
یوٹیلیٹیز کا نام تبدیل کر دیا گیا۔.fst-*
-
CSS گرڈ اور flexbox لے آؤٹ کے لیے
.d-grid
افادیت اور نئیgap
افادیت ( ) کو ڈسپلے کرنے کے لیے شامل کیا گیا۔.gap
-
توڑنےہٹا دیا
.rounded-sm
اورrounded-lg
، اور کلاسوں کا ایک نیا پیمانہ متعارف کرایا،.rounded-0
میں.rounded-3
۔ ملاحظہ کریں نمبر 31687 -
نئی
line-height
افادیتیں شامل کی گئیں:.lh-1
,.lh-sm
,.lh-base
and.lh-lg
. یہاں دیکھیں ۔ -
.d-none
دیگر ڈسپلے یوٹیلیٹیز پر زیادہ وزن دینے کے لیے ہماری CSS میں افادیت کو منتقل کیا ۔ -
کنٹینرز پر بھی کام کرنے کے لیے
.visually-hidden-focusable
مددگار کو بڑھایا، استعمال کرتے ہوئے:focus-within
۔
مددگار
-
توڑنے ریسپانسیو ایمبیڈ ہیلپرز کا نام بدل کر ریشو ہیلپرز رکھ دیا گیا ہے جس میں کلاس کے نئے ناموں اور بہتر طرز عمل کے ساتھ ساتھ ایک مددگار CSS متغیر بھی ہے۔
- پہلوؤں کے تناسب میں تبدیل کرنے
by
کے لیے کلاسوں کا نام تبدیل کر دیا گیا ہے۔x
مثال کے طور پر،.ratio-16by9
اب ہے.ratio-16x9
. - ہم نے
.embed-responsive-item
اور عنصر گروپ سلیکٹر کو ایک آسان.ratio > *
سلیکٹر کے حق میں چھوڑ دیا ہے۔ مزید کلاس کی ضرورت نہیں ہے، اور تناسب مددگار اب کسی بھی HTML عنصر کے ساتھ کام کرتا ہے۔ $embed-responsive-aspect-ratios
ساس نقشہ کا نام تبدیل کر دیا گیا ہے اور$aspect-ratios
کلاس کا نام اور فیصد کوkey: value
بطور جوڑے شامل کرنے کے لیے اس کی اقدار کو آسان بنایا گیا ہے۔- CSS متغیرات اب تیار کیے گئے ہیں اور Sass نقشے میں ہر قدر کے لیے شامل کیے گئے ہیں۔ کسی بھی حسب ضرورت پہلو تناسب کو بنانے
--bs-aspect-ratio
کے لیے پر متغیر میں ترمیم کریں ۔.ratio
- پہلوؤں کے تناسب میں تبدیل کرنے
-
توڑنے "اسکرین ریڈر" کلاسز اب "ضعیف طور پر پوشیدہ" کلاسز ہیں ۔
- Sass فائل کو سے میں تبدیل کر دیا
scss/helpers/_screenreaders.scss
۔scss/helpers/_visually-hidden.scss
- نام تبدیل کر دیا گیا
.sr-only
اور اور.sr-only-focusable
.visually-hidden
.visually-hidden-focusable
- نام تبدیل کر کے
sr-only()
اور میں ملاsr-only-focusable()
دیتاvisually-hidden()
ہےvisually-hidden-focusable()
۔
- Sass فائل کو سے میں تبدیل کر دیا
-
bootstrap-utilities.css
اب ہمارے مددگار بھی شامل ہیں۔ مدد کرنے والوں کو اب اپنی مرضی کے مطابق تعمیرات میں درآمد کرنے کی ضرورت نہیں ہے۔
جاوا اسکرپٹ
-
jQuery انحصار کو ختم کر دیا گیا اور باقاعدہ جاوا اسکرپٹ میں پلگ ان کو دوبارہ لکھا گیا۔
-
توڑنےتمام JavaScript پلگ انز کے لیے ڈیٹا انتساب اب نام کی جگہ پر رکھا گیا ہے تاکہ بوٹسٹریپ کی فعالیت کو فریق ثالث اور آپ کے اپنے کوڈ سے ممتاز کیا جا سکے۔ مثال کے طور پر، ہم
data-bs-toggle
اس کے بجائے استعمال کرتے ہیںdata-toggle
۔ -
تمام پلگ ان اب سی ایس ایس سلیکٹر کو پہلی دلیل کے طور پر قبول کر سکتے ہیں۔ آپ پلگ ان کی ایک نئی مثال بنانے کے لیے یا تو DOM عنصر یا کوئی درست CSS سلیکٹر پاس کر سکتے ہیں:
var modal = new bootstrap.Modal('#myModal') var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
-
popperConfig
ایک فنکشن کے طور پر پاس کیا جا سکتا ہے جو بوٹسٹریپ کی ڈیفالٹ پوپر کنفیگریشن کو بطور دلیل قبول کرتا ہے، تاکہ آپ اس ڈیفالٹ کنفیگریشن کو اپنے طریقے سے ضم کر سکیں۔ ڈراپ ڈاؤن، پاپ اوور، اور ٹول ٹپس پر لاگو ہوتا ہے۔ -
Popper عناصر کی بہتر جگہ کے لیے پہلے سے طے شدہ قدر کو
fallbackPlacements
تبدیل کر دیا گیا ہے ۔ ڈراپ ڈاؤن، پاپ اوور، اور ٹول ٹپس پر لاگو ہوتا ہے۔['top', 'right', 'bottom', 'left']
-
عوامی جامد طریقوں سے انڈر سکور کو ہٹا دیا گیا جیسے
_getInstance()
→getInstance()
۔