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 पैकेज च हून साढ़ी स्रोत ते dist फाइलें दे अलावा कुसै बी फाइल शामल नेईं ऐ; जेकर तुस उंदे उप्पर भरोसा करदे ओ ते node_modulesफोल्डर दे राहें साढ़ी स्क्रिप्ट चला करदे ओ तां तुसेंगी अपने वर्कफ़्लो गी अनुकूलित करना चाहिदा ऐ.

रूप दे

  • कस्टम ते डिफाल्ट चेकबॉक्स ते रेडियो दोनें गी दुबारा लिखेआ। हुण, दोनों च मिलान HTML संरचना ( <div>भैन-भ्रा <input>ते <label>) ते इक गै लेआउट शैलियां (स्टैक कीती गेदी डिफ़ॉल्ट, संशोधक वर्ग कन्नै इनलाइन) ऐ। एह् असेंगी इनपुट दी स्थिति दे आधार उप्पर लेबल गी स्टाइल करने दी अनुमति दिंदा ऐ, disabledविशेषता आस्तै समर्थन गी सरल बनांदा ऐ (पैह् ले इक पैरेंट वर्ग दी लोड़ ही) ते साढ़े फार्म सत्यापन गी बेहतर तरीके कन्नै समर्थन करदा ऐ।

    इसदे हिस्से दे तौर पर, अस background-imageकस्टम फार्म चेकबॉक्स ते रेडियो पर मल्टीपल एस प्रबंधत करने आस्तै सीएसएस गी बदली दित्ता ऐ। पैह् ले, हुण हटाए गेदे .custom-control-indicatorतत्व च पृष्ठभूमि रंग, ढाल, ते एसवीजी आइकन हा। बैकग्राउंड ढाल गी अनुकूलित करने दा मतलब हा जे हर बारी तुसेंगी सिर्फ इक गी बदलने दी लोड़ पौने पर उनें सारें गी बदलना हा। हुण, साडे कोल .custom-control-label::beforeफिल ते ग्रेडिएंट वास्ते है ते .custom-control-label::afterआइकन नू हैंडल करदा है।

    इक कस्टम जांच इनलाइन बनाने लेई, जोड़ो .custom-control-inline.

  • इनपुट-आधारत बटन समूहें लेई अपडेट कीता गेदा चयनकर्ता। [data-toggle="buttons"] { }शैली ते व्यवहार आस्तै होने दे बजाय , अस सिर्फ जेएस व्यवहारें आस्तै एट्रिब्यूट दा इस्तेमाल करदे आं ते स्टाइलिंग आस्तै इक नमीं वर्ग dataपर भरोसा करदे आं।.btn-group-toggle

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

  • कस्टम फाइल इनपुटें गी उंदे $custom-file-textSass चर च इक बदलाव हासल होआ। एह् हून इक नेस्टेड सस नक्शा नेईं ऐ ते हुन सिर्फ इक स्ट्रिंग गी शक्ति दिंदा ऐ- Browseबटन कीजे एह् हून साढ़े सस थमां पैदा कीता गेदा इकमात्र छद्म-तत्व ऐ। Choose fileपाठ .custom-file-labelहुण .

इनपुट समूह

  • इनपुट समूह ऐडॉन हून इक इनपुट दे सापेक्ष अपने प्लेसमेंट आस्तै विशिष्ट न। असी छोड़ी दित्ता ऐ .input-group-addonते .input-group-btnदो नमीं क्लासां लेई, .input-group-prependते .input-group-append. तुसें गी हून इक एपेंड जां इक प्रीपेंड दा स्पश्ट रूप कन्नै इस्तेमाल करना होग, जेह् ड़ा साढ़े सीएसएस दे मते सारे हिस्से गी सरल बनांदा ऐ। एपेंड जां प्रीपेंड दे अंदर, अपने बटनें गी उस्सै चाल्ली रक्खो जिऱयां ओह् कुतै बी मौजूद होङन, पर पाठ गी .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}जरूरत म��ाबक।
  • पैकेज प्रबंधक गी विकल्पें (जियां, यार्न जां एनपीएम) आस्तै डिप्रीकेट कीते गेदे होने दे नाते बावर समर्थन गी छोड़ी दित्ता गेआ ऐ. विस्तार कन्नै दिक्खो 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-contentकन्नै इसदा मुकाबला करदा ऐ pointer-events: auto.

सार

इत्थें बड्डी टिकट आइटम न जिंदे बारे च तुस v3 थमां v4 च जाने पर जागरूक होना चांह्गे।

ब्राउज़र दा समर्थन करना

  • आईई8, आईई9, ते आईओएस 6 समर्थन छोड़ी दित्ता। v4 हुण सिर्फ IE10+ ते iOS 7+ ऐ। उनें साइटें लेई जिनेंगी उनें चा कुसै बी चाल्ली दी लोड़ ऐ, v3 दा इस्तेमाल करो.
  • एंड्रॉयड v5.0 लॉलीपॉप दे ब्राउज़र ते वेबव्यू आस्तै आधिकारिक समर्थन जोड़ेआ गेआ। एंड्रॉयड ब्राउज़र ते वेबव्यू दे पैह् ले संस्करण सिर्फ गैर-सरकारी रूप कन्नै समर्थत रेह् न।

वैश्विक बदलाव

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

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

  • फ्लेक्सबॉक्स च लेई गेआ।
    • ग्रिड मिक्सिन ते पूर्व-निर्धारित वर्गें च फ्लेक्सबॉक्स आस्तै समर्थन जोड़ेआ गेआ।
    • फ्लेक्सबॉक्स दे हिस्से दे तौर पर, ऊर्ध्वाधर ते क्षैतिज संरेखण वर्गें लेई समर्थन शामल हा।
  • ग्रिड क्लास दे नांऽ ते इक नमां ग्रिड टीयर अपडेट कीते गेदे न।
    • होर दानेदार नियंत्रण आस्तै हेठ इक नमां 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नमें ग्रिड टियर दा लेखा-जोखा करने ते स्तंभें गी उंदी अधिकतम चौड़ाई पर बराबर रूप कन्नै विभाज्य होने गी सुनिश्चत करने आस्तै ग्रिड सिस्टम मीडिया क्वेरी ब्रेकपॉइंट ते कंटेनर चौड़ाई बदले गे।
    • ग्रिड ब्रेकपॉइंट ते कंटेनर चौड़ाई गी हून मुट्ठी भर बक्ख-बक्ख चरें दी बजाय सस मैप ( $grid-breakpointsते ) दे राहें संभालेआ जंदा ऐ। $container-max-widthsएह् @screen-*चर गी पूरी चाल्ली बदलदे न ते तुसेंगी ग्रिड टियरें गी पूरी चाल्ली कन्नै अनुकूलित करने दी अनुमति दिंदे न।
    • मीडिया दी क्वेरी बी बदली गेई ऐ। हर बारी इक गै मूल्य कन्नै साढ़ी मीडिया क्वेरी घोशणाएं गी दोहराने दे बजाय, असें गी हून @include media-breakpoint-up/down/only. हुण लिखने दे बजाय लिख @media (min-width: @screen-sm-min) { ... }सकदे हो @include media-breakpoint-up(sm) { ... }.

घटक ऐ

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

घटक दे द्वारा

एह् सूची v3.xx ते v4.0.0 दे बश्कार घटक आसेआ कुंजी बदलावें गी उजागर करदी ऐ.

रिबूट करो

बूटस्ट्रैप 4 च नमां ऐ रिबूट , इक नमीं स्टाइलशीट जेह् ड़ी साढ़ी अपनी किश राय आह् ली रीसेट शैलियें कन्नै 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.rowहून वाया मिक्सिन थमां शैलियां लागू नेईं करदा ऐ , इसलेई .rowहून क्षैतिज ग्रिड लेआउटें आस्तै लोड़चदा ऐ (जियां, <div class="form-group row">) ।
    • एस .col-form-labelकन्नै लंबवत केंद्र लेबल च नमीं वर्ग जोड़ी गेई ।.form-control
    • .form-rowग्रिड वर्गें कन्नै कॉम्पैक्ट फार्म लेआउट आस्तै नमां जोड़ेआ गेआ ( .rowए ते जाओ आस्तै अपने स्वैप करो .form-row)।
  • कस्टम फार्म समर्थन जोड़ेआ गेआ (चेकबॉक्स, रेडियो, चयन, ते फाइल इनपुटें आस्तै)।
  • .has-error, .has-warning, ते वर्गें गी CSS's ते छद्म-वर्गें .has-successदे राहें HTML5 फार्म सत्यापन कन्नै बदली दित्ता गेआ।:invalid:valid
  • नाम .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 च बग्गी न .

बटन दा ग्रुप

  • फ्लेक्सबॉक्स कन्नै घटक गी दुबारा लिखेआ।
  • हटाया गया .btn-group-justified. प्रतिस्थापन दे तौर पर तुस <div class="btn-group d-flex" role="group"></div>तत्वें दे आसपास इक लपेटने दे रूप च इस्तेमाल करी सकदे ओ .w-100.
  • छोड़ दी .btn-group-xsक्लास पूरी तरह दी हटाने दी .btn-xs.
  • बटन टूलबार च बटन समूहें दे बीच स्पश्ट अंतराल गी हटाई दित्ता गेआ; हुण मार्जिन उपयोगिताएं दा इस्तेमाल करो।
  • होर घटकें कन्नै इस्तेमाल आस्तै बेहतर दस्तावेजीकरण।
  • सारे घटकें, संशोधक बगैरा आस्तै पैरेंट चयनकर्ताएं थमां इकल वर्गें च बदली दित्ता गेआ।
  • ड्रॉपडाउन मेनू कन्नै जुड़े दे उप्पर जां थल्लै आह् ले तीर कन्नै हून भेजने आस्तै सरलीकृत ड्रॉपडाउन शैलियां।
  • ड्रॉपडाउन गी हून <div>एस जां <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}..{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 राहें वर्ग च लागू कीता जंदा ऐ जित्थै तुस चुनदे ओ जे नवबार गी कुत्थें संकुचित करना ऐ. पैह् ले एह् इक Less variable संशोधन हा ते पुनर्संकलन दी लोड़ ही। .navbar-expand-{breakpoint}
  • .navbar-defaultहै अब .navbar-light, हालांकि उसी तरह ही .navbar-darkरहता है। हर नवबार पर इन्हें च इक दी लोड़ होंदी ऐ। हालांकि, एह् वर्गें गी हून background-colorएस सेट नेईं कीता जंदा ऐ; इसदे बजाय ओह अनिवार्य रूप कन्नै सिर्फ प्रभावित करदे न color.
  • नवबारें गी हून कुसै किस्म दी पृष्ठभूमि घोशणा दी लोड़ होंदी ऐ। साढ़ी पृष्ठभूमि उपयोगिताएं थमां चुनो ( ) जां पागल अनुकूलन आस्तै.bg-* उपर दित्ते गेदे प्रकाश / उल्टे वर्गें कन्नै अपना सेट करो .
  • फ्लेक्सबॉक्स शैलियां दित्ती गेई ऐ, नवबार हून आसान संरेखण विकल्पें आस्तै फ्लेक्सबॉक्स उपयोगिताएं दा इस्तेमाल करी सकदे न.
  • .navbar-toggleहुण ऐ .navbar-togglerते बक्ख-बक्ख शैलियां ते अंदरूनी मार्कअप ऐ (तीन <span>एस होर नेईं)।
  • .navbar-formक्लास पूरी तरह छोड़ दी । इह ज़रूरी नहीं रेहा; इसदे बजाय, बस .form-inlineजरूरत मताबक मार्जिन उपयोगिताएं दा इस्तेमाल करो ते लागू करो।
  • नवबारें च हून शामल नेईं कीता जंदा ऐ margin-bottomजां border-radiusडिफाल्ट रूप कन्नै. जरूरत मताबक उपयोगिताएं दा इस्तेमाल करो।
  • नवबारें गी पेश करने आह् ले सब्भै उदाहरनें गी नमें मार्कअप गी शामल करने लेई अपडेट कीता गेआ ऐ।

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

  • फ्लेक्सबॉक्स कन्नै घटक गी दुबारा लिखेआ।
  • एस दे वंशज पर हून स्पष्ट वर्गें ( .page-item, ) दी लोड़ ऐ.page-link.pagination
  • घटक गी पूरी चाल्ली छोड़ी दित्ता .pagerकीजे एह् अनुकूलित रूपरेखा बटनें थमां किश मता हा।
  • एस .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, ते साढ़े सस्स नक्शे थमां पैदा कीती गेदी , , ते उपयोगिताएं .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 च विरासत च हासल कीतियां गेदियां न.
  • उलटा तालिका वेरिएंट जोड़ा गया।

उपयोगिताएं दा

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

बूटस्ट्रैप 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

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

साढ़े दस्तावेजें गी पूरे बोर्ड च बी अपग्रेड हासल होआ। इत्थें लो डाउन ऐ:

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

उत्तरदायी उपयोगिताएं

v4.0.0 च सारे @screen-चर हटाए गेदे न. इसदे बजाय media-breakpoint-up(), media-breakpoint-down(), जां media-breakpoint-only()सस मिक्सिन जां $grid-breakpointsसस मैप दा इस्तेमाल करो।

साढ़ी प्रतिक्रियाशील उपयोगिता वर्गें गी स्पश्ट 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 दा इस्तेमाल करने दी लोड़ होग.