Source

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व्हेरिएबल काढून टाकले. आम्ही काहीही संक्रमण करत नव्हतो, म्हणून तो फक्त अतिरिक्त कोड होता.
  • एनपीएम पॅकेजमध्ये यापुढे आमच्या स्त्रोत आणि डिस्ट फाइल्सशिवाय इतर कोणत्याही फाइल्स समाविष्ट नाहीत; जर तुम्ही त्यांच्यावर विसंबून असाल आणि आमच्या स्क्रिप्ट 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वर आधारित निवडण्यासाठी आम्ही कलर कॉन्ट्रास्ट फंक्शन वापरतो 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 किंवा उच्च ची आवश्यकता आहे, परंतु तुम्हाला 3.x आवृत्ती वापरण्याचा सल्ला दिला जात आहे कारण v3.x चे सपोर्टेड ब्राउझर हे बूटस्ट्रॅपचे समर्थन करतात तसेच v3.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 च्या पूर्वीच्या आवृत्त्या केवळ अनधिकृतपणे समर्थित आहेत.

जागतिक बदल

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

ग्रीड प्रणाली

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

घटकानुसार

ही यादी v3.xx आणि v4.0.0 मधील घटकांनुसार मुख्य बदल हायलाइट करते.

रीबूट करा

बूटस्ट्रॅप 4 मधील नवीन म्हणजे रीबूट , एक नवीन स्टाइलशीट जी आमच्या स्वतःच्या काही मतप्रणालीनुसार रीसेट शैलींसह नॉर्मलाइजवर बनते. या फाइलमध्ये दिसणारे निवडक फक्त घटक वापरतात—येथे कोणतेही वर्ग नाहीत. हे अधिक मॉड्यूलर दृष्टिकोनासाठी आमच्या घटक शैलींपासून आमच्या रीसेट शैलींना वेगळे करते. यामध्ये काही सर्वात महत्त्वाचे रीसेट समाविष्ट आहेत, box-sizing: border-boxबदल, अनेक घटकांवरील युनिट्सवर जाणे, लिंक शैली आणि अनेक फॉर्म घटक रीसेट करणे em.rem

टायपोग्राफी

  • सर्व .text-उपयुक्तता _utilities.scssफाइलमध्ये हलवल्या.
  • त्याची शैली उपयुक्तता .page-headerद्वारे लागू केली जाऊ शकते म्हणून सोडले.
  • .dl-horizontal has been dropped. Instead, use .row on <dl> and use grid column classes (or mixins) on its <dt> and <dd> children.
  • Redesigned blockquotes, moving their styles from the <blockquote> element to a single class, .blockquote. Dropped the .blockquote-reverse modifier for text utilities.
  • .list-inline now requires that its children list items have the new .list-inline-item class applied to them.

Images

  • Renamed .img-responsive to .img-fluid.
  • Renamed .img-rounded to .rounded
  • Renamed .img-circle to .rounded-circle

Tables

  • Nearly all instances of the > selector have been removed, meaning nested tables will now automatically inherit styles from their parents. This greatly simplifies our selectors and potential customizations.
  • Renamed .table-condensed to .table-sm for consistency.
  • Added a new .table-inverse option.
  • Added table header modifiers: .thead-default and .thead-inverse.
  • Renamed contextual classes to have a .table--prefix. Hence .active, .success, .warning, .danger and .info to .table-active, .table-success, .table-warning, .table-danger and .table-info.

Forms

  • Moved element resets to the _reboot.scss file.
  • Renamed .control-label to .col-form-label.
  • Renamed .input-lg and .input-sm to .form-control-lg and .form-control-sm, respectively.
  • Dropped .form-group-* classes for simplicity’s sake. Use .form-control-* classes instead now.
  • Dropped .help-block and replaced it with .form-text for block-level help text. For inline help text and other flexible options, use utility classes like .text-muted.
  • Dropped .radio-inline and .checkbox-inline.
  • Consolidated .checkbox and .radio into .form-check and the various .form-check-* classes.
  • Horizontal forms overhauled:
    • Dropped the .form-horizontal class requirement.
    • .form-group no longer applies styles from the .row via mixin, so .row is now required for horizontal grid layouts (e.g., <div class="form-group row">).
    • Added new .col-form-label class to vertically center labels with .form-controls.
    • Added new .form-row for compact form layouts with the grid classes (swap your .row for a .form-row and go).
  • Added custom forms support (for checkboxes, radios, selects, and file inputs).
  • Replaced .has-error, .has-warning, and .has-success classes with HTML5 form validation via CSS’s :invalid and :valid pseudo-classes.
  • Renamed .form-control-static to .form-control-plaintext.

Buttons

  • Renamed .btn-default to .btn-secondary.
  • Dropped the .btn-xs class entirely as .btn-sm is proportionally much smaller than v3’s.
  • The stateful button feature of the button.js jQuery plugin has been dropped. This includes the $().button(string) and $().button('reset') methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
    • Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.
  • Change buttons’ [disabled] to :disabled as IE9+ supports :disabled. However fieldset[disabled] is still necessary because native disabled fieldsets are still buggy in IE11.

Button group

  • Rewrote component with flexbox.
  • Removed .btn-group-justified. As a replacement you can use <div class="btn-group d-flex" role="group"></div> as a wrapper around elements with .w-100.
  • Dropped the .btn-group-xs class entirely given removal of .btn-xs.
  • Removed explicit spacing between button groups in button toolbars; use margin utilities now.
  • Improved documentation for use with other components.
  • Switched from parent selectors to singular classes for all components, modifiers, etc.
  • Simplified dropdown styles to no longer ship with upward or downward facing arrows attached to the dropdown menu.
  • Dropdowns can be built with <div>s or <ul>s now.
  • Rebuilt dropdown styles and markup to provide easy, built-in support for <a> and <button> based dropdown items.
  • Renamed .divider to .dropdown-divider.
  • Dropdown items now require .dropdown-item.
  • Dropdown toggles no longer require an explicit <span class="caret"></span>; this is now provided automatically via CSS’s ::after on .dropdown-toggle.

Grid system

  • Added a new 576px grid breakpoint as sm, meaning there are now five total tiers (xs, sm, md, lg, and xl).
  • Renamed the responsive grid modifier classes from .col-{breakpoint}-{modifier}-{size} to .{modifier}-{breakpoint}-{size} for simpler grid classes.
  • Dropped push and pull modifier classes for the new flexbox-powered order classes. For example, instead of .col-8.push-4 and .col-4.pull-8, you’d use .col-8.order-2 and .col-4.order-1.
  • Added flexbox utility classes for grid system and components.

List groups

  • Rewrote component with flexbox.
  • Replaced a.list-group-item with an explicit class, .list-group-item-action, for styling link and button versions of list group items.
  • Added .list-group-flush class for use with cards.
  • Rewrote component with flexbox.
  • Given the move to flexbox, alignment of dismiss icons in the header is likely broken as we’re no longer using floats. Floated content comes first, but with flexbox that’s no longer the case. Update your dismiss icons to come after modal titles to fix.
  • The remote option (which could be used to automatically load and inject external content into a modal) and the corresponding loaded.bs.modal event were removed. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.
  • Rewrote component with flexbox.
  • Dropped nearly all > selectors for simpler styling via un-nested classes.
  • Instead of HTML-specific selectors like .nav > li > a, we use separate classes for .navs, .nav-items, and .nav-links. This makes your HTML more flexible while bringing along increased extensibility.

The navbar has been entirely rewritten in flexbox with improved support for alignment, responsiveness, and customization.

  • Responsive navbar behaviors are now applied to the .navbar class via the required .navbar-expand-{breakpoint} where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling.
  • .navbar-default is now .navbar-light, though .navbar-dark remains the same. One of these is required on each navbar. However, these classes no longer set background-colors; instead they essentially only affect color.
  • Navbars now require a background declaration of some kind. Choose from our background utilities (.bg-*) or set your own with the light/inverse classes above for mad customization.
  • Given flexbox styles, navbars can now use flexbox utilities for easy alignment options.
  • .navbar-toggle is now .navbar-toggler and has different styles and inner markup (no more three <span>s).
  • Dropped the .navbar-form class entirely. It’s no longer necessary; instead, just use .form-inline and apply margin utilities as necessary.
  • Navbars no longer include margin-bottom or border-radius by default. Use utilities as necessary.
  • All examples featuring navbars have been updated to include new markup.

Pagination

  • Rewrote component with flexbox.
  • Explicit classes (.page-item, .page-link) are now required on the descendants of .paginations
  • Dropped the .pager component entirely as it was little more than customized outline buttons.
  • An explicit class, .breadcrumb-item, is now required on the descendants of .breadcrumbs

Labels and badges

  • Consolidated .label and .badge to disambiguate from the <label> element and simplify related components.
  • Added .badge-pill as modifier for rounded “pill” look.
  • Badges are no longer floated automatically in list groups and other components. Utility classes are now required for that.
  • .badge-default has been dropped and .badge-secondary added to match component modifier classes used elsewhere.

Panels, thumbnails, and wells

Dropped entirely for the new card component.

Panels

  • .panel to .card, now built with flexbox.
  • .panel-default removed and no replacement.
  • .panel-group removed and no replacement. .card-group is not a replacement, it is different.
  • .panel-heading to .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.
  • 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:
  • 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
    • नवीन वर्ग: .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 वापरण्याची आवश्यकता असेल.