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 प्रकाशनांत संबोधीत करपाची गरज आशिल्ली. तुमी Beta 2 वा Bootstrap च्या खंयच्याय पोरन्या आवृत्तींतल्यान Beta 3 कडेन अद्ययावत करतात जाल्यार हे बदल लागू जातात.
तरेकवार
- वापरूंक नाशिल्लें
$thumbnail-transition
चडांत चड काडून उडयलें. आमी कांयच संक्रमण करीनाशिल्ले, देखून तो फकत अतिरिक्त कोड आशिल्लो. - npm पॅकेजींत आतां आमच्या स्रोत आनी dist फायलीं सोडून हेर खंयचीय फायली आसपावीत करूंक नात; जर तुमी तांचेर आदारून आशिल्ले आनी
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"] { }
शैली आनी वर्तना खातीर वापरचे बदला , आमी फकत JS वर्तना खातीर गुणधर्म वापरतात आनी स्टायलिंग खातीरdata
नव्या वर्गाचेर आदारीत आसात ..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 contrast function वापरतात acolor
based on the निवडपाक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}
गरज पडल्यार. - पर्यायांखातीर (देखीक, Yarn वा npm) पॅकेज वेवस्थापक नाका म्हणिल्ल्यान Bower आदार सोडला. तपशीलां खातीर पळयात bower/bower#2298 .
- बूटस्ट्रॅपाक अजूनय jQuery 1.9.1 वा उच्चतर जाय, पूण v3.x च्या समर्थीत ब्राउझरांक बूटस्ट्रॅप समर्थन दिवपी ब्राउझर आशिल्ल्यान आनी v3.x कडेन कांय सुरक्षा निवारणां आशिल्ल्यान तुमकां आवृत्ती 3.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 कडेन वतना तुमकां जागृत रावपाक जायत अशो व्हड तिकीट आयटम हांगा दिल्यात.
ब्राउझर समर्थन
- IE8, IE9, आनी iOS 6 समर्थन सोडून दिला. v4 आतां फकत IE10+ आनी iOS 7+ आसा. तातूंतल्या खंयच्याय एका सायटीं खातीर, v3 वापरात.
- Android v5.0 लॉलीपॉप च्या ब्राउझर आनी वेबव्यू खातीर अधिकृत समर्थन जोडला. Android ब्राउझर आनी WebView ची आदली आवृत्ती फकत अनधिकृतपणान समर्थीत उरता.
जागतीक बदल
- Flexbox पूर्वनिर्धारीतपणान सक्षम केला. सादारणपणान हाचो अर्थ फ्लोट्सा पासून पयस वचप आनी आमच्या घटकां वयल्यान चड.
- आमच्या स्त्रोत CSS फायलीं खातीर Less कडल्यान Sass कडेन वळयलां.
- आमच्या प्राथमीक CSS एकक म्हणून पासून
px
ते वळयलांrem
, जरी डिव्हायस दृश्यपो��्टांचेर प्रकार आकाराचो परिणाम जायना म्हणून पिक्सेल अजूनय माध्यम क्वेरी आनी ग्रिड वर्तना खातीर वापरतात. - जागतीक फॉन्ट-आकार वाडलो
14px
ते16px
. - पांचवो पर्याय जोडपाक ग्रिड टियर नव्यान तयार केल्यात (
576px
आनी सकयल ल्हान साधनांक संबोधीत करप) आनी-xs
त्या वर्गांतल्यान इन्फिक्स काडून उडयलो. देखीक:.col-6.col-sm-4.col-md-3
. - SCSS चड-उणें (देखीक,
$enable-gradients: true
) वरवीं संरचीत करपाक येवपी पर्यायांनी वेगळी पर्यायी थीम बदलल्या. - Grunt बदला npm स्क्रिप्टांची माळ वापरपाक प्रणाली तयार करात. सगळ्या लिपीं खातीर पळयात
package.json
, वा थळाव्या उदरगतीच्या गरजां खातीर आमचो प्रकल्प readme. - बूटस्ट्रॅपाचो प्रतिसाद नाशिल्लो वापर आतां समर्थीत ना.
- चड विस्तारीत सेटअप दस्तावेजीकरण आनी पसंतीचे बिल्डांच्या फाटबळांत ऑनलायन सानुकूल सोडलो.
- सामान्य CSS गुणधर्म-मोल जोडयो आनी मार्जिन/पॅडींग अंतर शॉर्टकटां खातीर डझनभर नवे उपयुक्तताय वर्ग जोडल्यात.
जाळी पद्दत
- फ्लेक्सबॉक्सांत स्थलांतरीत केलें.
- ग्रिड मिक्सिन आनी पूर्वनिर्धारीत वर्गांत flexbox खातीर आदार जोडला.
- flexbox चो भाग म्हूण, उब्या आनी आडव्या संरेखण वर्गां खातीर आदार आस्पावतालो.
- ग्रिड वर्ग नांवां आनी नवी ग्रिड टियर अद्ययावत केल्या.
- चड दाणेदार नियंत्रणाखातीर सकयल नवी
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) { ... }
.
घटकांचो आस्पाव जाता
- नव्या सगळ्यांक आस्पावपी घटका खातीर सोडलेले पॅनल, लघुप्रतिमा, आनी बांय , कार्डां .
- Glyphicons चिन्न फॉन्ट सोडलो. तुमकां चिन्नां जाय जाल्यार, कांय पर्याय अशे आसात:
- ग्लिफिकॉन्साची अपस्ट्रीम आवृत्ती
- ऑक्टिकॉन हें नांव
- फॉन्ट अद्भुत आसा
- पर्यायांची वळेरी खातीर विस्तार पान पळयात . अतिरिक्त सुचोवण्यो आसात? उपकार करून एक मुद्दो वा पीआर उगडात.
- Affix jQuery प्लगइन सोडून दिला.
position: sticky
ताचे बदला आमी वापरपाची शिफारस करतात . तपशील आनी विशिश्ट पॉलीफिल शिफारशीं खातीर HTML5 उपकार करून नोंद पळयात . एक सुचोवणी म्हळ्यार@supports
ती चालीक लावपाखातीर एक नेम वापरप (देखीक,@supports (position: sticky) { ... }
) .- तुमी अतिरिक्त, बिगर-
position
शैली लागू करपाक Affix वापरताले जाल्यार, पॉलीफिल तुमच्या वापर प्रकरणाक तेंको दिवंक शकचे नात. अशा वापरां खातीर एक पर्याय म्हणल्यार तिसऱ्या पक्षाची ScrollPos-Styler लायब्ररी.
- पेजर घटक तो मुळाव्यान मात्सो सानुकूल केल्ले बटण आशिल्ल्यान सोडलो.
- अति-विशिश्ट भुरगीं निवडपी बदला चड अ-नेस्टेड वर्ग निवडक वापरपाक लागीं लागीं सगळ्या घटकांक पुनर्रचना केल्यात.
घटकाप्रमाणें
ही वळेरी v3.xx आनी v4.0.0 मदल्या घटका प्रमाणें कळ बदल उजवाडायता.
रिबूट करचें
Bootstrap 4 चें नवें म्हणल्यार Reboot , एक नवी शैलीपत्रक जी आमच्या स्वताच्या कांय प्रमाणांत मतदार रीसेट शैलींनी Normalize चेर उबारता. ह्या फायलीन दिसपी निवडक फकत घटक वापरतात-हांगा वर्ग नात. हाका लागून चड मॉड्यूलर पद्दती खातीर आमचीं रीसेट शैलीं आमच्या घटक शैलीं पासून वेगळीं जातात. हातूंत आस्पाव आशिल्ले कांय म्हत्वाचे रिसेट म्हळ्यार box-sizing: border-box
बदल, जायत्या घटकांचेर एककांतल्यान वचप, दुवो शैली, आनी जायत्या फॉर्म घटक रीसेट em
.rem
मुद्रणकला
- सगळ्यो
.text-
उपयुक्तताय_utilities.scss
फायलीन हालयल्यात. - ताचीं शैलीं
.page-header
उपयुक्तताय वरवीं लागू करूं येतात म्हणून सोडून दिल्या. .dl-horizontal
सोडून दिलां. ताचे बदला, ताच्या आनी भुरग्यांचेर ग्रिड स्तंभ वर्ग (वा मिक्सिन) वापरात आनी वापरात.row
.<dl>
<dt>
<dd>
<blockquote>
घटकांतल्यान एकाच वर्गांत तांची शैली व्हरून, ब्लॉककोट्स परतून डिझायन केल्ले ,.blockquote
..blockquote-reverse
मजकूर उपयुक्तताय खातीर संशोधक सोडून दिला..list-inline
आतां ताच्या भुरग्यांच्या यादीत आयटमांक नवो.list-inline-item
वर्ग लागू केल्लो आसचो अशी गरज आसा.
प्रतिमा
- नांव बदलून
.img-responsive
..img-fluid
.img-rounded
हें नांव बदललें.rounded
.img-circle
हें नांव बदललें.rounded-circle
कोश्टकां
- निवडकाचीं लागीं लागीं सगळीं प्रसंगां
>
काडून उडयल्यात, म्हळ्यार नेस्टेड कोश्टकां आतां आपसूकच तांच्या पालकांकडल्यान शैली वारसा मेळटली. हाका लागून आमचे निवडक आनी संभाव्य पसंती खूब सोंपे जातात. - सुसंगती खातीर
.table-condensed
नांव बदललें ..table-sm
- नवो
.table-inverse
पर्याय जोडला. - कोश्टक शीर्षक संशोधक जोडले:
.thead-default
आनी.thead-inverse
. - संदर्भ वर्गांचें नांव बदलून
.table-
-उपसर्ग आसचो. देखून.active
,.success
,.warning
,.danger
आनी.info
ते.table-active
,.table-success
,.table-warning
,.table-danger
आनी.table-info
.
रूपां
- हालयल्लें घटक रीसेट जाता
_reboot.scss
फायलीक रिसेट करता. .control-label
हें नांव बदललें.col-form-label
नांव- नांव बदलून
.input-lg
आनी.input-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
via mixin कडल्यान शैली लागू करिना, देखून.row
आतां आडव्या ग्रिड मांडावळींखातीर जाय (देखीक,<div class="form-group row">
)..col-form-label
कडेन उब्या केंद्र लेबलांक नवो वर्ग जोडला.form-control
s.form-row
ग्रिड वर्गां वांगडा संकुचीत फॉर्म मांडावळी खातीर नवी जोडल्या (तुमचो.row
एक.form-row
आनी वचपा खातीर स्वॅप करात).
- सोडून दिल्लें
- सानुकूल फॉर्म समर्थन जोडला (चेकबॉक्स, रेडिओ, निवड, आनी फायल इनपुटां खातीर).
.has-error
,.has-warning
, आनी.has-success
वर्ग CSS च्या माध्यमांतल्यान HTML5 फॉर्म प्रमाणीकरणान बदलले:invalid
आनी:valid
pseudo-classes- नांव बदलून
.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 त बगी आसात .
बटण गट
- flexbox च्या आदारान घटक परतून बरयला.
- काडून उडयलें
.btn-group-justified
.<div class="btn-group d-flex" role="group"></div>
बदला म्हणून तुमी घटकां भोंवतणी एक आवरण म्हणून वापरूं येता with.w-100
. - चें काडून उडोवप दिल्लें
.btn-group-xs
वर्ग पुरायपणान सोडलें.btn-xs
. - बटण साधनपट्टींतल्या बटण गटांमदली स्पश्ट अंतर काडून उडयल्या; आतां मार्जिन उपयुक्तताय वापरात.
- हेर घटकां वांगडा वापरपाखातीर सुदारीत दस्तावेजीकरण.
ड्रॉपडावन करतात
- सगळ्या घटकांखातीर, संशोधकांक आदी खातीर पालक निवडकांतल्यान एकवचन वर्गांत बदलला.
- ड्रॉपडावन मेनूक जोडिल्ल्या वयर वा सकयल तोंड करून बाणां सयत आतां शिप करूंक नाशिल्ल्यान सोंपी ड्रॉपडावन शैली.
- आतां
<div>
s वा s वापरून ड्रॉपडावन तयार करूं येतात .<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}
to अशें नांव बदललां..{modifier}-{breakpoint}-{size}
- नव्या फ्लेक्सबॉक्स-शक्तीच्या
order
वर्गां खातीर पुश आनी पुल संशोधक वर्ग सोडले. देखीक,.col-8.push-4
आनी बदला.col-4.pull-8
, तुमी.col-8.order-2
आनी वापरतले.col-4.order-1
. - ग्रिड प्रणाली आनी घटकां खातीर फ्लेक्सबॉक्स उपयुक्तताय वर्ग जोडल्यात.
गटांची वळेरी करची
- flexbox च्या आदारान घटक परतून बरयला.
- ताचे सुवातेर
a.list-group-item
स्पश्ट वर्ग,.list-group-item-action
वळेरी गट वस्तूंच्या स्टायलिंग दुवो आनी बटण आवृत्त्यांखातीर .list-group-flush
कार्डां वांगडा वापरपा खातीर वर्ग जोडला .
मोडल हें नांव
- flexbox च्या आदारान घटक परतून बरयला.
- flexbox कडेन वचप पळयल्यार, आमी आतां फ्लोट वापरनात म्हणून हेडरांतल्या डिसमिस चिन्नांची संरेखण मोडपाची शक्यताय आसा. फ्लोटेड कंटेंट पयली येता, पूण flexbox कडेन आतां तशें ना. दुरुस्त करपाक मोडल शीर्षकां उपरांत येवपाक तुमचे डिसमिस चिन्न अद्ययावत करात.
- पर्याय ( जो
remote
आपोआप भायली सामुग्री लोड करपाक आनी मोडलांत इंजेक्शन दिवपाक वापरूं येतालो) आनी संबंदीतloaded.bs.modal
घडणूक काडून उडयली. आमी ताचे बदला क्लायंट-साइड टेम्पलेटिंग वा डेटा बाइंडिंग फ्रेमवर्क वापरपाची शिफारस करतात, वा jQuery.load स्वता कॉल करपाची.
नवस हें नांव
- flexbox च्या आदारान घटक परतून बरयला.
- लागीं लागीं सगळे सोडून दिले
>
अन-नेस्टेड वर्गां वरवीं सोपी स्टायलिंग खातीर - , सारकिल्या HTML-विशिश्ट निवडकांच्या बदलाक , आमी s, s, आनी s
.nav > li > a
खातीर वेगवेगळे वर्ग वापरतात . हाका लागून तुमचो HTML चड लवचीक जाता आनी तेच बरोबर वाडिल्ली विस्तारताय हाडटा..nav
.nav-item
.nav-link
नवबर हें नांव
संरेखण, प्रतिसाद, आनी पसंती खातीर सुदारीत आदार दिवन navbar पुरायपणान flexbox त परतून बरयला.
- प्रतिसाद दिवपी नवबार वर्तनां आतां
.navbar
वर्गाक लागू जातात गरजेच्या.navbar-expand-{breakpoint}
माध्यमांतल्यान जंय तुमी नावबार खंय संकुचीत करचो तें निवडटात. आदीं हें Less variable modification आशिल्लें आनी ताका परतून संकलन करपाची गरज आशिल्ली. .navbar-default
is now.navbar-light
, जरी.navbar-dark
तसोच उरता. दर एका नवबाराचेर हातूंतली एक गरज आसता. पूण हे वर्ग आतांbackground-color
s थारायनात; ताचे बदला ते मुळाव्यान फकत परिणाम करतातcolor
.- नवबारांक आतां कांय तरेची पार्श्वभूंय घोशणा करची पडटा. आमच्या पार्श्वभूंय उपयुक्ततायांतल्यान निवडात ( ) वा पिशें पसंती खातीर
.bg-*
वयर दिल्ल्या उजवाड/उलट वर्गां वांगडा तुमची स्वताची सेट करात . - flexbox शैली दिल्यार, navbars आतां सोप्या संरेखण पर्यायांखातीर flexbox उपयुक्तताय वापरूं येता.
.navbar-toggle
आतां आसा.navbar-toggler
आनी वेगवेगळीं शैलीं आनी भितरलो मार्कअप आसा (आनीक तीन<span>
s ना)..navbar-form
वर्ग पुरायपणान सोडलो . आतां ताची गरज ना; ताचे बदला, फकत.form-inline
गरज पडल्यार मार्जिन उपयुक्तताय वापरात आनी लागू करात.- नवबारांत आतां
margin-bottom
वा हांचो आस्पाव नाborder-radius
पूर्वनिर्धारीतपणान. गरज पडल्यार उपयुक्तताय वापरात. - नवे मार्कअप समाविष्ट करपाक नवबार आशिल्लीं सगळीं उदाहरणां अद्ययावत केल्यात.
पृष्ठांकन करप
- flexbox च्या आदारान घटक परतून बरयला.
- आतां s च्या वंशजांचेर स्पश्ट वर्ग (
.page-item
, ) जाय पडटात.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
.
हिंडोळ
- डिझायन आनी स्टायलिंग सोंपें करपा खातीर पुराय घटकाची ओव्हरहाल केली. तुमकां ओव्हररायड करपाक आमचे कडेन उणी शैली, नवे निर्देशक, आनी नवे चिन्न आसात.
- सगळ्या CSS चें अन-नेस्ट केलां आनी नांव बदललां, दरेक वर्गाक उपसर्ग आसा हाची खात्री करून
.carousel-
.- हिंडोळ वस्तूंखातीर,
.next
,.prev
,.left
, आनी.right
आतां.carousel-item-next
,.carousel-item-prev
,.carousel-item-left
, आनी आसात.carousel-item-right
. .item
आसाय आतां.carousel-item
.- prev/next नियंत्रणांखातीर,
.carousel-control.right
आनी.carousel-control.left
आतां आसात.carousel-control-next
आनी.carousel-control-prev
, म्हळ्यार तांकां आतां विशिश्ट बेस वर्गाची गरज ना.
- हिंडोळ वस्तूंखातीर,
- सगळी प्रतिसाद दिवपी स्टायलिंग काडून उडयल्या, उपयुक्तताय (देखीक, कांय व्यूपोर्टांचेर कॅप्शन दाखोवप) आनी गरज पडल्यार सानुकूल शैलींक स्थगीत करप.
- उपयुक्ततायांचेर स्थगीत करून, हिंडोळ वस्तूंतल्या प्रतिमांखातीर प्रतिमा अधिलिखित काडून उडयल्यात.
- नवे मार्कअप आनी शैली समाविष्ट करपाक Carousel उदाहरण ट्वीक केलां.
कोश्टकां
- शैली केल्ल्या नेस्टेड कोश्टकांखातीर आदार काडून उडयला. सगळ्यो कोश्टक शैली आतां साद्या निवडकांक 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 हें आमचें आशय कोश्टक तयार करपाक वापरतात.
- सगळ्यो डॉक्स सामुग्री मार्कडावनांत (HTML बदला) परतून बरयल्या, सोंपें संपादन करपा खातीर.
- सादी आशय आनी चड लागींच्या क्रमवारी खातीर पानांची पुनर्रचना केल्या.
- Bootstrap च्या व्हेरिएबल्स, मिक्सिन आनी हेरांचो पुराय फायदो घेवपाक आमी रेग्युलर CSS वयल्यान SCSS कडेन गेले.
प्रतिसाद दिवपी उपयुक्तताय
v4.0.0 त सगळे @screen-
चड-उणें काडून उडयल्यात. media-breakpoint-up()
ताचे बदला , media-breakpoint-down()
, वा media-breakpoint-only()
Sass mixins वा $grid-breakpoints
Sass नकासो वापरात .
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 वापरपाची गरज आसतली.