Source

v4 मा माइग्रेट गर्दै

बुटस्ट्र्याप 4 सम्पूर्ण परियोजनाको एक प्रमुख पुनर्लेखन हो। सबैभन्दा उल्लेखनीय परिवर्तनहरू तल संक्षेपमा छन्, त्यसपछि सान्दर्भिक घटकहरूमा थप विशिष्ट परिवर्तनहरू।

स्थिर परिवर्तनहरू

Beta 3 बाट हाम्रो स्थिर v4.0 रिलिजमा सार्दै, त्यहाँ कुनै ब्रेकिङ परिवर्तनहरू छैनन्, तर त्यहाँ केही उल्लेखनीय परिवर्तनहरू छन्।

मुद्रण

  • फिक्स्ड टुटे प्रिन्ट उपयोगिताहरू। पहिले, .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प्रयोग नगरिएको चर हटाइयो । हामीले केहि पनि ट्रान्जिसन गरिरहेका थिएनौं, त्यसैले यो केवल अतिरिक्त कोड थियो।
  • 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"] { }शैली र व्यवहारको सट्टा , हामी dataJS व्यवहारको लागि मात्र विशेषता प्रयोग गर्छौं र स्टाइलको लागि नयाँ .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-defaultto .*-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-6v3 मा अब .col-lg-6v4 मा छ)।
    • 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 प्रतिमा फन्ट छोडियो। यदि तपाईंलाई आइकनहरू चाहिन्छ भने, केही विकल्पहरू छन्:
  • 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र .infoto .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
  • अनुकूलन फारम समर्थन थपियो (चेकबक्सहरू, रेडियोहरू, चयनहरू, र फाइल इनपुटहरूको लागि)।
  • CSS र स्यूडो-क्लासहरू मार्फत HTML5 फारम प्रमाणीकरणको साथ प्रतिस्थापित .has-error, .has-warningर वर्गहरू।.has-success: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:disabledfieldset[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 को ::afteron मार्फत स्वचालित रूपमा प्रदान गरिएको छ .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 मार्फत कक्षामा लागू हुन्छन् जहाँ तपाईंले नेभबारलाई पतन गर्ने ठाउँ छनौट गर्नुहुन्छ। पहिले यो कम चर परिमार्जन र आवश्यक पुन: कम्पाइल थियो। .navbar-expand-{breakpoint}
  • .navbar-defaultअहिले छ .navbar-light, यद्यपि .navbar-darkउस्तै रहन्छ। प्रत्येक नवबारमा यी मध्ये एउटा आवश्यक छ। यद्यपि, यी कक्षाहरूले अब background-colors सेट गर्दैनन्; बरु तिनीहरूले अनिवार्य रूपमा मात्र प्रभाव पार्छन् color।
  • नवबारहरूलाई अब कुनै प्रकारको पृष्ठभूमि घोषणा चाहिन्छ। हाम्रो पृष्ठभूमि उपयोगिताहरू () बाट छनौट गर्नुहोस् वा पागल अनुकूलनको लागि.bg-* माथिको लाइट/उल्टो कक्षाहरूसँग आफ्नै सेट गर्नुहोस् ।
  • flexbox शैलीहरू दिईएको, navbars ले अब सजिलो पङ्क्तिबद्ध विकल्पहरूको लागि flexbox उपयोगिताहरू प्रयोग गर्न सक्छ।
  • .navbar-toggleअहिले .navbar-togglerछ र फरक शैली र भित्री मार्कअप छ (तीन <span>s भन्दा बढी छैन)।
  • .navbar-formकक्षा पूरै छाडियो । यो अब आवश्यक छैन; यसको सट्टा, .form-inlineआवश्यक अनुसार मार्जिन उपयोगिताहरू प्रयोग गर्नुहोस् र लागू गर्नुहोस्।
  • Navbars अब समावेश margin-bottomवा border-radiusपूर्वनिर्धारित रूपमा। आवश्यकता अनुसार उपयोगिताहरू प्रयोग गर्नुहोस्।
  • नयाँ मार्कअप समावेश गर्न नवबारहरू देखाउने सबै उदाहरणहरू अद्यावधिक गरिएका छन्।

पृष्ठांकन

  • फ्लेक्सबक्सको साथ कम्पोनेन्ट पुन: लेख्नुहोस्।
  • स्पष्ट वर्गहरू ( .page-item, .page-link) अब .paginations को वंशजहरूमा आवश्यक छ
  • कम्पोनेन्ट पूर्ण रूपमा छोडियो .pagerकिनकि यो अनुकूलित रूपरेखा बटनहरू भन्दा अलि बढी थियो।
  • एक स्पष्ट वर्ग, .breadcrumb-itemअब .breadcrumbs को सन्तान मा आवश्यक छ

लेबल र ब्याजहरू

  • समेकित .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 मा इनहेरिट गरिएका छन्।
  • उल्टो तालिका संस्करण थपियो।

उपयोगिताहरू

विक्रेता उपसर्ग 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,translatetranslate3duser-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-breakpointsSass नक्सा प्रयोग गर्नुहोस् ।

हाम्रा उत्तरदायी उपयोगिता वर्गहरू स्पष्ट उपयोगिताहरूको पक्षमा धेरै हदसम्म हटाइएका छन् 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
  • मुद्रण उपयोगिताहरू अब .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 प्रयोग गर्न आवश्यक पर्दछ।