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

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

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

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

জাম্বোট্রন

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

তালিকা গ্রুপ

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

Navs এবং ট্যাব

• , , , এবং ক্লাসে নতুন nullভেরিয়েবল যোগ করা হয়েছে ।font-sizefont-weightcolor: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-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 নির্বাচক পাস করতে পারেন:

  কপি

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

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

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

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