Source

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अप्रयुक्त चर को हटा दिया । हम कुछ भी परिवर्तित नहीं कर रहे थे, इसलिए यह केवल अतिरिक्त कोड था।
  • npm पैकेज में अब हमारे स्रोत और डिस्ट फाइलों के अलावा कोई भी फाइल शामिल नहीं है; यदि आप उन पर निर्भर थे और 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"] { }शैली और व्यवहार के बजाय , हम dataकेवल JS व्यवहार के लिए विशेषता का उपयोग करते हैं और .btn-group-toggleस्टाइल के लिए एक नए वर्ग पर भरोसा करते हैं।

  • .col-form-legendथोड़ा सुधार के पक्ष में हटा दिया गया .col-form-label। इस तरह .col-form-label-smऔर आसानी से तत्वों .col-form-label-lgपर इस्तेमाल किया जा सकता है ।<legend>

  • $custom-file-textकस्टम फ़ाइल इनपुट को उनके Sass चर में परिवर्तन प्राप्त हुआ । यह अब एक नेस्टेड 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}आवश्यकतानुसार।
  • पैकेज प्रबंधक के रूप में छोड़े गए बोवर समर्थन को विकल्पों (जैसे, यार्न या एनपीएम) के लिए बहिष्कृत कर दिया गया है। विवरण के लिए बोवर/बोवर#2298 देखें।
  • बूटस्ट्रैप को अभी भी jQuery 1.9.1 या उच्चतर की आवश्यकता है, लेकिन आपको संस्करण 3.x का उपयोग करने की सलाह दी जाती है क्योंकि v3.x के समर्थित ब्राउज़र वे हैं जो बूटस्ट्रैप समर्थन करते हैं और v3.x में कुछ सुरक्षा सुधार हैं।
  • .form-control-labelअप्रयुक्त वर्ग को हटा दिया । यदि आपने इस वर्ग का उपयोग किया है, तो यह उस वर्ग का डुप्लिकेट था जो क्षैतिज रूप लेआउट में इसके संबंधित इनपुट के साथ .col-form-labelलंबवत केंद्रित था ।<label>
  • color-yiqएक मिक्सिन से बदल दिया जिसमें संपत्ति को एक फ़ंक्शन में शामिल किया गया था जो colorएक मूल्य देता है, जिससे आप इसे किसी भी सीएसएस संपत्ति के लिए उपयोग कर सकते हैं। उदाहरण के लिए, के बजाय 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 के पुराने संस्करण केवल अनौपचारिक रूप से समर्थित हैं।

वैश्विक परिवर्तन

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

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

  • फ्लेक्सबॉक्स में ले जाया गया।
    • ग्रिड मिक्सिन और पूर्वनिर्धारित कक्षाओं में फ्लेक्सबॉक्स के लिए जोड़ा गया समर्थन।
    • फ्लेक्सबॉक्स के हिस्से के रूप में, ऊर्ध्वाधर और क्षैतिज संरेखण वर्गों के लिए समर्थन शामिल है।
  • अद्यतन ग्रिड वर्ग के नाम और एक नया ग्रिड स्तर।
    • अधिक बारीक नियंत्रण के लिए 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-colflexmax-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 आइकन फ़ॉन्ट गिरा दिया। यदि आपको आइकन की आवश्यकता है, तो कुछ विकल्प हैं:
  • एफिक्स jQuery प्लगइन गिरा दिया।
    • हम position: stickyइसके बजाय उपयोग करने की सलाह देते हैं। विवरण और विशिष्ट पॉलीफ़िल अनुशंसाओं के लिए कृपया HTML5 प्रविष्टि देखें । एक सुझाव @supportsइसे लागू करने के लिए एक नियम का उपयोग करना है (जैसे, @supports (position: sticky) { ... })/
    • यदि आप अतिरिक्त, गैर- positionशैलियों को लागू करने के लिए एफ़िक्स का उपयोग कर रहे थे, तो हो सकता है कि पॉलीफ़िल आपके उपयोग के मामले का समर्थन न करें। ऐसे उपयोगों के लिए एक विकल्प तृतीय-पक्ष स्क्रॉलपॉस-स्टाइलर लाइब्रेरी है।
  • पेजर घटक को छोड़ दिया क्योंकि यह अनिवार्य रूप से थोड़ा अनुकूलित बटन था।
  • अधिक विशिष्ट बच्चों के चयनकर्ताओं के बजाय अधिक गैर-नेस्टेड वर्ग चयनकर्ताओं का उपयोग करने के लिए लगभग सभी घटकों को पुन: सक्रिय किया गया।

घटक द्वारा

यह सूची 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-condensedके .table-smलिए नाम दिया गया।
  • .table-inverseएक नया विकल्प जोड़ा गया ।
  • जोड़ा गया तालिका शीर्ष लेख संशोधक: .thead-defaultऔर .thead-inverse.
  • .table-एक -उपसर्ग रखने के लिए नामित प्रासंगिक वर्ग । इसलिए .active, .success, .warning, .dangerऔर .infoको .table-active, .table-success, .table-warning, .table-dangerऔर .table-info.

फार्म

  • ले जाया गया तत्व _reboot.scssफ़ाइल में रीसेट हो जाता है।
  • का नाम बदल .control-labelदिया .col-form-label।
  • नाम बदला गया .input-lgऔर .input-smसे .form-control-lgतथा .form-control-sm, क्रमशः।
  • सादगी .form-group-*के लिए कक्षाएं छोड़ दीं। .form-control-*इसके बजाय अभी कक्षाओं का प्रयोग करें ।
  • ब्लॉक -स्तरीय सहायता पाठ .help-blockके लिए इसे हटा दिया गया और इसे बदल दिया गया । .form-textइनलाइन हेल्प टेक्स्ट और अन्य लचीले विकल्पों के लिए, यूटिलिटी क्लासेस जैसे .text-muted.
  • गिरा दिया .radio-inlineऔर .checkbox-inline।
  • समेकित .checkboxऔर .radioमें .form-checkऔर विभिन्न .form-check-*वर्गों।
  • क्षैतिज रूपों में बदलाव किया गया:
    • कक्षा .form-horizontalकी आवश्यकता को छोड़ दिया।
    • .form-group.rowअब मिक्सिन के माध्यम से शैलियों को लागू नहीं करता है , इसलिए .rowअब क्षैतिज ग्रिड लेआउट (जैसे, <div class="form-group row">) के लिए आवश्यक है।
    • .col-form-labels के साथ लंबवत केंद्र लेबल में नया वर्ग जोड़ा गया .form-control।
    • ग्रिड कक्षाओं के साथ कॉम्पैक्ट फॉर्म लेआउट के लिए नया जोड़ा गया (अपना ए और गो के लिए .form-rowस्वैप करें )।.row.form-row
  • जोड़ा गया कस्टम प्रपत्र समर्थन (चेकबॉक्स, रेडियो, चयन और फ़ाइल इनपुट के लिए)।
  • HTML5 के साथ प्रतिस्थापित .has-error, .has-warning, और .has-successकक्षाएं CSS :invalidऔर :validछद्म-वर्गों के माध्यम से सत्यापन करती हैं।
  • का नाम बदल .form-control-staticदिया .form-control-plaintext।

बटन

  • का नाम बदल .btn-defaultदिया .btn-secondary।
  • वर्ग .btn-xsको पूरी तरह से छोड़ दिया क्योंकि .btn-smआनुपातिक रूप से v3 की तुलना में बहुत छोटा है।
  • JQuery प्लगइन की स्टेटफुल बटन सुविधा को हटा दिया गया है। button.jsइसमें $().button(string)और $().button('reset')तरीके शामिल हैं। हम इसके बजाय एक छोटे से कस्टम जावास्क्रिप्ट का उपयोग करने की सलाह देते हैं, जिससे ठीक उसी तरह से व्यवहार करने का लाभ मिलेगा जैसा आप चाहते हैं।
    • ध्यान दें कि प्लगइन की अन्य विशेषताओं (बटन चेकबॉक्स, बटन रेडियो, सिंगल-टॉगल बटन) को v4.
  • 'बटन' [disabled]को :disabledIE9+ सपोर्ट के रूप में बदलें :disabled। हालाँकि fieldset[disabled]अभी भी आवश्यक है क्योंकि IE11 में मूल अक्षम फ़ील्ड अभी भी छोटी हैं ।

बटन समूह

  • फ्लेक्सबॉक्स के साथ घटक को फिर से लिखें।
  • हटाया गया .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 के ::afteron के माध्यम से स्वचालित रूप से प्रदान किया जाता है .dropdown-toggle।

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

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

सूची समूह

  • फ्लेक्सबॉक्स के साथ घटक को फिर से लिखें।
  • सूची समूह आइटम के लिंक और बटन संस्करणों को स्टाइल करने के लिए a.list-group-itemएक स्पष्ट वर्ग के साथ प्रतिस्थापित किया गया।.list-group-item-action
  • .list-group-flushकार्ड के साथ उपयोग के लिए जोड़ा गया वर्ग।
  • फ्लेक्सबॉक्स के साथ घटक को फिर से लिखें।
  • फ्लेक्सबॉक्स में जाने को देखते हुए, हेडर में ख़ारिज आइकन का संरेखण संभवतः टूट गया है क्योंकि हम अब फ़्लोट्स का उपयोग नहीं कर रहे हैं। फ़्लोट की गई सामग्री पहले आती है, लेकिन फ्लेक्सबॉक्स के साथ अब ऐसा नहीं है। ठीक करने के लिए मोडल शीर्षकों के बाद आने के लिए अपने ख़ारिज आइकन अपडेट करें।
  • remoteविकल्प (जिसका उपयोग बाहरी सामग्री को एक मोडल में स्वचालित रूप से लोड और इंजेक्ट करने के लिए किया जा सकता है) और संबंधित घटना loaded.bs.modalको हटा दिया गया था। हम इसके बजाय क्लाइंट-साइड टेम्प्लेटिंग या डेटा बाइंडिंग फ्रेमवर्क का उपयोग करने या jQuery.load को स्वयं कॉल करने की सलाह देते हैं।
  • फ्लेक्सबॉक्स के साथ घटक को फिर से लिखें।
  • >नेस्टेड कक्षाओं के माध्यम से सरल स्टाइल के लिए लगभग सभी चयनकर्ताओं को छोड़ दिया।
  • HTML-विशिष्ट चयनकर्ताओं जैसे , के बजाय , हम s, s और s .nav > li > aके लिए अलग-अलग वर्गों का उपयोग करते हैं । बढ़ी हुई एक्स्टेंसिबिलिटी साथ लाते हुए यह आपके HTML को अधिक लचीला बनाता है।.nav.nav-item.nav-link

संरेखण, प्रतिक्रिया और अनुकूलन के लिए बेहतर समर्थन के साथ नेवबार को फ्लेक्सबॉक्स में पूरी तरह से फिर से लिखा गया है।

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

पृष्ठ पर अंक लगाना

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

लेबल और बैज

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

पैनल, थंबनेल और कुएं

नए कार्ड घटक के लिए पूरी तरह से हटा दिया गया।

पैनलों

  • .panelto .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।
  • डिजाइन और स्टाइलिंग को आसान बनाने के लिए पूरे कंपोनेंट को ओवरहॉल किया। आपके पास ओवरराइड करने के लिए हमारे पास कम शैलियाँ हैं, नए संकेतक और नए चिह्न।
  • सभी सीएसएस को नेस्टेड नहीं किया गया है और इसका नाम बदल दिया गया है, यह सुनिश्चित करते हुए कि प्रत्येक वर्ग के साथ उपसर्ग है .carousel-।
    • कैरोसेल आइटम के लिए, .next, .prev, .left, और .rightare now .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 में इनहेरिट की गई हैं।
  • उलटा तालिका संस्करण जोड़ा गया।

उपयोगिताओं

विक्रेता उपसर्ग मिश्रण

बूटस्ट्रैप 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_ _ _ _ _ _ _skewtransform-origintransition-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

प्रलेखन

हमारे दस्तावेज़ीकरण को पूरे बोर्ड में भी अपग्रेड मिला। यहाँ नीचे है:

  • हम अभी भी Jekyll का उपयोग कर रहे हैं, लेकिन हमारे पास मिश्रण में प्लगइन्स हैं:
    • bugify.rbहमारे ब्राउज़र बग पृष्ठ पर प्रविष्टियों को कुशलतापूर्वक सूचीबद्ध करने के लिए उपयोग किया जाता है।
    • example.rbhighlight.rbडिफ़ॉल्ट प्लगइन का एक कस्टम कांटा है , आसान उदाहरण-कोड हैंडलिंग के लिए अनुमति देता है।
    • callout.rbउसी का एक समान कस्टम कांटा है, लेकिन हमारे विशेष डॉक्स कॉलआउट के लिए डिज़ाइन किया गया है।
    • jekyll-toc का उपयोग हमारी सामग्री तालिका बनाने के लिए किया जाता है।
  • आसान संपादन के लिए सभी डॉक्स सामग्री को मार्कडाउन (एचटीएमएल के बजाय) में फिर से लिखा गया है।
  • सरल सामग्री और अधिक सुलभ पदानुक्रम के लिए पृष्ठों को पुनर्गठित किया गया है।
  • हम बूटस्ट्रैप के वेरिएबल्स, मिक्सिन आदि का पूरा लाभ उठाने के लिए नियमित 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 में ग्रिड ब्रेकप्वाइंट में परिवर्तन का मतलब है कि आपको समान परिणाम प्राप्त करने के लिए एक ब्रेकपॉइंट बड़ा करने की आवश्यकता होगी। नई प्रतिक्रियाशील उपयोगिता वर्ग कम सामान्य मामलों को समायोजित करने का प्रयास नहीं करते हैं जहां एक तत्व की दृश्यता को व्यूपोर्ट आकारों की एक सन्निहित श्रेणी के रूप में व्यक्त नहीं किया जा सकता है; इसके बजाय आपको ऐसे मामलों में कस्टम सीएसएस का उपयोग करने की आवश्यकता होगी।