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 प्रकाशनांत संबोधीत करपाची गरज आशिल्ली. तुमी Beta 2 वा Bootstrap च्या खंयच्याय पोरन्या आवृत्तींतल्यान Beta 3 कडेन अद्ययावत करतात जाल्यार हे बदल लागू जातात.

तरेकवार

• वापरूंक नाशिल्लें $thumbnail-transitionचडांत चड काडून उडयलें. आमी कांयच संक्रमण करीनाशिल्ले, देखून तो फकत अतिरिक्त कोड आशिल्लो.
• npm पॅकेजींत आतां आमच्या स्रोत आनी dist फायलीं सोडून हेर खंयचीय फायली आसपावीत करूंक नात; जर तुमी तांचेर आदारून आशिल्ले आनी node_modulesफोल्डरा वरवीं आमचीं स्क्रिप्ट चलयताले जाल्यार, तुमी तुमचो कार्यप्रवाह अनुकूल करपाक जाय.

रूपां

• सानुकूल आनी मुलभूत दोनूय चेकबॉक्स आनी रेडिओ परतून बरयल्यात. आतां, दोगांय कडेन जुळपी HTML रचणूक (भायल्या <div>वांगडा भायली <input>आनी <label>) आनी समान मांडावळ शैली (स्टॅक केल्ली मुलभूत, संशोधक वर्गा वांगडा इनलायन) आसात. हाका लागून आमकां इनपुटाचे स्थितीचेर आदारीत लेबल शैली करपाक मेळटा, disabledगुणधर्माक आदार सोंपें करपाक (आदीं पालक वर्गाची गरज आशिल्ली) आनी आमच्या फॉर्म प्रमाणीकरणाक चड बरो आदार दिवपाक मेळटा.

  हाचो एक भाग म्हूण, आमी background-imageसानुकूल फॉर्म चेकबॉक्स आनी रेडिओचेर जायत्या s वेवस्थापन करपाखातीर 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 चक्रांत बदल मेळ्ळो. तो आतां नेस्टेड Sass नकासो न्हय आनी आतां फकत एक स्ट्रिंग पॉवर दिता- Browseबटण कारण तें आतां आमच्या Sass कडल्यान निर्माण केल्लें एकमेव छद्म-घटक आसा. Choose fileमजकूर आतां .custom-file-label.

इनपुट गट

• इनपुट गट अॅडॉन आतां एका इनपुटाच्या सापेक्ष तांच्या प्लेसमेंटाक विशिश्ट आसात. आमी सोडल्यात .input-group-addonआनी .input-group-btnदोन नव्या वर्गां खातीर, .input-group-prependआनी .input-group-append. तुमी आतां स्पश्टपणान एपेंड वा प्रीपेंड वापरपाक जाय, आमच्या CSS चो चडसो भाग सोंपो करून. एपेंड वा प्रीपेंड भितर, तुमचीं बटणां हेर खंयच्याय सुवातेर अस्तित्वांत आसतले तशीं दवरात, पूण मजकूर गुठलायात .input-group-text.

• प्रमाणीकरण शैली आतां समर्थीत आसात, तशेंच जायते इनपुट आसात (जरी तुमी दर गटाक फकत एक इनपुट प्रमाणीत करूंक शकतात).

• आकारमान वर्ग पालकाचेर आसपाक जाय .input-groupआनी वैयक्तीक फॉर्म घटकांचेर न्हय.

बीटा 2 बदलता

बीटांत आसतना, आमी कसलेच ब्रेकिंग बदल जावचे न्हय असो आमी हेतू दवरतात. पूण, गजाली सदांच नियोजीत केल्ले प्रमाण चलनात. बीटा 1 वयल्यान बीटा 2 कडेन वतना लक्षांत दवरपाचे ब्रेकिंग बदल सकयल दिल्यात.

तोडणें

• व्हेरिएबल काडून उडयला $badge-colorआनी ताचो वापर .badge. आमी color contrast function वापरतात a colorbased on the निवडपाक 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}गरज पडल्यार.
• पर्यायांखातीर (देखीक, Yarn वा npm) पॅकेज वेवस्थापक नाका म्हणिल्ल्यान Bower आदार सोडला. तपशीलां खातीर पळयात 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-contentकरता pointer-events: auto.

सारांश

v3 वयल्यान v4 कडेन वतना तुमकां जागृत रावपाक जायत अशो व्हड तिकीट आयटम हांगा दिल्यात.

ब्राउझर समर्थन

• IE8, IE9, आनी iOS 6 समर्थन सोडून दिला. v4 आतां फकत IE10+ आनी iOS 7+ आसा. तातूंतल्या खंयच्याय एका सायटीं खातीर, v3 वापरात.
• Android v5.0 Lollipop च्या ब्राउझर आनी वेबव्यू खातीर अधिकृत समर्थन जोडला. Android ब्राउझर आनी WebView ची आदली आवृत्ती फकत अनधिकृतपणान समर्थीत उरता.

जागतीक बदल

• Flexbox पूर्वनिर्धारीतपणान सक्षम केला. सादारणपणान हाचो अर्थ फ्लोट्सा पासून पयस वचप आनी आमच्या घटकां वयल्यान चड.
• आमच्या स्त्रोत CSS फायलीं खातीर Less कडल्यान Sass कडेन वळयलां.
• आमचो प्राथमीक CSS एकक म्हणून पासून pxते वळयला rem, जरी डिव्हायस दृश्यपोर्टांचेर प्रकार आकाराचो परिणाम जायना म्हणून माध्यम क्वेरी आनी ग्रिड वर्तना खातीर अजूनय पिक्सेल वापरतात.
• जागतीक फॉन्ट-आकार वाडलो 14pxते 16px.
• पांचवो पर्याय जोडपाक ग्रिड टियर नव्यान तयार केल्यात ( 576pxआनी सकयल ल्हान साधनांक संबोधीत करप) आनी -xsत्या वर्गांतल्यान इन्फिक्स काडून उडयलो. देखीक: .col-6.col-sm-4.col-md-3.
• SCSS चड-उणें (देखीक, $enable-gradients: true) वरवीं संरचीत करपाक येवपी पर्यायांनी वेगळी पर्यायी थीम बदलल्या.
• Grunt बदला npm स्क्रिप्टांची माळ वापरपाक प्रणाली तयार करात. सगळ्या लिपीं खातीर पळयात package.json, वा थळाव्या उदरगतीच्या गरजां खातीर आमचो प्रकल्प readme.
• बूटस्ट्रॅपाचो प्रतिसाद नाशिल्लो वापर आतां समर्थीत ना.
• चड विस्तारीत सेटअप दस्तावेजीकरण आनी पसंतीचे बिल्डांच्या फाटबळांत ऑनलायन सानुकूल सोडलो.
• सामान्य CSS गुणधर्म-मोल जोडयो आनी मार्जिन/पॅडींग अंतर शॉर्टकटां खातीर डझनभर नवे उपयुक्तताय वर्ग जोडल्यात.

जाळी पद्दत

• फ्लेक्सबॉक्सांत स्थलांतरीत केलें.
  • ग्रिड मिक्सिन आनी पूर्वनिर्धारीत वर्गांत flexbox खातीर आदार जोडला.
  • flexbox चो एक भाग म्हूण, उब्या आनी आडव्या संरेखण वर्गांक आदार आस्पावतालो.
• ग्रिड वर्ग नांवां आनी नवी ग्रिड टियर अद्ययावत केल्या.
  • चड दाणेदार नियंत्रणाखातीर सकयल नवी smग्रिड टियर जोडल्या. 768pxआमकां आतां xs, sm, md, lg, आनी xl. हाचोय अर्थ दरेक टियर एक लेव्हल बम्प केला (म्हणून .col-md-6v3 मदीं आतां .col-lg-6v4 मदीं आसा).
  • xsग्रिड वर्गांत बदल केल्यात जाका लागून इन्फिक्साक चड अचूकपणान प्रतिनिधीत्व करपाची गरज ना की ते min-width: 0थारायिल्ल्या पिक्सेल मोलाचेर न्हय तर शैली लागू करपाक लागतात. जाग्यार .col-xs-6, आतां जालां .col-6. हेर सगळ्या जाळी थरांक इन्फिक्साची गरज आसता (देखीक, sm).
• ग्रिड आकार, मिक्सिन, आनी चड-उणें अद्ययावत केल्यात.
  • ग्रिड गटरांक आतां सॅस नकासो आसा देखून तुमी दर एका ब्रेकपॉइंटाचेर विशिश्ट गटर रुंदाय निर्देशीत करूंक शकतात.
  • make-col-readyएक प्रिप मिक्सिन वापरपाक अद्ययावत ग्रिड मिक्सिन आनी एक make-colसेट करपाक flexआनी max-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 चिन्न फॉन्ट सोडलो. तुमकां चिन्नां जाय जाल्यार, कांय पर्याय अशे आसात:
  • ग्लिफिकॉन्साची अपस्ट्रीम आवृत्ती
  • ऑक्टिकॉन हें नांव
  • फॉन्ट अद्भुत आसा
  • पर्यायांची वळेरी खातीर विस्तार पान पळयात . अतिरिक्त सुचोवण्यो आसात? उपकार करून एक मुद्दो वा पीआर उगडात.
• Affix jQuery प्लगइन सोडून दिला.
  • position: stickyताचे बदला आमी वापरपाची शिफारस करतात . तपशील आनी विशिश्ट पॉलीफिल शिफारशीं खातीर HTML5 उपकार करून नोंद पळयात . एक सुचोवणी म्हळ्यार @supportsती चालीक लावपाखातीर एक नेम वापरप (देखीक, @supports (position: sticky) { ... }) .
  • तुमी अतिरिक्त, बिगर- positionशैली लागू करपाक Affix वापरताले जाल्यार, पॉलीफिल तुमच्या वापर प्रकरणाक तेंको दिवंक शकचे नात. अशा वापरां खातीर एक पर्याय म्हणल्यार तिसऱ्या पक्षाची ScrollPos-Styler लायब्ररी.
• पेजर घटक तो मुळाव्यान मात्सो सानुकूल केल्ले बटण आशिल्ल्यान सोडलो.
• अति-विशिश्ट भुरगीं निवडपी बदला चड अ-नेस्टेड वर्ग निवडक वापरपाक लागीं लागीं सगळ्या घटकांक पुनर्रचना केल्यात.

घटकाप्रमाणें

ही वळेरी v3.xx आनी v4.0.0 मदल्या घटका प्रमाणें कळ बदल उजवाडायता.

रिबूट करचें

Bootstrap 4 चें नवें म्हणल्यार Reboot , एक नवी शैलीपत्रक जी आमच्या स्वताच्या कांय प्रमाणांत मतदार रीसेट शैलींनी Normalize चेर उबारता. ह्या फायलीन दिसपी निवडक फकत घटक वापरतात-हांगा वर्ग नात. हाका लागून चड मॉड्यूलर पद्दती खातीर आमचीं रीसेट शैलीं आमच्या घटक शैलीं पासून वेगळीं जातात. हातूंत आस्पाव आशिल्ले कांय म्हत्वाचे रिसेट म्हळ्यार box-sizing: border-boxबदल, जायत्या घटकांचेर युनिटांतल्यान वचप, दुवो शैली, आनी जायत्या फॉर्म घटक रीसेट em.rem

मुद्रणकला

• सगळ्यो .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-smto .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आतां .rowvia mixin कडल्यान शैली लागू करिना, देखून .rowआतां आडव्या जाळी मांडावळी खातीर जाय (देखीक, <div class="form-group row">).
  • s .col-form-labelआशिल्ल्या उब्या केंद्र लेबलांक नवो वर्ग जोडला ..form-control
  • .form-rowग्रिड वर्गां वांगडा संकुचीत फॉर्म मांडावळी खातीर नवी जोडल्या (आपल्या .rowखातीर स्वॅप करात .form-rowआनी वचात).
• सानुकूल फॉर्म समर्थन जोडला (चेकबॉक्स, रेडिओ, निवड, आनी फायल इनपुटां खातीर).
• CSS's आनी pseudo-classes वरवीं HTML5 फॉर्म प्रमाणीकरणान .has-error, .has-warning, आनी वर्ग बदलले ..has-success:invalid:valid
• नांव बदलून .form-control-static..form-control-plaintext

बटणां घालतात

• नांव बदलून .btn-default..btn-secondary
• v3 च्या परस प्रमाणांत खूब ल्हान आशिल्ल्यान .btn-xsवर्ग पुरायपणान सोडलो ..btn-sm
• jQuery प्लगइनाचे स्टेटफुल बटण वैशिश्ट्य सोडून button.jsदिलां. हातूंत $().button(string)आनी $().button('reset')पद्दतींचो आस्पाव जाता. ताचे बदला आमी सानुकूल जावास्क्रिप्टाचो एक ल्हानसो बिट वापरपाचो सल्लो दितात, जाका लागून तुमकां जाय तशें वागपाचो फायदो जातलो.
  • प्लगइनाचीं हेर वैशिश्ट्यां (बटण चेकबॉक्स, बटण रेडिओ, एकेच टॉगल बटण) v4 त तिगोवन दवरल्यात हें लक्षांत दवरात.
• बटणां बदलात' [disabled]ते :disabledम्हणून IE9+ समर्थन करता :disabled. पूण fieldset[disabled]अजूनय गरजेचें आसा कारण मुळ अक्षम क्षेत्रसंग्रह अजूनय IE11 त बगी आसात .

बटण गट

• flexbox च्या आदारान घटक परतून बरयला.
• काडून उडयलें .btn-group-justified. <div class="btn-group d-flex" role="group"></div>बदला म्हणून तुमी घटकां भोंवतणी आवरण म्हणून वापरूं येता .w-100.
• चें काडून उडोवप दिल्लें .btn-group-xsवर्ग पुरायपणान सोडलें .btn-xs.
• बटण साधनपट्टींतल्या बटण गटांमदली स्पश्ट अंतर काडून उडयल्या; आतां मार्जिन उपयुक्तताय वापरात.
• हेर घटकां वांगडा वापरपाखातीर सुदारीत दस्तावेजीकरण.

ड्रॉपडावन करतात

• सगळ्या घटकांखातीर, संशोधकांक, आदी खातीर पालक निवडकांतल्यान एकवचन वर्गांत बदलला.
• ड्रॉपडावन मेनूक जोडिल्ल्या वयर वा सकयल तोंड करून बाणां सयत आतां शिप करूंक नाशिल्ल्यान सोंपी ड्रॉपडावन शैली.
• आतां <div>s वा s वापरून ड्रॉपडावन तयार करूं येतात .<ul>
• <a>ड्रॉपडावन आयटमांक आनी <button>आदारीत ड्रॉपडावन वस्तूंक सोपो, अंतर्निहित आदार दिवपाक परतून तयार केल्लीं ड्रॉपडावन शैली आनी मार्कअप .
• नांव बदलून .divider..dropdown-divider
• ड्रॉपडावन आयटम आतां जाय पडटा .dropdown-item.
• ड्रॉपडावन टॉगलांक आतां स्पश्टाची गरज ना <span class="caret"></span>; हें आतां आपोआप CSS's वरवीं दिल्लें आसा ::afteron .dropdown-toggle.

जाळी पद्दत

• म्हणून नवो 576pxग्रिड ब्रेकपॉइंट जोडला sm, म्हळ्यार आतां वट्ट पांच टियर आसात ( xs, sm, md, lg, आनी xl).
• साद्या ग्रिड वर्गांखातीर प्रतिसाद दिवपी ग्रिड संशोधक वर्गांक ते पासून .col-{breakpoint}-{modifier}-{size}to अशें नांव बदललां..{modifier}-{breakpoint}-{size}
• नव्या फ्लेक्सबॉक्स-शक्तीच्या orderवर्गां खातीर पुश आनी पुल संशोधक वर्ग सोडले. देखीक, .col-8.push-4आनी बदला .col-4.pull-8, तुमी .col-8.order-2आनी वापरतले .col-4.order-1.
• ग्रिड प्रणाली आनी घटकां खातीर फ्लेक्सबॉक्स उपयुक्तताय वर्ग जोडल्यात.

गटांची वळेरी करची

• flexbox च्या आदारान घटक परतून बरयला.
• वळेरी गट वस्तूंच्या स्टायलिंग दुवो आनी बटण आवृत्त्यांखातीर a.list-group-itemस्पश्ट वर्गान बदलला, , ..list-group-item-action
• .list-group-flushकार्डां वांगडा वापरपा खातीर वर्ग जोडला .

मोडल हें नांव

• flexbox च्या आदारान घटक परतून बरयला.
• flexbox कडेन वचप पळयल्यार, आमी आतां फ्लोट वापरनात म्हणून हेडरांतल्या डिसमिस चिन्नांची संरेखण मोडपाची शक्यताय आसा. फ्लोटेड कंटेंट पयली येता, पूण flexbox कडेन आतां तशें ना. दुरुस्त करपाक मोडल शीर्षकां उपरांत येवपाक तुमचे डिसमिस चिन्न अद्ययावत करात.
• पर्याय ( जो remoteआपोआप भायली सामुग्री लोड करपाक आनी मोडलांत इंजेक्शन दिवपाक वापरूं येतालो) आनी संबंदीत loaded.bs.modalघडणूक काडून उडयली. आमी ताचे बदला क्लायंट-साइड टेम्पलेटिंग वा डेटा बाइंडिंग फ्रेमवर्क वापरपाची शिफारस करतात, वा jQuery.load स्वताक कॉल करपाची शिफारस करतात.

नवस हें नांव

• flexbox च्या आदारान घटक परतून बरयला.
• >अन-नेस्टेड वर्गां वरवीं सोपी स्टायलिंग खातीर लागीं लागीं सगळे निवडक सोडले.
• , सारकिल्या HTML-विशिश्ट निवडकांच्या बदलाक , आमी s, s, आनी s .nav > li > aखातीर वेगवेगळे वर्ग वापरतात . हाका लागून तुमचो HTML चड लवचीक जाता आनी तेच बरोबर वाडिल्ली विस्तारताय हाडटा..nav.nav-item.nav-link

नवबर हें नांव

संरेखण, प्रतिसाद, आनी पसंती खातीर सुदारीत आदार दिवन navbar पुरायपणान flexbox त परतून बरयला.

• प्रतिसाद दिवपी नवबार वर्तनां आतां .navbarवर्गाक लागू जातात गरजेच्या .navbar-expand-{breakpoint} माध्यमांतल्यान जंय तुमी नावबार खंय संकुचीत करचो तें निवडटात. आदीं हें Less variable modification आशिल्लें आनी ताका परतून संकलन करपाची गरज आशिल्ली.
• .navbar-defaultis now .navbar-light, जरी .navbar-darkतसोच उरता. दर एका नवबाराचेर हातूंतली एक गरज आसता. पूण हे वर्ग आतां background-colors थारायनात; ताचे बदला ते मुळाव्यान फकत परिणाम करतात color.
• नवबारांक आतां कांय तरेची पार्श्वभूंय घोशणा करची पडटा. आमच्या पार्श्वभूंय उपयुक्ततायांतल्यान निवडात ( ) वा पिशें पसंती खातीर.bg-* वयर दिल्ल्या उजवाड/उलट वर्गां वांगडा तुमची स्वताची सेट करात .
• flexbox शैली दिल्यार, navbars आतां सोप्या संरेखण पर्यायांखातीर flexbox उपयुक्तताय वापरूं येता.
• .navbar-toggleआतां आसा .navbar-togglerआनी वेगवेगळीं शैलीं आनी भितरलो मार्कअप आसा (आनीक तीन <span>s ना).
• .navbar-formवर्ग पुरायपणान सोडलो . आतां ताची गरज ना; ताचे बदला, फकत .form-inlineगरज पडल्यार मार्जिन उपयुक्तताय वापरात आनी लागू करात.
• नवबारांत आतां समाविष्ट ना margin-bottomवा border-radiusपूर्वनिर्धारीतपणान. गरज पडल्यार उपयुक्तताय वापरात.
• नवे मार्कअप समाविष्ट करपाक नवबार आशिल्लीं सगळीं उदाहरणां अद्ययावत केल्यात.

पृष्ठांकन करप

• flexbox च्या आदारान घटक परतून बरयला.
• आतां s च्या वंशजांचेर स्पश्ट वर्ग ( .page-item, ) जाय पडटात.page-link.pagination
• घटक पुरायपणान सोडलो .pagerकारण तो सानुकूल केल्ल्या बाह्यरेखा बटणां परस मात्सो चड आशिल्लो.

ब्रेडक्रंब हें नांव

• s .breadcrumb-itemच्या वंशजांचेर आतां एक स्पश्ट वर्ग, , जाय पडटा.breadcrumb

लेबल आनी बॅज

• एकत्रीत करप .labelआनी घटकापसून .badgeअस्पश्ट <label>करप आनी संबंदीत घटक सोंपे करप.
• .badge-pillगोल “गोळी” देखाव्या खातीर संशोधक म्हणून जोडलां .
• बॅज आतां यादी गट आनी हेर घटकांत आपोआप उडनात. ते खातीर आतां उपयुक्तताय वर्गांची गरज आसा.
• .badge-default.badge-secondaryहेर कडेन वापरिल्ल्या घटक संशोधक वर्गांक जुळोवपाक सोडून दिला आनी जोडला.

पॅनल, लघुप्रतिमा, आनी बांय

नव्या कार्ड घटका खातीर पुरायपणान सोडून दिला.

पॅनल हांचो आस्पाव जाता

• .panelto .card, आतां flexbox च्या आदारान बांदलां.
• .panel-defaultकाडून उडयले आनी बदलूंक ना.
• .panel-groupकाडून उडयले आनी बदलूंक ना. .card-groupहें बदली न्हय, तें वेगळें.
• .panel-headingप्रती.card-header
• .panel-title to .card-title. Depending on the desired look, you may also want to use heading elements or classes (e.g. <h3>, .h3) or bold elements or classes (e.g. <strong>, <b>, .font-weight-bold). Note that .card-title, while similarly named, produces a different look than .panel-title.
• .panel-body to .card-body
• .panel-footer to .card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, and .panel-danger have been dropped for .bg-, .text-, and .border utilities generated from our $theme-colors Sass map.

Progress

• Replaced contextual .progress-bar-* classes with .bg-* utilities. For example, class="progress-bar progress-bar-danger" becomes class="progress-bar bg-danger".
• Replaced .active for animated progress bars with .progress-bar-animated.

Carousel

• Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons.
• All CSS has been un-nested and renamed, ensuring each class is prefixed with .carousel-.
  • For carousel items, .next, .prev, .left, and .right are now .carousel-item-next, .carousel-item-prev, .carousel-item-left, and .carousel-item-right.
  • .item is also now .carousel-item.
  • For prev/next controls, .carousel-control.right and .carousel-control.left are now .carousel-control-next and .carousel-control-prev, meaning they no longer require a specific base class.
• Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed.
• Removed image overrides for images in carousel items, deferring to utilities.
• Tweaked the Carousel example to include the new markup and styles.

Tables

• Removed support for styled nested tables. All table styles are now inherited in v4 for simpler selectors.
• Added inverse table variant.

Utilities

• Display, hidden, and more:
  • Made display utilities responsive (e.g., .d-none and d-{sm,md,lg,xl}-none).
  • Dropped the bulk of .hidden-* utilities for new display utilities. For example, instead of .hidden-sm-up, use .d-sm-none. Renamed the .hidden-print utilities to use the display utility naming scheme. More info under the Responsive utilities section of this page.
  • Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
• Type:
  • Added responsive variations to our text alignment classes .text-{sm,md,lg,xl}-{left,center,right}.
• Alignment and spacing:
  • Added new responsive margin and padding utilities for all sides, plus vertical and horizontal shorthands.
  • Added boatload of flexbox utilities.
  • Dropped .center-block for the new .mx-auto class.
• Clearfix updated to drop support for older browser versions.

Vendor prefix mixins

Bootstrap 3’s vendor prefix mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use Autoprefixer, they’re no longer necessary.

Removed the following mixins: 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-transform, translate, translate3d, user-select

Documentation

Our documentation received an upgrade across the board as well. Here’s the low down:

• We’re still using Jekyll, but we have plugins in the mix:
  • bugify.rb is used to efficiently list out the entries on our browser bugs page.
  • example.rb is a custom fork of the default highlight.rb plugin, allowing for easier example-code handling.
  • callout.rb is a similar custom fork of that, but designed for our special docs callouts.
  • jekyll-toc is used to generate our table of contents.
• All docs content has been rewritten in Markdown (instead of HTML) for easier editing.
• Pages have been reorganized for simpler content and a more approachable hierarchy.
• We moved from regular CSS to SCSS to take full advantage of Bootstrap’s variables, mixins, and more.

Responsive utilities

All @screen- variables have been removed in v4.0.0. Use the media-breakpoint-up(), media-breakpoint-down(), or media-breakpoint-only() Sass mixins or the $grid-breakpoints Sass map instead.

Our responsive utility classes have largely been removed in favor of explicit display utilities.

• The .hidden and .show classes have been removed because they conflicted with jQuery’s $(...).hide() and $(...).show() methods. Instead, try toggling the [hidden] attribute or use inline styles like style="display: none;" and style="display: block;".
• All .hidden- classes have been removed, save for the print utilities which have been renamed.
  • Removed from 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
  • Removed from v4 alphas: .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Print utilities no longer start with .hidden- or .visible-, but with .d-print-.
  • Old names: .visible-print-block, .visible-print-inline, .visible-print-inline-block, .hidden-print
  • New classes: .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 वापरपाची गरज आसतली.