v5 এ স্থানান্তরিত হচ্ছে
বুটস্ট্র্যাপ সোর্স ফাইল, ডকুমেন্টেশন এবং উপাদানগুলির পরিবর্তনগুলি ট্র্যাক করুন এবং পর্যালোচনা করুন যাতে আপনাকে v4 থেকে v5 তে স্থানান্তর করতে সহায়তা করে৷
নির্ভরতা
- jQuery বাদ দেওয়া হয়েছে।
- Popper v1.x থেকে Popper v2.x এ আপগ্রেড করা হয়েছে।
- লিবসাসকে ডার্ট সাস দিয়ে প্রতিস্থাপিত করা হয়েছে কারণ আমাদের সাস কম্পাইলার প্রদত্ত Libsass অবচিত হয়েছিল।
- আমাদের ডকুমেন্টেশন তৈরির জন্য জেকিল থেকে হুগোতে স্থানান্তরিত হয়েছে
ব্রাউজার সমর্থন
- ইন্টারনেট এক্সপ্লোরার 10 এবং 11 বাদ দেওয়া হয়েছে
- ড্রপড মাইক্রোসফট এজ <16 (লেগেসি এজ)
- ফায়ারফক্স <60 বাদ দেওয়া হয়েছে
- সাফারি <12 বাদ দেওয়া হয়েছে
- iOS Safari <12 বাদ দেওয়া হয়েছে
- Chrome <60 বাদ দেওয়া হয়েছে
ডকুমেন্টেশন পরিবর্তন
- পুনরায় ডিজাইন করা হোমপেজ, ডক্স লেআউট এবং ফুটার।
- নতুন পার্সেল গাইড যোগ করা হয়েছে .
- Sass, গ্লোবাল কনফিগারেশন বিকল্প, রঙের স্কিম, CSS ভেরিয়েবল এবং আরও অনেক কিছুর নতুন বিবরণ সহ v4-এর থিমিং পৃষ্ঠা প্রতিস্থাপন করে নতুন কাস্টমাইজ বিভাগ যোগ করা হয়েছে।
- সমস্ত ফর্ম ডকুমেন্টেশনকে নতুন ফর্ম বিভাগে পুনর্গঠিত করা হয়েছে, বিষয়বস্তুকে আরও ফোকাস করা পৃষ্ঠাগুলিতে বিভক্ত করে৷
- একইভাবে, গ্রিড বিষয়বস্তু আরও স্পষ্টভাবে ফুটিয়ে তুলতে লেআউট বিভাগ আপডেট করা হয়েছে।
- "Navs" উপাদান পৃষ্ঠার নাম পরিবর্তন করে "Navs এবং ট্যাব" করা হয়েছে।
- "চেকস" পৃষ্ঠার নাম পরিবর্তন করে "চেক ও রেডিও" রাখা হয়েছে।
- আমাদের সাইট এবং ডক্স সংস্করণগুলিকে আরও সহজে পেতে নেভিবারটিকে পুনরায় ডিজাইন করা হয়েছে এবং একটি নতুন সাবনাভ যুক্ত করেছে৷
- অনুসন্ধান ক্ষেত্রের জন্য নতুন কীবোর্ড শর্টকাট যোগ করা হয়েছে Ctrl + /:
সস
-
অপ্রয়োজনীয় মানগুলি সরানো সহজ করার জন্য আমরা ডিফল্ট Sass ম্যাপ মার্জগুলি বাদ দিয়েছি। মনে রাখবেন আপনাকে এখন Sass মানচিত্রের মতো সমস্ত মান সংজ্ঞায়িত করতে হবে
$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()
এবং ফাংশন। #29083 দেখুন ।gray()
-
ব্রেকিং
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
ড্রপ করে। #30394 দেখুন ।none
-
মিক্সিনের
border-radius()
এখন একটি ডিফল্ট মান রয়েছে।
রঙ সিস্টেম
-
যে রঙ সিস্টেমের সাথে কাজ করেছে
color-level()
এবং$theme-color-interval
একটি নতুন রঙের সিস্টেমের পক্ষে সরানো হয়েছে। আমাদের কোডবেসের সমস্তlighten()
এবংdarken()
ফাংশন এবং দ্বারা প্রতিস্থাপিতtint-color()
হয়shade-color()
। এই ফাংশনগুলি একটি নির্দিষ্ট পরিমাণে এর হালকাতা পরিবর্তন করার পরিবর্তে সাদা বা কালো রঙের সাথে মিশ্রিত করবে। এরshift-color()
ওজন প্যারামিটার ইতিবাচক বা নেতিবাচক কিনা তার উপর নির্ভর করে এটি একটি রঙকে আভা বা ছায়া দেবে। আরো বিস্তারিত জানার জন্য #30622 দেখুন । -
প্রতিটি রঙের জন্য নতুন টিন্ট এবং শেড যোগ করা হয়েছে, নতুন Sass ভেরিয়েবল হিসাবে প্রতিটি বেস রঙের জন্য নয়টি পৃথক রং প্রদান করে।
-
উন্নত রঙের বৈসাদৃশ্য। 3:1 থেকে 4.5:1 পর্যন্ত রঙের বৈসাদৃশ্য অনুপাত এবং WCAG 2.1 AA কন্ট্রাস্ট নিশ্চিত করতে নীল, সবুজ, সায়ান এবং গোলাপী রং আপডেট করা হয়েছে। এছাড়াও আমাদের রঙের বৈসাদৃশ্যের রঙ থেকে তে পরিবর্তন
$gray-900
করেছি$black
। -
আমাদের রঙ সিস্টেমকে সমর্থন করার জন্য, আমরা আমাদের রঙগুলিকে যথাযথভাবে মিশ্রিত করার জন্য নতুন কাস্টম
tint-color()
এবংshade-color()
ফাংশন যুক্ত করেছি।
গ্রিড আপডেট
-
নতুন ব্রেকপয়েন্ট! জন্য এবং আপ নতুন
xxl
ব্রেকপয়েন্ট যোগ করা হয়েছে.1400px
অন্য সব ব্রেকপয়েন্টে কোনো পরিবর্তন নেই। -
উন্নত নর্দমা. গটারগুলি এখন রেমগুলিতে সেট করা হয়েছে এবং v4 (
1.5rem
, বা প্রায়24px
, থেকে নীচে30px
) থেকে সরু। এটি আমাদের স্পেসিং ইউটিলিটিগুলির সাথে আমাদের গ্রিড সিস্টেমের নর্দমাগুলিকে সারিবদ্ধ করে।- অনুভূমিক/উল্লম্ব নর্দমা, অনুভূমিক নর্দমা, এবং উল্লম্ব নর্দমা নিয়ন্ত্রণ করতে নতুন নর্দমা শ্রেণী (
.g-*
,.gx-*
, এবং ) যোগ করা হয়েছে৷.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()
শিরোনামগুলি স্বয়ংক্রিয়ভাবেfont-size
ভিউপোর্টের সাথে তাদের স্কেলের সাথে সামঞ্জস্য করবে। এই বৈশিষ্ট্যটি আগে v4 এর সাথে অপ্ট-ইন করা হয়েছিল। -
ব্রেকিং
$display-*
আমাদের ভেরিয়েবল এবং একটি$display-font-sizes
Sass মানচিত্র প্রতিস্থাপন করতে আমাদের প্রদর্শন টাইপোগ্রাফি ওভারহল করা হয়েছে। এছাড়াও একটি একক এবং সামঞ্জস্য s জন্য পৃথক$display-*-weight
ভেরিয়েবল মুছে ফেলা হয়েছে.$display-font-weight
font-size
-
দুটি নতুন
.display-*
শিরোনাম মাপ যোগ করা হয়েছে,.display-5
এবং.display-6
. -
লিঙ্কগুলি ডিফল্টরূপে আন্ডারলাইন করা হয় (শুধু হোভারে নয়), যদি না সেগুলি নির্দিষ্ট উপাদানগুলির অংশ হয়৷
-
তাদের শৈলী রিফ্রেশ করতে এবং স্টাইলিংয়ের উপর আরও নিয়ন্ত্রণের জন্য CSS ভেরিয়েবলের সাথে তাদের পুনর্নির্মাণের জন্য টেবিলগুলিকে পুনরায় ডিজাইন করা হয়েছে৷
-
ব্রেকিংনেস্টেড টেবিলগুলি আর শৈলীর উত্তরাধিকারী হয় না।
-
ব্রেকিং
.thead-light
এবং বৈকল্পিক শ্রেণীর.thead-dark
পক্ষে বাদ দেওয়া হয়.table-*
যা সমস্ত টেবিল উপাদানের জন্য ব্যবহার করা যেতে পারে (thead
,tbody
,tfoot
,tr
,th
এবংtd
)। -
ব্রেকিংমিক্সিনের
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
—ব্যতীত যে ব্যবহারকারীরাprefers-reduced-motion
মিডিয়া কোয়েরির মাধ্যমে গতি কমানোর জন্য জিজ্ঞাসা করছেন। দেখুন #31877
আরটিএল
- অনুভূমিক দিকনির্দেশের নির্দিষ্ট ভেরিয়েবল, ইউটিলিটি এবং মিক্সিনগুলির নামকরণ করা হয়েছে যৌক্তিক বৈশিষ্ট্যগুলি ব্যবহার করার জন্য যেমন ফ্লেক্সবক্স লেআউটে পাওয়া যায়—যেমন,
start
এবং এবংend
এর পরিবর্তে ।left
right
ফর্ম
-
নতুন ভাসমান ফর্ম যোগ করা হয়েছে! আমরা ফ্লোটিং লেবেল উদাহরণটিকে সম্পূর্ণরূপে সমর্থিত ফর্ম উপাদানগুলিতে উন্নীত করেছি। নতুন ফ্লোটিং লেবেল পৃষ্ঠা দেখুন।
-
ব্রেকিং একত্রিত নেটিভ এবং কাস্টম ফর্ম উপাদান। চেকবক্স, রেডিও, সিলেক্ট এবং অন্যান্য ইনপুট যা ভি 4-এ নেটিভ এবং কাস্টম ক্লাস ছিল একত্রিত করা হয়েছে। এখন আমাদের প্রায় সমস্ত ফর্ম উপাদান সম্পূর্ণরূপে কাস্টম, বেশিরভাগ কাস্টম 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
উপর ভিত্তি করে সতর্কতা, ব্রেডক্রাম্ব, কার্ড, ড্রপডাউন, তালিকা গ্রুপ, মডেল, পপওভার এবং টুলটিপগুলির জন্য ইউনিফাইড মান। #30564 দেখুন ।$spacer
অ্যাকর্ডিয়ন
- নতুন অ্যাকর্ডিয়ন উপাদান যোগ করা হয়েছে ।
সতর্কতা
-
সতর্কতায় এখন আইকন সহ উদাহরণ রয়েছে ।
-
<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
CSS পুনরায় কম্পাইল করার প্রয়োজন ছাড়াই সহজ কাস্টমাইজেশনের জন্য নতুন CSS কাস্টম প্রপার্টি যোগ করা হয়েছে।
বোতাম
-
ব্রেকিং টগল বোতাম , চেকবক্স বা রেডিও সহ, জাভাস্ক্রিপ্টের আর প্রয়োজন নেই এবং নতুন মার্কআপ আছে৷ আমাদের আর একটি মোড়ানো উপাদানের প্রয়োজন নেই, তে যোগ করুন
.btn-check
এবং<input>
এটিতে যেকোনো.btn
ক্লাসের সাথে যুক্ত করুন<label>
। #30650 দেখুন । এর জন্য ডক্স আমাদের বোতাম পৃষ্ঠা থেকে নতুন ফর্ম বিভাগে সরানো হয়েছে। -
ব্রেকিং ইউটিলিটির
.btn-block
জন্য বাদ দেওয়া হয়েছে।.btn-block
ব্যবহার করার পরিবর্তে , আপনার বোতামগুলিকে প্রয়োজন অনুসারে স্থান দেওয়ার জন্য একটি ইউটিলিটি.btn
দিয়ে মোড়ানো । তাদের উপর আরও বেশি নিয়ন্ত্রণের জন্য প্রতিক্রিয়াশীল ক্লাসগুলিতে স্যুইচ করুন। কিছু উদাহরণের জন্য ডক্স পড়ুন..d-grid
.gap-*
-
অতিরিক্ত পরামিতি সমর্থন করতে আমাদের
button-variant()
এবংbutton-outline-variant()
mixins আপডেট করা হয়েছে. -
হোভার এবং সক্রিয় অবস্থায় বর্ধিত বৈসাদৃশ্য নিশ্চিত করতে আপডেট করা বোতাম।
-
অক্ষম বোতাম এখন আছে
pointer-events: none;
.
কার্ড
-
ব্রেকিংআমাদের গ্রিড
.card-deck
পক্ষে বাদ. কলাম ক্লাসে আপনার কার্ডগুলি মোড়ানো এবং.row-cols-*
কার্ড ডেকগুলি পুনরায় তৈরি করতে একটি অভিভাবক ধারক যুক্ত করুন (তবে প্রতিক্রিয়াশীল প্রান্তিককরণের উপর আরও নিয়ন্ত্রণ সহ)। -
ব্রেকিংরাজমিস্ত্রির
.card-columns
পক্ষে বাদ পড়েন। #28922 দেখুন । -
ব্রেকিং
.card
ভিত্তিক অ্যাকর্ডিয়নটিকে একটি নতুন অ্যাকর্ডিয়ন উপাদান দিয়ে প্রতিস্থাপন করা হয়েছে ।
ক্যারোসেল
-
গাঢ় পাঠ্য, নিয়ন্ত্রণ এবং সূচকগুলির জন্য নতুন
.carousel-dark
বৈকল্পিক যোগ করা হয়েছে (হালকা ব্যাকগ্রাউন্ডের জন্য দুর্দান্ত)। -
বুটস্ট্র্যাপ আইকন থেকে নতুন এসভিজি দিয়ে ক্যারোজেল নিয়ন্ত্রণের জন্য শেভরন আইকন প্রতিস্থাপন করা হয়েছে ।
ক্লোজ বোতাম
-
ব্রেকিংএকটি কম জেনেরিক নামের জন্য পুনঃনামকরণ
.close
করা হয়েছে৷.btn-close
-
ক্লোজ বোতামগুলি এখন HTML-
background-image
এর পরিবর্তে একটি (এম্বেড করা 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 তে মোড়ানো s সমর্থন করে<li>
।
জাম্বোট্রন
- ব্রেকিংজাম্বোট্রন উপাদানটি ফেলে দেওয়া হয়েছে কারণ এটি ইউটিলিটিগুলির সাথে প্রতিলিপি করা যেতে পারে। একটি ডেমো জন্য আমাদের নতুন Jumbotron উদাহরণ দেখুন.
তালিকা গ্রুপ
- তালিকা গোষ্ঠীতে নতুন
.list-group-numbered
সংশোধক যোগ করা হয়েছে।
Navs এবং ট্যাব
- , , , এবং ক্লাসের জন্য নতুন
null
ভেরিয়েবল যোগ করা হয়েছে ।font-size
font-weight
color
:hover
color
.nav-link
নভবারস
- ব্রেকিংNavbars এর মধ্যে এখন একটি ধারক প্রয়োজন (ব্যবধানের প্রয়োজনীয়তা এবং CSS প্রয়োজনীয়তাকে ব্যাপকভাবে সরলীকরণ করতে)।
অফক্যানভাস
- নতুন অফক্যানভাস উপাদান যোগ করা হয়েছে ।
পৃষ্ঠা সংখ্যা
-
পেজিনেশন লিঙ্কগুলিতে এখন কাস্টমাইজ
margin-left
করা যায় যেগুলি একে অপরের থেকে আলাদা হলে গতিশীলভাবে সমস্ত কোণে বৃত্তাকার হয়। -
transition
পেজিনেশন লিঙ্কে যোগ করা হয়েছে.
পপোভারস
-
ব্রেকিংআমাদের ডিফল্ট পপওভার টেমপ্লেটে নাম পরিবর্তন
.arrow
করা হয়েছে।.popover-arrow
-
whiteList
বিকল্পের নাম পরিবর্তন করেallowList
।
স্পিনাররা
-
স্পিনাররা এখন
prefers-reduced-motion: reduce
অ্যানিমেশনের গতি কমিয়ে সম্মান করে। #31882 দেখুন । -
উন্নত স্পিনার উল্লম্ব প্রান্তিককরণ.
টোস্ট
-
টোস্টগুলি এখন পজিশনিং ইউটিলিটিগুলির
.toast-container
সাহায্যে একটিতে স্থাপন করা যেতে পারে । -
ডিফল্ট টোস্ট সময়কাল 5 সেকেন্ডে পরিবর্তন করা হয়েছে।
-
টোস্ট থেকে সরানো হয়েছে এবং ফাংশন সহ সঠিক s দিয়ে
overflow: hidden
প্রতিস্থাপিত হয়েছে ।border-radius
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, বড় থেকে ছোট), এবং Sass মানচিত্রের মাধ্যমে পরিবর্তন করা যেতে পারে। -
ব্রেকিংসংক্ষিপ্ততা এবং ধারাবাহিকতার জন্য
.font-weight-*
ইউটিলিটিগুলির নাম পরিবর্তন করা হয়েছে।.fw-*
-
ব্রেকিংসংক্ষিপ্ততা এবং ধারাবাহিকতার জন্য
.font-style-*
ইউটিলিটিগুলির নাম পরিবর্তন করা হয়েছে।.fst-*
-
CSS গ্রিড এবং ফ্লেক্সবক্স লেআউটের জন্য
.d-grid
ইউটিলিটি এবং নতুনgap
ইউটিলিটি ( ) প্রদর্শনে যোগ করা হয়েছে।.gap
-
ব্রেকিংঅপসারণ করা হয়েছে
.rounded-sm
এবংrounded-lg
, এবং ক্লাসের একটি নতুন স্কেল প্রবর্তন.rounded-0
করেছে.rounded-3
। দেখুন #31687 । -
নতুন
line-height
ইউটিলিটি যোগ করা হয়েছে:.lh-1
,.lh-sm
,.lh-base
এবং.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
Sass মানচিত্রের নাম পরিবর্তন করা হয়েছে এবং এর$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 নির্ভরতা বাদ দেওয়া হয়েছে এবং নিয়মিত জাভাস্ক্রিপ্টে থাকা প্লাগইনগুলি পুনরায় লেখা হয়েছে৷
-
ব্রেকিংসমস্ত জাভাস্ক্রিপ্ট প্লাগইনগুলির জন্য ডেটা বৈশিষ্ট্যগুলি এখন তৃতীয় পক্ষ এবং আপনার নিজের কোড থেকে বুটস্ট্র্যাপ কার্যকারিতা আলাদা করতে সাহায্য করার জন্য নামস্থানে রাখা হয়েছে৷ উদাহরণস্বরূপ, আমরা
data-bs-toggle
এর পরিবর্তে ব্যবহার করিdata-toggle
। -
সমস্ত প্লাগইন এখন প্রথম আর্গুমেন্ট হিসাবে একটি CSS নির্বাচককে গ্রহণ করতে পারে। প্লাগইনটির একটি নতুন উদাহরণ তৈরি করতে আপনি হয় একটি DOM উপাদান বা কোনো বৈধ CSS নির্বাচক পাস করতে পারেন:
var modal = new bootstrap.Modal('#myModal') var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
-
popperConfig
একটি ফাংশন হিসাবে পাস করা যেতে পারে যা বুটস্ট্র্যাপের ডিফল্ট পপার কনফিগারেশনকে একটি যুক্তি হিসাবে গ্রহণ করে, যাতে আপনি এই ডিফল্ট কনফিগারেশনটিকে আপনার উপায়ে মার্জ করতে পারেন। ড্রপডাউন, পপোভার এবং টুলটিপগুলিতে ��্রযোজ্য। -
পপার উপাদানগুলির আরও ভাল স্থাপনের জন্য ডিফল্ট মান
fallbackPlacements
পরিবর্তন করা হয়েছে । ড্রপডাউন, পপোভার এবং টুলটিপগুলিতে প্রযোজ্য।['top', 'right', 'bottom', 'left']
-
_getInstance()
পাবলিক স্ট্যাটিক পদ্ধতি যেমন → থেকে আন্ডারস্কোর সরানো হয়েছেgetInstance()
।