v4 मा माइग्रेट गर्दै
बुटस्ट्र्याप 4 सम्पूर्ण परियोजनाको एक प्रमुख पुनर्लेखन हो। सबैभन्दा उल्लेखनीय परिवर्तनहरू तल संक्षेपमा छन्, त्यसपछि सान्दर्भिक घटकहरूमा थप विशिष्ट परिवर्तनहरू।
स्थिर परिवर्तनहरू
Beta 3 बाट हाम्रो स्थिर v4.x रिलिजमा सार्दै, त्यहाँ कुनै ब्रेकिङ परिवर्तनहरू छैनन्, तर त्यहाँ केही उल्लेखनीय परिवर्तनहरू छन्।
मुद्रण
-
फिक्स्ड टुटे प्रिन्ट उपयोगिताहरू। पहिले,
.d-print-*
कक्षा प्रयोग गर्दा अप्रत्याशित रूपमा कुनै पनि अन्य.d-*
वर्गलाई ओभररूल गर्ने थियो।@media print
अब, तिनीहरू हाम्रो अन्य प्रदर्शन उपयोगिताहरूसँग मेल खान्छ र त्यो मिडिया ( ) मा मात्र लागू हुन्छ । -
विस्तारित उपलब्ध प्रिन्ट प्रदर्शन उपयोगिताहरू अन्य उपयोगिताहरू मिलाउन। Beta 3 र पुरानोसँग मात्र
block
,inline-block
,inline
, र थियोnone
। स्थिर v4 थपियोflex
,inline-flex
,table
,table-row
, रtable-cell
. -
निश्चित प्रिन्ट पूर्वावलोकन रेन्डरिङ ब्राउजरहरूमा नयाँ प्रिन्ट शैलीहरूको साथ निर्दिष्ट गरिएको छ
@page
size
।
Beta 3 परिवर्तनहरू
जबकि Beta 2 ले बीटा चरणको दौडान हाम्रो ब्रेकिंग परिवर्तनहरूको थोक देख्यो, तर हामीसँग अझै केही छन् जुन Beta 3 रिलीजमा सम्बोधन गर्न आवश्यक छ। यदि तपाइँ Beta 2 वा Bootstrap को कुनै पुरानो संस्करणबाट Beta 3 मा अद्यावधिक गर्दै हुनुहुन्छ भने यी परिवर्तनहरू लागू हुन्छन्।
विविध
$thumbnail-transition
प्रयोग नगरिएको चर हटाइयो । हामीले केहि पनि ट्रान्जिसन गरिरहेका थिएनौं, त्यसैले यो केवल अतिरिक्त कोड थियो।- एनपीएम प्याकेजले अब हाम्रो स्रोत र डिस्ट फाइलहरू बाहेक कुनै पनि फाइलहरू समावेश गर्दैन; यदि तपाईं तिनीहरूमा भर पर्नुभयो र
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
र व्यक्तिगत फारम तत्वहरूमा होइन।
Beta 2 परिवर्तनहरू
बिटामा हुँदा, हामी कुनै पनि ब्रेकिङ परिवर्तनहरू नगर्ने लक्ष्य राख्छौं। यद्यपि, चीजहरू सधैं योजना अनुसार जाँदैनन्। Beta 1 बाट Beta 2 मा सर्दा ध्यानमा राख्नु पर्ने ब्रेकिंग परिवर्तनहरू तल छन्।
तोड्दै
- हटाइएको
$badge-color
चर र यसको प्रयोग मा.badge
। हामी रंग कन्ट्रास्ट प्रकार्य प्रयोग गर्छौं जसमाcolor
आधारित छbackground-color
, त्यसैले चर अनावश्यक छ। - CSS नेटिभ फिल्टरसँग द्वन्द्व हुनबाट जोगिनका लागि
grayscale()
प्रकार्यलाई पुन: नामाकरण गरियो ।gray()
grayscale
- अन्यत्र प्रयोग गरिएका हाम्रा रङ योजनाहरूसँग मिल्दोजुल्दो
.table-inverse
,.thead-inverse
, र.thead-default
to.*-dark
र , पुन: नामाकरण गरियो ।.*-light
- उत्तरदायी तालिकाहरूले अब प्रत्येक ग्रिड ब्रेकपोइन्टको लागि कक्षाहरू उत्पन्न गर्दछ। यो बिटा १ बाट विच्छेद हुन्छ जसमा
.table-responsive
तपाईले प्रयोग गरिरहनु भएको छ.table-responsive-md
। तपाईं अब प्रयोग गर्न सक्नुहुन्छ.table-responsive
वा.table-responsive-{sm,md,lg,xl}
आवश्यकता अनुसार। - प्याकेज प्रबन्धकको रूपमा ड्रप गरिएको बोवर समर्थन विकल्पहरू (जस्तै, यार्न वा एनपीएम) को लागि हटाइएको छ। विवरणका लागि झुण्ड/कुञ्ज #२२९८ हेर्नुहोस्।
- बुटस्ट्र्यापलाई अझै पनि jQuery 1.9.1 वा उच्चको आवश्यकता छ, तर तपाईलाई संस्करण 3.x प्रयोग गर्न सल्लाह दिइन्छ किनकि v3.x समर्थित ब्राउजरहरू बुटस्ट्र्यापले समर्थन गर्दछ र v3.x मा केही सुरक्षा समाधानहरू छन्।
.form-control-label
प्रयोग नगरिएको वर्ग हटाइयो । यदि तपाईंले यो वर्गको प्रयोग गर्नुभयो भने, यो तेर्सो फारम लेआउटहरूमा सम्बन्धित इनपुटसँग.col-form-label
ठाडो रूपमा केन्द्रित हुने कक्षाको नक्कल थियो।<label>
- कुनै पनि CSS गुणको लागि प्रयोग गर्न अनुमति दिँदै, मान फर्काउने प्रकार्यमा गुण
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 Lollipop को ब्राउजर र WebView को लागि आधिकारिक समर्थन थपियो। एन्ड्रोइड ब्राउजर र वेबभ्यूका पहिलेका संस्करणहरू अनौपचारिक रूपमा मात्र समर्थित छन्।
विश्वव्यापी परिवर्तनहरू
- Flexbox पूर्वनिर्धारित रूपमा सक्षम छ। सामान्यतया यसको अर्थ फ्लोट्सबाट टाढा सर्नु र हाम्रा कम्पोनेन्टहरूमा थप कुरा हो।
- हाम्रो स्रोत CSS फाइलहरूको लागि कम बाट Sass मा स्विच गरियो ।
- हाम्रो प्राथमिक CSS एकाइको रूपमा बाट स्विच गरियो
px
,rem
यद्यपि पिक्सेलहरू अझै पनि मिडिया क्वेरीहरू र ग्रिड व्यवहारका लागि प्रयोग गरिन्छ किनभने यन्त्र भ्यूपोर्टहरू प्रकारको आकारबाट प्रभावित हुँदैनन्। - ग्लोबल फन्ट साइज बाट
14px
बढ्यो16px
। - पाँचौं विकल्प थप्नको लागि ग्रिड टियरहरू परिमार्जन गरियो (साना यन्त्रहरूलाई
576px
र तलको ठेगानामा) र-xs
ती कक्षाहरूबाट इन्फिक्स हटाइयो। उदाहरण.col-6.col-sm-4.col-md-3
:। - SCSS भ्यारीएबलहरू (जस्तै,
$enable-gradients: true
) मार्फत कन्फिगर योग्य विकल्पहरूसँग छुट्टै वैकल्पिक विषयवस्तु प्रतिस्थापन गरियो। - Grunt को सट्टा npm स्क्रिप्टहरूको श्रृंखला प्रयोग गर्न प्रणाली निर्माण गर्नुहोस्। सबै स्क्रिप्टहरू हेर्नुहोस्
package.json
, वा स्थानीय विकास आवश्यकताहरूको लागि हाम्रो परियोजना रीडमी। - Bootstrap को गैर-उत्तरदायी प्रयोग अब समर्थित छैन।
- थप व्यापक सेटअप कागजात र अनुकूलित निर्माणहरूको पक्षमा अनलाइन कस्टमाइजर छोडियो।
- सामान्य CSS गुण-मान जोडी र मार्जिन/प्याडिङ स्पेसिङ सर्टकटहरूको लागि दर्जनौं नयाँ उपयोगिता कक्षाहरू थपियो।
ग्रिड प्रणाली
- 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
)।
- थप दानेदार नियन्त्रणको लागि तल नयाँ
- ग्रिड आकारहरू, मिक्सिनहरू, र चरहरू अद्यावधिक गरियो।
- ग्रिड गटरहरूसँग अब एक Sass नक्सा छ त्यसैले तपाईंले प्रत्येक ब्रेकपोइन्टमा निर्दिष्ट गटर चौडाइहरू निर्दिष्ट गर्न सक्नुहुन्छ।
- ग्रिड मिक्सिनहरू एक
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) { ... }
।
अवयवहरू
- ड्रप प्यानलहरू, थम्बनेलहरू, र एउटा नयाँ सबै-समावेश घटक, कार्डहरूको लागि कुवाहरू ।
- Glyphicons प्रतिमा फन्ट छोडियो। यदि तपाईंलाई आइकनहरू चाहिन्छ भने, केही विकल्पहरू छन्:
- Glyphicons को माथिल्लो संस्करण
- अक्टिकन्स
- फन्ट अद्भुत
- विकल्पहरूको सूचीको लागि विस्तार पृष्ठ हेर्नुहोस् । थप सुझावहरू छन्? कृपया एउटा मुद्दा वा PR खोल्नुहोस्।
- Affix jQuery प्लगइन छोडियो।
position: sticky
हामी यसको सट्टा प्रयोग गर्न सिफारिस गर्छौं । विवरणहरू र विशिष्ट पोलिफिल सिफारिसहरूको लागि कृपया HTML5 हेर्नुहोस् । एउटा सुझाव@supports
यसलाई लागू गर्नको लागि नियम प्रयोग गर्ने हो (जस्तै,@supports (position: sticky) { ... }
)- यदि तपाईंले थप, गैर-
position
शैलीहरू लागू गर्न Affix प्रयोग गरिरहनु भएको थियो भने, polyfills ले तपाईंको प्रयोग केसलाई समर्थन नगर्न सक्छ। त्यस्ता प्रयोगहरूको लागि एउटा विकल्प तेस्रो-पक्ष ScrollPos-Styler पुस्तकालय हो।
- पेजर कम्पोनेन्ट छोडियो किनकि यो अनिवार्य रूपमा थोरै अनुकूलित बटनहरू थियो।
- अति-विशिष्ट बालबालिका चयनकर्ताहरूको सट्टा थप अन-नेस्टेड वर्ग चयनकर्ताहरू प्रयोग गर्न लगभग सबै घटकहरू पुन: प्रयोग गरियो।
घटक द्वारा
यो सूचीले v3.xx र v4.0.0 बीचको कम्पोनेन्टद्वारा मुख्य परिवर्तनहरू हाइलाइट गर्दछ।
रिबुट गर्नुहोस्
Bootstrap 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
अब mixin मार्फत शैलीहरू लागू गर्दैन , त्यसैले.row
अब तेर्सो ग्रिड लेआउटहरू (जस्तै,<div class="form-group row">
) को लागि आवश्यक छ।- s
.col-form-label
सँग ठाडो केन्द्र लेबलहरूमा नयाँ वर्ग थपियो ।.form-control
.form-row
ग्रिड वर्गहरूसँग कम्प्याक्ट फारम लेआउटहरूको लागि नयाँ थपियो (ए र जानेको.row
लागि तपाईंको स्वैप गर्नुहोस्)।.form-row
- अनुकूलन फारम समर्थन थपियो (चेकबक्सहरू, रेडियोहरू, चयनहरू, र फाइल इनपुटहरूको लागि)।
- प्रतिस्थापित
.has-error
,.has-warning
, र.has-success
HTML5 फारम प्रमाणीकरण संग CSS:invalid
र:valid
छद्म-वर्गहरू मार्फत कक्षाहरू। - मा पुन: नामाकरण
.form-control-static
गरियो.form-control-plaintext
।
बटनहरू
- मा पुन: नामाकरण
.btn-default
गरियो.btn-secondary
। - v3 को तुलनामा समानुपातिक रूपमा धेरै सानो भएकोले
.btn-xs
कक्षालाई पूर्ण रूपमा छोडियो।.btn-sm
- jQuery प्लगइनको स्टेटफुल बटन सुविधा
button.js
हटाइएको छ। यसमा विधि$().button(string)
र$().button('reset')
विधिहरू समावेश छन्। हामी यसको सट्टा अनुकूलन JavaScript को एक सानो बिट प्रयोग गर्न सल्लाह दिन्छौं, जसमा तपाईले चाहानु भएको तरिकाले व्यवहार गर्ने फाइदा हुनेछ।- नोट गर्नुहोस् कि प्लगइनका अन्य सुविधाहरू (बटन चेकबक्सहरू, बटन रेडियोहरू, एकल-टगल बटनहरू) v4 मा राखिएको छ।
- बटनहरूलाई IE9+ लाई समर्थन
[disabled]
गर्ने रूपमा परिवर्तन गर्नुहोस् । यद्यपि अझै पनि आवश्यक छ किनभने नेटिभ असक्षम फिल्डसेटहरू अझै पनि IE11 मा बग्गी छन् ।:disabled
:disabled
fieldset[disabled]
बटन समूह
- फ्लेक्सबक्सको साथ कम्पोनेन्ट पुन: लेख्नुहोस्।
- हटाइयो
.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 आफैलाई कल गर्न सिफारिस गर्छौं।
Navs
- फ्लेक्सबक्सको साथ कम्पोनेन्ट पुन: लेख्नुहोस्।
>
अन-नेस्टेड कक्षाहरू मार्फत सरल शैलीको लागि लगभग सबै चयनकर्ताहरूलाई छोडियो।- HTML-विशिष्ट चयनकर्ताहरूको सट्टा , हामी s, s, र s को
.nav > li > a
लागि छुट्टै कक्षाहरू प्रयोग गर्छौं । यसले तपाईंको एचटीएमएललाई थप लचिलो बनाउँछ जबकि बढेको एक्स्टेन्सिबिलिटी ल्याउँछ।.nav
.nav-item
.nav-link
नवबार
पङ्क्तिबद्धता, प्रतिक्रियाशीलता, र अनुकूलनको लागि सुधारिएको समर्थनको साथ नवबार पूर्ण रूपमा फ्लेक्सबक्समा पुन: लेखिएको छ।
- उत्तरदायी नेभबार व्यवहारहरू अब आवश्यक
.navbar
मार्फत कक्षामा लागू हुन्छन् जहाँ तपाईंले नेभबारलाई पतन गर्ने ठाउँ छनौट गर्नुहुन्छ। पहिले यो कम चर परिमार्जन र आवश्यक पुन: कम्पाइल थियो।.navbar-expand-{breakpoint}
.navbar-default
अहिले छ.navbar-light
, यद्यपि.navbar-dark
उस्तै रहन्छ। प्रत्येक नवबारमा यी मध्ये एउटा आवश्यक छ। यद्यपि, यी कक्षाहरूले अबbackground-color
s सेट गर्दैनन्; बरु तिनीहरूले अनिवार्य रूपमा मात्र प्रभाव पार्छन्color
।- नवबारहरूलाई अब कुनै प्रकारको पृष्ठभूमि घोषणा चाहिन्छ। हाम्रो पृष्ठभूमि उपयोगिताहरू () बाट छनौट गर्नुहोस् वा पागल अनुकूलनको लागि
.bg-*
माथिको लाइट/उल्टो कक्षाहरूसँग आफ्नै सेट गर्नुहोस् । - flexbox शैलीहरू दिईएको, navbars ले अब सजिलो पङ्क्तिबद्ध विकल्पहरूको लागि flexbox उपयोगिताहरू प्रयोग गर्न सक्छ।
.navbar-toggle
अहिले.navbar-toggler
छ र फरक शैली र भित्री मार्कअप छ (तीन<span>
s भन्दा बढी छैन)।.navbar-form
कक्षा पूरै छाडियो । यो अब आवश्यक छैन; यसको सट्टा,.form-inline
आवश्यक रूपमा मार्जिन उपयोगिताहरू प्रयोग गर्नुहोस् र लागू गर्नुहोस्।margin-bottom
Navbars ले अबborder-radius
पूर्वनिर्धारित रूपमा समावेश गर्दैन। आवश्यकता अनुसार उपयोगिताहरू प्रयोग गर्नुहोस्।- नयाँ मार्कअप समावेश गर्न नवबारहरू देखाउने सबै उदाहरणहरू अद्यावधिक गरिएका छन्।
पृष्ठांकन
- फ्लेक्सबक्सको साथ कम्पोनेन्ट पुन: लेख्नुहोस्।
- स्पष्ट वर्गहरू (
.page-item
,.page-link
) अब.pagination
s को वंशजहरूमा आवश्यक छ - कम्पोनेन्ट पूर्ण रूपमा छोडियो
.pager
किनकि यो अनुकूलित रूपरेखा बटनहरू भन्दा अलि बढी थियो।
ब्रेडक्रम्ब्स
- एक स्पष्ट वर्ग,
.breadcrumb-item
अब.breadcrumb
s को सन्तान मा आवश्यक छ
लेबल र ब्याजहरू
- समेकित
.label
र तत्वबाट.badge
छुट्याउन<label>
र सम्बन्धित घटकहरूलाई सरल बनाउन। .badge-pill
गोलाकार "गोली" लुकको लागि परिमार्जनकर्ताको रूपमा थपियो ।- ब्याजहरू अब सूची समूह र अन्य घटकहरूमा स्वचालित रूपमा फ्लोट हुँदैनन्। यसको लागि अब उपयोगिता कक्षाहरू आवश्यक छ।
.badge-default
.badge-secondary
अन्यत्र प्रयोग गरिएका कम्पोनेन्ट परिमार्जक वर्गहरू मिलाउन छोडेर थपिएको छ।
प्यानलहरू, थम्बनेलहरू, र कुवाहरू
नयाँ कार्ड कम्पोनेन्टको लागि पूर्ण रूपमा छोडियो।
प्यानलहरू
.panel
मा.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
।- अघिल्लो/अर्को नियन्त्रणहरूका लागि,
.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
कक्षाको लागि छोडियो ।
- पुरानो ब्राउजर संस्करणहरूको लागि समर्थन छोड्न क्लियरफिक्स अपडेट गरियो।
विक्रेता उपसर्ग mixins
बुटस्ट्र्याप 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 हाम्रो सामग्रीको तालिका बनाउन प्रयोग गरिन्छ।
- सबै कागजात सामग्रीहरू सजिलो सम्पादनको लागि मार्कडाउन (HTML को सट्टा) मा पुन: लेखिएको छ।
- पृष्ठहरू सरल सामग्री र थप पहुँचयोग्य पदानुक्रमको लागि पुन: संगठित गरिएको छ।
- हामी Bootstrap को चर, mixins, र थप को पूर्ण लाभ लिन को लागी नियमित CSS बाट SCSS मा सारियो।
उत्तरदायी उपयोगिताहरू
सबै @screen-
चरहरू v4.0.0 मा हटाइएका छन्। media-breakpoint-up()
, media-breakpoint-down()
, वा media-breakpoint-only()
Sass mixins वा को प्रयोग गर्नुहोस्$grid-breakpoints
Sass नक्सा
हाम्रा उत्तरदायी उपयोगिता वर्गहरू स्पष्ट उपयोगिताहरूको पक्षमा धेरै हदसम्म हटाइएका छन् display
।
- र वर्गहरू हटाइएका छन् किनभने तिनीहरू jQuery
.hidden
र विधिहरूसँग बाझिएका छन्। यसको सट्टा, विशेषता टगल गर्ने प्रयास गर्नुहोस् वा इनलाइन शैलीहरू जस्तै र प्रयोग गर्नुहोस् ।.show
$(...).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 alphas बाट हटाइयो:
.hidden-xs-up
.hidden-xs-down
.hidden-sm-up
.hidden-sm-down
.hidden-md-up
.hidden-md-down
.hidden-lg-up
.hidden-lg-down
- 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 प्रयोग गर्न आवश्यक पर्दछ।