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-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-label
a के ऊर्ध्वाधर रूप से केंद्रित कइले रहे।<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-6
v4 में बा)। 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) { ... }
.
घटक के बारे में बतावल गइल बा
- एगो नया सर्वव्यापी घटक खातिर गिरावल पैनल, थंबनेल, आ कुआँ , कार्ड .
- ग्लिफिकॉन्स आइकन फॉन्ट के छोड़ दिहल गइल. अगर रउआँ के आइकन के जरूरत बा, कुछ विकल्प बाड़ें:
- ग्लिफिकॉन्स के अपस्ट्रीम संस्करण के बारे में बतावल गइल बा
- ऑक्टिकन के नाम से जानल जाला
- फॉन्ट लाजवाब बा
- विकल्प सभ के लिस्ट खातिर बिस्तार पन्ना देखल जाय । का कवनो अतिरिक्त सुझाव बा? कृपया कवनो मुद्दा भा पीआर खोलीं.
- एफिक्स जेक्वेरी प्लगइन के छोड़ दिहल गइल।
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-label
s के साथ लंबवत केंद्र लेबल में नया क्लास जोड़ल गइल.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::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
खातिर अलग-अलग क्लास के इस्तेमाल करेनी जा । एह से राउर एचटीएमएल अउरी लचीला हो जाला आ साथ ही साथ बढ़ल विस्तार भी आवेला।.nav
.nav-item
.nav-link
नवबर के बा
नवबार के पूरा तरीका से फ्लेक्सबॉक्स में दोबारा लिखल गइल बा जेह में संरेखण, प्रतिक्रियाशीलता, आ अनुकूलन खातिर बेहतर समर्थन दिहल गइल बा।
- रिस्पांसिव नवबार व्यवहार अब जरूरी
.navbar
के माध्यम से क्लास पर लागू कइल जाला जहाँ रउआ चुनीं कि नवबार के कहाँ संकुचित करे के बा। पहिले ई एगो Less variable modification रहे आ एकरा खातिर recompiling के जरूरत रहे।.navbar-expand-{breakpoint}
.navbar-default
is now.navbar-light
, हालांकि.navbar-dark
उहे बा। हर नवबार पर एहमें से एगो जरूरी बा. हालाँकि, ई वर्ग अबbackground-color
s सेट ना करे लें; एकरा बजाय उ लोग अनिवार्य रूप से खाली प्रभावित करेला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
जोड़ल गइल बा जेह से कि कहीं अउरी इस्तेमाल होखे वाला कंपोनेंट मोडिफायर क्लास सभ से मेल खा सके।
पैनल, थंबनेल, आ कुआँ के बारे में जानकारी दिहल गइल बा
नया कार्ड घटक खातिर पूरा तरह से छोड़ दिहल गइल.
पैनल के बा
.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 में हटा दिहल गईल बा, चूंकि हमनी के ऑटोप्रिफिक्सर के इस्तेमाल करतानी , एहसे अब एकर जरूरत नईखे।
निम्नलिखित मिक्सिन के हटा दिहल गइल : 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 के इस्तेमाल हमनी के सामग्री तालिका बनावे खातिर कइल जाला।
- सभ डॉक्स सामग्री के संपादन में आसानी खातिर मार्कडाउन (एचटीएमएल के बजाय) में दोबारा लिखल गइल बा।
- सरल सामग्री आ अधिका सुलभ पदानुक्रम खातिर पन्ना सभ के पुनर्गठन कइल गइल बा।
- हमनी के बूटस्ट्रैप के चर, मिक्सिन, आ अउरी बहुत कुछ के पूरा फायदा उठावे खातिर नियमित सीएसएस से एससीएसएस में आ गइनी जा।
रिस्पांसिव यूटिलिटीज के बारे में बतावल गइल बा
@screen-
v4.0.0 में सभ चर के हटा दिहल गइल बा। media-breakpoint-up()
एकरे बजाय , media-breakpoint-down()
, या media-breakpoint-only()
सस मिक्सिन या $grid-breakpoints
सस मैप के इस्तेमाल करीं ।
display
हमनी के रिस्पांसिव यूटिलिटी क्लास के बहुत हद तक स्पष्ट उपयोगिता के पक्ष में हटा दिहल गईल बा ।
.hidden
आ क्लास सभ के.show
हटा दिहल गइल बा काहें से कि ई jQuery के$(...).hide()
आ$(...).show()
मेथड सभ से टकराव करत रहलें। एकरे बजाय,[hidden]
एट्रिब्यूट के टॉगल करे के कोसिस करीं या इनलाइन स्टाइल सभ के इस्तेमाल करीं जइसे किstyle="display: none;"
आstyle="display: block;"
.- सभ
.hidden-
क्लास हटा दिहल गइल बा, प्रिंट यूटिलिटी सभ के छोड़ के जेकर नाँव बदल दिहल गइल बा।- v3 से हटा दिहल गइल बा:
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.visible-xs-block
.visible-xs-inline
.visible-xs-inline-block
.visible-sm-block
.visible-sm-inline
.visible-sm-inline-block
.visible-md-block
.visible-md-inline
.visible-md-inline-block
.visible-lg-block
.visible-lg-inline
.visible-lg-inline-block
- v4 अल्फा से हटा दिहल गइल बा:
.hidden-xs-up
.hidden-xs-down
.hidden-sm-up
.hidden-sm-down
.hidden-md-up
.hidden-md-down
.hidden-lg-up
.hidden-lg-down
- 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 में ग्रिड ब्रेकपॉइंट में बदलाव के मतलब बा कि एकही परिणाम हासिल करे खातिर रउआँ के एक ब्रेकपॉइंट बड़ जाए के पड़ी। नया रिस्पांसिव यूटिलिटी क्लास सभ में कम आम मामिला सभ के समायोजित करे के कोसिस ना कइल जाला जहाँ कौनों तत्व के दृश्यता के व्यूपोर्ट साइज सभ के एकही सटल रेंज के रूप में ना बतावल जा सके ला; एकरा बदले अइसन मामिला में रउरा कस्टम सीएसएस के इस्तेमाल करे के पड़ी.