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)எங்கள் மூலக் குறியீட்டை அமைப்பது உங்கள் சொந்த குறியீட்டில் உள்ள சாத்தியமான சாஸை உடைக்கும் .$alert-border-width * 2

எனவே, முடிந்தவரை, நாங்கள் அதிக CSS மாறிகளை நோக்கி தொடர்ந்து செல்வோம், ஆனால் எங்கள் செயல்படுத்தல் v5 இல் சற்று குறைவாக இருக்கலாம் என்பதை அறிந்து கொள்ளவும்.

புதியது_maps.scss

பூட்ஸ்டார்ப் v5.2.0 உடன் ஒரு புதிய Sass கோப்பை அறிமுகப்படுத்தியது _maps.scss. _variables.scssஅசல் வரைபடத்திற்கான புதுப்பிப்புகள் அவற்றை நீட்டிக்கும் இரண்டாம் நிலை வரைபடங்களுக்குப் பயன்படுத்தப்படாத சிக்கலைச் சரிசெய்ய பல Sass வரைபடங்களை இது இழுக்கிறது . எடுத்துக்காட்டாக, முக்கிய தனிப்பயனாக்குதல் பணிப்பாய்வுகளை உடைத்து, $theme-colorsசார்ந்திருக்கும் பிற தீம் வரைபடங்களுக்கு புதுப்பிப்புகள் பயன்படுத்தப்படவில்லை . $theme-colorsசுருக்கமாக, Sass க்கு ஒரு வரம்பு உள்ளது, அங்கு ஒரு இயல்புநிலை மாறி அல்லது வரைபடம் பயன்படுத்தப்பட்டால் , அதை புதுப்பிக்க முடியாது. CSS மாறிகள் மற்ற CSS மாறிகளை உருவாக்கப் பயன்படுத்தப்படும்போது, ​​அதேபோன்ற குறைபாடு உள்ளது.

இதனால்தான் பூட்ஸ்டார்ப்பில் மாறி தனிப்பயனாக்கங்கள் க்குப் பிறகு வர வேண்டும் @import "functions", ஆனால் அதற்கு முன் @import "variables"மற்றும் எங்கள் இறக்குமதி அடுக்கின் மீதமுள்ளவை. சாஸ் வரைபடங்களுக்கும் இது பொருந்தும் - இயல்புநிலைகளைப் பயன்படுத்துவதற்கு முன்பு நீங்கள் அவற்றை மேலெழுத வேண்டும். பின்வரும் வரைபடங்கள் புதியதாக மாற்றப்பட்டுள்ளன _maps.scss:

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

உங்கள் தனிப்பயன் பூட்ஸ்டார்ப் 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வகுப்பை எந்த .offcanvas-{sm|md|lg|xl|xxl}வகுப்பாக மாற்றவும்.

• தடிமனான டேபிள் டிவைடர்கள் இப்போது தேர்வு செய்யப்பட்டுள்ளன. — டேபிள் குழுக்களுக்கு இடையே உள்ள தடிமனான மற்றும் கடினமான எல்லையை அகற்றி, நீங்கள் விண்ணப்பிக்கக்கூடிய விருப்ப வகுப்பிற்கு நகர்த்தியுள்ளோம், .table-group-divider. உதாரணத்திற்கு டேபிள் டாக்ஸைப் பார்க்கவும்.

• இன்டர்செக்ஷன் அப்சர்வர் API ஐப் பயன்படுத்த ஸ்க்ரோல்ஸ்பை மீண்டும் எழுதப்பட்டது , இதன் பொருள் உங்களுக்கு இனி தொடர்புடைய பெற்றோர் ரேப்பர்கள் தேவைப்படாது, உள்ளமைவைக்offsetகுறைக்கிறது மற்றும் பல. உங்கள் ஸ்க்ரோல்ஸ்பை செயலாக்கங்கள் அவற்றின் நேவ் ஹைலைட்டில் மிகவும் துல்லியமாகவும் சீரானதாகவும் இருக்கும்.

• 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 திட்டத்தைப் பார்க்கவும் .

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 மாறிகள் சேர்க்கப்பட்டது. — பல புதிய CSS மாறிகள் பாணிகளைக் :rootகட்டுப்படுத்தும் நிலைக்குச் சேர்க்கப்பட்டது. <body>எங்கள் பயன்பாடுகள் மற்றும் கூறுகள் உட்பட மேலும் பல வேலைகளில் உள்ளன, ஆனால் இப்போது CSS மாறிகளை தனிப்பயனாக்கு பிரிவில் படிக்கவும் .

• CSS மாறிகளைப் பயன்படுத்துவதற்கு வண்ணம் மற்றும் பின்னணி பயன்பாடுகள் மாற்றியமைக்கப்பட்டது, மேலும் புதிய உரை ஒளிபுகா மற்றும் பின்னணி ஒளிபுகா பயன்பாடுகள் சேர்க்கப்பட்டது. — .text-* மற்றும் .bg-*பயன்பாடுகள் இப்போது CSS மாறிகள் மற்றும் rgba()வண்ண மதிப்புகள் மூலம் கட்டமைக்கப்பட்டுள்ளன, புதிய ஒளிபுகா பயன்பாடுகளுடன் எந்த பயன்பாட்டையும் எளிதாக தனிப்பயனாக்க உங்களை அனுமதிக்கிறது.

• எங்கள் கூறுகளை எவ்வாறு தனிப்பயனாக்குவது என்பதைக் காட்ட, புதிய துணுக்கு எடுத்துக்காட்டுகள் சேர்க்கப்பட்டன. - எங்களின் புதிய துணுக்குகளின் எடுத்துக்காட்டுகளுடன் தனிப்பயனாக்கப்பட்ட கூறுகள் மற்றும் பிற பொதுவான வடிவமைப்பு வடிவங்களைப் பயன்படுத்த தயாராக இழுக்கவும் . அடிக்குறிப்புகள் , கீழிறக்கங்கள் , பட்டியல் குழுக்கள் மற்றும் மாதிரிகள் ஆகியவை அடங்கும் .

• பாப்போவர் மற்றும் டூல்டிப்களில் இருந்து பயன்படுத்தப்படாத பொசிஷனிங் ஸ்டைல்கள் அகற்றப்பட்டன, ஏனெனில் இவை பாப்பரால் மட்டுமே கையாளப்படுகின்றன. $tooltip-marginநிராகரிக்கப்பட்டது மற்றும் nullசெயல்பாட்டில் அமைக்கப்பட்டுள்ளது.

மேலும் தகவல் வேண்டுமா? v5.1.0 வலைப்பதிவு இடுகையைப் படிக்கவும்.

சார்புநிலைகள்

• jQuery கைவிடப்பட்டது.
• Popper v1.x இலிருந்து Popper v2.x க்கு மேம்படுத்தப்பட்டது.
• Libsass க்கு பதிலாக Dart Sass என மாற்றப்பட்டது Libsass கொடுக்கப்பட்ட எங்கள் Sass தொகுப்பி நிறுத்தப்பட்டது.
• எங்கள் ஆவணங்களை உருவாக்குவதற்காக ஜெகில்லில் இருந்து ஹ்யூகோவிற்கு இடம்பெயர்ந்தோம்

உலாவி ஆதரவு

• இன்டர்நெட் எக்ஸ்புளோரர் 10 மற்றும் 11 கைவிடப்பட்டது
• கைவிடப்பட்டது மைக்ரோசாஃப்ட் எட்ஜ் <16 (லெகசி எட்ஜ்)
• Firefox <60 கைவிடப்பட்டது
• Safari <12 கைவிடப்பட்டது
• iOS Safari <12 கைவிடப்பட்டது
• குரோம் <60 கைவிடப்பட்டது

ஆவண மாற்றங்கள்

• மறுவடிவமைப்பு செய்யப்பட்ட முகப்புப்பக்கம், டாக்ஸ் தளவமைப்பு மற்றும் அடிக்குறிப்பு.
• புதிய பார்சல் வழிகாட்டி சேர்க்கப்பட்டது .
• சாஸ், உலகளாவிய உள்ளமைவு விருப்பங்கள், வண்ணத் திட்டங்கள், CSS மாறிகள் மற்றும் பலவற்றின் புதிய விவரங்களுடன் v4 இன் தீமிங் பக்கத்திற்குப் பதிலாக புதிய தனிப்பயனாக்கு பிரிவு சேர்க்கப்பட்டது .
• அனைத்து படிவ ஆவணங்களையும் புதிய படிவங்கள் பிரிவில் மறுசீரமைத்து , உள்ளடக்கத்தை அதிக கவனம் செலுத்திய பக்கங்களாக பிரிக்கிறது.
• இதேபோல், கட்டம் உள்ளடக்கத்தை இன்னும் தெளிவாக வெளிப்படுத்த, தளவமைப்புப் பகுதியை மேம்படுத்தியது.
• "Navs" பாகம் பக்கம் "Navs & Tabs" என மறுபெயரிடப்பட்டது.
• "செக்ஸ்" பக்கம் "காசோலைகள் & ரேடியோக்கள்" என மறுபெயரிடப்பட்டது.
• எங்கள் தளங்கள் மற்றும் டாக்ஸ் பதிப்புகளைப் பெறுவதை எளிதாக்க, navbar மறுவடிவமைப்பு செய்யப்பட்டு, புதிய subnav ஐச் சேர்த்தது.
• தேடல் புலத்திற்கு புதிய விசைப்பலகை குறுக்குவழி சேர்க்கப்பட்டது: Ctrl + /.

சாஸ்

• தேவையற்ற மதிப்புகளை அகற்றுவதை எளிதாக்க, இயல்புநிலை Sass வரைபட இணைப்புகளை நீக்கியுள்ளோம். நீங்கள் இப்போது Sass வரைபடங்களில் உள்ள அனைத்து மதிப்புகளையும் வரையறுக்க வேண்டும் என்பதை நினைவில் கொள்ளவும் $theme-colors. சாஸ் வரைபடங்களை எவ்வாறு கையாள்வது என்பதைப் பார்க்கவும் .

• உடைத்தல்மறுபெயரிடப்பட்ட 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()மற்றும் gray()மாறிகளுக்கு ஆதரவாக செயல்படுகிறது. #29083 பார்க்கவும் .

• உடைத்தல்மறுபெயரிடப்பட்ட 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()

• உடைத்தல்சாஸின் சொந்த வண்ண அளவிடுதல் செயல்பாட்டுடன் மோதுவதைத் தவிர்க்க, scale-color()செயல்பாடு மறுபெயரிடப்பட்டது .shift-color()

• box-shadowmixins இப்போது மதிப்புகளை அனுமதிக்கின்றன மற்றும் பல வாதங்களிலிருந்து nullகைவிடப்படுகின்றன . பார்க்கவும் #30394 .none

• border-radius()மிக்சினுக்கு இப்போது இயல்புநிலை மதிப்பு உள்ளது .

வண்ண அமைப்பு

• ஒரு புதிய வண்ண அமைப்புக்கு ஆதரவாக வேலை செய்து color-level()நீக்கப்பட்ட வண்ண அமைப்பு. எங்கள் கோட்பேஸில் உள்ள $theme-color-intervalஅனைத்து lighten()மற்றும் செயல்பாடுகளும் மற்றும் . இந்த செயல்பாடுகள் நிறத்தை ஒரு குறிப்பிட்ட அளவு மூலம் அதன் லேசான தன்மையை மாற்றுவதற்குப் பதிலாக வெள்ளை அல்லது கருப்பு நிறத்தில் கலக்கும். அதன் எடை அளவுரு நேர்மறை அல்லது எதிர்மறை என்பதைப் பொறுத்து நிறத்தை சாயமிடுகிறது அல்லது நிழலாடுகிறது. மேலும் விவரங்களுக்கு #30622ஐப் பார்க்கவும்.darken()tint-color()shade-color()shift-color()

• ஒவ்வொரு நிறத்திற்கும் புதிய சாயல்கள் மற்றும் நிழல்கள் சேர்க்கப்பட்டு, ஒவ்வொரு அடிப்படை நிறத்திற்கும் ஒன்பது தனித்தனி வண்ணங்களை புதிய சாஸ் மாறிகளாக வழங்குகிறது.

• மேம்படுத்தப்பட்ட வண்ண மாறுபாடு. 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()தானாக சரிசெய்யும்இந்த அம்சம் முன்பு v4 உடன் தேர்வு செய்யப்பட்டது.font-size

• உடைத்தல்$display-*எங்கள் மாறிகள் மற்றும் $display-font-sizesசாஸ் வரைபடத்துடன் மாற்றுவதற்கு எங்கள் காட்சி அச்சுக்கலை மாற்றியமைக்கப்பட்டது . $display-*-weightஒரு ஒற்றை $display-font-weightமற்றும் சரிசெய்யப்பட்ட font-sizes க்கான தனிப்பட்ட மாறிகள் நீக்கப்பட்டது .

• இரண்டு புதிய .display-*தலைப்பு அளவுகள் சேர்க்கப்பட்டன, .display-5மற்றும் .display-6.

• இணைப்புகள் இயல்புநிலையாக அடிக்கோடிடப்படும் (ஹோவரில் மட்டும் அல்ல), அவை குறிப்பிட்ட கூறுகளின் பகுதியாக இல்லாவிட்டால்.

• ஸ்டைலிங் மீது கூடுதல் கட்டுப்பாட்டிற்காக, அவற்றின் பாணிகளைப் புதுப்பிக்கவும், CSS மாறிகள் மூலம் அவற்றை மீண்டும் உருவாக்கவும் அட்டவணைகள் மறுவடிவமைப்பு செய்யப்பட்டன .

• உடைத்தல்உள்ளமைக்கப்பட்ட அட்டவணைகள் இனி பாணிகளைப் பெறாது.

• உடைத்தல் .thead-lightமற்றும் அனைத்து அட்டவணை உறுப்புகளுக்கும் ( , , , , மற்றும் ) பயன்படுத்தக்கூடிய மாறுபாடு வகுப்புகளுக்கு .thead-darkஆதரவாக கைவிடப்பட்டது ..table-*theadtbodytfoottrthtd

• உடைத்தல்மிக்சின் 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>உறுப்புகளை உலாவி இயல்புநிலையிலிருந்து 40pxக்கு மீட்டமைக்கவும் 2rem.

• மீடியா வினவல் மூலம் குறைக்கப்பட்ட இயக்கத்தைக் கேட்கும் பயனர்களைத் தவிர $enable-smooth-scroll, இது உலகளவில் பொருந்தும் . பார்க்கவும் #31877scroll-behavior: smoothprefers-reduced-motion

RTL

• கிடைமட்ட திசையில் குறிப்பிட்ட மாறிகள், பயன்பாடுகள் மற்றும் மிக்சின்கள் அனைத்தும் ஃப்ளெக்ஸ்பாக்ஸ் தளவமைப்புகளில் உள்ளதைப் போன்ற தருக்க பண்புகளைப் பயன்படுத்த மறுபெயரிடப்பட்டுள்ளன-எ.கா, startமற்றும் endபதிலாக leftமற்றும் right.

படிவங்கள்

• புதிய மிதக்கும் படிவங்கள் சேர்க்கப்பட்டது! ஃப்ளோட்டிங் லேபிள்களின் உதாரணத்தை முழுமையாக ஆதரிக்கும் படிவக் கூறுகளாக உயர்த்தியுள்ளோம். புதிய மிதக்கும் லேபிள்கள் பக்கத்தைப் பார்க்கவும்.

• உடைத்தல் ஒருங்கிணைந்த சொந்த மற்றும் தனிப்பயன் வடிவ கூறுகள். தேர்வுப்பெட்டிகள், ரேடியோக்கள், தேர்வுகள் மற்றும் 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.

• scss/forms/உள்ளீட்டு குழு பாணிகள் உட்பட, கீழ் மறுசீரமைக்கப்பட்ட மூல Sass கோப்புகள் .

கூறுகள்

• paddingவிழிப்பூட்டல்கள், பிரட்தூள்களில் நனைக்கப்பட்டு, அட்டைகள், கீழ்தோன்றும், பட்டியல் குழுக்கள், மாதிரிகள், பாப்ஓவர்கள் மற்றும் உதவிக்குறிப்புகளுக்கான ஒருங்கிணைந்த மதிப்புகள் எங்கள் $spacerமாறியின் அடிப்படையில் இருக்க வேண்டும். பார்க்கவும் #30564 .

துருத்தி

• புதிய துருத்தி கூறு சேர்க்கப்பட்டது .

எச்சரிக்கைகள்

• விழிப்பூட்டல்களில் இப்போது ஐகான்களுடன் எடுத்துக்காட்டுகள் உள்ளன .

• ஒவ்வொரு விழிப்பூட்டலிலும் s க்கான தனிப்பயன் பாணிகள் அகற்றப்பட்டன <hr>, ஏனெனில் அவை ஏற்கனவே பயன்படுத்துகின்றன 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()

• மிதவை மற்றும் செயலில் உள்ள நிலைகளில் அதிகரித்த மாறுபாட்டை உறுதிப்படுத்த பொத்தான்கள் புதுப்பிக்கப்பட்டன.

• முடக்கப்பட்ட பொத்தான்கள் இப்போது உள்ளன pointer-events: none;.

அட்டை

• உடைத்தல்.card-deckஎங்கள் கட்டத்திற்கு ஆதரவாக கைவிடப்பட்டது . உங்கள் கார்டுகளை நெடுவரிசை வகுப்புகளில் போர்த்தி .row-cols-*, கார்டு டெக்குகளை மீண்டும் உருவாக்க பெற்றோர் கொள்கலனைச் சேர்க்கவும் (ஆனால் பதிலளிக்கக்கூடிய சீரமைப்பின் மீது அதிக கட்டுப்பாட்டுடன்).

• உடைத்தல்.card-columnsகொத்தனார் ஆதரவாக கைவிடப்பட்டது . பார்க்கவும் #28922 .

• உடைத்தல்ஒரு புதிய துருத்தி கூறு.card கொண்டு அடிப்படை துருத்தி மாற்றப்பட்டது .

கொணர்வி

• இருண்ட உரை, கட்டுப்பாடுகள் மற்றும் குறிகாட்டிகளுக்கான புதிய .carousel-darkமாறுபாடு சேர்க்கப்பட்டது (இலகுவான பின்னணிக்கு சிறந்தது).

• பூட்ஸ்டார்ப் ஐகான்களில் இருந்து புதிய SVGகளுடன் கொணர்வி கட்டுப்பாடுகளுக்கான செவ்ரான் ஐகான்கள் மாற்றப்பட்டன .

மூடு பொத்தான்

• உடைத்தல்குறைவான பொதுவான பெயருக்கு மறுபெயரிடப்பட்டது .close..btn-close

• மூடு பொத்தான்கள் இப்போது HTML இல் ஒரு background-image(உட்பொதிக்கப்பட்ட SVG) ஐப் ×பயன்படுத்துகின்றன, இது உங்கள் மார்க்அப்பைத் தொடாமல் எளிதாக தனிப்பயனாக்கத்தை அனுமதிக்கிறது.

• இருண்ட பின்புலங்களுக்கு எதிராக அதிக கான்ட்ராஸ்ட் டிஸ்மிஸ் ஐகான்களை இயக்கும் புதிய .btn-close-whiteமாறுபாடு சேர்க்கப்பட்டது.filter: invert(1)

சுருக்கு

• துருத்திகளுக்கான ஸ்க்ரோல் ஆங்கரிங் அகற்றப்பட்டது.

கீழிறங்கும்

• ஆன்-டிமாண்ட் டார்க் டிராப் டவுன்களுக்கு புதிய .dropdown-menu-darkமாறுபாடு மற்றும் தொடர்புடைய மாறிகள் சேர்க்கப்பட்டது.

• க்கு புதிய மாறி சேர்க்கப்பட்டது $dropdown-padding-x.

• மேம்படுத்தப்பட்ட மாறுபாட்டிற்காக கீழ்தோன்றும் வகுப்பியை இருட்டாக்கியது.

• உடைத்தல்கீழ்தோன்றலுக்கான அனைத்து நிகழ்வுகளும் இப்போது கீழ்தோன்றும் நிலைமாற்று பொத்தானில் தூண்டப்பட்டு, பின்னர் மூல உறுப்பு வரை குமிழிக்கப்படும்.

• கீழ்தோன்றும் மெனுக்கள் இப்போது கீழ்தோன்றும் data-bs-popper="static"நிலை நிலையானதாக இருக்கும்போது அல்லது கீழ்தோன்றும் நேவ்பாரில் இருக்கும்போது பண்புக்கூறு அமைக்கப்பட்டுள்ளது. இது எங்கள் ஜாவாஸ்கிரிப்ட் மூலம் சேர்க்கப்பட்டது மற்றும் பாப்பரின் நிலைப்படுத்தலில் குறுக்கிடாமல் தனிப்பயன் நிலை பாணிகளைப் பயன்படுத்த உதவுகிறது.

• உடைத்தல்flipநேட்டிவ் பாப்பர் உள்ளமைவுக்கு ஆதரவாக கீழ்தோன்றும் சொருகிக்கான விருப்பம் கைவிடப்பட்டது . ஃபிளிப் மாடிஃபையரில் fallbackPlacementsவிருப்பத்திற்கான வெற்று வரிசையை அனுப்புவதன் மூலம் நீங்கள் இப்போது புரட்டல் நடத்தையை முடக்கலாம் .

• கீழ்தோன்றும் மெனுக்கள் தானாக மூடும் நடத்தையைக் கையாள புதிய autoCloseவிருப்பத்துடன் இப்போது கிளிக் செய்ய முடியும் . கீழ்தோன்றும் மெனுவை ஊடாடுவதற்கு உள்ளே அல்லது வெளியே கிளிக் செய்வதை ஏற்க இந்த விருப்பத்தைப் பயன்படுத்தலாம்.

• கீழ்தோன்றல்கள் இப்போது .dropdown-items இல் மூடப்பட்ட <li>s ஐ ஆதரிக்கின்றன.

ஜம்போட்ரான்

• உடைத்தல்ஜம்போட்ரான் கூறு கைவிடப்பட்டது, ஏனெனில் இது பயன்பாடுகளுடன் நகலெடுக்கப்படலாம். டெமோவிற்கு எங்களின் புதிய ஜம்போட்ரான் உதாரணத்தைப் பார்க்கவும்.

பட்டியல் குழு

• பட்டியல் குழுக்களில் புதிய .list-group-numberedமாற்றி சேர்க்கப்பட்டது.

நாவ்ஸ் மற்றும் தாவல்கள்

• , , மற்றும் வகுப்பிற்கு புதிய nullமாறிகள் சேர்க்கப்பட்டது .font-sizefont-weightcolor:hover color.nav-link

நவ்பார்ஸ்

• உடைத்தல்Navbar களுக்கு இப்போது ஒரு கொள்கலன் தேவைப்படுகிறது (இடைவெளி தேவைகளை வெகுவாக எளிதாக்குவதற்கு மற்றும் CSS தேவை).
• உடைத்தல்.activeவகுப்பை இனி s க்கு பயன்படுத்த முடியாது .nav-item, அது நேரடியாக .nav-links இல் பயன்படுத்தப்பட வேண்டும்.

ஆஃப்கான்வாஸ்

• புதிய ஆஃப்கான்வாஸ் கூறு சேர்க்கப்பட்டது .

பேஜினேஷன்

• பேஜினேஷன் இணைப்புகள் இப்போது தனிப்பயனாக்கக்கூடியவை margin-left, அவை ஒன்றிலிருந்து மற்றொன்று பிரிக்கப்படும்போது அனைத்து மூலைகளிலும் மாறும் வகையில் வட்டமாக இருக்கும்.

• transitionபக்க இணைப்புகளில் கள் சேர்க்கப்பட்டது .

Popovers

• உடைத்தல்எங்கள் இயல்புநிலை பாப்ஓவர் டெம்ப்ளேட்டில் மறுபெயரிடப்பட்டது .arrow..popover-arrow

• என மறுபெயரிடப்பட்ட whiteListவிருப்பம் allowList.

ஸ்பின்னர்கள்

• ஸ்பின்னர்கள் இப்போது prefers-reduced-motion: reduceஅனிமேஷனை மெதுவாக்குவதன் மூலம் கௌரவிக்கின்றனர். பார்க்கவும் #31882 .

• மேம்படுத்தப்பட்ட ஸ்பின்னர் செங்குத்து சீரமைப்பு.

டோஸ்ட்ஸ்

• பொசிஷனிங்.toast-container யூட்டிலிட்டிகளின் உதவியுடன் டோஸ்ட்களை இப்போது ஒரு இடத்தில் வைக்கலாம் .

• இயல்புநிலை டோஸ்ட் கால அளவு 5 வினாடிகளாக மாற்றப்பட்டது.

• டோஸ்ட்களில் 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>

• , , மற்றும் க்கு புதிய நிலைப் பயன்பாடுகள் சேர்க்கப்பட்டன . ஒவ்வொரு சொத்துக்கும் மதிப்புகள் , , மற்றும் அடங்கும்.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. பார்க்கவும் #31687 ..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

• உடைத்தல் “ஸ்கிரீன் ரீடர்” வகுப்புகள் இப்போது “காட்சியில் மறைக்கப்பட்ட” வகுப்புகள் .

  • scss/helpers/_screenreaders.scssSass கோப்பை மாற்றப்பட்டது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().