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चर हटा देल गेल। हम सब किछु संक्रमण नहि क रहल छलहुं, ताहि लेल इ बस एक्स्ट्रा कोड छल।
  • npm पैकेज मे आब हमर स्रोत आओर dist फाइल क अलावा कोनो फाइल शामिल नहि अछि; अगर अहां हुनका सभ पर भरोसा केलहुं आओर node_modulesफोल्डर के माध्यम सं हमर स्क्रिप्ट चला रहल छलहुं तं अहां के अपन वर्कफ़्लो के अनुकूलित करबाक चाही.

रूप

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

    एकरऽ हिस्सा के रूप म॑, हम्मं॑ background-imageकस्टम फॉर्म चेकबॉक्स आरू रेडियो प॑ कई s क॑ प्रबंधित करै लेली सीएसएस क॑ बदली देल॑ छै । पहिने आब हटाओल गेल .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-textकस्टम फाइल इनपुट कें अपन Sass चर मे एकटा बदलाव प्राप्त भेल . ई आब नेस्टेड सस मैप नै छै आरू अब॑ खाली एगो स्ट्रिंग क॑ पावर दै छै- 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}जरूरत के हिसाब सं.
  • पैकेज प्रबंधक कें विकल्पक (जैना, यार्न या npm) कें लेल अप्रचलित कैल गेलाक कें रूप मे बावर समर्थन छोड़ देल गेलय. विस्तार स जानकारी लेल bower/bower#2298 देखू।
  • बूटस्ट्रैप कें एखनहु jQuery 1.9.1 या उच्चतर कें आवश्यकता छै, मुदा अहां कें सलाह देल गेल छै की संस्करण 3.x कें उपयोग करूं कियाकि v3.x कें समर्थित ब्राउज़र ओय छै जेकरा बूटस्ट्रैप समर्थन करयत छै प्लस v3.x मे किछ सुरक्षा सुधार छै.
  • अप्रयुक्त .form-control-labelवर्ग हटा देल गेल। यदि आहाँ ई क्लास के उपयोग करलकै, त॑ ई क्लास केरऽ डुप्लिकेट छेलै जे क्षैतिज रूप लेआउट म॑ एकरऽ संबद्ध इनपुट के साथ .col-form-labela क॑ लंबवत केंद्रित करलकै ।<label>
  • color-yiqएक मिक्सिन स॑ बदललऽ गेलऽ छै जेकरा म॑ colorगुण शामिल छेलै, क॑ एक फंक्शन म॑ बदललऽ गेलऽ छै जे एक मान वापस करै छै, जेकरा स॑ आपने क॑ कोनो भी CSS गुण लेली एकरऽ उपयोग करलऽ जाय सकै छै । जेना , के जगह color-yiq(#000), अहाँ लिखब color: color-yiq(#000);.

हाइलाइट

  • मोडल पर नव pointer-eventsप्रयोग शुरू केलक। बाहरी कस्टम क्लिक हैंडलिंग के लेल .modal-dialogके साथ घटना के माध्यम स गुजरैत अछि pointer-events: none(बस कोनो क्लिक के लेल पर सुनब संभव बनाबैत अछि .modal-backdrop), आ फेर वास्तविक .modal-contentके लेल एकर प्रतिकार करैत अछि pointer-events: auto.

सार

एहि ठाम टिकट के बड़का आइटम अछि जेकरा बारे मे अहां v3 सं v4 मे जाए के समय जागरूक रहय चाहब.

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

  • IE8, IE9, आ iOS 6 समर्थन छोड़ि देल गेल। v4 आब मात्र IE10+ आ iOS 7+ अछि । साइट क लेल जेकरा ओहि मे स कोनो एकटा क जरूरत अछि, v3 क उपयोग करू.
  • एंड्रॉयड v5.0 लॉलीपॉप केरऽ ब्राउज़र आरू वेबव्यू लेली आधिकारिक समर्थन जोड़लऽ गेलऽ छै । एंड्रॉयड ब्राउज़र आरू वेबव्यू केरऽ पहलऽ संस्करण केवल अनौपचारिक रूप स॑ समर्थित रहै छै ।

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

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

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

  • फ्लेक्सबॉक्स मे स्थानांतरित कएल गेल।
    • ग्रिड मिक्सिन आओर पूर्व परिभाषित वर्ग मे फ्लेक्सबॉक्स क लेल समर्थन जोड़ल गेल.
    • फ्लेक्सबॉक्स के हिस्सा के रूप में, ऊर्ध्वाधर आ क्षैतिज संरेखण वर्ग के लेल समर्थन शामिल छल.
  • अद्यतन ग्रिड वर्ग नाम आओर एकटा नव ग्रिड टीयर.
    • अधिक दानेदार नियंत्रण के लेल नीचा एकटा नव smग्रिड टीयर जोड़ल गेल अछि. 768pxहमरा सभ लग आब xs, sm, md, lg, आ xl. एकरऽ मतलब ई भी छै कि हर टीयर क॑ एक स्तर प॑ बम्प करलऽ गेलऽ छै (तें .col-md-6v3 म॑ अब॑ .col-lg-6v4 म॑ छै) ।
    • xsग्रिड वर्ग क॑ संशोधित करलऽ गेलऽ छै ताकि इन्फिक्स क॑ अधिक सटीक रूप स॑ प्रतिनिधित्व करै के आवश्यकता नै होतै कि वू min-width: 0एक सेट पिक्सेल मान प॑ नै बल्कि शैली क॑ लागू करना शुरू करै छै । के जगह .col-xs-6, आब अछि .col-6. अन्य सब ग्रिड स्तरक कें लेल इन्फिक्स (जैना, sm) कें आवश्यकता होयत छै.
  • अपडेट कएल गेल ग्रिड आकार, मिक्सिन, आओर चर.
    • ग्रिड गटर मे आब सास मैप होयत छै ताकि अहां प्रत्येक ब्रेकपॉइंट पर विशिष्ट गटर चौड़ाई निर्दिष्ट कयर सकय छी.
    • अद्यतन ग्रिड मिक्सिन कें उपयोग करय कें लेल एकटा make-col-readyप्रिप मिक्सिन आ एकटा make-colकें सेट करय कें लेल flexआ max-widthव्यक्तिगत कॉलम आकार कें लेल.
    • 12बदलल गेल ग्रिड सिस्टम मीडिया क्वेरी ब्रेकपॉइंट आ कंटेनर चौड़ाई कें लेल नव ग्रिड टीयर कें लेखा-जोखा आ सुनिश्चित करय कें लेल कॉलम कें अपन अधिकतम चौड़ाई पर समान रूप सं विभाज्य छै .
    • ग्रिड ब्रेकपॉइंट आरू कंटेनर चौड़ाई क॑ अब॑ मुट्ठी भर अलग-अलग चर के बजाय Sass मैप ( $grid-breakpointsआरू ) के माध्यम स॑ संभाललऽ जाय छै । $container-max-widthsइ @screen-*चर कें पूरा तरह सं बदलय छै आ अहां कें ग्रिड टीयर कें पूरा तरह सं अनुकूलित करय कें अनुमति देयत छै.
    • मीडिया क क्वेरी मे सेहो बदलाव आबि गेल अछि। हर बेर एकहि मान के संग अपन मीडिया क्वेरी घोषणा के दोहराबय के बजाय, हमरा सभ लग आब @include media-breakpoint-up/down/only. आब लिखबाक बदला लिखि @media (min-width: @screen-sm-min) { ... }सकैत छी @include media-breakpoint-up(sm) { ... }.

घटक

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

घटक द्वारा

इ सूची v3.xx आ v4.0.0 कें बीच घटक कें अनुसार प्रमुख परिवर्तनक कें उजागर करयत छै.

रिबूट करू

बूटस्ट्रैप 4 म॑ नया छै Reboot , एगो नया स्टाइलशीट जे हमरऽ अपनऽ कुछ राय वाला रीसेट स्टाइल के साथ Normalize प॑ आधारित छै । एहि फाइल मे प्रकट होबय बला चयनकर्ता केवल तत्वक उपयोग करैत अछि-एतय कोनो वर्ग नहि अछि. इ हमर रीसेट शैली कें हमर घटक शैली सं अलग करयत छै एकटा बेसि मॉड्यूलर दृष्टिकोण कें लेल. एकरा म॑ शामिल कुछ सबसें महत्वपूर्ण रीसेट छै box-sizing: border-boxपरिवर्तन, बहुत तत्वऽ प॑ इकाइयऽ स॑ emबढ़ना rem, लिंक शैली, आरू बहुत सारा फॉर्म तत्व रीसेट.

टाइपोग्राफी

  • .text-सभ उपयोगिता _utilities.scssफाइलमे स्थानांतरित कएल गेल.
  • छोड़ल .page-headerगेल अछि कियाकि एकर शैली उपयोगिता क माध्यम स लागू कैल जा सकैत अछि।
  • .dl-horizontalछोड़ि देल गेल अछि। एकर बजाय, ओकर आ बच्चाक .rowपर <dl>ग्रिड कॉलम क्लास (या मिक्सिन) कें उपयोग करूं आ ओकर उपयोग करूं.<dt><dd>
  • <blockquote>पुनर्निर्मित ब्लॉककोट, तत्व स एकल वर्ग मे अपन शैली स्थानांतरित करैत , .blockquote. .blockquote-reverseपाठ उपयोगिताक लेल संशोधक छोड़ि देल गेल.
  • .list-inlineआब आवश्यक छै की ओकर बच्चाक कें सूची आइटम पर नव .list-inline-itemवर्ग लागू कैल गेल छै.

छवियाँ

  • नाम बदलि .img-responsiveकए .img-fluid.
  • नाम बदलि .img-roundedगेल.rounded
  • नाम बदलि .img-circleगेल.rounded-circle

तालिकाएँ

  • चयनकर्ता कें लगभग सब इंस्टेंस >हटा देल गेल छै, मतलब नेस्टेड टेबल आब स्वचालित रूप सं अपन माता-पिता सं शैली विरासत मे लेतय. इ हमर चयनकर्ता आ संभावित अनुकूलन कें बहुत सरल बनायत छै.
  • स्थिरताक .table-condensedलेल नाम बदलि देल .table-smगेल।
  • एकटा नव .table-inverseविकल्प जोड़ल गेल।
  • तालिका हेडर संशोधक जोड़ा गेल: .thead-defaultआओर .thead-inverse.
  • -उपसर्ग होएबाक लेल संदर्भ वर्गक .table-नाम बदलल गेल. अतः .active, .success, .warning, .dangerआ .infoके .table-active, .table-success, .table-warning, .table-dangerआ .table-info.

रूप

  • स्थानांतरित तत्व _reboot.scssफाइल पर रीसेट भ' जाइत अछि.
  • नाम बदलि .control-labelकए .col-form-label.
  • नामान्तरित .input-lgएवं .input-smto .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-*वर्ग।
  • क्षैतिज रूप ओवरहाल: 1।
    • कक्षा .form-horizontalआवश्यकता छोड़ि देलनि।
    • .form-groupआब .rowvia mixin स शैली लागू नहि करैत .rowअछि, अतः आब क्षैतिज ग्रिड लेआउट क लेल आवश्यक अछि (जैना, <div class="form-group row">).
    • .col-form-labels क ' संग लंबवत केंद्र लेबल मे नव वर्ग जोड़ल गेल .form-control.
    • .form-rowग्रिड वर्गक कें साथ कॉम्पैक्ट फॉर्म लेआउट कें लेल नव जोडल गेल छै ( .rowएक .form-rowआ जाउ कें लेल अपन स्वैप करूं).
  • कस्टम फॉर्म समर्थन जोड़ा गेल छै (चेकबॉक्स, रेडियो, चयन, आ फाइल इनपुट कें लेल).
  • .has-error, .has-warning, आरू वर्ग क॑ CSS आरू छद्म-वर्ग .has-successके माध्यम स॑ HTML5 फॉर्म सत्यापन स॑ बदललऽ गेलऽ छै ।: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 मे बग्गी अछि .

बटन समूह

  • flexbox के साथ घटक पुनः लिखा।
  • हटा देल गेल .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'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।
  • ग्रिड सिस्टम आ घटक कें लेल फ्लेक्सबॉक्स उपयोगिता वर्ग जोड़ल गेलय.

समूहक सूची बनाउ

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

नवबार क॑ पूरा तरह स॑ फ्लेक्सबॉक्स म॑ पुनः लिखलऽ गेलऽ छै जेकरा म॑ संरेखण, प्रतिक्रियाशीलता, आरू अनुकूलन लेली बेहतर समर्थन मिललऽ छै ।

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

पृष्ठांकन

  • flexbox के साथ घटक पुनः लिखा।
  • आब s के वंशज पर स्पष्ट वर्ग ( .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, आओर , , आओर हमर 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}.
  • संरेखण एवं अंतराल: 1।
  • पुरान ब्राउज़र संस्करण क' लेल समर्थन छोड़बाक लेल क्लियरफिक्स अपडेट कएल गेल.

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

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

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

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

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

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

@screen-v4.0.0 मे सभ चर हटा देल गेल अछि. media-breakpoint-up()एकर बदला मे , media-breakpoint-down(), अथवा media-breakpoint-only()Sass mixins अथवा $grid-breakpointsSass नक्शा क उपयोग करू.

displayहमरऽ रिस्पांसिव यूटिलिटी क्लास क॑ काफी हद तलक स्पष्ट उपयोगिता के पक्ष म॑ हटाय देलऽ गेलऽ छै ।

  • .hiddenआरू क्लास क॑ हटा देलऽ गेलऽ छै, कैन्हेंकि ई jQuery आरू मेथड्स .showस॑ टकराव करै छेलै । एकर बदलामे, विशेषताकेँ टॉगल करबाक प्रयास करू अथवा इनलाइन शैलीक प्रयोग करू जेना आओर .$(...).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 म॑ ग्रिड ब्रेकपॉइंट म॑ बदलाव के मतलब छै कि एक ही परिणाम प्राप्त करै लेली आपक॑ एक ब्रेकपॉइंट बड़ऽ जाय के जरूरत होतै । नब प्रतिक्रियाशील उपयोगिता वर्गक कम आम मामलाक कें समायोजित करय कें प्रयास नहि करयत छै जत कोनों तत्व कें दृश्यता कें दृश्यपोर्ट आकारक कें एकल सटल श्रेणी कें रूप मे व्यक्त नहि कैल जा सकय छै; अहां कें एकर बदला मे एहन मामला मे कस्टम सीएसएस कें उपयोग करय कें जरूरत होयत.