v5 লৈ প্ৰব্ৰজন কৰা হৈছে

v৫.২.০

সতেজ ডিজাইন

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

অধিক CSS চলক

আমি আমাৰ সকলো উপাদান CSS চলক ব্যৱহাৰ কৰিবলৈ আপডেট কৰিছো। Sass এ এতিয়াও সকলো আধাৰত ৰাখিলেও, প্ৰতিটো উপাদানক উপাদান ভিত্তি শ্ৰেণীসমূহত CSS চলকসমূহ অন্তৰ্ভুক্ত কৰিবলে আপডেইট কৰা হৈছে (যেনে, .btn), Bootstrap ৰ অধিক বাস্তৱ-সময় স্বনিৰ্বাচনৰ অনুমতি দি । পৰৱৰ্তী উন্মোচনসমূহত, আমি আমাৰ পৰিকল্পনা, প্ৰপত্ৰ, সহায়ক, আৰু সঁজুলিসমূহত CSS চলকসমূহৰ আমাৰ ব্যৱহাৰ প্ৰসাৰিত কৰি যাম। প্ৰতিটো উপাদানত CSS চলকসমূহৰ বিষয়ে অধিক পঢ়ক সিহতৰ নিজ নিজ আলেখ্যন পৃষ্ঠাসমূহত।

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

তেনেদৰে, য'তেই সম্ভৱ, আমি অধিক CSS চলকসমূহৰ দিশত ঠেলি দি যাম, কিন্তু অনুগ্ৰহ কৰি স্বীকাৰ কৰক যে আমাৰ প্ৰণয়ন v5 ত অলপ সীমিত হ'ব পাৰে।

নতুন_maps.scss

Bootstrap v5.2.0 এ এটা নতুন Sass নথিপত্ৰ প্ৰৱৰ্তন কৰিলে _maps.scss. ই এটা সমস্যা সমাধান কৰিবলৈ কেইবাটাও Sass মেপ উলিয়াই আনে _variables.scssয'ত এটা মূল মেপলৈ আপডেইটসমূহ সিহতক সম্প্ৰসাৰিত কৰা গৌণ মেপসমূহত প্ৰয়োগ কৰা হোৱা নাছিল। উদাহৰণস্বৰূপ, আপডেইটসমূহ $theme-colorsঅন্য থিম মেপসমূহত প্ৰয়োগ কৰা হোৱা নাছিল যি ৰ ওপৰত নিৰ্ভৰ কৰিছিল $theme-colors, চাবি স্বনিৰ্বাচন কাৰ্য্যপ্ৰবাহসমূহ ভংগ কৰি। মুঠতে, Sass ৰ এটা সীমাবদ্ধতা আছে য'ত এবাৰ এটা অবিকল্পিত চলক বা মেপ ব্যৱহাৰ কৰা হ'লে, ইয়াক আপডেইট কৰিব নোৱাৰি। CSS চলকসমূহৰ সৈতেও একেধৰণৰ অভাৱ আছে যেতিয়া ইয়াক অন্য CSS চলকসমূহ ৰচনা কৰিবলৈ ব্যৱহাৰ কৰা হয়।

এই কাৰণেই Bootstrap ত ভেৰিয়েবল কাষ্টমাইজেচনসমূহ ৰ পিছত আহিব লাগিব @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

আপোনাৰ স্বনিৰ্বাচিত Bootstrap CSS নিৰ্মাণসমূহ এতিয়া এটা পৃথক মেপ আমদানিৰ সৈতে এনেকুৱা কিবা এটা দেখা যাব লাগে ।

  // 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। এটা উদাহৰণৰ বাবে টেবুল নথিপত্ৰ চাওক।

• Scrollspy ক Intersection Observer API ব্যৱহাৰ কৰিবলে পুনৰায় লিখা হৈছে , যাৰ অৰ্থ হৈছে আপুনি আৰু আপেক্ষিক অভিভাৱক ৰেপাৰৰ প্ৰয়োজন নাই,offsetবিন্যাস অস্বীকাৰ কৰে, আৰু অধিক। আপোনাৰ Scrollspy প্ৰণয়নসমূহ সিহতৰ nav হাইলাইটিংত অধিক সঠিক আৰু সুসংগত হ'বলৈ বিচাৰক।

• Popovers আৰু টুলটিপসমূহে এতিয়া CSS চলকসমূহ ব্যৱহাৰ কৰে। কিছুমান CSS চলকক ইয়াৰ Sass সমকক্ষৰ পৰা আপডেট কৰা হৈছে যাতে চলকৰ সংখ্যা হ্ৰাস পায়। ফলস্বৰূপে, এই উন্মোচনত তিনিটা চলক অবচিত কৰা হৈছে: $popover-arrow-color, $popover-arrow-outer-color, আৰু $tooltip-arrow-color।

• নতুন .text-bg-{color}সহায়ক যোগ কৰা হৈছে। .text-*ব্যক্তিগত আৰু সঁজুলিসমূহ সংহতি কৰাৰ পৰিবৰ্তে .bg-*, আপুনি এতিয়া সহায়কসমূহ ব্যৱহাৰ কৰিব পাৰে এটা বিপৰীতমুখী.text-bg-*background-color অগ্ৰভূমিৰ সৈতে সংহতি কৰিবলে color।

• .form-check-reverseলেবেলসমূহ আৰু সংশ্লিষ্ট চেকবাকচসমূহ/ৰেডিঅ'সমূহৰ ক্ৰম ফ্লিপ কৰিবলে পৰিবৰ্তক যোগ কৰা হৈছে।

• নতুন শ্ৰেণীৰ যোগেদি টেবুলসমূহলে সমৰ্থন ডাঠ স্তম্ভসমূহ যোগ কৰা হৈছে।.table-striped-columns

পৰিবৰ্তনৰ এটা সম্পূৰ্ণ তালিকাৰ বাবে, GitHub ত v5.2.0 প্ৰকল্প চাওক ।

v৫.১.০

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

• অফকেনভাছ সমৰ্থন কৰিবলে navbars আপডেইট কৰা হৈছে। — প্ৰতিক্ৰিয়াশীল শ্ৰেণীসমূহ আৰু কিছুমান অফকেনভাছ মাৰ্কআপৰ সৈতে যিকোনো navbar ত অফকেনভাছ ড্ৰয়াৰসমূহ যোগ কৰক ।.navbar-expand-*

• নতুন স্থানধাৰী উপাদান যোগ কৰা হৈছে । — আমাৰ নতুন উপাদান, আপোনাৰ চাইট বা এপত এতিয়াও কিবা এটা লোড হৈ আছে বুলি ইংগিত দিবলৈ প্ৰকৃত বিষয়বস্তুৰ পৰিৱৰ্তে অস্থায়ী ব্লক প্ৰদান কৰাৰ এটা উপায়।

• সংকুচিত প্লাগ-ইন এতিয়া অনুভূমিক সংকোচন সমৰ্থন কৰে । — ৰ পৰিৱৰ্তে টো সংকুচিত .collapse-horizontalকৰিবলৈ আপোনাৰ লগত যোগ কৰক । a বা সংহতি কৰি ব্ৰাউজাৰ পুনৰ ৰং কৰা এৰক ।.collapsewidthheightmin-heightheight

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

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

• CSS চলকসমূহ ব্যৱহাৰ কৰিবলে ৰং আৰু পটভূমি সঁজুলিসমূহ অভাৰহ'ল কৰা হৈছে, আৰু নতুন লিখনী অস্পষ্টতা আৰু পটভূমি অস্পষ্টতা সঁজুলিসমূহ যোগ কৰা হৈছে। — .text-* আৰু .bg-*সঁজুলিসমূহ এতিয়া CSS চলকসমূহ আৰু rgba()ৰঙৰ মানসমূহৰ সৈতে নিৰ্মিত, আপোনাক নতুন অস্পষ্টতা সঁজুলিসমূহৰ সৈতে যিকোনো সঁজুলিক সহজে স্বনিৰ্বাচিত কৰাৰ অনুমতি দিয়ে।

• আমাৰ উপাদানসমূহ কেনেকৈ কাষ্টমাইজ কৰিব লাগে দেখুৱাবলৈ ভিত্তি কৰি নতুন স্নিপেট উদাহৰণ যোগ কৰা হৈছে। — আমাৰ নতুন স্নিপেটসমূহ উদাহৰণসমূহৰ সৈতে স্বনিৰ্বাচিত উপাদানসমূহ আৰু অন্য সাধাৰণ ডিজাইন আৰ্হিসমূহ ব্যৱহাৰ কৰিবলৈ প্ৰস্তুত টানিব । ফুটাৰ , ড্ৰপডাউন , তালিকা গোট , আৰু মডাল অন্তৰ্ভুক্ত কৰে।

• popovers আৰু টুলটিপসমূহৰ পৰা অব্যৱহৃত পজিচনিং শৈলীসমূহ আঁতৰোৱা হৈছে কাৰণ এইবোৰ কেৱল Popper দ্বাৰা নিয়ন্ত্ৰণ কৰা হয়। $tooltip-marginপ্ৰক্ৰিয়াত অপ্ৰয়োগ কৰা হৈছে আৰু ছেট কৰা হৈছে null।

অধিক তথ্য বিচাৰেনে? v5.1.0 ব্লগ পোষ্টটো পঢ়ক।

নিৰ্ভৰশীলতাসমূহ

• jQuery বাদ দিলে।
• Popper v1.x ৰ পৰা Popper v2.x লৈ উন্নয়ন কৰা হৈছে।
• Libsass ৰ সলনি Dart Sass ৰ সৈতে সলনি কৰা হ'ল কাৰণ আমাৰ Sass কম্পাইলাৰক Libsass দিয়া হৈছিল অপ্ৰয়োজন কৰা হৈছিল।
• আমাৰ নথিপত্ৰ নিৰ্মাণৰ বাবে Jekyll ৰ পৰা Hugo লৈ প্ৰব্ৰজন কৰা হৈছে

ব্ৰাউজাৰ সমৰ্থন

• ইণ্টাৰনেট এক্সপ্ল’ৰাৰ ১০ আৰু ১১ বাদ দিলে
• ড্ৰপ কৰা হৈছে মাইক্ৰ'ছফ্ট এজ < 16 (লিগেচি এজ)
• ফায়াৰফক্স < 60 বাদ দিয়া হৈছে
• ড্ৰপ কৰা হৈছে ছাফাৰী < 12
• ড্ৰপ কৰা হৈছে iOS Safari < 12
• ড্ৰপ কৰা হৈছে Chrome < 60

নথিপত্ৰ সলনি হয়

• পুনৰ নিৰ্মাণ কৰা হোমপেজ, নথিপত্ৰ বিন্যাস, আৰু ফুটাৰ।
• নতুন পাৰ্চেল গাইড যোগ কৰা হৈছে ।
• নতুন স্বনিৰ্বাচিত অংশ যোগ কৰা হৈছে, v4 ৰ থিমিং পৃষ্ঠা সলনি কৰি, Sass, গোলকীয় বিন্যাস বিকল্পসমূহ, ৰঙৰ আঁচনিসমূহ, CSS চলকসমূহ, আৰু অধিকত নতুন বিৱৰণৰ সৈতে।
• সকলো প্ৰপত্ৰ নথিপত্ৰক নতুন প্ৰপত্ৰ অংশত পুনৰ সংগঠিত কৰা হৈছে , বিষয়বস্তুক অধিক কেন্দ্ৰীভূত পৃষ্ঠাসমূহত বিভাজিত কৰি।
• একেদৰে, পৰিকল্পনা অংশ আপডেইট কৰা হৈছে , গ্ৰীড বিষয়বস্তু অধিক স্পষ্টভাৱে মাংস আউট কৰিবলে।
• “Navs” উপাদান পৃষ্ঠাক “Navs & Tabs” লৈ পুনৰ নামকৰণ কৰা হৈছে।
• “Checks” পৃষ্ঠাক “Checks & radios” লৈ পুনৰ নামকৰণ কৰা হৈছে।
• আমাৰ চাইটসমূহ আৰু নথিপত্ৰসমূহ সংস্কৰণসমূহৰ চাৰিওফালে সহজে যাবলৈ navbar পুনৰ ডিজাইন কৰা হৈছে আৰু এটা নতুন subnav যোগ কৰা হৈছে।
• সন্ধান ক্ষেত্ৰৰ বাবে নতুন কিবৰ্ড চৰ্টকাট যোগ কৰা হৈছে: Ctrl + /.

ছাছ

• আমি অবিকল্পিত Sass মেপ মাৰ্জসমূহ ডিচ কৰিছো যাতে অতিৰিক্ত মানসমূহ আঁতৰোৱাটো সহজ হয়। মনত ৰাখিব আপুনি এতিয়া Sass মেপসমূহত সকলো মান সংজ্ঞায়িত কৰিব লাগিব যেনে $theme-colors. Sass মেপৰ সৈতে কেনেকৈ মোকাবিলা কৰিব লাগে চাওক ।

• ব্ৰেকিং কৰাcolor-yiq()ফাংচন আৰু সম্পৰ্কীয় চলকসমূহক পুনৰনামকৰণ কৰা হৈছে color-contrast()কাৰণ ই YIQ ৰঙৰ স্থানৰ সৈতে আৰু সম্পৰ্কিত নহয় । #৩০১৬৮ চাওক।

  • $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চলক আঁতৰোৱা হৈছে। প্ৰিন্ট প্ৰদৰ্শন শ্ৰেণীসমূহ এতিয়াও আছে। #২৮৩৩৯ চাওক ।

• ব্ৰেকিং কৰাড্ৰপ কৰা হৈছে color(), theme-color(), আৰু 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ড্ৰপ কৰে। #৩০৩৯৪ চাওক ।none

• মিক্সিনৰ এতিয়া border-radius()এটা অবিকল্পিত মান আছে।

ৰঙৰ ব্যৱস্থা

• ৰং ব্যৱস্থা যিয়ে কাম কৰিছিল color-level()আৰু $theme-color-intervalনতুন ৰঙৰ ব্যৱস্থাৰ সপক্ষে আঁতৰাই পেলোৱা হৈছিল। আমাৰ ক'ডবেছত থকা সকলো lighten()আৰু ফাংচনসমূহ আৰু দ্বাৰা সলনি কৰা হৈছে । এই ফাংচনসমূহে ৰংটোক নিৰ্দিষ্ট পৰিমাণে লঘুতা সলনি কৰাৰ পৰিৱৰ্তে বগা বা ক’লা ৰঙৰ সৈতে মিহলাই দিব। ইয়াৰ ওজনৰ প্ৰাচল ধনাত্মক বা ঋণাত্মক হোৱাৰ ওপৰত নিৰ্ভৰ কৰি এটা ৰং টিন্ট বা ছাঁ দিব। অধিক জানিবলৈ #30622 চাওক ।darken()tint-color()shade-color()shift-color()

• প্ৰতিটো ৰঙৰ বাবে নতুন টিন্ট আৰু শ্বেড যোগ কৰা হৈছে, প্ৰতিটো ভিত্তি ৰঙৰ বাবে নটা পৃথক ৰং প্ৰদান কৰি, নতুন Sass চলক হিচাপে।

• উন্নত ৰঙৰ কনট্ৰাষ্ট। 3:1 ৰ পৰা 4.5:1 লৈ বাম্প কৰা ৰঙৰ কনট্ৰাষ্ট অনুপাত আৰু WCAG 2.1 AA কনট্ৰাষ্ট নিশ্চিত কৰিবলৈ নীলা, সেউজীয়া, চাইয়ান, আৰু গোলাপী ৰং আপডেট কৰা হৈছে। লগতে আমাৰ ৰঙৰ কনট্ৰাষ্ট ৰং সলনি $gray-900কৰি $black.

• আমাৰ ৰং ব্যৱস্থাপ্ৰণালী সমৰ্থন কৰিবলৈ, আমি আমাৰ ৰংসমূহ উপযুক্তভাৱে মিহলাবলৈ নতুন কাষ্টম tint-color()আৰু ফাংচনসমূহ যোগ কৰিছো।shade-color()

গ্ৰীড আপডেটসমূহ

• নতুন ব্ৰেকপইন্ট! আৰু আপৰ বাবে নতুন xxlব্ৰেকপইণ্ট যোগ কৰা হৈছে। 1400pxআন সকলো ব্ৰেকপইণ্টত কোনো পৰিৱৰ্তন নহয়।

• উন্নত নালা। 1.5remনালাসমূহ এতিয়া rems ত সংহতি কৰা হৈছে, আৰু v4 ( , বা প্ৰায় 24px, ৰ পৰা তললৈ ) তকৈ সংকীৰ্ণ 30px। ই আমাৰ গ্ৰীড ব্যৱস্থাৰ নালাসমূহক আমাৰ স্পেচিং ইউটিলিটিসমূহৰ সৈতে প্ৰান্তিককৰণ কৰে।

  • অনুভূমিক/উলম্ব নালা, অনুভূমিক নালা, আৰু উলম্ব নালা নিয়ন্ত্ৰণ কৰিবলে নতুন নালা শ্ৰেণী ( .g-*, .gx-*, আৰু ) যোগ কৰা হৈছে।.gy-*
  • ব্ৰেকিং কৰানতুন নালা সঁজুলিসমূহৰ সৈতে মিলাবলৈ পুনৰ নামকৰণ .no-guttersকৰা হৈছে।.g-0

• স্তম্ভসমূহ আৰু প্ৰযোজ্য হোৱা নাই , গতিকে সেই আচৰণ পুনৰুদ্ধাৰ কৰিবলে position: relativeআপুনি কিছুমান উপাদানত যোগ কৰিব লাগিব ।.position-relative

• ব্ৰেকিং কৰাপ্ৰায়ে অব্যৱহৃত হৈ যোৱা কেইবাটাও .order-*ক্লাছ বাদ দিলে। আমি এতিয়া কেৱল আউট অৱ দ্য বক্সৰ বাবেহে প্ৰদান .order-1কৰোঁ ।.order-5

• ব্ৰেকিং কৰাউপাদানটো বাদ দিলে .mediaকাৰণ ইয়াক সঁজুলিসমূহৰ সৈতে সহজে প্ৰতিলিপি কৰিব পাৰি। এটা উদাহৰণৰ বাবে #28265 আৰু flex সঁজুলিসমূহ পৃষ্ঠা চাওক ।

• ব্ৰেকিং কৰা bootstrap-grid.cssbox-sizing: border-boxএতিয়া কেৱল গোলকীয় বাকচ-আকাৰ পুনৰায় সেট কৰাৰ পৰিবৰ্তে স্তম্ভত প্ৰযোজ্য । এইদৰে আমাৰ গ্ৰীড শৈলীসমূহ অধিক ঠাইত হস্তক্ষেপ নোহোৱাকৈ ব্যৱহাৰ কৰিব পাৰি।

• $enable-grid-classesধাৰক শ্ৰেণীসমূহৰ প্ৰজন্ম আৰু নিষ্ক্ৰিয় নকৰে। #২৯১৪৬ চাওক।

• make-colএটা ধাৰ্য্য কৰা আকাৰ অবিহনে সমান স্তম্ভসমূহলে অবিকল্পিতভাৱে মিক্সিনক আপডেইট কৰা হৈছে ।

কন্টেন্ট, ৰিবুট আদি

• RFS এতিয়া অবিকল্পিতভাৱে সামৰ্থবান কৰা হৈছে । মিক্সিন ব্যৱহাৰ কৰাfont-size()শিৰোনামসমূহে স্বয়ংক্ৰিয়ভাৱে ভিউপৰ্টৰfont-sizeসৈতে তেওঁলোকৰ স্কেল কৰিবলৈ সামঞ্জস্য কৰিব। এই বৈশিষ্ট্য পূৰ্বতে v4 ৰ সৈতে অপ্ট-ইন আছিল।

• ব্ৰেকিং কৰা$display-*আমাৰ চলকসমূহ সলনি কৰিবলৈ আৰু এটা $display-font-sizesSass মেপৰ সৈতে আমাৰ প্ৰদৰ্শন টাইপোগ্ৰাফী অভাৰহ'ল কৰিলোঁ । $display-*-weightলগতে এটা একক $display-font-weightআৰু সামঞ্জস্য কৰা font-sizes ৰ বাবে ব্যক্তিগত চলকসমূহ আঁতৰাই পেলোৱা হৈছে ।

• দুটা নতুন .display-*শিৰোনাম আকাৰ যোগ কৰা হৈছে, .display-5আৰু .display-6.

• সংযোগসমূহ অবিকল্পিতভাৱে আণ্ডাৰলাইন কৰা হয় (কেৱল হোভাৰত নহয়), যদিহে সিহত নিৰ্দিষ্ট উপাদানসমূহৰ অংশ নহয়।

• সিহতৰ শৈলীসমূহ সতেজ কৰিবলে আৰু ষ্টাইলিঙৰ ওপৰত অধিক নিয়ন্ত্ৰণৰ বাবে CSS চলকসমূহৰ সৈতে সিহতক পুনৰ নিৰ্মাণ কৰিবলে টেবুলসমূহ পুনৰায় ডিজাইন কৰা হৈছে।

• ব্ৰেকিং কৰানেষ্টেড টেবুলসমূহে আৰু শৈলীসমূহ উত্তৰাধিকাৰী নহয়।

• ব্ৰেকিং কৰা .thead-lightআৰু সকলো টেবুল উপাদানৰ বাবে ব্যৱহাৰ কৰিব পৰা ভিন্ন শ্ৰেণীসমূহৰ .thead-darkসপক্ষে বাদ দিয়া হয় ( , , , , আৰু ) ।.table-*theadtbodytfoottrthtd

• ব্ৰেকিং কৰাtable-row-variant()মিক্সিনক পুনৰ নামকৰণ কৰা হয় আৰু table-variant()মাত্ৰ ২টা প্ৰাচল গ্ৰহণ কৰে: $color(ৰঙৰ নাম) আৰু $value(ৰঙৰ ক'ড)। টেবুল ফ্যাক্টৰ চলকৰ ওপৰত ভিত্তি কৰি সীমাৰ ৰং আৰু উচ্চাৰণৰ ৰং স্বয়ংক্ৰিয়ভাৱে গণনা কৰা হয়।

• -yটেবুল কোষ পেডিং চলকসমূহক আৰু ত বিভক্ত কৰক -x।

• ব্ৰেকিং কৰা.pre-scrollableক্লাছ বাদ দিলে । #২৯১৩৫ চাওক

• ব্ৰেকিং কৰা .text-*সঁজুলিসমূহে আৰু সংযোগসমূহত হোভাৰ আৰু ফ'কাচ অৱস্থাসমূহ যোগ নকৰে। .link-*ইয়াৰ পৰিৱৰ্তে সহায়ক শ্ৰেণীসমূহ ব্যৱহাৰ কৰিব পাৰি। #২৯২৬৭ চাওক

• ব্ৰেকিং কৰা.text-justifyক্লাছ বাদ দিলে । #২৯৭৯৩ চাওক

• ব্ৰেকিং কৰা <hr>উপাদানসমূহে এতিয়া বৈশিষ্ট্যটোক ভালদৰে সমৰ্থন কৰাৰ heightপৰিৱৰ্তে ব্যৱহাৰ কৰে। ই ডাঠ বিভাজক সৃষ্টি কৰিবলে পেডিং সঁজুলিসমূহৰ ব্যৱহাৰো সামৰ্থবান কৰে (যেনে, ) ।bordersize<hr class="py-1">

• অবিকল্পিত অনুভূমিক padding-leftঅন <ul>আৰু <ol>উপাদানসমূহ ব্ৰাউজাৰৰ পৰা অবিকল্পিতলৈ 40pxপুনৰায় সেট কৰক 2rem।

• যোগ কৰা হৈছে $enable-smooth-scroll, যি গোলকীয়ভাৱে প্ৰযোজ্য — মাধ্যম প্ৰশ্নৰ scroll-behavior: smoothযোগেদি হ্ৰাস কৰা গতি বিচৰা ব্যৱহাৰকাৰীসকলৰ বাহিৰে । #৩১৮৭৭ চাওকprefers-reduced-motion

আৰ টি এল

• অনুভূমিক দিশ নিৰ্দিষ্ট চলকসমূহ, সঁজুলিসমূহ, আৰু মিক্সিনসমূহ সকলোকে পুনৰ নামকৰণ কৰা হৈছে flexbox পৰিকল্পনাসমূহত পোৱাৰ দৰে যুক্তিসংগত বৈশিষ্ট্যসমূহ ব্যৱহাৰ কৰিবলে—যেনে, startআৰু আৰু ৰ endপৰিবৰ্তে ।leftright

প্ৰপত্ৰসমূহ

• নতুন ভাসমান ফৰ্ম যোগ কৰা হৈছে! আমি ভাসমান লেবেলসমূহৰ উদাহৰণক সম্পূৰ্ণৰূপে সমৰ্থিত ফৰ্ম উপাদানসমূহলে প্ৰচাৰ কৰিছো। নতুন ভাসমান লেবেলসমূহ পৃষ্ঠা চাওক।

• ব্ৰেকিং কৰা একত্ৰিত স্থানীয় আৰু স্বনিৰ্বাচিত ফৰ্ম উপাদানসমূহ। চেকবাকচসমূহ, ৰেডিঅ'সমূহ, নিৰ্ব্বাচনসমূহ, আৰু অন্য ইনপুটসমূহ যি v4 ত স্থানীয় আৰু স্বনিৰ্বাচিত শ্ৰেণীসমূহ আছিল একত্ৰিত কৰা হৈছে। এতিয়া আমাৰ প্ৰায় সকলো ফৰ্ম উপাদান সম্পূৰ্ণৰূপে কাষ্টম, বেছিভাগেই কাষ্টম 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।

• ৰ অন্তৰ্গত উৎস Sass নথিপত্ৰসমূহ পুনৰায় সাজি উলিওৱা হৈছে scss/forms/, ইনপুট গোট শৈলীসমূহ অন্তৰ্ভুক্ত কৰি।

উপাদানসমূহ

• আমাৰ চলকৰ ওপৰত ভিত্তি কৰি সতৰ্কবাণী, ব্ৰেডক্ৰাম, কাৰ্ড, ড্ৰপডাউন, তালিকা গোট, মডাল, পপঅভাৰ padding, আৰু সঁজুলি টিপছৰ বাবে একত্ৰিত মানসমূহ । #৩০৫৬৪ চাওক ।$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>

• ব্ৰেকিং কৰা ইউটিলিটিৰ .btn-blockবাবে বাদ দিয়া হৈছে। .btn-blockত ব্যৱহাৰ কৰাৰ পৰিবৰ্তে .btn, আপোনাৰ বুটামসমূহ আৰু প্ৰয়োজন অনুসৰি সিহতক স্থান দিবলৈ .d-gridএটা সঁজুলিৰে ৰেপ কৰক । .gap-*ইয়াৰ ওপৰত আৰু অধিক নিয়ন্ত্ৰণৰ বাবে প্ৰতিক্ৰিয়াশীল শ্ৰেণীসমূহলৈ সলনি কৰক। কিছুমান উদাহৰণৰ বাবে docs পঢ়ক।

• অতিৰিক্ত প্ৰাচলসমূহ সমৰ্থন কৰিবলে আমাৰ button-variant()আৰু মিক্সিনসমূহ আপডেট কৰা হৈছে।button-outline-variant()

• হোভাৰ আৰু সক্ৰিয় অৱস্থাসমূহত বৃদ্ধি কৰা কনট্ৰাষ্ট সুনিশ্চিত কৰিবলে আপডেইট কৰা বুটামসমূহ।

• নিষ্ক্ৰিয় বুটামসমূহত এতিয়া আছে pointer-events: none;।

কাৰ্ড

• ব্ৰেকিং কৰা.card-deckআমাৰ গ্ৰীডৰ সপক্ষে ড্ৰপ কৰিলে। আপোনাৰ কাৰ্ডসমূহক স্তম্ভ শ্ৰেণীসমূহত ৰেপ কৰক আৰু .row-cols-*কাৰ্ড ডেকসমূহ পুনৰায় সৃষ্টি কৰিবলে এটা মূল ধাৰক যোগ কৰক (কিন্তু প্ৰতিক্ৰিয়াশীল প্ৰান্তিককৰণৰ ওপৰত অধিক নিয়ন্ত্ৰণৰ সৈতে)।

• ব্ৰেকিং কৰাৰাজমিস্ত্ৰীৰ .card-columnsসপক্ষে বাদ দিলে। #২৮৯২২ চাওক ।

• ব্ৰেকিং কৰা.cardভিত্তি একৰ্ডিয়নক এটা নতুন একৰ্ডিয়ন উপাদানৰ সৈতে সলনি কৰা হৈছে ।

কেৰউজেল

• গাঢ় লিখনী, নিয়ন্ত্ৰণসমূহ, আৰু সূচকৰ বাবে নতুন .carousel-darkভিন্নতা যোগ কৰা হৈছে (পাতল পটভূমিৰ বাবে অতি উত্তম)।

• বুটষ্ট্ৰেপ আইকনসমূহৰ পৰা নতুন SVGs ৰ সৈতে কেৰউজেল নিয়ন্ত্ৰণসমূহৰ বাবে chevron আইকনসমূহ সলনি কৰা হৈছে ।

বন্ধ কৰক বুটাম

• ব্ৰেকিং কৰাকম সাধাৰণ নামৰ বাবে পুনৰ নামকৰণ .closeকৰা হৈছে ।.btn-close

• বন্ধ বুটামসমূহে এতিয়া HTML ত background-imageএটাৰ পৰিবৰ্তে এটা (এম্বেড কৰা SVG) ব্যৱহাৰ ×কৰে, আপোনাৰ মাৰ্কআপ স্পৰ্শ কৰাৰ প্ৰয়োজন নোহোৱাকৈ সহজ স্বনিৰ্বাচনৰ অনুমতি দিয়ে।

• নতুন .btn-close-whiteভিন্নতা যোগ কৰা হৈছে যি filter: invert(1)গাঢ় পটভূমিৰ বিপৰীতে উচ্চ কনট্ৰাষ্ট ডিমিছ আইকনসমূহ সামৰ্থবান কৰিবলে ব্যৱহাৰ কৰে।

পতন হোৱা

• একৰ্ডিয়নৰ বাবে স্ক্ৰল এংকৰিং আঁতৰোৱা হৈছে।

ড্ৰপডাউনসমূহ

• অন-ডিমাণ্ড ডাৰ্ক ড্ৰপডাউনসমূহৰ বাবে নতুন .dropdown-menu-darkভিন্নতা আৰু সংশ্লিষ্ট চলকসমূহ যোগ কৰা হৈছে।

• ৰ বাবে নতুন চলক যোগ কৰা হৈছে $dropdown-padding-x।

• উন্নত কনট্ৰাষ্টৰ বাবে ড্ৰপডাউন ডিভাইডাৰক আন্ধাৰ কৰিলে।

• ব্ৰেকিং কৰাড্ৰপডাউনৰ বাবে সকলো ইভেন্ট এতিয়া ড্ৰপডাউন টগল বুটামত ট্ৰিগাৰ কৰা হয় আৰু তাৰ পিছত মূল উপাদানলৈ বাবল কৰা হয়।

• ড্ৰপডাউন মেনুসমূহত এতিয়া এটা data-bs-popper="static"বৈশিষ্ট্য সংহতি কৰা হৈছে যেতিয়া ড্ৰপডাউনৰ অৱস্থান স্থিতিশীল হয়, বা ড্ৰপডাউন navbar ত থাকে। এইটো আমাৰ জাভাস্ক্রিপ্টৰ দ্বাৰা যোগ কৰা হৈছে আৰু ই আমাক পপাৰৰ অৱস্থানত বাধা নিদিয়াকৈ কাষ্টম পজিচন শৈলী ব্যৱহাৰ কৰাত সহায় কৰে।

• ব্ৰেকিং কৰাflipস্থানীয় Popper বিন্যাসৰ সপক্ষে ড্ৰপডাউন প্লাগইনৰ বাবে বিকল্প বাদ দিয়া হৈছে। আপুনি এতিয়া ফ্লিপ পৰিবৰ্তকত fallbackPlacementsবিকল্পৰ বাবে এটা খালী এৰে পাছ কৰি ফ্লিপিং আচৰণ নিষ্ক্ৰিয় কৰিব পাৰিব।

• ড্ৰপডাউন মেনুসমূহ এতিয়া স্বয়ংক্ৰিয় বন্ধ আচৰণautoClose নিয়ন্ত্ৰণ কৰিবলে এটা নতুন বিকল্পৰ সৈতে ক্লিক কৰিব পাৰি । আপুনি এই বিকল্প ব্যৱহাৰ কৰিব পাৰে ড্ৰপডাউন মেনুৰ ভিতৰত বা বাহিৰত ক্লিক গ্ৰহণ কৰিবলে ইয়াক পাৰস্পৰিক কৰিবলে।

• .dropdown-itemড্ৰপডাউনসমূহে এতিয়া s ত ৰেপ কৰা s সমৰ্থন কৰে <li>।

জাম্বোট্ৰন

• ব্ৰেকিং কৰাজাম্ব'ট্ৰন উপাদানটো বাদ দিলে কাৰণ ইয়াক ইউটিলিটিসমূহৰ সৈতে প্ৰতিলিপি কৰিব পাৰি। এটা ডেমোৰ বাবে আমাৰ নতুন Jumbotron উদাহৰণ চাওক।

তালিকা গোট

• তালিকা গোটসমূহত নতুন .list-group-numberedপৰিবৰ্তক যোগ কৰা হৈছে।

Navs আৰু টেবসমূহ

• , , , আৰু শ্ৰেণীত নতুন nullচলক যোগ কৰা হৈছে ।font-sizefont-weightcolor:hover color.nav-link

নৱবৰ

• ব্ৰেকিং কৰাNavbars ৰ বাবে এতিয়া এটা ধাৰকৰ প্ৰয়োজন (ব্যৱধানৰ প্ৰয়োজনীয়তা আৰু CSS ৰ প্ৰয়োজনীয়তা অতিশয় সৰল কৰিবলে)।
• ব্ৰেকিং কৰা.activeক্লাছটো আৰু s .nav-itemত প্ৰয়োগ কৰিব নোৱাৰিব, ইয়াক s ৰ ওপৰত পোনপটীয়াকৈ প্ৰয়োগ কৰিব লাগিব .nav-link।

অফকেনভাছ

• নতুন অফকেনভাছ উপাদান যোগ কৰা হৈছে ।

পেজিনেচন

• পৃষ্ঠা সংযোগসমূহ এতিয়া স্বনিৰ্বাচিত margin-leftকৰিব পৰা আছে যি ইটোৱে সিটোৰ পৰা পৃথক কৰিলে সকলো চুকত গতিশীলভাৱে ঘূৰণীয়া কৰা হয়।

• transitionপৃষ্ঠা সংযোগ সংযোগসমূহত s যোগ কৰা হৈছে।

Popovers

• ব্ৰেকিং কৰাআমাৰ অবিকল্পিত popover সাঁচত পুনৰনামকৰণ .arrowকৰা হৈছে।.popover-arrow

• বিকল্পক পুনৰ নামকৰণ whiteListকৰা হৈছে allowList.

স্পিনাৰ্ছ

• prefers-reduced-motion: reduceস্পিনাৰসকলে এতিয়া এনিমেচন লেহেমীয়া কৰি সন্মান কৰে। #৩১৮৮২ চাওক ।

• উন্নত স্পিনাৰ উলম্ব প্ৰান্তিককৰণ।

টোষ্ট

• টোষ্টসমূহক এতিয়া ইউটিলিটিসমূহৰ স্থান নিৰ্ধাৰণৰ.toast-container সহায়ত এটাত স্থাপন কৰিব পাৰি ।

• অবিকল্পিত টোষ্টৰ সময়কাল ৫ ছেকেণ্ডলৈ সলনি কৰা হৈছে।

• overflow: hiddenটোষ্টৰ পৰা আঁতৰাই ফাংচনৰ সৈতে প্ৰপাৰ s border-radiusৰ সৈতে সলনি কৰা calc()হয়।

সঁজুলিৰ টিপছ

• ব্ৰেকিং কৰাআমাৰ অবিকল্পিত সঁজুলিটিপ সাঁচত পুনৰ নামকৰণ .arrowকৰা হৈছে।.tooltip-arrow

• ব্ৰেকিং কৰাpopper উপাদানসমূহৰ উন্নত স্থানৰ বাবে ৰ বাবে অবিকল্পিত মান fallbackPlacementsসলনি কৰা হৈছে ।['top', 'right', 'bottom', 'left']

• ব্ৰেকিং কৰাবিকল্পক পুনৰ নামকৰণ whiteListকৰা হৈছে allowList.

উপযোগীতাসমূহ

• ব্ৰেকিং কৰাRTL সমৰ্থন যোগ কৰি দিশগত নামৰ পৰিবৰ্তে লজিকেল বৈশিষ্ট্য নাম ব্যৱহাৰ কৰিবলে কেইবাটাও সঁজুলিৰ পুনৰনামকৰণ কৰা হৈছে:

  • পুনৰনামকৰণ কৰা হৈছে .left-*আৰু .right-*to .start-*আৰু .end-*.
  • পুনৰনামকৰণ কৰা হৈছে .float-leftআৰু .float-rightto .float-startআৰু .float-end.
  • পুনৰনামকৰণ কৰা হৈছে .border-leftআৰু .border-rightto .border-startআৰু .border-end.
  • পুনৰনামকৰণ কৰা হৈছে .rounded-leftআৰু .rounded-rightto .rounded-startআৰু .rounded-end.
  • পুনৰনামকৰণ কৰা হৈছে .ml-*আৰু .mr-*to .ms-*আৰু .me-*.
  • পুনৰনামকৰণ কৰা হৈছে .pl-*আৰু .pr-*to .ps-*আৰু .pe-*.
  • পুনৰনামকৰণ কৰা হৈছে .text-leftআৰু .text-rightto .text-startআৰু .text-end.

• ব্ৰেকিং কৰাঅবিকল্পিতভাৱে ঋণাত্মক মাৰ্জিনসমূহ নিষ্ক্ৰিয় কৰা হৈছে।

• 's পটভূমি অতিৰিক্ত উপাদানসমূহলৈ .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. #৩১৬৮৭ চাওক ।

• নতুন 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 নিৰ্ভৰশীলতা বাদ দিলে আৰু নিয়মীয়া জাভাস্ক্রিপ্টত থাকিবলৈ প্লাগ-ইনসমূহ পুনৰ লিখিলে।

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

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

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

• popperConfigএটা ফলন হিচাপে পাছ কৰিব পাৰি যি Bootstrap ৰ অবিকল্পিত Popper বিন্যাসক এটা যুক্তি হিচাপে গ্ৰহণ কৰে, যাতে আপুনি এই অবিকল্পিত বিন্যাস আপোনাৰ ধৰণে একত্ৰিত কৰিব পাৰে । ড্ৰপডাউন, পপঅভাৰ, আৰু টুলটিপসমূহৰ বাবে প্ৰযোজ্য।

• Popper উপাদানসমূহৰ উন্নত স্থানৰ বাবে ৰ বাবে অবিকল্পিত মান fallbackPlacementsসলনি কৰা হৈছে । ড্ৰপডাউন, পপঅভাৰ, আৰু টুলটিপসমূহৰ বাবে প্ৰযোজ্য।['top', 'right', 'bottom', 'left']

• _getInstance()→ ৰ দৰে ৰাজহুৱা স্থিতিশীল পদ্ধতিৰ পৰা আণ্ডাৰস্ক'ৰ আঁতৰোৱা হৈছে getInstance()।