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

பூட்ஸ்டார்ப் 4 என்பது முழுத் திட்டத்தையும் மீண்டும் எழுதுவதாகும். மிகவும் குறிப்பிடத்தக்க மாற்றங்கள் கீழே சுருக்கப்பட்டுள்ளன, அதைத் தொடர்ந்து தொடர்புடைய கூறுகளுக்கு இன்னும் குறிப்பிட்ட மாற்றங்கள் உள்ளன.

நிலையான மாற்றங்கள்

பீட்டா 3 இலிருந்து எங்கள் நிலையான v4.x வெளியீட்டிற்கு மாறும்போது, ​​எந்த மாற்றங்களும் இல்லை, ஆனால் சில குறிப்பிடத்தக்க மாற்றங்கள் உள்ளன.

அச்சிடுதல்

• நிலையான உடைந்த அச்சு பயன்பாடுகள். முன்னதாக, ஒரு .d-print-*வகுப்பைப் பயன்படுத்துவது எதிர்பாராதவிதமாக வேறு எந்த வகுப்பையும் மீறும் .d-*. இப்போது, ​​அவை எங்களின் மற்ற காட்சிப் பயன்பாடுகளுடன் பொருந்துகின்றன மற்றும் அந்த மீடியாவிற்கு மட்டுமே பொருந்தும் ( @media print).

• மற்ற பயன்பாடுகளுடன் பொருந்தக்கூடிய அச்சு காட்சி பயன்பாடுகள் விரிவாக்கப்பட்டன. பீட்டா 3 மற்றும் அதற்கு மேற்பட்டவை மட்டுமே block, inline-block, inlineமற்றும் none. நிலையான v4 சேர்க்கப்பட்டது flex, inline-flex, table, table-rowமற்றும் table-cell.

• நிலையான அச்சு முன்னோட்ட ரெண்டரிங் உலாவிகள் முழுவதும் புதிய அச்சு பாணிகளைக் குறிப்பிடுகிறது @page size.

பீட்டா 3 மாற்றங்கள்

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

இதர

• $thumbnail-transitionபயன்படுத்தப்படாத மாறி நீக்கப்பட்டது . நாங்கள் எதையும் மாற்றவில்லை, எனவே இது கூடுதல் குறியீடு மட்டுமே.
• npm தொகுப்பில் இனி எங்கள் மூல மற்றும் dist கோப்புகளைத் தவிர வேறு எந்த கோப்புகளும் இருக்காது; நீங்கள் அவற்றை நம்பி, எங்கள் ஸ்கிரிப்ட்களை கோப்புறை வழியாக node_modulesஇயக்கினால், உங்கள் பணிப்பாய்வுகளை நீங்கள் மாற்றியமைக்க வேண்டும்.

படிவங்கள்

• தனிப்பயன் மற்றும் இயல்புநிலை தேர்வுப்பெட்டிகள் மற்றும் ரேடியோக்கள் இரண்டையும் மீண்டும் எழுதவும். இப்போது, ​​இரண்டும் பொருந்தக்கூடிய HTML அமைப்பைக் கொண்டுள்ளன ( <div>உடன்பிறந்தோருடன் வெளியில் <input>மற்றும் <label>) மற்றும் ஒரே மாதிரியான பாணிகள் (அடுக்கப்பட்டுள்ள இயல்புநிலை, மாற்றியமைப்பாளர் வகுப்பின் இன்லைன்). இது உள்ளீட்டின் நிலையின் அடிப்படையில் லேபிளை வடிவமைக்க அனுமதிக்கிறது, disabledபண்புக்கூறுக்கான ஆதரவை எளிதாக்குகிறது (முன்னர் ஒரு பெற்றோர் வகுப்பு தேவைப்பட்டது) மற்றும் எங்கள் படிவ சரிபார்ப்பை சிறப்பாக ஆதரிக்கிறது.

  இதன் ஒரு பகுதியாக, background-imageதனிப்பயன் படிவ தேர்வுப்பெட்டிகள் மற்றும் ரேடியோக்களில் பல களை நிர்வகிப்பதற்கான CSSஐ மாற்றியுள்ளோம். முன்பு, இப்போது அகற்றப்பட்ட .custom-control-indicatorஉறுப்பு பின்னணி நிறம், சாய்வு மற்றும் SVG ஐகான் ஆகியவற்றைக் கொண்டிருந்தது. பின்புல சாய்வைத் தனிப்பயனாக்குவது, ஒவ்வொரு முறையும் ஒன்றை மட்டும் மாற்ற வேண்டும். இப்போது, ​​நாம் .custom-control-label::beforeநிரப்புதல் மற்றும் சாய்வு மற்றும் .custom-control-label::afterஐகானைக் கையாளுகிறோம்.

  இன்லைனில் தனிப்பயன் செக் செய்ய, சேர்க்கவும் .custom-control-inline.

• உள்ளீடு சார்ந்த பொத்தான் குழுக்களுக்கான தேர்வுக்குழு புதுப்பிக்கப்பட்டது. [data-toggle="buttons"] { }நடை மற்றும் நடத்தைக்கு பதிலாக, JS நடத்தைகளுக்கு மட்டுமே பண்புக்கூறைப் பயன்படுத்துகிறோம், மேலும் ஸ்டைலிங்கிற்காக புதிய வகுப்பை dataநம்பியுள்ளோம் ..btn-group-toggle

• .col-form-legendசற்று மேம்படுத்தப்பட்டதற்கு ஆதரவாக நீக்கப்பட்டது .col-form-label. இந்த வழியில் .col-form-label-smமற்றும் எளிதாக உறுப்புகளில் .col-form-label-lgபயன்படுத்த முடியும்.<legend>

• தனிப்பயன் கோப்பு உள்ளீடுகள் அவற்றின் $custom-file-textSass மாறியில் மாற்றத்தைப் பெற்றன. இது இனி உள்ளமைக்கப்பட்ட சாஸ் வரைபடம் அல்ல, இப்போது ஒரே ஒரு சரத்தை மட்டுமே இயக்குகிறது - Browseபொத்தான் இப்போது எங்கள் சாஸில் இருந்து உருவாக்கப்பட்ட ஒரே போலி உறுப்பு ஆகும். Choose fileஉரை இப்போது இருந்து வருகிறது .custom-file-label.

உள்ளீட்டு குழுக்கள்

• உள்ளீட்டு குழு துணை நிரல்கள் இப்போது உள்ளீட்டுடன் தொடர்புடைய அவற்றின் இருப்பிடத்திற்கு குறிப்பிட்டவை. இரண்டு புதிய வகுப்புகளுக்கு , .input-group-addonமற்றும் . எங்கள் CSS இன் பெரும்பகுதியை எளிதாக்கும் வகையில், நீங்கள் வெளிப்படையாக ஒரு பிற்சேர்க்கை அல்லது முன்கூட்டியே பயன்படுத்த வேண்டும். பிற்சேர்க்கையில் அல்லது முன்னரே உங்கள் பொத்தான்களை வேறு எங்கும் இருப்பதைப் போலவே வைக்கவும், ஆனால் உரையை ல் மடிக்கவும் ..input-group-btn.input-group-prepend.input-group-append.input-group-text

• பல உள்ளீடுகளைப் போலவே சரிபார்ப்பு பாணிகளும் இப்போது ஆதரிக்கப்படுகின்றன (ஒரு குழுவிற்கு ஒரு உள்ளீட்டை மட்டுமே நீங்கள் சரிபார்க்க முடியும்).

• அளவு வகுப்புகள் பெற்றோரின் அடிப்படையில் இருக்க வேண்டும் .input-group, தனிப்பட்ட வடிவ கூறுகள் அல்ல.

பீட்டா 2 மாறுகிறது

பீட்டாவில் இருக்கும்போது, ​​எந்த மாற்றத்தையும் ஏற்படுத்தாமல் இருக்க வேண்டும் என்று நாங்கள் நோக்கமாகக் கொண்டுள்ளோம். இருப்பினும், எப்போதும் திட்டமிட்டபடி விஷயங்கள் நடக்காது. பீட்டா 1 இலிருந்து பீட்டா 2 க்கு மாறும்போது மனதில் கொள்ள வேண்டிய மாற்றங்கள் கீழே உள்ளன.

உடைத்தல்

• $badge-colorமாறி மற்றும் அதன் பயன்பாடு அகற்றப்பட்டது .badge. colorஎன்பதை அடிப்படையாக கொண்டு தேர்வு செய்ய வண்ண மாறுபாடு செயல்பாட்டைப் பயன்படுத்துகிறோம் background-color, எனவே மாறி தேவையற்றது.
• CSS நேட்டிவ் ஃபில்டருடன் முரண்படுவதைத் தவிர்க்க, grayscale()செயல்பாடு மறுபெயரிடப்பட்டது .gray()grayscale
• மறுபெயரிடப்பட்டது .table-inverse, .thead-inverseமற்றும் .thead-defaultக்கு .*-darkமற்றும் .*-light, மற்ற இடங்களில் பயன்படுத்தப்படும் எங்கள் வண்ணத் திட்டங்களுடன் பொருந்துகிறது.
• பதிலளிக்கக்கூடிய அட்டவணைகள் இப்போது ஒவ்வொரு கட்ட முறிவு புள்ளிக்கும் வகுப்புகளை உருவாக்குகின்றன. இது பீட்டா 1 இலிருந்து உடைந்து, .table-responsiveநீங்கள் பயன்படுத்திக்கொண்டிருப்பது போன்றது .table-responsive-md. நீங்கள் இப்போது பயன்படுத்தலாம் .table-responsiveஅல்லது .table-responsive-{sm,md,lg,xl}தேவைக்கேற்ப பயன்படுத்தலாம்.
• தொகுப்பு மேலாளர் என கைவிடப்பட்ட போவர் ஆதரவு மாற்றுகளுக்கு (எ.கா., நூல் அல்லது npm) நிறுத்தப்பட்டது. விவரங்களுக்கு bower/bower#2298 ஐப் பார்க்கவும்.
• பூட்ஸ்டார்ப்பிற்கு இன்னும் jQuery 1.9.1 அல்லது அதற்கு மேற்பட்டது தேவைப்படுகிறது, ஆனால் v3.x இன் ஆதரிக்கப்படும் உலாவிகள் பூட்ஸ்டார்ப் ஆதரிக்கும் மற்றும் v3.x சில பாதுகாப்புத் திருத்தங்களைக் கொண்டிருப்பதால் பதிப்பு 3.x ஐப் பயன்படுத்துமாறு அறிவுறுத்தப்படுகிறீர்கள்.
• .form-control-labelபயன்படுத்தப்படாத வகுப்பு அகற்றப்பட்டது . நீங்கள் இந்த வகுப்பைப் பயன்படுத்தினால், கிடைமட்ட வடிவ அமைப்புகளில் அதனுடன் தொடர்புடைய உள்ளீட்டுடன் .col-form-labelசெங்குத்தாக மையப்படுத்தப்பட்ட வகுப்பின் நகல் இதுவாகும்.<label>
• color-yiqசொத்தை உள்ளடக்கிய மிக்சினில் இருந்து மதிப்பை வழங்கும் செயல்பாட்டிற்கு மாற்றப்பட்டது, colorஇது எந்த CSS சொத்துக்கும் அதைப் பயன்படுத்த அனுமதிக்கிறது. உதாரணமாக, க்கு பதிலாக color-yiq(#000), நீங்கள் எழுதுவீர்கள் color: color-yiq(#000);.

சிறப்பம்சங்கள்

• pointer-eventsமாடல்களில் புதிய பயன்பாடு அறிமுகப்படுத்தப்பட்டது . தனிப்பயன் கிளிக் கையாளுதலுக்கான .modal-dialogநிகழ்வுகள் மூலம் வெளிப்புறங்கள் கடந்து செல்கின்றன ( எந்த கிளிக்குகளையும் கேட்க முடியும்), பின்னர் அதை உண்மையானவற்றுடன் எதிர்க்கிறது .pointer-events: none.modal-backdrop.modal-contentpointer-events: auto

சுருக்கம்

v3 இலிருந்து v4 க்கு நகரும் போது நீங்கள் கவனிக்க வேண்டிய பெரிய டிக்கெட் உருப்படிகள் இங்கே உள்ளன.

உலாவி ஆதரவு

• IE8, IE9 மற்றும் iOS 6 ஆதரவு கைவிடப்பட்டது. v4 இப்போது IE10+ மற்றும் iOS 7+ மட்டுமே. அவற்றில் ஏதேனும் தேவைப்படும் தளங்களுக்கு, v3 ஐப் பயன்படுத்தவும்.
• Android v5.0 Lollipop இன் உலாவி மற்றும் WebViewக்கான அதிகாரப்பூர்வ ஆதரவு சேர்க்கப்பட்டது. Android உலாவி மற்றும் WebView இன் முந்தைய பதிப்புகள் அதிகாரப்பூர்வமற்ற முறையில் மட்டுமே ஆதரிக்கப்படுகின்றன.

உலகளாவிய மாற்றங்கள்

• Flexbox இயல்பாகவே இயக்கப்பட்டது. பொதுவாக இது மிதவைகள் மற்றும் பலவற்றில் இருந்து விலகிச் செல்வதைக் குறிக்கிறது.
• எங்கள் மூல CSS கோப்புகளுக்கு Less இலிருந்து Sass க்கு மாற்றப்பட்டது .
• எங்களின் முதன்மை CSS யூனிட்டாக மாற்றப்பட்டது px, remஇருப்பினும் பிக்சல்கள் மீடியா வினவல்கள் மற்றும் கிரிட் நடத்தைக்கு பயன்படுத்தப்படுகின்றன, ஏனெனில் சாதனத்தின் காட்சிப் பகுதிகள் வகை அளவுகளால் பாதிக்கப்படாது.
• உலகளாவிய எழுத்துரு அளவு இலிருந்து 14pxஅதிகரிக்கப்பட்டது 16px.
• ஐந்தாவது விருப்பத்தைச் சேர்க்க கட்டம் அடுக்குகள் புதுப்பிக்கப்பட்டன (சிறிய சாதனங்களுக்கு கீழேயும் கீழேயும்) மற்றும் அந்த வகுப்புகளிலிருந்து இன்ஃபிக்ஸ் 576pxஅகற்றப்பட்டது . -xsஉதாரணம்: .col-6.col-sm-4.col-md-3.
• $enable-gradients: trueSCSS மாறிகள் (எ.கா., ) வழியாக உள்ளமைக்கக்கூடிய விருப்பங்களுடன் தனி விருப்பத் தீம் மாற்றப்பட்டது .
• கிரண்டிற்குப் பதிலாக npm ஸ்கிரிப்ட்களின் வரிசையைப் பயன்படுத்த பில்ட் சிஸ்டம் மாற்றியமைக்கப்பட்டது. அனைத்து ஸ்கிரிப்ட்களையும் பார்க்கவும் package.jsonஅல்லது உள்ளூர் மேம்பாட்டுத் தேவைகளுக்கு எங்கள் திட்ட ரீட்மீ.
• பூட்ஸ்டார்ப்பின் பதிலளிக்காத பயன்பாடு இனி ஆதரிக்கப்படாது.
• மேலும் விரிவான அமைவு ஆவணங்கள் மற்றும் தனிப்பயனாக்கப்பட்ட உருவாக்கங்களுக்கு ஆதரவாக ஆன்லைன் தனிப்பயனாக்கி கைவிடப்பட்டது.
• பொதுவான CSS சொத்து மதிப்பு ஜோடிகள் மற்றும் விளிம்பு/பேடிங் இடைவெளி குறுக்குவழிகளுக்கு டஜன் கணக்கான புதிய பயன்பாட்டு வகுப்புகள் சேர்க்கப்பட்டது.

கட்ட அமைப்பு

• ஃப்ளெக்ஸ்பாக்ஸுக்கு நகர்த்தப்பட்டது.
  • கிரிட் மிக்ஸின்கள் மற்றும் முன் வரையறுக்கப்பட்ட வகுப்புகளில் ஃப்ளெக்ஸ்பாக்ஸிற்கான ஆதரவு சேர்க்கப்பட்டது.
  • ஃப்ளெக்ஸ்பாக்ஸின் ஒரு பகுதியாக, செங்குத்து மற்றும் கிடைமட்ட சீரமைப்பு வகுப்புகளுக்கான ஆதரவு சேர்க்கப்பட்டுள்ளது.
• புதுப்பிக்கப்பட்ட கட்ட வகுப்பு பெயர்கள் மற்றும் புதிய கட்ட அடுக்கு.
  • மேலும் கிரானுலர் கட்டுப்பாட்டிற்கு கீழே ஒரு புதிய smகட்ட அடுக்கு சேர்க்கப்பட்டது. 768pxஎங்களிடம் இப்போது xs, sm, md, lgமற்றும் xl. இதன் பொருள் ஒவ்வொரு அடுக்கும் ஒரு நிலை உயர்த்தப்பட்டுள்ளது (எனவே .col-md-6v3 இல் இப்போது .col-lg-6v4 இல் உள்ளது).
  • xsmin-width: 0கட்டம் வகுப்புகள், செட் பிக்சல் மதிப்பில் அல்லாமல் ஸ்டைல்களைப் பயன்படுத்தத் தொடங்குகின்றன என்பதை இன்னும் துல்லியமாகப் பிரதிநிதித்துவப்படுத்த இன்ஃபிக்ஸ் தேவைப்படாமல் மாற்றியமைக்கப்பட்டுள்ளன . அதற்கு பதிலாக .col-xs-6, அது இப்போது .col-6. மற்ற அனைத்து கட்ட அடுக்குகளுக்கும் infix தேவைப்படுகிறது (எ.கா., sm).
• புதுப்பிக்கப்பட்ட கட்ட அளவுகள், கலவைகள் மற்றும் மாறிகள்.
  • கிரிட் கேட்டர்கள் இப்போது ஒரு சாஸ் வரைபடத்தைக் கொண்டுள்ளன, எனவே ஒவ்வொரு பிரேக் பாயிண்டிலும் குறிப்பிட்ட கால்வாய் அகலங்களைக் குறிப்பிடலாம்.
  • make-col-readyஒரு ப்ரெப் மிக்சினைப் பயன்படுத்த க்ரிட் மிக்சின்கள் புதுப்பிக்கப்பட்டன மற்றும் தனிப்பட்ட நெடுவரிசையின் அளவை make-colஅமைக்கவும் .flexmax-width
  • 12கிரிட் சிஸ்டம் மீடியா வினவல் முறிவுப் புள்ளிகள் மற்றும் கொள்கலன் அகலங்கள் புதிய கட்டம் அடுக்கைக் கணக்கிடவும், நெடுவரிசைகள் அவற்றின் அதிகபட்ச அகலத்தில் சமமாகப் வகுக்கப்படுவதை உறுதிசெய்யவும் மாற்றப்பட்டது .
  • கட்டம் முறிவு புள்ளிகள் மற்றும் கொள்கலன் அகலங்கள் இப்போது ஒரு சில தனி மாறிகளுக்கு பதிலாக Sass வரைபடங்கள் ( $grid-breakpointsமற்றும் ) வழியாக கையாளப்படுகின்றன. $container-max-widthsஇவை @screen-*மாறிகளை முழுவதுமாக மாற்றி, கட்ட அடுக்குகளை முழுமையாக தனிப்பயனாக்க உங்களை அனுமதிக்கும்.
  • மீடியா கேள்விகளும் மாறிவிட்டன. ஒவ்வொரு முறையும் ஒரே மதிப்புடன் எங்கள் மீடியா வினவல் அறிவிப்புகளை மீண்டும் கூறுவதற்குப் பதிலாக, இப்போது எங்களிடம் உள்ளது @include media-breakpoint-up/down/only. இப்போது, ​​எழுதுவதற்கு பதிலாக @media (min-width: @screen-sm-min) { ... }, நீங்கள் எழுதலாம் @include media-breakpoint-up(sm) { ... }.

கூறுகள்

• கைவிடப்பட்ட பேனல்கள், சிறுபடங்கள் மற்றும் கிணறுகள் ஒரு புதிய அனைத்தையும் உள்ளடக்கிய கூறு, அட்டைகள் .
• Glyphicons ஐகான் எழுத்துரு கைவிடப்பட்டது. உங்களுக்கு ஐகான்கள் தேவைப்பட்டால், சில விருப்பங்கள்:
  • Glyphicons இன் அப்ஸ்ட்ரீம் பதிப்பு
  • ஆக்டிகான்ஸ்
  • எழுத்துரு அற்புதம்
  • மாற்றுகளின் பட்டியலுக்கு நீட்டிப்பு பக்கத்தைப் பார்க்கவும் . கூடுதல் பரிந்துரைகள் உள்ளதா? சிக்கலைத் திறக்கவும் அல்லது PR.
• இணைப்பு jQuery சொருகி கைவிடப்பட்டது.
  • அதற்கு பதிலாக பயன்படுத்த பரிந்துரைக்கிறோம் position: sticky. விவரங்கள் மற்றும் குறிப்பிட்ட பாலிஃபில் பரிந்துரைகளுக்கு HTML5 ஐப் பார்க்கவும் . ஒரு பரிந்துரை, அதைச் @supportsசெயல்படுத்துவதற்கு ஒரு விதியைப் பயன்படுத்த வேண்டும் (எ.கா., @supports (position: sticky) { ... })/
  • கூடுதல், ஸ்டைல்கள் அல்லாதவற்றைப் பயன்படுத்த நீங்கள் Affix ஐப் பயன்படுத்தினால் position, பாலிஃபில்கள் உங்கள் பயன்பாட்டு வழக்கை ஆதரிக்காது. அத்தகைய பயன்பாடுகளுக்கான ஒரு விருப்பம் மூன்றாம் தரப்பு ScrollPos-Styler நூலகம் ஆகும்.
• சற்று தனிப்பயனாக்கப்பட்ட பொத்தான்கள் என்பதால் பேஜர் கூறு கைவிடப்பட்டது .
• அதிக-குறிப்பிட்ட குழந்தைகள் தேர்வாளர்களுக்குப் பதிலாக, அதிகமான அன்-நெஸ்டெட் கிளாஸ் தேர்வாளர்களைப் பயன்படுத்த கிட்டத்தட்ட அனைத்து கூறுகளையும் மறுசீரமைத்தது .

கூறு மூலம்

இந்த பட்டியல் v3.xx மற்றும் v4.0.0 இடையே உள்ள கூறுகளின் முக்கிய மாற்றங்களை எடுத்துக்காட்டுகிறது.

மறுதொடக்கம்

பூட்ஸ்டார்ப் 4 க்கு புதியது ரீபூட் ஆகும், இது ஒரு புதிய ஸ்டைல்ஷீட் ஆகும், இது எங்களுடைய சொந்த கருத்துடைய மீட்டமைப்பு பாணிகளுடன் இயல்பாக்குகிறது. இந்தக் கோப்பில் உள்ள தேர்வாளர்கள் கூறுகளை மட்டுமே பயன்படுத்துகின்றனர்—இங்கு வகுப்புகள் எதுவும் இல்லை. இது எங்கள் ரீசெட் ஸ்டைல்களை எங்களின் கூறு ஸ்டைலில் இருந்து தனிமைப்படுத்துகிறது. இதில் உள்ள சில முக்கியமான ரீசெட்கள், மாற்றம், பல உறுப்புகளில் இருந்து யூனிட்டுகளுக்கு box-sizing: border-boxநகர்தல் , இணைப்பு நடைகள் மற்றும் பல வடிவ உறுப்பு மீட்டமைப்புகள் ஆகும்.emrem

அச்சுக்கலை

• .text-அனைத்து பயன்பாடுகளும் _utilities.scssகோப்பிற்கு நகர்த்தப்பட்டது .
• .page-headerஅதன் பாணிகள் பயன்பாடுகள் மூலம் பயன்படுத்தப்படலாம் என்பதால் கைவிடப்பட்டது .
• .dl-horizontalகைவிடப்பட்டது. அதற்குப் பதிலாக, .rowஅதன் <dl>மற்றும் குழந்தைகளில் கிரிட் நெடுவரிசை வகுப்புகளை (அல்லது மிக்ஸின்கள்) <dt>பயன்படுத்தவும் <dd>.
• <blockquote>மறுவடிவமைப்பு செய்யப்பட்ட தொகுதி மேற்கோள்கள், அவற்றின் பாணிகளை தனிமத்திலிருந்து ஒற்றை வகுப்பிற்கு நகர்த்துதல் , .blockquote. .blockquote-reverseஉரை பயன்பாடுகளுக்கான மாற்றியை கைவிடப்பட்டது .
• .list-inlineஇப்போது அதன் குழந்தைகள் பட்டியல் உருப்படிகளுக்கு புதிய .list-inline-itemவகுப்பைப் பயன்படுத்த வேண்டும்.

படங்கள்

• என மறுபெயரிடப்பட்டது .img-responsive..img-fluid
• .img-roundedஎன மறுபெயரிடப்பட்டது.rounded
• .img-circleஎன மறுபெயரிடப்பட்டது.rounded-circle

அட்டவணைகள்

• தேர்வாளரின் கிட்டத்தட்ட எல்லா நிகழ்வுகளும் >அகற்றப்பட்டன, அதாவது உள்ளமைக்கப்பட்ட அட்டவணைகள் இப்போது தானாக தங்கள் பெற்றோரிடமிருந்து பாணிகளைப் பெறும். இது எங்கள் தேர்வாளர்கள் மற்றும் சாத்தியமான தனிப்பயனாக்கங்களை பெரிதும் எளிதாக்குகிறது.
• நிலைத்தன்மைக்காக மறுபெயரிடப்பட்டது .table-condensed..table-sm
• புதிய .table-inverseவிருப்பம் சேர்க்கப்பட்டது.
• அட்டவணை தலைப்பு மாற்றிகள் சேர்க்கப்பட்டது: .thead-defaultமற்றும் .thead-inverse.
• சூழல் வகுப்புகள் - முன்னொட்டு இருக்குமாறு .table-மறுபெயரிடப்பட்டது. எனவே .active, .success, மற்றும் , .warning, மற்றும் . _ _ _.danger.info.table-active.table-success.table-warning.table-danger.table-info

படிவங்கள்

• நகர்த்தப்பட்ட உறுப்பு _reboot.scssகோப்புக்கு மீட்டமைக்கப்பட்டது.
• என மறுபெயரிடப்பட்டது .control-label..col-form-label
• முறையே மறுபெயரிடப்பட்டது .input-lgமற்றும் .input-smக்கு .form-control-lgமற்றும் ..form-control-sm
• எளிமைக்காக .form-group-*வகுப்புகளை கைவிட்டார். .form-control-*அதற்கு பதிலாக இப்போது வகுப்புகளைப் பயன்படுத்தவும் .
• தொகுதி-நிலை உதவி உரைக்காக கைவிடப்பட்டது .help-blockமற்றும் மாற்றப்பட்டது . .form-textஇன்லைன் உதவி உரை மற்றும் பிற நெகிழ்வான விருப்பங்களுக்கு, போன்ற பயன்பாட்டு வகுப்புகளைப் பயன்படுத்தவும் .text-muted.
• கைவிடப்பட்டது .radio-inlineமற்றும் .checkbox-inline.
• ஒருங்கிணைந்த .checkboxமற்றும் பல்வேறு வகுப்புகள் .radio..form-check.form-check-*
• கிடைமட்ட வடிவங்கள் மாற்றியமைக்கப்பட்டுள்ளன:
  • .form-horizontalவகுப்பு தேவை கைவிடப்பட்டது .
  • .form-groupஇனி .rowமிக்சின் வழியாக ஸ்டைல்கள் பயன்படுத்தப்படாது, எனவே .rowகிடைமட்ட கட்ட தளவமைப்புகளுக்கு (எ.கா., <div class="form-group row">) இப்போது தேவைப்படுகிறது.
  • s .col-form-labelஉடன் செங்குத்தாக மைய லேபிள்களில் புதிய வகுப்பு சேர்க்கப்பட்டது ..form-control
  • கிரிட் வகுப்புகளுடன் கூடிய சிறிய வடிவ அமைப்புகளுக்கு புதியது சேர்க்கப்பட்டது .form-row(உங்களை .rowஒரு .form-rowமற்றும் செல்ல மாற்றவும்).
• தனிப்பயன் படிவ ஆதரவு சேர்க்கப்பட்டது (செக்பாக்ஸ்கள், ரேடியோக்கள், தேர்வுகள் மற்றும் கோப்பு உள்ளீடுகளுக்கு).
• மாற்றப்பட்டது .has-error, .has-warning, மற்றும் .has-successவகுப்புகள் HTML5 உடன் CSS :invalidமற்றும் :validபோலி வகுப்புகள் மூலம் சரிபார்ப்பு படிவம்.
• என மறுபெயரிடப்பட்டது .form-control-static..form-control-plaintext

பொத்தான்கள்

• என மறுபெயரிடப்பட்டது .btn-default..btn-secondary
• வி 3யை விட விகிதாச்சாரத்தில் மிகவும் சிறியதாக இருப்பதால் .btn-xsவகுப்பை முழுவதுமாக கைவிடப்பட்டது ..btn-sm
• jQuery செருகுநிரலின் மாநில பொத்தான் அம்சம் button.jsகைவிடப்பட்டது. இதில் முறைகளும் $().button(string)அடங்கும் . $().button('reset')அதற்குப் பதிலாக ஒரு சிறிய தனிப்பயன் ஜாவாஸ்கிரிப்டைப் பயன்படுத்துமாறு நாங்கள் அறிவுறுத்துகிறோம், இது நீங்கள் விரும்பும் விதத்தில் சரியாக நடந்துகொள்வதன் பலனைப் பெறும்.
  • செருகுநிரலின் மற்ற அம்சங்கள் (பட்டன் தேர்வுப்பெட்டிகள், பொத்தான் ரேடியோக்கள், ஒற்றை-மாற்று பொத்தான்கள்) v4 இல் தக்கவைக்கப்பட்டுள்ளன என்பதை நினைவில் கொள்ளவும்.
• பொத்தான்களை IE9+ ஆதரவாக மாற்றவும் [disabled]. இருப்பினும் நேட்டிவ் டிசேபிள் ஃபீல்ட்செட்கள் IE11 இல் இன்னும் தரமற்றதாக இருப்பதால் இன்னும் அவசியம் .:disabled:disabledfieldset[disabled]

பொத்தான் குழு

• ஃப்ளெக்ஸ்பாக்ஸுடன் கூறு மீண்டும் எழுதப்பட்டது.
• அகற்றப்பட்டது .btn-group-justified. மாற்றாக நீங்கள் <div class="btn-group d-flex" role="group"></div>உறுப்புகளைச் சுற்றி ரேப்பராகப் பயன்படுத்தலாம் .w-100.
• .btn-group-xsமுற்றிலும் அகற்றப்பட்ட வகுப்பை கைவிடப்பட்டது .btn-xs.
• பொத்தான் கருவிப்பட்டிகளில் உள்ள பொத்தான் குழுக்களுக்கு இடையே வெளிப்படையான இடைவெளி அகற்றப்பட்டது; இப்போது விளிம்பு பயன்பாடுகளைப் பயன்படுத்தவும்.
• மற்ற கூறுகளுடன் பயன்படுத்த மேம்படுத்தப்பட்ட ஆவணங்கள்.

கீழிறங்கும்

• அனைத்து கூறுகள், மாற்றியமைப்பாளர்கள் போன்றவற்றிற்கான பெற்றோர் தேர்வாளர்களில் இருந்து ஒருமை வகுப்புகளுக்கு மாற்றப்பட்டது.
• கீழ்தோன்றும் மெனுவில் இணைக்கப்பட்ட மேல்நோக்கி அல்லது கீழ்நோக்கி எதிர்கொள்ளும் அம்புகளுடன் இனி ஷிப்பிங் செய்யப்படாத எளிய கீழ்தோன்றும் பாணிகள்.
• கீழ்தோன்றல்களை இப்போது <div>s அல்லது <ul>s உடன் உருவாக்கலாம்.
• கீழ்தோன்றும் உருப்படிகளுக்கு எளிதான, உள்ளமைக்கப்பட்ட ஆதரவை வழங்க, கீழ்தோன்றும் பாணிகள் மற்றும் மார்க்அப் மீண்டும் கட்டமைக்கப்பட்டது <a>.<button>
• என மறுபெயரிடப்பட்டது .divider..dropdown-divider
• கீழ்தோன்றும் உருப்படிகள் இப்போது தேவை .dropdown-item.
• கீழ்தோன்றும் நிலைமாற்றங்களுக்கு இனி வெளிப்படையானது தேவையில்லை <span class="caret"></span>; இது இப்போது CSS இன் மூலம் தானாகவே ::afterவழங்கப்படுகிறது .dropdown-toggle.

கட்ட அமைப்பு

• ஒரு புதிய 576pxகட்டம் பிரேக்பாயிண்ட் என சேர்க்கப்பட்டது sm, அதாவது இப்போது ஐந்து மொத்த அடுக்குகள் உள்ளன ( xs, sm, md, lgமற்றும் xl).
• எளிமையான கட்ட வகுப்புகளுக்கு பதிலளிக்கக்கூடிய கட்டம் மாற்றி வகுப்புகள் என மறுபெயரிடப்பட்டது .col-{breakpoint}-{modifier}-{size}..{modifier}-{breakpoint}-{size}
• புதிய ஃப்ளெக்ஸ்பாக்ஸ்-இயங்கும் orderவகுப்புகளுக்கான புஷ் மற்றும் புல் மாடிஃபையர் வகுப்புகள் கைவிடப்பட்டது. எடுத்துக்காட்டாக, மற்றும் என்பதற்குப் பதிலாக .col-8.push-4, .col-4.pull-8நீங்கள் .col-8.order-2மற்றும் .col-4.order-1.
• கட்ட அமைப்பு மற்றும் கூறுகளுக்கான ஃப்ளெக்ஸ்பாக்ஸ் பயன்பாட்டு வகுப்புகள் சேர்க்கப்பட்டது.

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

• ஃப்ளெக்ஸ்பாக்ஸுடன் கூறு மீண்டும் எழுதப்பட்டது.
• பட்டியல் குழு உருப்படிகளின் ஸ்டைலிங் இணைப்பு மற்றும் பொத்தான் பதிப்புகளுக்கு வெளிப்படையான a.list-group-itemவகுப்பு, ..list-group-item-action
• .list-group-flushகார்டுகளுடன் பயன்படுத்த வகுப்பு சேர்க்கப்பட்டது .

மாதிரி

• ஃப்ளெக்ஸ்பாக்ஸுடன் கூறு மீண்டும் எழுதப்பட்டது.
• ஃப்ளெக்ஸ்பாக்ஸுக்கு நகர்த்தப்பட்டால், நாங்கள் இனி மிதவைகளைப் பயன்படுத்தாததால், ஹெடரில் உள்ள டிஸ்மிஸ் ஐகான்களின் சீரமைப்பு உடைந்திருக்கலாம். மிதக்கும் உள்ளடக்கம் முதலில் வருகிறது, ஆனால் ஃப்ளெக்ஸ்பாக்ஸில் அது இனி இல்லை. உங்கள் நிராகரிப்பு ஐகான்களை சரிசெய்ய மாதிரி தலைப்புகளுக்குப் பிறகு வருமாறு புதுப்பிக்கவும்.
• விருப்பமும் ( வெளிப்புற remoteஉள்ளடக்கத்தை ஒரு மாதிரியில் தானாக ஏற்றவும் மற்றும் உட்செலுத்தவும் பயன்படுத்தப்படலாம்) மற்றும் தொடர்புடைய loaded.bs.modalநிகழ்வு அகற்றப்பட்டது. அதற்கு பதிலாக கிளையன்ட் பக்க டெம்ப்ளேட்டிங் அல்லது டேட்டா பைண்டிங் ஃப்ரேம்வொர்க்கைப் பயன்படுத்தவும் அல்லது jQuery.load ஐ அழைக்கவும் பரிந்துரைக்கிறோம் .

நவ்ஸ்

• ஃப்ளெக்ஸ்பாக்ஸுடன் கூறு மீண்டும் எழுதப்பட்டது.
• >அன்-நெஸ்ட் கிளாஸ்கள் மூலம் எளிமையான ஸ்டைலிங்கிற்காக கிட்டத்தட்ட அனைத்து தேர்வாளர்களும் கைவிடப்பட்டனர் .
• போன்ற HTML-குறிப்பிட்ட தேர்வாளர்களுக்குப் பதிலாக, s, s மற்றும் s ஆகியவற்றிற்கான .nav > li > aதனி வகுப்புகளைப் பயன்படுத்துகிறோம் . இது உங்கள் HTML ஐ மேலும் நெகிழ்வானதாக்குகிறது..nav.nav-item.nav-link

நவ்பார்

சீரமைப்பு, வினைத்திறன் மற்றும் தனிப்பயனாக்கலுக்கான மேம்படுத்தப்பட்ட ஆதரவுடன் navbar முழுவதுமாக flexbox இல் மீண்டும் எழுதப்பட்டுள்ளது.

• நேவ்பாரை எங்கு சுருக்க வேண்டும் என்பதை நீங்கள் தேர்வு செய்யும் இடத்தில், பதிலளிக்கக்கூடிய நேவ்பார் நடத்தைகள் இப்போது .navbarவகுப்பிற்குப் பயன்படுத்தப்படுகின்றன. முன்பு இது ஒரு குறைந்த மாறி மாற்றம் மற்றும் தேவையான மறுதொகுப்பு. .navbar-expand-{breakpoint}
• .navbar-defaultஇப்போது உள்ளது .navbar-light, இருப்பினும் .navbar-darkஅப்படியே உள்ளது. ஒவ்வொரு நவ்பாரிலும் இவற்றில் ஒன்று தேவை. இருப்பினும், இந்த வகுப்புகள் இனி அமைக்கப்படவில்லை background-colorகள்; மாறாக அவை அடிப்படையில் மட்டுமே பாதிக்கின்றன color.
• Navbarகளுக்கு இப்போது ஒருவித பின்னணி அறிவிப்பு தேவைப்படுகிறது. எங்களின் பின்னணிப் பயன்பாடுகளிலிருந்து ( ) தேர்வு செய்யவும் அல்லது வெறித்தனமான தனிப்பயனாக்கத்திற்காக.bg-* மேலே உள்ள ஒளி/தலைகீழ் வகுப்புகளுடன் உங்கள் சொந்தமாக அமைக்கவும் .
• ஃப்ளெக்ஸ்பாக்ஸ் பாணிகள் கொடுக்கப்பட்டால், நேவ்பார்கள் இப்போது எளிதாக சீரமைப்பு விருப்பங்களுக்கு ஃப்ளெக்ஸ்பாக்ஸ் பயன்பாடுகளைப் பயன்படுத்தலாம்.
• .navbar-toggleஇப்போது .navbar-togglerஉள்ளது மற்றும் வெவ்வேறு பாணிகள் மற்றும் உள் மார்க்அப் உள்ளது (இன்னும் மூன்று வினாடிகள் இல்லை <span>).
• .navbar-formவகுப்பை முழுவதுமாக கைவிட்டார் . இது இனி தேவையில்லை; அதற்கு பதிலாக, .form-inlineதேவையான அளவு மார்ஜின் பயன்பாடுகளைப் பயன்படுத்தவும்.
• Navbars இனி சேர்க்கப்படாது margin-bottomஅல்லது border-radiusஇயல்புநிலையாக. தேவைக்கேற்ப பயன்பாடுகளைப் பயன்படுத்தவும்.
• நேவ்பார்களைக் கொண்ட அனைத்து எடுத்துக்காட்டுகளும் புதிய மார்க்அப்பைச் சேர்க்க புதுப்பிக்கப்பட்டுள்ளன.

பேஜினேஷன்

• ஃப்ளெக்ஸ்பாக்ஸுடன் கூறு மீண்டும் எழுதப்பட்டது.
• களின் வழித்தோன்றல்களுக்கு இப்போது வெளிப்படையான வகுப்புகள் ( .page-item, ) தேவை.page-link.pagination
• .pagerதனிப்பயனாக்கப்பட்ட அவுட்லைன் பொத்தான்களை விட சற்று அதிகமாக இருந்ததால் கூறு முழுவதுமாக கைவிடப்பட்டது .

ரொட்டிதூள்கள்

• ஒரு வெளிப்படையான வகுப்பு, , இன் .breadcrumb-itemசந்ததியினர் மீது இப்போது தேவை.breadcrumb

லேபிள்கள் மற்றும் பேட்ஜ்கள்

• ஒருங்கிணைக்கப்பட்டது .labelமற்றும் உறுப்பில் .badgeஇருந்து தெளிவில்லாமல் <label>மற்றும் தொடர்புடைய கூறுகளை எளிதாக்குகிறது.
• .badge-pillவட்டமான "மாத்திரை" தோற்றத்திற்காக மாற்றியமைப்பாளராக சேர்க்கப்பட்டது .
• பட்டியல் குழுக்கள் மற்றும் பிற கூறுகளில் பேட்ஜ்கள் இனி தானாகவே மிதக்கப்படாது. அதற்கான பயன்பாட்டு வகுப்புகள் இப்போது தேவைப்படுகின்றன.
• .badge-defaultமற்ற இடங்களில் பயன்படுத்தப்படும் கூறு மாற்றியமைக்கும் வகுப்புகளுக்குப் பொருந்துவதற்கு கைவிடப்பட்டு .badge-secondaryசேர்க்கப்பட்டது.

பேனல்கள், சிறு உருவங்கள் மற்றும் கிணறுகள்

புதிய அட்டை கூறுக்காக முற்றிலும் கைவிடப்பட்டது.

பேனல்கள்

• .panelக்கு .card, இப்போது ஃப்ளெக்ஸ்பாக்ஸுடன் கட்டப்பட்டுள்ளது.
• .panel-defaultஅகற்றப்பட்டது மற்றும் மாற்று இல்லை.
• .panel-groupஅகற்றப்பட்டது மற்றும் மாற்று இல்லை. .card-groupஒரு மாற்று அல்ல, அது வேறுபட்டது.
• .panel-headingசெய்ய.card-header
• .panel-titleக்கு .card-title. விரும்பிய தோற்றத்தைப் பொறுத்து, நீங்கள் தலைப்பு கூறுகள் அல்லது வகுப்புகள் (எ.கா. <h3>, .h3) அல்லது தடித்த உறுப்புகள் அல்லது வகுப்புகள் (எ.கா. <strong>, ) <b>ஆகியவற்றைப் பயன்படுத்த விரும்பலாம் .font-weight-bold. .card-title, இதேபோல் பெயரிடப்பட்டாலும், வேறு தோற்றத்தை உருவாக்குகிறது என்பதை நினைவில் கொள்ளவும் .panel-title.
• .panel-bodyசெய்ய.card-body
• .panel-footerசெய்ய.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, மற்றும் எங்கள் Sass வரைபடத்திலிருந்து உருவாக்கப்பட்ட , , மற்றும் பயன்பாடுகளுக்கு .panel-dangerகைவிடப்பட்டது ..bg-.text-.border$theme-colors

முன்னேற்றம்

• சூழல் .progress-bar-*வகுப்புகள் .bg-*பயன்பாடுகளுடன் மாற்றப்பட்டன. உதாரணமாக, class="progress-bar progress-bar-danger"ஆகிறது class="progress-bar bg-danger".
• .activeஉடன் அனிமேஷன் செய்யப்பட்ட முன்னேற்றப் பட்டிகளுக்குப் பதிலாக .progress-bar-animated.

கொணர்வி

• வடிவமைப்பு மற்றும் ஸ்டைலிங்கை எளிதாக்க முழு கூறுகளையும் மாற்றியமைத்தது. நீங்கள் மேலெழுதுவதற்கு எங்களிடம் சில ஸ்டைல்கள், புதிய குறிகாட்டிகள் மற்றும் புதிய ஐகான்கள் உள்ளன.
• அனைத்து CSSகளும் உள்ளமைக்கப்படாதது மற்றும் மறுபெயரிடப்பட்டது, ஒவ்வொரு வகுப்பும் முன்னொட்டாக இருப்பதை உறுதிசெய்கிறது .carousel-.
  • கொணர்வி பொருட்களுக்கு, .next, .prev, .leftமற்றும் .rightஇப்போது .carousel-item-next, .carousel-item-prev, .carousel-item-left, மற்றும் .carousel-item-right.
  • .itemஇப்போதும் உள்ளது .carousel-item.
  • முந்தைய/அடுத்த கட்டுப்பாடுகளுக்கு, இப்போது மற்றும் , .carousel-control.rightஅதாவது அவர்களுக்கு ஒரு குறிப்பிட்ட அடிப்படை வகுப்பு தேவையில்லை..carousel-control.left.carousel-control-next.carousel-control-prev
• அனைத்து பதிலளிக்கக்கூடிய ஸ்டைலிங் நீக்கப்பட்டது, பயன்பாடுகளுக்கு ஒத்திவைக்கப்பட்டது (எ.கா., குறிப்பிட்ட வியூபோர்ட்களில் தலைப்புகளைக் காண்பித்தல்) மற்றும் தேவைக்கேற்ப தனிப்பயன் பாணிகள்.
• கொணர்வி உருப்படிகளில் உள்ள படங்களுக்கான நீக்கப்பட்ட படம் மேலெழுதப்பட்டது, பயன்பாடுகளுக்கு ஒத்திவைக்கப்பட்டது.
• புதிய மார்க்அப் மற்றும் ஸ்டைல்களைச் சேர்க்க, கொணர்வி உதாரணத்தை மாற்றி அமைக்கப்பட்டுள்ளது.

அட்டவணைகள்

• பாணி உள்ளமை அட்டவணைகளுக்கான ஆதரவு அகற்றப்பட்டது. எளிமையான தேர்வாளர்களுக்காக அனைத்து அட்டவணை பாணிகளும் இப்போது v4 இல் பெறப்படுகின்றன.
• தலைகீழ் அட்டவணை மாறுபாடு சேர்க்கப்பட்டது.

பயன்பாடுகள்

• காட்சி, மறைக்கப்பட்ட மற்றும் பல:
  • காட்சிப் பயன்பாடுகளை பதிலளிக்கும்படி செய்தது (எ.கா. .d-noneமற்றும் d-{sm,md,lg,xl}-none).
  • .hidden-*புதிய காட்சிப் பயன்பாடுகளுக்கான மொத்தப் பயன்பாடுகள் கைவிடப்பட்டன . எடுத்துக்காட்டாக, க்குப் பதிலாக .hidden-sm-up, பயன்படுத்தவும் .d-sm-none. .hidden-printகாட்சி பயன்பாட்டு பெயரிடும் திட்டத்தைப் பயன்படுத்த பயன்பாடுகளுக்கு மறுபெயரிடப்பட்டது . இந்தப் பக்கத்தின் பதிலளிக்கக்கூடிய பயன்பாடுகள் பிரிவின் கீழ் மேலும் தகவல் .
  • .float-{sm,md,lg,xl}-{left,right,none}பதிலளிக்கக்கூடிய மிதவைகளுக்கான வகுப்புகள் சேர்க்கப்பட்டு அகற்றப்பட்டன .pull-leftமற்றும் .pull-rightஅவை தேவையற்றவை .float-leftமற்றும் .float-right.
• வகை:
  • எங்கள் உரை சீரமைப்பு வகுப்புகளுக்கு பதிலளிக்கக்கூடிய மாறுபாடுகளைச் சேர்த்தது .text-{sm,md,lg,xl}-{left,center,right}.
• சீரமைப்பு மற்றும் இடைவெளி:
  • அனைத்து பக்கங்களிலும் புதிய பதிலளிக்கக்கூடிய விளிம்பு மற்றும் திணிப்பு பயன்பாடுகள் , மேலும் செங்குத்து மற்றும் கிடைமட்ட சுருக்கெழுத்துக்கள் சேர்க்கப்பட்டது.
  • ஃப்ளெக்ஸ்பாக்ஸ் பயன்பாடுகளின் படகு ஏற்றப்பட்டது .
  • .center-blockபுதிய .mx-autoவகுப்பிற்கு கைவிடப்பட்டது .
• பழைய உலாவி பதிப்புகளுக்கான ஆதரவை கைவிட Clearfix புதுப்பிக்கப்பட்டது.

விற்பனையாளர் முன்னொட்டு கலவைகள்

v3.2.0 இல் நிறுத்தப்பட்ட பூட்ஸ்டார்ப் 3 இன் விற்பனையாளர் முன்னொட்டு மிக்சின்கள் பூட்ஸ்டார்ப் 4 இல் அகற்றப்பட்டுள்ளன. நாங்கள் Autoprefixer ஐப் பயன்படுத்துவதால் , அவை இனி தேவையில்லை.

பின்வரும் கலவைகள் அகற்றப்பட்டன : animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing_ content-columns_ hyphens_ opacity_ perspective_ perspective-origin_ rotate_ rotateX_ rotateY_ scale_ scaleX_ scaleY_ skew_ transform-origin_ transition-delay_ transition-duration_ transition-property_ transition-timing-function_transition-transformtranslatetranslate3duser-select

ஆவணப்படுத்தல்

எங்கள் ஆவணங்கள் போர்டு முழுவதும் மேம்படுத்தப்பட்டது. இதோ கீழ்நிலை:

• நாங்கள் இன்னும் ஜெகில்லைப் பயன்படுத்துகிறோம், ஆனால் கலவையில் செருகுநிரல்கள் உள்ளன:
  • bugify.rbஎங்கள் உலாவி பிழைகள் பக்கத்தில் உள்ளீடுகளை திறமையாக பட்டியலிட பயன்படுகிறது .
  • example.rbஇயல்புநிலை highlight.rbசெருகுநிரலின் தனிப்பயன் ஃபோர்க் ஆகும், இது எளிதாக எடுத்துக்காட்டு-குறியீடு கையாளுதலை அனுமதிக்கிறது.
  • callout.rbஅதேபோன்ற தனிப்பயன் ஃபோர்க் ஆகும், ஆனால் எங்கள் சிறப்பு டாக்ஸ் கால்அவுட்களுக்காக வடிவமைக்கப்பட்டுள்ளது.
  • எங்கள் உள்ளடக்க அட்டவணையை உருவாக்க jekyll-toc பயன்படுத்தப்படுகிறது.
• எளிதாகத் திருத்துவதற்காக அனைத்து டாக்ஸ் உள்ளடக்கமும் மார்க் டவுனில் (HTMLக்குப் பதிலாக) மீண்டும் எழுதப்பட்டது.
• எளிமையான உள்ளடக்கம் மற்றும் அணுகக்கூடிய படிநிலைக்கு பக்கங்கள் மறுசீரமைக்கப்பட்டுள்ளன.
• பூட்ஸ்டார்ப்பின் மாறிகள், மிக்சின்கள் மற்றும் பலவற்றை முழுமையாகப் பயன்படுத்த, வழக்கமான CSS இலிருந்து SCSS க்கு மாறினோம்.

பதிலளிக்கக்கூடிய பயன்பாடுகள்

v4.0.0 இல் அனைத்து @screen-மாறிகளும் அகற்றப்பட்டன. அதற்குப் பதிலாக media-breakpoint-up(), media-breakpoint-down(), அல்லது media-breakpoint-only()Sass mixins அல்லது $grid-breakpointsSass வரைபடத்தைப் பயன்படுத்தவும்.

displayவெளிப்படையான பயன்பாடுகளுக்கு ஆதரவாக எங்கள் பதிலளிக்கக்கூடிய பயன்பாட்டு வகுப்புகள் பெரும்பாலும் அகற்றப்பட்டுள்ளன .

• மற்றும் வகுப்புகள் jQuery .hiddenமற்றும் முறைகளுடன் .showமுரண்படுவதால் அவை அகற்றப்பட்டன $(...).hide(). $(...).show()அதற்குப் பதிலாக, பண்புக்கூறை மாற்ற முயற்சிக்கவும் [hidden]அல்லது இன்லைன் பாணிகளைப் style="display: none;"பயன்படுத்தவும் style="display: block;".
• அனைத்து .hidden-வகுப்புகளும் அகற்றப்பட்டன, மறுபெயரிடப்பட்ட அச்சுப் பயன்பாடுகளைத் தவிர.
  • v3 இலிருந்து அகற்றப்பட்டது:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • v4 ஆல்பாஸிலிருந்து அகற்றப்பட்டது:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• அச்சுப் பயன்பாடுகள் இனி .hidden-அல்லது உடன் தொடங்குவதில்லை .visible-, ஆனால் .d-print-.
  • பழைய பெயர்கள் : .visible-print-block, .visible-print-inline,.visible-print-inline-block.hidden-print
  • புதிய வகுப்புகள்: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

வெளிப்படையான வகுப்புகளைப் பயன்படுத்துவதற்குப் பதிலாக .visible-*, அந்தத் திரை அளவில் அதை மறைக்காமல் ஒரு உறுப்பைக் காணும்படி செய்கிறீர்கள். கொடுக்கப்பட்ட திரை அளவுகளின் இடைவெளியில் மட்டும் ஒரு உறுப்பைக் காட்ட நீங்கள் ஒரு .d-*-noneவகுப்பை ஒரு வகுப்போடு இணைக்கலாம் (எ.கா. உறுப்பை நடுத்தர மற்றும் பெரிய சாதனங்களில் மட்டுமே காட்டுகிறது)..d-*-block.d-none.d-md-block.d-xl-none

v4 இல் உள்ள கட்ட முறிவுப் புள்ளிகளில் ஏற்படும் மாற்றங்கள், அதே முடிவுகளை அடைய நீங்கள் ஒரு பிரேக் பாயிண்ட் பெரிதாகச் செல்ல வேண்டும் என்பதைக் குறிக்கிறது. புதிய பதிலளிக்கக்கூடிய பயன்பாட்டு வகுப்புகள் குறைவான பொதுவான நிகழ்வுகளுக்கு இடமளிக்க முயற்சிப்பதில்லை, அங்கு ஒரு தனிமத்தின் தெரிவுநிலையை ஒரு தொடர்ச்சியான காட்சிப் பகுதி அளவுகளாக வெளிப்படுத்த முடியாது; இதுபோன்ற சந்தர்ப்பங்களில் நீங்கள் தனிப்பயன் CSS ஐப் பயன்படுத்த வேண்டும்.