முக்கிய உள்ளடக்கத்திற்கு செல்க டாக்ஸ் வழிசெலுத்தலுக்குச் செல்லவும்
in English

v5க்கு நகர்கிறது

பூட்ஸ்டார்ப் மூலக் கோப்புகள், ஆவணங்கள் மற்றும் கூறுகள் ஆகியவற்றில் மாற்றங்களைக் கண்காணித்து மதிப்பாய்வு செய்து, v4 இலிருந்து v5 க்கு நகர்த்த உங்களுக்கு உதவும்.

இந்தப் பக்கத்தில்

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

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

உலாவி ஆதரவு

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

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

சாஸ்

  • தேவையற்ற மதிப்புகளை அகற்றுவதை எளிதாக்க, இயல்புநிலை 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

  • இயல்புநிலை கிடைமட்ட padding-leftஆன் <ul>மற்றும் <ol>உறுப்புகளை உலாவி இயல்புநிலையிலிருந்து 40pxக்கு மீட்டமைக்கவும் 2rem.

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

RTL

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

படிவங்கள்

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

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

கூறுகள்

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

துருத்தி

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

பேட்ஜ்கள்

  • உடைத்தல்.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 கொண்டு அடிப்படை துருத்தி மாற்றப்பட்டது .

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

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

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

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

சுருக்கு

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

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

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

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

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

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

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

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

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

ஜம்போட்ரான்

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

  • , , , மற்றும் வகுப்பிற்கு புதிய nullமாறிகள் சேர்க்கப்பட்டன .font-sizefont-weightcolor:hover color.nav-link
  • உடைத்தல்Navbar களுக்கு இப்போது ஒரு கொள்கலன் தேவைப்படுகிறது (இடைவெளி தேவைகளை வெகுவாக எளிதாக்குவதற்கு மற்றும் CSS தேவை).

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

பேஜினேஷன்

  • பேஜினேஷன் இணைப்புகள் இப்போது தனிப்பயனாக்கக்கூடியவை 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 தேர்வியை அனுப்பலாம்:

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

  • popperConfigபூட்ஸ்டார்ப்பின் இயல்புநிலை பாப்பர் கட்டமைப்பை ஒரு வாதமாக ஏற்றுக்கொள்ளும் செயல்பாடாக அனுப்ப முடியும், இதன் மூலம் நீங்கள் இந்த இயல்புநிலை கட்டமைப்பை உங்கள் வழியில் இணைக்கலாம். டிராப் டவுன்கள், பாபோவர்ஸ் மற்றும் டூல்டிப்களுக்குப் பொருந்தும்.

  • க்கான இயல்புநிலை மதிப்பு பாப்பர் கூறுகளை சிறப்பாக fallbackPlacementsவைக்க மாற்றப்பட்டது . டிராப் டவுன்கள், பாபோவர்ஸ் மற்றும் டூல்டிப்களுக்குப் பொருந்தும்.['top', 'right', 'bottom', 'left']

  • _getInstance()→ போன்ற பொது நிலையான முறைகளிலிருந்து அடிக்கோடிட்டு அகற்றப்பட்டது getInstance().