v4 वर स्थलांतर करत आहे

बूटस्ट्रॅप 4 संपूर्ण प्रकल्पाचे एक प्रमुख पुनर्लेखन आहे. सर्वात लक्षणीय बदल खाली सारांशित केले आहेत, त्यानंतर संबंधित घटकांमध्ये अधिक विशिष्ट बदल केले आहेत.

स्थिर बदल

बीटा 3 वरून आमच्या स्थिर v4.0 रिलीझमध्ये हलवून, कोणतेही ब्रेकिंग बदल नाहीत, परंतु काही लक्षणीय बदल आहेत.

छपाई

• तुटलेली प्रिंट युटिलिटी निश्चित केली. पूर्वी, .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 चिन्ह फॉन्ट टाकला. तुम्हाला चिन्हांची आवश्यकता असल्यास, काही पर्याय आहेत:
  • Glyphicons ची अपस्ट्रीम आवृत्ती
  • ऑक्टिकॉन्स
  • फॉन्ट अप्रतिम
  • पर्यायांच्या सूचीसाठी विस्तारित पृष्ठ पहा . अतिरिक्त सूचना आहेत? कृपया समस्या किंवा PR उघडा.
• 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टाकण्यात आले आहे. त्याऐवजी, त्याच्या आणि मुलांसाठी ग्रिड कॉलम क्लासेस (किंवा मिक्सिन्स) ऑन आणि वापरा .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-responsiveउजवीकडे ठेवा <table>.
• सुसंगततेसाठी पुनर्नामित .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यापुढे .rowmixin द्वारे शैली लागू होत नाही, त्यामुळे .rowआता क्षैतिज ग्रिड लेआउटसाठी आवश्यक आहे (उदा., <div class="form-group row">).
  • s .col-form-labelसह अनुलंब केंद्र लेबलांमध्ये नवीन वर्ग जोडला ..form-control
  • .form-rowग्रिड क्लासेससह कॉम्पॅक्ट फॉर्म लेआउटसाठी नवीन जोडले ( .rowआपल्यासाठी अ .form-rowआणि जा).
• सानुकूल फॉर्म समर्थन जोडले (चेकबॉक्सेस, रेडिओ, निवड आणि फाइल इनपुटसाठी).
• CSS आणि स्यूडो-क्लासेस द्वारे 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')पद्धतींचा समावेश आहे. आम्ही त्याऐवजी थोडेसे सानुकूल JavaScript वापरण्याचा सल्ला देतो, ज्याचा फायदा तुम्हाला हवे तसे वागण्याचा असेल.
  • लक्षात घ्या की प्लगइनची इतर वैशिष्ट्ये (बटण चेकबॉक्सेस, बटण रेडिओ, सिंगल-टॉगल बटणे) 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कार्डसह वापरण्यासाठी वर्ग जोडला .

मोडल

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

नवस

• फ्लेक्सबॉक्ससह घटक पुन्हा लिहा.
• >नेस्टेड नसलेल्या वर्गांद्वारे सोप्या शैलीसाठी जवळजवळ सर्व निवडकांना सोडले.
• HTML-विशिष्ट निवडकर्त्यांऐवजी , आम्ही s, s आणि s .nav > li > aसाठी स्वतंत्र वर्ग वापरतो . वाढीव विस्तारक्षमता आणताना हे तुमचे HTML अधिक लवचिक बनवते..nav.nav-item.nav-link

नवबार

संरेखन, प्रतिसाद आणि सानुकूलनासाठी सुधारित समर्थनासह नवबार पूर्णपणे फ्लेक्सबॉक्समध्ये पुन्हा लिहिला गेला आहे.

• रिस्पॉन्सिव्ह नॅव्हबार वर्तणूक आता .navbarक्लासमध्ये आवश्यकतेनुसार .navbar-expand-{breakpoint} लागू केली जाते जेथे तुम्ही नॅव्हबार कुठे कोलॅप्स करायचे ते निवडता. पूर्वी हे कमी व्हेरिएबल फेरबदल आणि आवश्यक पुन: कंपाइलिंग होते.
• .navbar-defaultआता आहे .navbar-light, तरी .navbar-darkती तशीच आहे. प्रत्येक नवबारवर यापैकी एक आवश्यक आहे. तथापि, हे वर्ग यापुढे background-colorएस सेट करत नाहीत; त्याऐवजी ते मूलत: फक्त प्रभावित करतात color.
• नवबारांना आता काही प्रकारचे बॅकग्राउंड डिक्लेरेशन आवश्यक आहे. आमच्या बॅकग्राउंड युटिलिटीजमधून निवडा ( ) किंवा मॅड कस्टमायझेशनसाठी.bg-* वरील लाईट/इनव्हर्स क्लासेससह स्वतःचे सेट करा .
• flexbox शैली दिल्याने, navbars आता सुलभ संरेखन पर्यायांसाठी flexbox उपयुक्तता वापरू शकतात.
• .navbar-toggleआता .navbar-togglerआहे आणि भिन्न शैली आणि अंतर्गत मार्कअप आहे (तीन <span>से अधिक नाही).
• वर्ग .navbar-formपूर्ण सोडला. हे आता आवश्यक नाही; त्याऐवजी, फक्त .form-inlineआवश्यकतेनुसार मार्जिन युटिलिटी वापरा आणि लागू करा.
• Navbars यापुढे समाविष्ट margin-bottomकिंवा border-radiusडीफॉल्टनुसार. आवश्यकतेनुसार उपयुक्तता वापरा.
• नवीन मार्कअप समाविष्ट करण्यासाठी नॅव्हबार वैशिष्ट्यीकृत सर्व उदाहरणे अद्यतनित केली गेली आहेत.

पृष्ठांकन

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

ब्रेडक्रंब

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

लेबल आणि बॅज

• घटकापासून अस्पष्ट .labelकरण्यासाठी असे पुनर्नामित केले ..badge<label>
• .badgeघटक सोडला कारण तो जवळजवळ लेबल्ससारखाच होता . .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.
• जुन्या ब्राउझर आवृत्त्यांसाठी समर्थन सोडण्यासाठी क्लियरफिक्स अद्यतनित केले.

विक्रेता उपसर्ग mixins

बूटस्ट्रॅप 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, translate, translate3d,user-select

दस्तऐवजीकरण

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

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

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

सर्व @screen-व्हेरिएबल्स v4.0.0 मध्ये काढून टाकले आहेत. media-breakpoint-up()त्याऐवजी , media-breakpoint-down(), किंवा media-breakpoint-only()Sass मिक्सन्स किंवा $grid-breakpointsSass नकाशा वापरा .

displayआमचे प्रतिसाद देणारे उपयुक्तता वर्ग मोठ्या प्रमाणात स्पष्ट युटिलिटीजच्या बाजूने काढले गेले आहेत .

• आणि वर्ग .hiddenकाढून .showटाकले आहेत कारण ते jQuery च्या $(...).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 वापरण्याची आवश्यकता असेल.