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
फ़ोल्डर के माध्यम से हमारी स्क्रिप्ट चला रहे थे, तो आपको अपने वर्कफ़्लो को अनुकूलित करना चाहिए।
फार्म
-
कस्टम और डिफ़ॉल्ट चेकबॉक्स और रेडियो दोनों को फिर से लिखें। अब, दोनों में मेल खाने वाली HTML संरचना (बाहरी
<div>
सहोदर<input>
और<label>
) और समान लेआउट शैलियाँ (स्टैक्ड डिफ़ॉल्ट, संशोधक वर्ग के साथ इनलाइन) हैं। यह हमें इनपुट की स्थिति के आधार पर लेबल को स्टाइल करने की अनुमति देता है, विशेषता के लिए समर्थन को सरल करता हैdisabled
(पहले एक मूल वर्ग की आवश्यकता होती है) और हमारे फॉर्म सत्यापन का बेहतर समर्थन करता है।इसके भाग के रूप में, हमने
background-image
कस्टम प्रपत्र चेकबॉक्स और रेडियो पर एकाधिक s प्रबंधित करने के लिए CSS को बदल दिया है। पहले, अब हटाए गए.custom-control-indicator
तत्व में पृष्ठभूमि का रंग, ग्रेडिएंट और SVG आइकन था। बैकग्राउंड ग्रेडिएंट को कस्टमाइज़ करने का मतलब है कि हर बार आपको केवल एक को बदलने के लिए उन सभी को बदलना। अब, हमारे पास.custom-control-label::before
भरने और ढाल के लिए है और.custom-control-label::after
आइकन को संभालता है।कस्टम चेक इनलाइन बनाने के लिए, जोड़ें
.custom-control-inline
। -
इनपुट-आधारित बटन समूहों के लिए अपडेट किया गया चयनकर्ता।
[data-toggle="buttons"] { }
शैली और व्यवहार के बजाय , हमdata
केवल JS व्यवहार के लिए विशेषता का उपयोग करते हैं और.btn-group-toggle
स्टाइल के लिए एक नए वर्ग पर भरोसा करते हैं। -
.col-form-legend
थोड़ा सुधार के पक्ष में हटा दिया गया.col-form-label
। इस तरह.col-form-label-sm
और आसानी से तत्वों.col-form-label-lg
पर इस्तेमाल किया जा सकता है ।<legend>
-
$custom-file-text
कस्टम फ़ाइल इनपुट को उनके Sass चर में परिवर्तन प्राप्त हुआ । यह अब एक नेस्टेड Sass मैप नहीं है और अब केवल एक स्ट्रिंग को शक्ति देता है -Browse
बटन क्योंकि अब हमारे Sass से उत्पन्न एकमात्र छद्म तत्व है।Choose file
पाठ अब से आता.custom-file-label
है ।
इनपुट समूह
-
इनपुट ग्रुप ऐडऑन अब इनपुट के सापेक्ष उनके प्लेसमेंट के लिए विशिष्ट हैं। हमने छोड़ दिया है
.input-group-addon
और.input-group-btn
दो नई कक्षाओं के लिए,.input-group-prepend
और.input-group-append
. आपको हमारे अधिकांश CSS को सरल बनाने के लिए अभी स्पष्ट रूप से एक परिशिष्ट या एक प्रीपेन्ड का उपयोग करना चाहिए। एक परिशिष्ट या प्रीपेन्ड के भीतर, अपने बटन रखें क्योंकि वे कहीं और मौजूद होंगे, लेकिन टेक्स्ट को.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}
आवश्यकतानुसार। - पैकेज प्रबंधक के रूप में छोड़े गए बोवर समर्थन को विकल्पों (जैसे, यार्न या एनपीएम) के लिए बहिष्कृत कर दिया गया है। विवरण के लिए बोवर/बोवर#2298 देखें।
- बूटस्ट्रैप को अभी भी jQuery 1.9.1 या उच्चतर की आवश्यकता है, लेकिन आपको संस्करण 3.x का उपयोग करने की सलाह दी जाती है क्योंकि v3.x के समर्थित ब्राउज़र वे हैं जो बूटस्ट्रैप समर्थन करते हैं और v3.x में कुछ सुरक्षा सुधार हैं।
.form-control-label
अप्रयुक्त वर्ग को हटा दिया । यदि आपने इस वर्ग का उपयोग किया है, तो यह उस वर्ग का डुप्लिकेट था जो क्षैतिज रूप लेआउट में इसके संबंधित इनपुट के साथ.col-form-label
लंबवत केंद्रित था ।<label>
color-yiq
एक मिक्सिन से बदल दिया जिसमें संपत्ति को एक फ़ंक्शन में शामिल किया गया था जोcolor
एक मूल्य देता है, जिससे आप इसे किसी भी सीएसएस संपत्ति के लिए उपयोग कर सकते हैं। उदाहरण के लिए, के बजाय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 का उपयोग करें।
- Android v5.0 लॉलीपॉप के ब्राउज़र और वेबव्यू के लिए आधिकारिक समर्थन जोड़ा गया। Android ब्राउज़र और WebView के पुराने संस्करण केवल अनौपचारिक रूप से समर्थित हैं।
वैश्विक परिवर्तन
- फ्लेक्सबॉक्स डिफ़ॉल्ट रूप से सक्षम है। सामान्य तौर पर इसका मतलब है कि हमारे घटकों में फ़्लोट्स और अधिक से दूर जाना।
- हमारे स्रोत CSS फाइलों के लिए कम से Sass पर स्विच किया गया।
- हमारी प्राथमिक सीएसएस इकाई के रूप में स्विच किया
px
गयाrem
, हालांकि पिक्सेल अभी भी मीडिया प्रश्नों और ग्रिड व्यवहार के लिए उपयोग किए जाते हैं क्योंकि डिवाइस व्यूपोर्ट प्रकार के आकार से प्रभावित नहीं होते हैं। - वैश्विक फ़ॉन्ट-आकार से
14px
बढ़कर16px
. - पांचवां विकल्प जोड़ने के लिए ग्रिड स्तरों को संशोधित किया गया (छोटे उपकरणों को नीचे और नीचे संबोधित करना) और उन वर्गों से इंफिक्स को
576px
हटा दिया ।-xs
उदाहरण.col-6.col-sm-4.col-md-3
:। - अलग वैकल्पिक विषयवस्तु को SCSS चरों (जैसे,
$enable-gradients: true
) के माध्यम से विन्यास योग्य विकल्पों से बदल दिया। - ग्रंट के बजाय एनपीएम स्क्रिप्ट की एक श्रृंखला का उपयोग करने के लिए सिस्टम का निर्माण करें। सभी लिपियों के लिए देखें
package.json
, या स्थानीय विकास की जरूरतों के लिए हमारी परियोजना रीडमी। - बूटस्ट्रैप का गैर-प्रतिक्रियाशील उपयोग अब समर्थित नहीं है।
- अधिक व्यापक सेटअप प्रलेखन और अनुकूलित बिल्ड के पक्ष में ऑनलाइन कस्टमाइज़र को छोड़ दिया।
- सामान्य सीएसएस संपत्ति-मूल्य जोड़े और मार्जिन/पैडिंग स्पेसिंग शॉर्टकट्स के लिए दर्जनों नए उपयोगिता वर्ग जोड़े गए।
ग्रिड प्रणाली
- फ्लेक्सबॉक्स में ले जाया गया।
- ग्रिड मिक्सिन और पूर्वनिर्धारित कक्षाओं में फ्लेक्सबॉक्स के लिए जोड़ा गया समर्थन।
- फ्लेक्सबॉक्स के हिस्से के रूप में, ऊर्ध्वाधर और क्षैतिज संरेखण वर्गों के लिए समर्थन शामिल है।
- अद्यतन ग्रिड वर्ग के नाम और एक नया ग्रिड स्तर।
- अधिक बारीक नियंत्रण के लिए
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
) की आवश्यकता होती है।
- अधिक बारीक नियंत्रण के लिए
- अद्यतन ग्रिड आकार, मिश्रण और चर।
- ग्रिड गटर में अब एक Sass नक्शा है ताकि आप प्रत्येक ब्रेकपॉइंट पर विशिष्ट गटर चौड़ाई निर्दिष्ट कर सकें।
- अलग-अलग कॉलम साइज़िंग के लिए और सेट करने के लिए
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) { ... }
।
अवयव
- एक नए सर्वव्यापी घटक, कार्ड के लिए गिराए गए पैनल, थंबनेल और कुएं ।
- Glyphicons आइकन फ़ॉन्ट गिरा दिया। यदि आपको आइकन की आवश्यकता है, तो कुछ विकल्प हैं:
- Glyphicons का अपस्ट्रीम संस्करण
- ऑक्टिकॉन्स
- फ़ॉन्ट विस्मयकारी
- विकल्पों की सूची के लिए विस्तार पृष्ठ देखें । अतिरिक्त सुझाव हैं? कृपया कोई मुद्दा या पीआर खोलें।
- एफिक्स jQuery प्लगइन गिरा दिया।
- हम
position: sticky
इसके बजाय उपयोग करने की सलाह देते हैं। विवरण और विशिष्ट पॉलीफ़िल अनुशंसाओं के लिए कृपया HTML5 प्रविष्टि देखें । एक सुझाव@supports
इसे लागू करने के लिए एक नियम का उपयोग करना है (उदाहरण के लिए,@supports (position: sticky) { ... }
) - यदि आप अतिरिक्त, गैर-
position
शैलियों को लागू करने के लिए एफ़िक्स का उपयोग कर रहे थे, तो हो सकता है कि पॉलीफ़िल आपके उपयोग के मामले का समर्थन न करें। ऐसे उपयोगों के लिए एक विकल्प तृतीय-पक्ष स्क्रॉलपॉस-स्टाइलर लाइब्रेरी है।
- हम
- पेजर घटक को छोड़ दिया क्योंकि यह अनिवार्य रूप से थोड़ा अनुकूलित बटन था।
- अधिक विशिष्ट बच्चों के चयनकर्ताओं के बजाय अधिक गैर-नेस्टेड वर्ग चयनकर्ताओं का उपयोग करने के लिए लगभग सभी घटकों को पुन: सक्रिय किया गया।
घटक द्वारा
यह सूची v3.xx और v4.0.0 के बीच घटक द्वारा प्रमुख परिवर्तनों को हाइलाइट करती है।
रीबूट
बूटस्ट्रैप 4 के लिए नया रीबूट है , एक नई स्टाइलशीट जो हमारे अपने कुछ हद तक विचारित रीसेट शैलियों के साथ सामान्यीकृत पर बनाता है। इस फ़ाइल में दिखाई देने वाले चयनकर्ता केवल तत्वों का उपयोग करते हैं—यहाँ कोई वर्ग नहीं है। यह अधिक मॉड्यूलर दृष्टिकोण के लिए हमारी रीसेट शैलियों को हमारी घटक शैलियों से अलग करता है। इसमें शामिल कुछ सबसे महत्वपूर्ण रीसेट हैं 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
s के साथ लंबवत केंद्र लेबल में नया वर्ग जोड़ा गया.form-control
।.form-row
ग्रिड कक्षाओं के साथ कॉम्पैक्ट फॉर्म लेआउट के लिए नया जोड़ा गया (अपने.row
लिए एक.form-row
और जाने के लिए स्वैप करें)।
- कक्षा
- जोड़ा गया कस्टम प्रपत्र समर्थन (चेकबॉक्स, रेडियो, चयन और फ़ाइल इनपुट के लिए)।
.has-error
HTML5 के साथ ,.has-warning
, और कक्षाओं को सीएसएस और छद्म वर्गों.has-success
के माध्यम से सत्यापन के रूप में बदला गया।: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>
s या<ul>
s के साथ बनाया जा सकता है। - ड्रॉपडाउन शैलियों और मार्कअप को फिर से बनाया ताकि ड्रॉपडाउन आइटम के लिए आसान, अंतर्निहित समर्थन प्रदान
<a>
किया जा सके।<button>
- का नाम बदल
.divider
दिया.dropdown-divider
। - ड्रॉपडाउन आइटम की अब आवश्यकता है
.dropdown-item
. - ड्रॉपडाउन टॉगल को अब स्पष्ट शब्दों की आवश्यकता नहीं है
<span class="caret"></span>
; यह अब CSS के::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
के माध्यम से कक्षा में लागू होते हैं जहां आप चुनते हैं कि नेवबार को कहां संक्षिप्त करना है। पहले यह एक कम परिवर्तनशील संशोधन था और इसके लिए पुन: संकलन की आवश्यकता थी।.navbar-expand-{breakpoint}
.navbar-default
अब है.navbar-light
, हालां���ि.navbar-dark
वही रहता है। इनमें से प्रत्येक नावबार पर आवश्यक है। हालाँकि, ये वर्ग अबbackground-color
s सेट नहीं करते हैं; इसके बजाय वे अनिवार्य रूप से केवल प्रभावित करते हैंcolor
।- नवबारों को अब किसी प्रकार की पृष्ठभूमि घोषणा की आवश्यकता है। हमारी पृष्ठभूमि उपयोगिताओं में से चुनें ( ) या पागल अनुकूलन के लिए
.bg-*
उपरोक्त प्रकाश/उलटा वर्गों के साथ अपना खुद का सेट करें । - फ्लेक्सबॉक्स शैलियों को देखते हुए, नेवबार अब आसान संरेखण विकल्पों के लिए फ्लेक्सबॉक्स उपयोगिताओं का उपयोग कर सकते हैं।
.navbar-toggle
अब है.navbar-toggler
और इसकी विभिन्न शैलियाँ और आंतरिक मार्कअप हैं (तीन से अधिक नहीं<span>
)।- पूरी तरह से
.navbar-form
क्लास छोड़ दी। यह अब आवश्यक नहीं है; इसके बजाय, केवल.form-inline
आवश्यकतानुसार मार्जिन उपयोगिताओं का उपयोग करें और लागू करें। - Navbars अब शामिल नहीं हैं
margin-bottom
याborder-radius
डिफ़ॉल्ट रूप से। आवश्यकतानुसार उपयोगिताओं का उपयोग करें। - नए मार्कअप को शामिल करने के लिए नेवबार की विशेषता वाले सभी उदाहरणों को अपडेट कर दिया गया है।
पृष्ठ पर अंक लगाना
- फ्लेक्सबॉक्स के साथ घटक को फिर से लिखें।
- स्पष्ट वर्ग (
.page-item
, ) अब s.page-link
. के वंशजों पर आवश्यक हैं.pagination
- घटक
.pager
को पूरी तरह से हटा दिया क्योंकि यह अनुकूलित रूपरेखा बटन से थोड़ा अधिक था।
ब्रेडक्रम्ब्स
- s
.breadcrumb-item
. के वंशजों पर अब एक स्पष्ट वर्ग की आवश्यकता है.breadcrumb
लेबल और बैज
- समेकित
.label
और तत्व.badge
से अलग करना<label>
और संबंधित घटकों को सरल बनाना। .badge-pill
गोल "गोली" लुक के लिए संशोधक के रूप में जोड़ा गया ।- बैज अब सूची समूहों और अन्य घटकों में स्वचालित रूप से फ़्लोट नहीं किए जाते हैं। उसके लिए अब उपयोगिता वर्गों की आवश्यकता है।
.badge-default
गिरा दिया गया है और.badge-secondary
कहीं और उपयोग किए जाने वाले घटक संशोधक वर्गों से मेल खाने के लिए जोड़ा गया है।
पैनल, थंबनेल और कुएं
नए कार्ड घटक के लिए पूरी तरह से हटा दिया गया।
पैनलों
.panel
to.card
, अब flexbox के साथ बनाया गया है।.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
।
हिंडोला
- डिजाइन और स्टाइलिंग को आसान बनाने के लिए पूरे कंपोनेंट को ओवरहॉल किया। आपके पास ओवरराइड करने के लिए हमारे पास कम शैलियाँ हैं, नए संकेतक और नए चिह्न हैं।
- सभी सीएसएस को नेस्टेड नहीं किया गया है और इसका नाम बदल दिया गया है, यह सुनिश्चित करते हुए कि प्रत्येक वर्ग के साथ उपसर्ग है
.carousel-
।- कैरोसल आइटम के लिए,
.next
,.prev
,.left
, और.right
are now.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
।
- पुराने ब्राउज़र संस्करणों के लिए समर्थन छोड़ने के लिए Clearfix अपडेट किया गया।
विक्रेता उपसर्ग मिश्रण
बूटस्ट्रैप 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
प्रलेखन
हमारे दस्तावेज़ीकरण को पूरे बोर्ड में भी अपग्रेड मिला। यहाँ नीचे है:
- हम अभी भी Jekyll का उपयोग कर रहे हैं, लेकिन हमारे पास मिश्रण में प्लगइन्स हैं:
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 मिक्सिन या $grid-breakpoints
Sass मानचित्र का उपयोग करें ।
स्पष्ट उपयोगिताओं के पक्ष में हमारे उत्तरदायी उपयोगिता वर्गों को काफी हद तक हटा दिया गया है 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 में ग्रिड ब्रेकप्वाइंट में परिवर्तन का अर्थ है कि समान परिणाम प्राप्त करने के लिए आपको एक बड़ा ब्रेकपॉइंट जाना होगा। नई प्रतिक्रियाशील उपयोगिता वर्ग कम सामान्य मामलों को समायोजित करने का प्रयास नहीं करते हैं जहां एक तत्व की दृश्यता को व्यूपोर्ट आकारों की एक सन्निहित श्रेणी के रूप में व्यक्त नहीं किया जा सकता है; इसके बजाय आपको ऐसे मामलों में कस्टम सीएसएस का उपयोग करने की आवश्यकता होगी।