in English

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

बटणां घालतात

  • नांव बदलून .btn-default..btn-secondary
  • सोडून दिल्लें.btn-xs.btn-smv3 च्या परस प्रमाणांत खूब ल्हान आशिल्ल्यान वर्ग पुरायपणान
  • 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>बदला म्हणून तुमी घटकां भोंवतणी एक आवरण म्हणून वापरूं येता with.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तें .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.
    • prev/next नियंत्रणांखातीर, .carousel-control.rightआनी .carousel-control.leftआतां आसात .carousel-control-nextआनी .carousel-control-prev, म्हळ्यार तांकां आतां विशिश्ट बेस वर्गाची गरज ना.
  • सगळी प्रतिसाद दिवपी स्टायलिंग काडून उडयल्या, उपयुक्तताय (देखीक, कांय व्यूपोर्टांचेर कॅप्शन दाखोवप) आनी गरज पडल्यार सानुकूल शैलींक स्थगीत करप.
  • उपयुक्ततायांचेर स्थगीत करून, हिंडोळ वस्तूंतल्या प्रतिमांखातीर प्रतिमा अधिलिखित काडून उडयल्यात.
  • नवे मार्कअप आनी शैली समाविष्ट करपाक Carousel उदाहरण ट्वीक केलां.

कोश्टकां

  • शैली केल्ल्या नेस्टेड कोश्टकांखातीर आदार काडून उडयला. सगळ्यो कोश्टक शैली आतां साद्या निवडकांक 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}.
  • संरेखण आनी अंतर: १.
  • पोरन्या ब्राउझर आवृत्त्यांखातीर आदार सोडपाक Clearfix अद्ययावत केला.

विक्रेतो उपसर्ग मिक्सिन

बूटस्ट्रॅप 3 च्या विक्रेत्या उपसर्ग मिक्सिन, जे v3.2.0 त नाका आशिल्ले, बूटस्ट्रॅप 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-transform,translatetranslate3duser-select

दस्तावेजीकरण करप

आमच्या दस्तावेजीकरणाक बोर्डभर अपग्रेडय मेळ्ळें. हांगा सकयल दिल्लें आसा:

  • आमी अजूनय Jekyll वापरतात, पूण आमचे कडेन मिक्सांत प्लगइन आसात:
    • bugify.rbआमच्या ब्राउझर बग पानाचेर नोंदी कार्यक्षमतेन वळेरी करपाक वापरतात.
    • example.rbहो मुलभूत highlight.rbप्लगइनचो सानुकूल फोर्क आसा, जो सोंपें उदाहरण-कोड हाताळपाक परवानगी दिता.
    • callout.rbताचो एक सारकोच सानुकूल फोर्क आसा, पूण आमच्या खाशेल्या डॉक्स कॉलआउटां खातीर तयार केला.
    • jekyll-toc हें आमचें आशय कोश्टक तयार करपाक वापरतात.
  • सगळ्यो डॉक्स सामुग्री मार्कडावनांत (HTML बदला) परतून बरयल्या, सोंपें संपादन करपा खातीर.
  • सादी आशय आनी चड लागींच्या क्रमवारी खातीर पानांची पुनर्रचना केल्या.
  • Bootstrap च्या व्हेरिएबल्स, मिक्सिन आनी हेरांचो पुराय फायदो घेवपाक आमी रेग्युलर CSS वयल्यान SCSS कडेन गेले.

प्रतिसाद दिवपी उपयुक्तताय

v4.0.0 त सगळे @screen-चड-उणें काडून उडयल्यात. media-breakpoint-up()ताचे बदला , media-breakpoint-down(), वा media-breakpoint-only()Sass mixins वा $grid-breakpointsSass नकासो वापरात .

displayआमचे प्रतिसाद दिवपी उपयुक्तताय वर्ग चड करून स्पश्ट उपयुक्ततायांच्या फाटबळाचेर काडून उडयल्यात .

  • आनी वर्ग .hiddenकाडून .showउडयल्यात कारण ते jQuery's $(...).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 वापरपाची गरज आसतली.