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

फार्म के रूप में बा

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

  एकरा हिस्सा के रूप में, हमनी के background-imageकस्टम फॉर्म चेकबॉक्स आ रेडियो पर कई गो s के प्रबंधन खातिर CSS बदलले बानी जा। पहिले अब हटावल गइल .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}जरूरत का हिसाब से.
• पैकेज प्रबंधक के विकल्प (उदाहरण खातिर, यार्न या 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 में जाए के समय जागरूक होखे के चाहब।

ब्राउजर के समर्थन बा

• आईई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) के माध्यम से कॉन्फ़िगर करे लायक विकल्प से बदल दिहल गइल।
• बिल्ड सिस्टम के ओवरहाल कइल गइल ताकि ग्रंट के बजाय npm स्क्रिप्ट सभ के एगो सीरीज के इस्तेमाल कइल जा सके। सभ स्क्रिप्ट खातिर देखीं package.json, या स्थानीय विकास के जरूरत खातिर हमनी के प्रोजेक्ट readme।
• बूटस्ट्रैप के गैर-उत्तरदायी उपयोग अब समर्थित नइखे।
• ऑनलाइन कस्टमाइजर के अउरी व्यापक सेटअप दस्तावेजीकरण आ कस्टमाइज्ड बिल्ड के पक्ष में छोड़ दिहल गइल।
• आम CSS प्रॉपर्टी-वैल्यू जोड़ी आ मार्जिन/पैडिंग स्पेसिंग शॉर्टकट खातिर दर्जनों नया यूटिलिटी क्लास जोड़ल गइल।

ग्रिड सिस्टम के बारे में बतावल गइल बा

• फ्लेक्सबॉक्स में ले जाइल गइल.
  • ग्रिड मिक्सिन आ पहिले से परिभाषित क्लास में फ्लेक्सबॉक्स खातिर समर्थन जोड़ल गइल।
  • फ्लेक्सबॉक्स के हिस्सा के रूप में, ऊर्ध्वाधर आ क्षैतिज संरेखण वर्ग खातिर समर्थन शामिल रहे।
• ग्रिड क्लास के नाँव आ एगो नया ग्रिड टीयर अपडेट कइल गइल।
  • अधिक दानेदार नियंत्रण खातिर नीचे एगो नया smग्रिड टीयर जोड़ल गइल बा। 768pxहमनी के अब xs, sm, md, lg, आ xl. एकर मतलब इहो बा कि हर टीयर के एक लेवल बम्प कइल गइल बा (एह .col-md-6से v3 में अब .col-lg-6v4 में बा)।
  • xsग्रिड क्लास सभ के संशोधित कइल गइल बा कि इनफिक्स के अउरी सटीक रूप से रिप्रेजेंट करे के जरूरत ना पड़े कि ऊ लोग min-width: 0सेट पिक्सेल मान पर ना आ ना कि स्टाइल सभ के लागू करे शुरू करे ला। के जगह .col-xs-6, अब बा .col-6. बाकी सभ ग्रिड टीयर सभ में इनफिक्स के जरूरत होला (जइसे कि, sm)।
• ग्रिड साइज, मिक्सिन, आ चर सभ के अपडेट कइल गइल बा।
  • ग्रिड गटर सभ में अब सास मैप होला जेह से कि आप हर ब्रेकपॉइंट पर बिसेस गटर चौड़ाई निर्दिष्ट क सकत बानी।
  • make-col-readyएगो प्रिप मिक्सिन के उपयोग करे खातिर ग्रिड मिक्सिन आ अलग-अलग कॉलम साइजिंग खातिर आ make-colसेट करे खातिर एगो के अपडेट कइल गइल।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) { ... }.

घटक के बारे में बतावल गइल बा

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

घटक के हिसाब से

ई लिस्ट 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.
• नाम बदल दिहल गइल आ क्रमशः to .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आ जा)।
• कस्टम फॉर्म समर्थन जोड़ल गइल (चेकबॉक्स, रेडियो, चयन, आ फाइल इनपुट खातिर)।
• .has-error, .has-warning, आ क्लास सभ के CSS's आ छद्म-क्लास सभ .has-successके माध्यम से HTML5 फॉर्म वैलिडेशन से बदल दिहल गइल।:invalid:valid
• नाम बदल के रख .form-control-staticदिहल गइल बा .form-control-plaintext.

बटन के बा

• नाम बदल के रख .btn-defaultदिहल गइल बा .btn-secondary.
• क्लास के .btn-xsपूरा तरीका से छोड़ दिहलस काहें .btn-smसे कि आनुपातिक रूप से v3 के तुलना में बहुत छोट बा।
• जेक्वेरी प्लगइन के स्टेटफुल बटन फीचर छोड़ दिहल गइल बा . 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>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
• ग्रिड सिस्टम आ घटक खातिर फ्लेक्सबॉक्स उपयोगिता वर्ग जोड़ल गइल।

समूहन के सूची बनाईं

• फ्लेक्सबॉक्स के साथ घटक के दोबारा लिखल गइल।
• सूची समूह आइटम सभ के स्टाइल लिंक आ बटन संस्करण सभ खातिर a.list-group-itemएगो स्पष्ट क्लास, , से बदल दिहल गइल बा।.list-group-item-action
• .list-group-flushकार्ड के साथे इस्तेमाल खातिर क्लास जोड़ल गइल ।

मोडल के बा

• फ्लेक्सबॉक्स के साथ घटक के दोबारा लिखल गइल।
• फ्लेक्सबॉक्स में जाए के देखत, हेडर में डिसमिस आइकन के संरेखण टूट जाए के संभावना बा काहे कि हमनी के अब फ्लोट के इस्तेमाल नईखी करत। फ्लोटेड कंटेंट सबसे पहिले आवेला, लेकिन फ्लेक्सबॉक्स के संगे अब अयीसन नईखे। ठीक करे खातिर मोडल टाइटिल के बाद आवे खातिर आपन बर्खास्तगी आइकन अपडेट करीं।
• विकल्प (जवना के remoteइस्तेमाल बाहरी सामग्री के स्वचालित रूप से लोड आ मोडल में इंजेक्ट करे खातिर कइल जा सके ला) आ संबंधित loaded.bs.modalघटना के हटा दिहल गइल। हमनी के एकरे बजाय क्लाइंट-साइड टेम्पलेटिंग या डेटा बाइंडिंग फ्रेमवर्क के इस्तेमाल करे के सलाह देत बानी जा, या खुद jQuery.load के कॉल करीं।

नवस के बा

• फ्लेक्सबॉक्स के साथ घटक के दोबारा लिखल गइल।
• >अन-नेस्टेड क्लास के माध्यम से सरल स्टाइलिंग खातिर लगभग सभ चयनकर्ता के छोड़ दिहल गईल।
• HTML-विशिष्ट चयनकर्ता जइसे कि , के बजाय , हमनी के s, s, आ s .nav > li > aखातिर अलग-अलग क्लास के इस्तेमाल करेनी जा । एह से राउर एचटीएमएल अउरी लचीला हो जाला आ साथ ही साथ बढ़ल विस्तार भी आवेला।.nav.nav-item.nav-link

नवबर के बा

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

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

पृष्ठांकन कइल गइल बा

• फ्लेक्सबॉक्स के साथ घटक के दोबारा लिखल गइल।
• अब 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, आ , , आ हमनी के सस मैप से जनरेट कइल गइल उपयोगिता .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).
  • Dropped the bulk of .hidden-* utilities for new display utilities. For example, instead of .hidden-sm-up, use .d-sm-none. Renamed the .hidden-print utilities to use the display utility naming scheme. More info under the Responsive utilities section of this page.
  • Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
• Type:
  • Added responsive variations to our text alignment classes .text-{sm,md,lg,xl}-{left,center,right}.
• Alignment and spacing:
  • Added new responsive margin and padding utilities for all sides, plus vertical and horizontal shorthands.
  • Added boatload of flexbox utilities.
  • Dropped .center-block for the new .mx-auto class.
• Clearfix updated to drop support for older browser versions.

Vendor prefix mixins

Bootstrap 3’s vendor prefix mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use Autoprefixer, they’re no longer necessary.

Removed the following mixins: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d, user-select

Documentation

Our documentation received an upgrade across the board as well. Here’s the low down:

• We’re still using Jekyll, but we have plugins in the mix:
  • bugify.rb is used to efficiently list out the entries on our browser bugs page.
  • example.rb is a custom fork of the default highlight.rb plugin, allowing for easier example-code handling.
  • callout.rb is a similar custom fork of that, but designed for our special docs callouts.
  • jekyll-toc is used to generate our table of contents.
• All docs content has been rewritten in Markdown (instead of HTML) for easier editing.
• Pages have been reorganized for simpler content and a more approachable hierarchy.
• We moved from regular CSS to SCSS to take full advantage of Bootstrap’s variables, mixins, and more.

Responsive utilities

All @screen- variables have been removed in v4.0.0. Use the media-breakpoint-up(), media-breakpoint-down(), or media-breakpoint-only() Sass mixins or the $grid-breakpoints Sass map instead.

Our responsive utility classes have largely been removed in favor of explicit display utilities.

• The .hidden and .show classes have been removed because they conflicted with jQuery’s $(...).hide() and $(...).show() methods. Instead, try toggling the [hidden] attribute or use inline styles like style="display: none;" and style="display: block;".
• All .hidden- classes have been removed, save for the print utilities which have been renamed.
  • Removed from v3: .hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • Removed from v4 alphas: .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Print utilities no longer start with .hidden- or .visible-, but with .d-print-.
  • Old names: .visible-print-block, .visible-print-inline, .visible-print-inline-block, .hidden-print
  • नया कक्षा: .d-print-block, .d-print-inline, .d-print-inline-block, के बा।.d-print-none

स्पष्ट क्लास के इस्तेमाल करे के बजाय .visible-*, रउआँ कौनों तत्व के बस ओह स्क्रीन साइज पर ना छिपा के देखाई देवे वाला बना देनी। आप एक .d-*-noneक्लास के एक क्लास के साथ मिला .d-*-blockके कौनों तत्व के खाली स्क्रीन साइज के दिहल अंतराल पर देखा सकत बानी (जइसे .d-none.d-md-block.d-xl-noneकि तत्व के खाली मध्यम आ बड़ डिवाइस सभ पर देखावल जाला)।

ध्यान दीं कि v4 में ग्रिड ब्रेकपॉइंट में बदलाव के मतलब बा कि एकही परिणाम हासिल करे खातिर रउआँ के एक ब्रेकपॉइंट बड़ जाए के पड़ी। नया रिस्पांसिव यूटिलिटी क्लास सभ में कम आम मामिला सभ के समायोजित करे के कोसिस ना कइल जाला जहाँ कौनों तत्व के दृश्यता के व्यूपोर्ट साइज सभ के एकही सटल रेंज के रूप में ना बतावल जा सके ला; एकरा बदले अइसन मामिला में रउरा कस्टम सीएसएस के इस्तेमाल करे के पड़ी.