v5 এ স্থানান্তরিত হচ্ছে

v5.2.0

সতেজ নকশা

বুটস্ট্র্যাপ v5.2.0 প্রকল্প জুড়ে মুষ্টিমেয় কিছু উপাদান এবং বৈশিষ্ট্যের জন্য একটি সূক্ষ্ম ডিজাইন আপডেটের বৈশিষ্ট্য রয়েছে, বিশেষ border-radiusকরে বোতাম এবং ফর্ম নিয়ন্ত্রণের পরিমার্জিত মানগুলির মাধ্যমে । আমাদের ডকুমেন্টেশনটি একটি নতুন হোমপেজ, সহজ ডক্স লেআউটের সাথে আপডেট করা হয়েছে যা আর সাইডবারের বিভাগগুলিকে ভেঙে দেয় না এবং বুটস্ট্র্যাপ আইকনগুলির আরও বিশিষ্ট উদাহরণ ।

আরও CSS ভেরিয়েবল

CSS ভেরিয়েবল ব্যবহার করার জন্য আমরা আমাদের সমস্ত উপাদান আপডেট করেছি। যদিও Sass এখনও সবকিছুকে আন্ডারপিন করে, প্রতিটি উপাদানকে কম্পোনেন্ট বেস ক্লাসে CSS ভেরিয়েবল অন্তর্ভুক্ত করার জন্য আপডেট করা হয়েছে (যেমন, .btn), বুটস্ট্র্যাপের আরও রিয়েল-টাইম কাস্টমাইজেশনের অনুমতি দেয়। পরবর্তী রিলিজে, আমরা আমাদের লেআউট, ফর্ম, সাহায্যকারী এবং ইউটিলিটিগুলিতে CSS ভেরিয়েবলের ব্যবহার প্রসারিত করতে থাকব। তাদের নিজ নিজ ডকুমেন্টেশন পৃষ্ঠাগুলিতে প্রতিটি উপাদানের CSS ভেরিয়েবল সম্পর্কে আরও পড়ুন।

বুটস্ট্র্যাপ 6 পর্যন্ত আমাদের CSS ভেরিয়েবল ব্যবহার কিছুটা অসম্পূর্ণ থাকবে। যদিও আমরা এগুলিকে বোর্ড জুড়ে সম্পূর্ণরূপে প্রয়োগ করতে চাই, তারা ব্রেকিং পরিবর্তন ঘটার ঝুঁকি চালায়। উদাহরণ স্বরূপ, $alert-border-width: var(--bs-border-width)আমাদের সোর্স কোডে সেট করা আপনার নিজের কোডে সম্ভাব্য Sass ভাঙবে যদি আপনি $alert-border-width * 2কোনো কারণে করছেন।

যেমন, যেখানেই সম্ভব, আমরা আরও CSS ভেরিয়েবলের দিকে ঠেলে দেব, কিন্তু অনুগ্রহ করে স্বীকার করুন আমাদের বাস্তবায়ন v5-এ সামান্য সীমিত হতে পারে।

নতুন_maps.scss

বুটস্ট্র্যাপ v5.2.0 এর সাথে একটি নতুন Sass ফাইল চালু করেছে _maps.scss। এটি একটি সমস্যা সমাধানের জন্য বেশ কয়েকটি Sass মানচিত্র বের _variables.scssকরে যেখানে একটি মূল মানচিত্রের আপডেটগুলি সেকেন্ডারি মানচিত্রে প্রয়োগ করা হয়নি যা তাদের প্রসারিত করে। উদাহরণস্বরূপ, $theme-colorsঅন্যান্য থিম মানচিত্রের আপডেটগুলি প্রয়োগ করা হচ্ছে না যা নির্ভর করে $theme-colors, কী কাস্টমাইজেশন ওয়ার্কফ্লোগুলিকে ভেঙে দেয়৷ সংক্ষেপে, Sass এর একটি সীমাবদ্ধতা রয়েছে যেখানে একবার একটি ডিফল্ট ভেরিয়েবল বা মানচিত্র ব্যবহার করা হলে, এটি আপডেট করা যাবে না। সিএসএস ভেরিয়েবলের সাথে একই ধরনের ঘাটতি আছে যখন সেগুলি অন্যান্য সিএসএস ভেরিয়েবল রচনা করতে ব্যবহৃত হয়।

এই কারণেই বুটস্ট্র্যাপে পরিবর্তনশীল কাস্টমাইজেশনের পরে আসতে হবে @import "functions", কিন্তু আগে @import "variables"এবং আমাদের বাকি আমদানি স্ট্যাকের। একই Sass মানচিত্রের ক্ষেত্রে প্রযোজ্য- ব্যবহার করার আগে আপনাকে অবশ্যই ডিফল্টগুলি ওভাররাইড করতে হবে। নিম্নলিখিত মানচিত্রগুলিকে নতুনটিতে স্থানান্তরিত করা হয়েছে _maps.scss:

• $theme-colors-rgb
• $utilities-colors
• $utilities-text
• $utilities-text-colors
• $utilities-bg
• $utilities-bg-colors
• $negative-spacers
• $gutters

আপনার কাস্টম বুটস্ট্র্যাপ সিএসএস বিল্ডগুলি এখন একটি পৃথক মানচিত্র আমদানির সাথে এইরকম দেখতে হবে।

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

নতুন ইউটিলিটি

• সেমিবোল্ড ফন্টের জন্য অন্তর্ভুক্ত করার জন্য সম্প্রসারিত font-weightইউটিলিটি ।.fw-semibold
• আরও বিকল্পের জন্য দুটি নতুন আকার অন্তর্ভুক্ত করতে প্রসারিত ইউটিলিটিগুলি border-radius।.rounded-4.rounded-5

অতিরিক্ত পরিবর্তন

• নতুন $enable-container-classesবিকল্প চালু করা হয়েছে। — এখন পরীক্ষামূলক CSS গ্রিড লেআউট নির্বাচন করার সময়, .container-*ক্লাসগুলি এখনও কম্পাইল করা হবে, যদি না এই বিকল্পটি সেট করা হয় false। পাত্রে এখন তাদের নর্দমা মান রাখা.

• অফক্যানভাস কম্পোনেন্টে এখন প্রতিক্রিয়াশীল বৈচিত্র রয়েছে । মূল .offcanvasশ্রেণী অপরিবর্তিত থাকে—এটি সমস্ত ভিউপোর্ট জুড়ে কন্টেন্ট লুকিয়ে রাখে। এটিকে প্রতিক্রিয়াশীল করতে, সেই .offcanvasক্লাসটিকে যেকোনো .offcanvas-{sm|md|lg|xl|xxl}ক্লাসে পরিবর্তন করুন।

• মোটা টেবিল ডিভাইডার এখন অপ্ট-ইন করা হয়েছে। — আমরা টেবিল গোষ্ঠীর মধ্যে সীমানা ওভাররাইড করার জন্য মোটা এবং আরও কঠিনকে সরিয়ে দিয়েছি এবং আপনি আবেদন করতে পারেন এমন একটি ঐচ্ছিক ক্লাসে স্থানান্তরিত করেছি, .table-group-divider. একটি উদাহরণের জন্য টেবিল ডক্স দেখুন.

• Intersection Observer API ব্যবহার করার জন্য Scrollspy পুনরায় লেখা হয়েছে , যার মানে আপনার আর আপেক্ষিক প্যারেন্ট র‌্যাপার, কনফিগার অবমূল্যায়ন এবং আরও অনেক কিছুর প্রয়োজন নেইoffset। আপনার স্ক্রোলস্পি বাস্তবায়নগুলি তাদের নেভি হাইলাইটিংয়ে আরও নির্ভুল এবং সামঞ্জস্যপূর্ণ হতে দেখুন।

• পপোভার এবং টুলটিপ এখন CSS ভেরিয়েবল ব্যবহার করে। ভেরিয়েবলের সংখ্যা কমাতে কিছু CSS ভেরিয়েবল তাদের Sass প্রতিপক্ষ থেকে আপডেট করা হয়েছে। ফলস্বরূপ, এই রিলিজে তিনটি ভেরিয়েবল অবচয় করা হয়েছে: $popover-arrow-color, $popover-arrow-outer-color, এবং $tooltip-arrow-color.

• নতুন .text-bg-{color}সাহায্যকারী যোগ করা হয়েছে. স্বতন্ত্র .text-*এবং .bg-*ইউটিলিটি সেট করার পরিবর্তে, আপনি এখন বৈপরীত্য ফোরগ্রাউন্ডের সাথে সেট করতে .text-bg-*সাহায্যকারী ব্যবহার করতে পারেন ।background-colorcolor

• .form-check-reverseলেবেল এবং সংশ্লিষ্ট চেকবক্স/রেডিওর ক্রম ফ্লিপ করতে সংশোধক যোগ করা হয়েছে।

• নতুন ক্লাসের মাধ্যমে সারণিতে ডোরাকাটা কলাম সমর্থন যোগ করা হয়েছে।.table-striped-columns

পরিবর্তনের সম্পূর্ণ তালিকার জন্য, GitHub-এ v5.2.0 প্রকল্পটি দেখুন ।

v5.1.0

• CSS গ্রিড লেআউটের জন্য পরীক্ষামূলক সমর্থন যোগ করা হয়েছে । — এটি একটি কাজ চলছে, এবং এখনও উত্পাদন ব্যবহারের জন্য প্রস্তুত নয়, তবে আপনি Sass এর মাধ্যমে নতুন বৈশিষ্ট্যটি বেছে নিতে পারেন। এটি সক্ষম করতে, সেট করে ডিফল্ট গ্রিড নিষ্ক্রিয় করুন $enable-grid-classes: falseএবং সেট করে CSS গ্রিড সক্ষম করুন $enable-cssgrid: true।

• অফক্যানভাস সমর্থন করার জন্য নেভিবার আপডেট করা হয়েছে। — প্রতিক্রিয়াশীল ক্লাস এবং কিছু অফক্যানভাস মার্কআপ সহ যেকোনো নেভিবারে অফক্যানভাস ড্রয়ার যোগ করুন ।.navbar-expand-*

• নতুন স্থানধারক উপাদান যোগ করা হয়েছে . — আমাদের নতুন উপাদান, আপনার সাইট বা অ্যাপে এখনও কিছু লোড হচ্ছে তা নির্দেশ করার জন্য বাস্তব সামগ্রীর পরিবর্তে অস্থায়ী ব্লক প্রদান করার একটি উপায়।

• সংকোচন প্লাগইন এখন অনুভূমিক ভেঙে পড়া সমর্থন করে । — এর পরিবর্তে .collapse-horizontalআপনার .collapseপতন করতে যোগ করুন । একটি বা সেট করে ব্রাউজার পুনরায় রং করা এড়িয়ে চলুন ।widthheightmin-heightheight

• নতুন স্ট্যাক এবং উল্লম্ব নিয়ম সহায়ক যোগ করা হয়েছে. — স্ট্যাকগুলির সাথে দ্রুত কাস্টম লেআউট তৈরি করতে একাধিক ফ্লেক্সবক্স বৈশিষ্ট্যগুলি দ্রুত প্রয়োগ করুন ৷ অনুভূমিক ( .hstack) এবং উল্লম্ব ( .vstack) স্ট্যাক থেকে চয়ন করুন। নতুন সাহায্যকারীর<hr> সাথে উপাদানগুলির অনুরূপ উল্লম্ব বিভাজক যোগ করুন ।.vr

• নতুন গ্লোবাল :rootCSS ভেরিয়েবল যোগ করা হয়েছে। — শৈলী :rootনিয়ন্ত্রণের জন্য লেভেলে বেশ কিছু নতুন CSS ভেরিয়েবল যোগ করা হয়েছে । <body>আমাদের ইউটিলিটি এবং উপাদানগুলি সহ আরও কাজ চলছে, তবে আপাতত কাস্টমাইজ বিভাগে CSS ভেরিয়েবল পড়ুন ।

• CSS ভেরিয়েবল ব্যবহার করার জন্য ওভারহল করা রঙ এবং পটভূমি ইউটিলিটি, এবং নতুন টেক্সট অপাসিটি এবং ব্যাকগ্রাউন্ড অপাসিটি ইউটিলিটি যোগ করা হয়েছে। — .text-* এবং .bg-*ইউটিলিটিগুলি এখন CSS ভেরিয়েবল এবং rgba()রঙের মান দিয়ে তৈরি করা হয়েছে, যাতে আপনি সহজেই নতুন অস্বচ্ছতা ইউটিলিটিগুলির সাথে যেকোনো ইউটিলিটি কাস্টমাইজ করতে পারেন।

• আমাদের উপাদানগুলিকে কীভাবে কাস্টমাইজ করা যায় তা দেখানোর জন্য নতুন স্নিপেট উদাহরণ যোগ করা হয়েছে। — আমাদের নতুন স্নিপেট উদাহরণ সহ কাস্টমাইজড উপাদান এবং অন্যান্য সাধারণ ডিজাইন প্যাটার্ন ব্যবহার করার জন্য প্রস্তুত টানুন ৷ ফুটার , ড্রপডাউন , তালিকা গোষ্ঠী এবং মডেল অন্তর্ভুক্ত ।

• পপভার এবং টুলটিপগুলি থেকে অব্যবহৃত পজিশনিং শৈলীগুলি সরানো হয়েছে কারণ এগুলি সম্পূর্ণরূপে পপার দ্বারা পরিচালিত হয়৷ $tooltip-marginবঞ্চিত করা হয়েছে এবং প্রক্রিয়ায় সেট করা হয়েছে null।

আরো তথ্য চান? v5.1.0 ব্লগ পোস্ট পড়ুন.

নির্ভরতা

• 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)smlg

• ব্রেকিংমুদ্রণ শৈলী এবং $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-shadowmixins এখন মান অনুমোদন করে এবং একাধিক আর্গুমেন্ট থেকে 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.cssbox-sizing: border-boxগ্লোবাল বক্স সাইজিং রিসেট করার পরিবর্তে এখন শুধুমাত্র কলামে প্রযোজ্য । এইভাবে, আমাদের গ্রিড শৈলী হস্তক্ষেপ ছাড়াই আরও জায়গায় ব্যবহার করা যেতে পারে।

• $enable-grid-classesআর কন্টেইনার ক্লাসের প্রজন্মকে আর নিষ্ক্রিয় করে না। দেখুন #29146।

• make-colএকটি নির্দিষ্ট আকার ছাড়াই সমান কলামে ডিফল্টে মিক্সিন আপডেট করা হয়েছে ।

বিষয়বস্তু, রিবুট, ইত্যাদি

• RFS এখন ডিফল্টরূপে সক্রিয় করা হয়েছে। মিক্সিন ব্যবহার করেfont-size()শিরোনামগুলি স্বয়ংক্রিয়ভাবেfont-sizeভিউপোর্টের সাথে তাদের স্কেলের সাথে সামঞ্জস্য করবে। এই বৈশিষ্ট্যটি আগে v4 এর সাথে অপ্ট-ইন করা হয়েছিল।

• ব্রেকিং$display-*আমাদের ভেরিয়েবল এবং একটি $display-font-sizesSass মানচিত্র প্রতিস্থাপন করতে আমাদের প্রদর্শন টাইপোগ্রাফি ওভারহল করা হয়েছে। এছাড়াও একটি একক এবং সামঞ্জস্য s জন্য পৃথক $display-*-weightভেরিয়েবল মুছে ফেলা হয়েছে.$display-font-weightfont-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

• ব্রেকিং <hr>উপাদানগুলি এখন বৈশিষ্ট্যটিকে আরও ভাল সমর্থন করার heightপরিবর্তে ব্যবহার করে । এটি আরও ঘন বিভাজক তৈরি করতে প্যাডিং ইউটিলিটি ব্যবহার করতে সক্ষম করে (যেমন, )।bordersize<hr class="py-1">

• ব্রাউজার ডিফল্ট থেকে ডিফল্ট অনুভূমিক padding-leftচালু <ul>এবং <ol>উপাদানগুলি রিসেট করুন ৷40px2rem

• যোগ করা হয়েছে $enable-smooth-scroll, যা বিশ্বব্যাপী প্রযোজ্য scroll-behavior: smooth—ব্যতীত যে ব্যবহারকারীরা prefers-reduced-motionমিডিয়া কোয়েরির মাধ্যমে গতি কমানোর জন্য জিজ্ঞাসা করছেন। দেখুন #31877

আরটিএল

• অনুভূমিক দিকনির্দেশের নির্দিষ্ট ভেরিয়েবল, ইউটিলিটি এবং মিক্সিনগুলির নামকরণ করা হয়েছে যৌক্তিক বৈশিষ্ট্যগুলি ব্যবহার করার জন্য যেমন ফ্লেক্সবক্স লেআউটে পাওয়া যায়—যেমন, startএবং এবং endএর পরিবর্তে ।leftright

ফর্ম

• নতুন ভাসমান ফর্ম যোগ করা হয়েছে! আমরা ফ্লোটিং লেবেল উদাহরণটিকে সম্পূর্ণরূপে সমর্থিত ফর্ম উপাদানগুলিতে উন্নীত করেছি। নতুন ফ্লোটিং লেবেল পৃষ্ঠা দেখুন।

• ব্রেকিং একত্রিত নেটিভ এবং কাস্টম ফর্ম উপাদান। চেকবক্স, রেডিও, সিলেক্ট এবং অন্যান্য ইনপুট যা ভি 4-এ নেটিভ এবং কাস্টম ক্লাস ছিল একত্রিত করা হয়েছে। এখন আমাদের প্রায় সমস্ত ফর্ম উপাদান সম্পূর্ণরূপে কাস্টম, বেশিরভাগ কাস্টম HTML এর প্রয়োজন ছাড়াই৷

  • .custom-control.custom-checkboxএখন .form-check_
  • .custom-control.custom-custom-radioএখন .form-check_
  • .custom-control.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 উপাদান পরিবর্তন করে আপনার ইচ্ছামতো সাহায্য পাঠ্য ব্লক করতে দেয়।

• ফর্ম কন্ট্রোলগুলি আর ব্যবহার করা হয় না heightযখন সম্ভব হয় স্থির করা হয়, পরিবর্তে min-heightঅন্য উপাদানগুলির সাথে কাস্টমাইজেশন এবং সামঞ্জস্যতা উন্নত করতে স্থগিত করা হয়।

• বৈধতা আইকন আর <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-dividerCSS পুনরায় কম্পাইল করার প্রয়োজন ছাড়াই সহজ কাস্টমাইজেশনের জন্য নতুন 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"অ্যাট্রিবিউট সেট থাকে যখন ড্রপডাউনের অবস্থান স্থির থাকে বা ড্রপডাউন ন্যাভিবারে থাকে। এটি আমাদের জাভাস্ক্রিপ্ট দ্বারা যোগ করা হয়েছে এবং আমাদের পপারের অবস্থানে হস্তক্ষেপ না করে কাস্টম অবস্থান শৈলী ব্যবহার করতে সহায়তা করে।

• ব্রেকিংনেটিভ পপার flipকনফিগারেশনের পক্ষে ড্রপডাউন প্লাগইনের জন্য বাদ দেওয়া বিকল্প। আপনি এখন ফ্লিপ মডিফায়ারে fallbackPlacementsবিকল্পের জন্য একটি খালি অ্যারে পাস করে ফ্লিপিং আচরণ অক্ষম করতে পারেন।

• ড্রপডাউন মেনুগুলি এখন স্বয়ংক্রিয় বন্ধ আচরণautoClose পরিচালনা করার জন্য একটি নতুন বিকল্পের সাথে ক্লিকযোগ্য হতে পারে ৷ আপনি ড্রপডাউন মেনুর ভিতরে বা বাইরে ক্লিক করার জন্য এটিকে ইন্টারেক্টিভ করতে এই বিকল্পটি ব্যবহার করতে পারেন।

• ড্রপডাউন এখন .dropdown-items তে মোড়ানো s সমর্থন করে <li>।

জাম্বোট্রন

• ব্রেকিংজাম্বোট্রন উপাদানটি ফেলে দেওয়া হয়েছে কারণ এটি ইউটিলিটিগুলির সাথে প্রতিলিপি করা যেতে পারে। একটি ডেমো জন্য আমাদের নতুন Jumbotron উদাহরণ দেখুন.

তালিকা গ্রুপ

• তালিকা গোষ্ঠীতে নতুন .list-group-numberedসংশোধক যোগ করা হয়েছে।

Navs এবং ট্যাব

• , , , এবং ক্লাসে নতুন nullভেরিয়েবল যোগ করা হয়েছে ।font-sizefont-weightcolor:hover color.nav-link

নভবারস

• ব্রেকিংNavbars এর মধ্যে এখন একটি ধারক প্রয়োজন (ব্যবধানের প্রয়োজনীয়তা এবং CSS প্রয়োজনীয়তাকে ব্যাপকভাবে সহজ করতে)।
• ব্রেকিংক্লাসটি .activeআর s-এ প্রয়োগ করা .nav-itemযাবে না, এটি সরাসরি .nav-links-এ প্রয়োগ করতে হবে।

অফক্যানভাস

• নতুন অফক্যানভাস উপাদান যোগ করা হয়েছে ।

পৃষ্ঠা সংখ্যা

• পেজিনেশন লিঙ্কগুলিতে এখন কাস্টমাইজ margin-leftকরা যায় যেগুলি একে অপরের থেকে আলাদা হলে গতিশীলভাবে সমস্ত কোণে বৃত্তাকার হয়।

• transitionপেজিনেশন লিঙ্কে যোগ করা হয়েছে.

পপোভারস

• ব্রেকিংআমাদের ডিফল্ট পপওভার টেমপ্লেটে নাম পরিবর্তন .arrowকরা হয়েছে।.popover-arrow

• whiteListবিকল্পের নাম পরিবর্তন করে allowList।

স্পিনাররা

• স্পিনাররা এখন prefers-reduced-motion: reduceঅ্যানিমেশনের গতি কমিয়ে সম্মান করে। #31882 দেখুন ।

• উন্নত স্পিনার উল্লম্ব প্রান্তিককরণ.

টোস্ট

• টোস্টগুলি এখন পজিশনিং ইউটিলিটিগুলির.toast-container সাহায্যে একটিতে স্থাপন করা যেতে পারে ।

• ডিফল্ট টোস্ট সময়কাল 5 সেকেন্ডে পরিবর্তন করা হয়েছে।

• টোস্ট থেকে সরানো হয়েছে এবং ফাংশন সহ সঠিক s দিয়ে overflow: hiddenপ্রতিস্থাপিত হয়েছে ।border-radiuscalc()

টুলটিপস

• ব্রেকিংআমাদের ডিফল্ট টুলটিপ টেমপ্লেটে নাম পরিবর্তন .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>

• , , , এবং এর জন্য নতুন অবস্থান ইউটিলিটি যোগ করা হয়েছে । মান , , এবং প্রতিটি সম্পত্তির জন্য অন্তর্ভুক্ত।toprightbottomleft050%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-ratiosSass মানচিত্রের নাম পরিবর্তন করা হয়েছে এবং এর $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()

• bootstrap-utilities.cssএখন আমাদের সাহায্যকারীও অন্তর্ভুক্ত। হেল্পারদের আর কাস্টম বিল্ডে আমদানি করতে হবে না।

জাভাস্ক্রিপ্ট

• jQuery নির্ভরতা বাদ দেওয়া হয়েছে এবং নিয়মিত জাভাস্ক্রিপ্টে থাকা প্লাগইনগুলি পুনরায় লেখা হয়েছে৷

• ব্রেকিংসমস্ত জাভাস্ক্রিপ্ট প্লাগইনগুলির জন্য ডেটা বৈশিষ্ট্যগুলি এখন তৃতীয় পক্ষ এবং আপনার নিজের কোড থেকে বুটস্ট্র্যাপ কার্যকারিতা আলাদা করতে সাহায্য করার জন্য নামস্থানে রাখা হয়েছে৷ উদাহরণস্বরূপ, আমরা data-bs-toggleএর পরিবর্তে ব্যবহার করি data-toggle।

• সমস্ত প্লাগইন এখন প্রথম আর্গুমেন্ট হিসাবে একটি CSS নির্বাচককে গ্রহণ করতে পারে। প্লাগইনটির একটি নতুন উদাহরণ তৈরি করতে আপনি হয় একটি DOM উপাদান বা কোনো বৈধ CSS নির্বাচক পাস করতে পারেন:

  const modal = new bootstrap.Modal('#myModal')
  const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
  

• popperConfigএকটি ফাংশন হিসাবে পাস করা যেতে পারে যা বুটস্ট্র্যাপের ডিফল্ট পপার কনফিগারেশনকে একটি যুক্তি হিসাবে গ্রহণ করে, যাতে আপনি এই ডিফল্ট কনফিগারেশনটিকে আপনার উপায়ে মার্জ করতে পারেন। ড্রপডাউন, পপোভার এবং টুলটিপগুলিতে প্রযোজ্য।

• পপার উপাদানগুলির আরও ভাল স্থাপনের জন্য ডিফল্ট মান fallbackPlacementsপরিবর্তন করা হয়েছে । ড্রপডাউন, পপোভার এবং টুলটিপগুলিতে প্রযোজ্য।['top', 'right', 'bottom', 'left']

• _getInstance()পাবলিক স্ট্যাটিক পদ্ধতি যেমন → থেকে আন্ডারস্কোর সরানো হয়েছে getInstance()।