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
फोल्डर दे राहें साढ़ी स्क्रिप्ट चला करदे ओ तां तुसेंगी अपने वर्कफ़्लो गी अनुकूलित करना चाहिदा ऐ.
रूप दे
-
कस्टम ते डिफाल्ट चेकबॉक्स ते रेडियो दोनें गी दुबारा लिखेआ। हुण, दोनों च मिलान 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-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}
जरूरत मताबक। - पैकेज प्रबंधक गी विकल्पें (जियां, यार्न जां एनपीएम) आस्तै डिप्रीकेट कीते गेदे होने दे नाते बावर समर्थन गी छोड़ी दित्ता गेआ ऐ. विस्तार कन्नै दिक्खो 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-6
v3 च हून.col-lg-6
v4 च ऐ)। 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-sm
v3 दी तुलना च आनुपातिक रूप कन्नै मता छोटा ऐ।- 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::after
on दे राहें स्वतः उपलब्ध करोआया जंदा ऐ.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
जोड़ेआ गेआ ऐ तां जे होर थाह् रें पर बरते गेदे घटक संशोधक वर्गें कन्नै मेल खंदा ऐ.
पैनल, थंबनेल, ते कुएं
नमें कार्ड घटक आस्तै पूरी चाल्ली छोड़ी दित्ता गेआ।
पैनल दे
.panel
to.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
). .hidden-*
नमीं प्रदर्शन उपयोगिताएं लेई उपयोगिताएं दा बड्डा हिस्सा छोड़ी दित्ता . मसलन, , दे बजाय.hidden-sm-up
, दा इस्तेमाल करो.d-sm-none
..hidden-print
प्रदर्शन उपयोगिता नामांकन योजना दा उपयोग करने आस्तै उपयोगिताएं दा नांऽ बदली दित्ता गेआ। इस पृष्ठ दे प्रतिक्रियाशील उपयोगिताएं दे खंड दे हेठ होर मती जानकारी ।.float-{sm,md,lg,xl}-{left,right,none}
उत्तरदायी फ्लोटें लेई कक्षाएं गी जोड़ेआ ते हटाया गेआ.pull-left
ते.pull-right
चूंकि ओह् ते गी फालतू.float-left
न.float-right
.
- प्रदर्शन उपयोगिताएं गी उत्तरदायी बनाई दित्ता (जैसे,
- किसम:
- साढ़े पाठ संरेखण वर्गें च प्रतिक्रियाशील बदलाव जोड़ेआ गेआ
.text-{sm,md,lg,xl}-{left,center,right}
.
- साढ़े पाठ संरेखण वर्गें च प्रतिक्रियाशील बदलाव जोड़ेआ गेआ
- संरेखण ते अंतराल:
- सारे पास्सें लेई नमें रिस्पांसिव मार्जिन ते पैडिंग उपयोगिताएं गी जोड़ेआ गेआ, प्लस ऊर्ध्वाधर ते क्षैतिज आशुलिपि।
- फ्लेक्सबॉक्स उपयोगिताएं दा बोटलोड जोड़ेआ गेआ .
.center-block
नई.mx-auto
क्लास के लिये गिरा दिया ।
- पुराने ब्राउज़र संस्करणें लेई समर्थन गी छोड़ने लेई क्लियरफिक्स अपडेट कीता गेआ ऐ.
विक्रेता उपसर्ग मिक्सिन
बूटस्ट्रैप 3 दे विक्रेता उपसर्ग मिक्सिन, जेह् ड़े v3.2.0 च डिप्रीकेट कीते गेदे हे, गी बूटस्ट्रैप 4 च हटाई दित्ता गेआ ऐ, चूंकि अस Autoprefixer दा इस्तेमाल करदे आं , एह् हून जरूरी नेईं ऐ.
निम्नलिखित मिक्सिन हटाए गए : animation
, animation-delay
, animation-direction
, animation-duration
, animation-fill-mode
, animation-iteration-count
, animation-name
, animation-timing-function
, backface-visibility
, box-sizing
, content-columns
, hyphens
, opacity
, perspective
, perspective-origin
, rotate
, rotateX
, rotateY
, scale
, scaleX
, scaleY
, skew
, transform-origin
, transition-delay
, transition-duration
, transition-property
, transition-timing-function
, transition-transform
,translate
translate3d
user-select
दस्तावेजीकरण करना
साढ़े दस्तावेजें गी पूरे बोर्ड च बी अपग्रेड हासल होआ। इत्थें लो डाउन ऐ:
- अस अजें बी जेकिल दा इस्तेमाल करा करदे आं, पर साढ़े कोल मिक्स च प्लगइन्स न:
bugify.rb
साढ़े ब्राउज़र बग पृष्ठ पर प्रविश्टियें गी कुशलता कन्नै सूचीबद्ध करने लेई बरतेआ जंदा ऐ ।example.rb
डिफाल्ट प्लगइन दा इक कस्टम कांटा ऐhighlight.rb
, जेह् ड़ा आसान उदाहरण-कोड हैंडलिंग दी अनुमति दिंदा ऐ.callout.rb
उसदा इक समान कस्टम कांटा ऐ, पर साढ़े खास डॉक्स कॉलआउट आस्तै डिजाइन कीता गेदा ऐ।- 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
- v3 थमां हटाया गेआ:
- प्रिंट उपयोगिताएं गी हून
.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 दा इस्तेमाल करने दी लोड़ होग.