v4 इत्यत्र प्रवासः

बूटस्ट्रैप् ४ सम्पूर्णस्य परियोजनायाः प्रमुखं पुनर्लेखनम् अस्ति । अत्यन्तं उल्लेखनीयपरिवर्तनानि अधः सारांशतः दर्शितानि सन्ति, तदनन्तरं प्रासंगिकघटकानाम् अधिकविशिष्टपरिवर्तनानि सन्ति ।

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

Beta 3 तः अस्माकं स्थिरं v4.0 विमोचनं प्रति गच्छन्, तत्र कोऽपि भङ्गः परिवर्तनः नास्ति, परन्तु केचन उल्लेखनीयाः परिवर्तनाः सन्ति ।

मुद्रणम्

• भग्न मुद्रण उपयोगिताओं को स्थिर किया गया। पूर्वं वर्गस्य उपयोगेन .d-print-*अन्यस्य कस्यचित् वर्गस्य अप्रत्याशितरूपेण निरस्तीकरणं भवति स्म .d-*। @media printअधुना, ते अस्माकं अन्येषां प्रदर्शन-उपयोगितायाः सङ्गतिं कुर्वन्ति तथा च केवलं तस्मिन् माध्यमे ( ) प्रवर्तन्ते ।

• अन्येषां उपयोगितानां सङ्गतिं कर्तुं उपलब्धानि मुद्रणप्रदर्शन-उपयोगितानि विस्तारितानि । बीटा ३ अपि च अधिकाधिकं केवलं block, inline-block, inline, तथा none. स्थिर v4 योजितम् flex, inline-flex, table, table-row, तथा table-cell.

• निर्दिष्टानि नूतनानि मुद्रणशैल्यानि सह ब्राउजर् मध्ये मुद्रणपूर्वावलोकनप्रतिपादनं नियतम् @page size।

बीटा ३ परिवर्तनम्

यदा बीटा 2 बीटा चरणस्य समये अस्माकं भङ्गपरिवर्तनानां अधिकांशं दृष्टवान्, परन्तु अस्माकं कृते अद्यापि कतिचन सन्ति येषां सम्बोधनं बीटा 3 विमोचने आवश्यकम् आसीत्। यदि भवान् Beta 2 अथवा Bootstrap इत्यस्य कस्यापि प्राचीनसंस्करणात् Beta 3 इत्यस्य अद्यतनीकरणं करोति तर्हि एते परिवर्तनानि प्रवर्तन्ते ।

विविध

• $thumbnail-transitionअप्रयुक्तं चरं निष्कासितम् । वयं किमपि संक्रमणं न कुर्वन्तः आसन्, अतः केवलं अतिरिक्तसङ्केतः एव आसीत् ।
• npm संकुले अस्माकं स्रोतः, dist सञ्चिकाः च विहाय अन्याः सञ्चिकाः न सन्ति; यदि भवान् तान् अवलम्ब्य अस्माकं स्क्रिप्ट्-पत्राणि node_modulesफोल्डर् मार्गेण चालयति स्म तर्हि भवान् स्वस्य कार्यप्रवाहं अनुकूलितुं अर्हति ।

रूपाणि

• कस्टम् तथा पूर्वनिर्धारित चेकबॉक्स एवं रेडियो दोनों को पुनः लिखित। अधुना, उभयोः HTML संरचना (outer <div>with sibling <input>and <label>) तथा समानाः लेआउट् शैल्याः (stacked default, modifier class इत्यनेन सह inline) च मेलनं भवति । एतेन अस्मान् इनपुट् इत्यस्य अवस्थायाः आधारेण लेबलं शैलीं कर्तुं शक्नोति, disabledविशेषतायाः समर्थनं सरलीकरोति (पूर्वं मूलवर्गस्य आवश्यकता आसीत्) तथा च अस्माकं रूपस्य सत्यापनस्य उत्तमं समर्थनं करोति

  अस्य भागत्वेन वयं background-imageकस्टम् फॉर्म चेकबॉक्स् रेडियोषु च बहुविध s प्रबन्धयितुं CSS परिवर्तयामः । पूर्वं इदानीं निष्कासितस्य .custom-control-indicatorतत्त्वस्य पृष्ठभूमिवर्णः, ढालः, SVG चिह्नं च आसीत् । पृष्ठभूमि-ढालस्य अनुकूलनं करणस्य अर्थः आसीत् यत् प्रतिवारं केवलं एकं परिवर्तयितुं आवश्यकं भवति तदा तानि सर्वाणि प्रतिस्थापयितुं । अधुना, अस्माकं .custom-control-label::beforeकृते fill तथा gradient कृते अस्ति तथा च .custom-control-label::aftericon इत्येतत् handles करोति ।

  कस्टम् चेक इनलाइन कर्तुं, योजयन्तु .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-textSass चरस्य परिवर्तनं प्राप्तवन्तः । इदं पुनः नेस्टेड् Sass मानचित्रं नास्ति अधुना केवलं एकं तारं शक्तिं ददाति- Browseबटनं यतः तत् इदानीं अस्माकं Sass तः उत्पन्नं एकमात्रं छद्म-तत्त्वम् अस्ति। इदानीं Choose fileपाठः .custom-file-label.

इनपुट समूह

• इनपुट् ग्रुप् एडॉन् इदानीं एकस्य इनपुट् इत्यस्य सापेक्षतया स्वस्य प्लेसमेण्ट् विशिष्टाः सन्ति । वयं त्यक्तवन्तः .input-group-addonतथा .input-group-btnच द्वयोः नूतनवर्गयोः कृते, .input-group-prependतथा च .input-group-append. भवद्भिः इदानीं स्पष्टतया append अथवा prepend इत्यस्य उपयोगः करणीयः, अस्माकं CSS इत्यस्य अधिकांशं सरलीकरणं कृत्वा । append अथवा prepend इत्यस्य अन्तः, स्वस्य बटन् यथा अन्यत्र विद्यमानं स्यात् तथा स्थापयन्तु, परन्तु पाठं , इत्यत्र वेष्टयन्तु .input-group-text।

• इदानीं प्रमाणीकरणशैल्याः समर्थिताः सन्ति, तथैव बहुविधनिवेशाः (यद्यपि भवान् प्रतिसमूहं केवलं एकं निवेशं प्रमाणीकर्तुं शक्नोति) ।

• आकारनिर्धारणवर्गाः मातापितृषु भवितुमर्हन्ति .input-groupन तु व्यक्तिगतरूपतत्त्वेषु ।

बीटा २ परिवर्तनम्

बीटा-मध्ये स्थित्वा वयं लक्ष्यं कुर्मः यत् भङ्ग-परिवर्तनं न भवतु । तथापि सर्वदा यथानियोजितं न भवति। बीटा १ तः बीटा २ मध्ये गमनसमये मनसि स्थापनीयाः भङ्गपरिवर्तनानि अधः सन्ति ।

भङ्गः

• $badge-colorपर चर एवं उसका प्रयोग निकाला गया .badge. colorवयं , इत्यस्य आधारेण a pick कर्तुं color contrast function इत्यस्य उपयोगं कुर्मः background-color, अतः variable अनावश्यकम् अस्ति ।
• grayscale()CSS मूल- छिद्रकेन gray()सह द्वन्द्वं भङ्गयितुं परिहरितुं पुनः नामकरणं कृतम् grayscale।
• अन्यत्र प्रयुक्तानां अस्माकं वर्णयोजनानां मेलनं कृत्वा .table-inverse, .thead-inverse, and .thead-defaultto .*-darkand , इति पुनर्नामकरणं कृतम् ।.*-light
• प्रतिक्रियाशीलसारणीः इदानीं प्रत्येकस्य जालविच्छेदबिन्दुस्य कृते वर्गान् जनयन्ति । इदं Beta 1 तः भङ्गं करोति यत् .table-responsiveभवन्तः उपयुज्यन्ते स्म तत् अधिकं इव अस्ति .table-responsive-md. भवन्तः इदानीं आवश्यकतानुसारं .table-responsiveवा उपयोक्तुं शक्नुवन्ति।.table-responsive-{sm,md,lg,xl}
• विकल्पानां कृते (उदा., Yarn अथवा npm) संकुलप्रबन्धकः अप्रचलितः इति कारणेन Bower समर्थनं त्यक्तम् । विस्तरेण ज्ञातुं bower/bower#2298 पश्यन्तु।
• Bootstrap इत्यस्य कृते अद्यापि jQuery 1.9.1 अथवा उच्चतरस्य आवश्यकता वर्तते, परन्तु भवान् संस्करणस्य 3.x इत्यस्य उपयोगं कर्तुं सल्लाहं दत्तवान् यतः v3.x इत्यस्य समर्थितब्राउजर्स् ते एव सन्ति येषां Bootstrap समर्थयति plus v3.x इत्यत्र केचन सुरक्षानिराकरणाः सन्ति।
• .form-control-labelअप्रयुक्तं वर्गं निष्कासितम् । यदि भवान् अस्य वर्गस्य उपयोगं कृतवान्, तर्हि वर्गस्य डुप्लिकेट् आसीत् .col-form-labelयत् लम्बवत् केन्द्रीकृतवान् a <label>with it's associated input in horizontal form layouts.
• color-yiqगुणं समाविष्टं mixin तः 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 Lollipop इत्यस्य Browser तथा WebView इत्यस्य आधिकारिकं समर्थनं योजितम्। Android Browser तथा WebView इत्यस्य पूर्वसंस्करणं केवलं अनधिकृतरूपेण समर्थितम् एव तिष्ठति ।

वैश्विक परिवर्तनम्

• Flexbox पूर्वनिर्धारितरूपेण सक्षमम् अस्ति । सामान्यतया अस्माकं घटकानां पारं प्लवकात् अधिकं च दूरं गमनम् अस्य अर्थः अस्ति ।
• अस्माकं स्रोत CSS सञ्चिकानां कृते Less तः Sass मध्ये परिवर्तितम् ।
• अस्माकं प्राथमिक CSS-एककरूपेण तः pxप्रति परिवर्तितम् rem, यद्यपि पिक्सेलः अद्यापि मीडिया-प्रश्नानां कृते तथा च ग्रिड्-व्यवहारस्य कृते उपयुज्यते यतः यन्त्र-दृश्य-पोर्ट्-प्रकार-आकारेन प्रभाविताः न भवन्ति ।
• वैश्विकः फन्ट्-आकारः तः 14pxयावत् वर्धितः 16px।
• पञ्चमविकल्पं योजयितुं जालस्तरं पुनः परिवर्तितम् (लघुयन्त्राणि 576pxअधः च सम्बोधयन्) तथा च -xsतेभ्यः वर्गेभ्यः इन्फिक्सं निष्कासितम् । उदाहरणम् : .col-6.col-sm-4.col-md-3.
• $enable-gradients: trueSCSS चर (उदा., ) मार्गेण विन्यासयोग्यविकल्पैः पृथक् वैकल्पिकविषयं प्रतिस्थापितम् ।
• Grunt इत्यस्य स्थाने npm स्क्रिप्ट् इत्यस्य श्रृङ्खलायाः उपयोगाय प्रणालीं निर्मायताम् । सर्वेषां लिपिनां कृते पश्यन्तु package.json, अथवा स्थानीयविकासस्य आवश्यकतानां कृते अस्माकं परियोजना readme इति पश्यन्तु।
• Bootstrap इत्यस्य अप्रतिसादात्मकः उपयोगः समर्थितः नास्ति ।
• अधिकविस्तृतस्य सेटअपदस्तावेजस्य अनुकूलितनिर्माणस्य च पक्षे ऑनलाइन Customizer त्यक्तवान् ।
• सामान्य CSS गुण-मूल्ययुग्मानां तथा मार्जिन/पैडिंग-अन्तराल-शॉर्टकट्-कृते दर्जनशः नूतनाः उपयोगितावर्गाः योजिताः ।

जाल प्रणाली

• flexbox इत्यत्र स्थानान्तरितम्।
  • ग्रिड् मिक्सिन्स् तथा पूर्वनिर्धारितवर्गेषु flexbox इत्यस्य समर्थनं योजितम् ।
  • flexbox इत्यस्य भागत्वेन, ऊर्ध्वाधर-क्षैतिज-संरेखणवर्गाणां समर्थनं समाविष्टम् ।
• अद्यतनं जालवर्गनामानि नूतनं जालस्तरं च।
  • smअधिकदाणिकानियन्त्रणार्थं अधः नूतनं जालस्तरं योजितम् 768px। अस्माकं इदानीं xs, sm, md, lg, xl. एतस्य अपि अर्थः अस्ति यत् प्रत्येकं स्तरं एकं स्तरं बम्पं कृतम् अस्ति (अतः .col-md-6v3 मध्ये इदानीं .col-lg-6v4 मध्ये अस्ति) ।
  • xsgrid वर्गाः परिवर्तिताः सन्ति यत् इन्फिक्स् अधिकं सटीकरूपेण प्रतिनिधितुं न आवश्यकं यत् ते शैल्याः प्रयोक्तुं आरभन्ते min-width: 0न तु सेट् पिक्सेल मूल्यम् । इत्यस्य स्थाने .col-xs-6, इदानीं अस्ति .col-6. अन्येषु सर्वेषु जालस्तरेषु इन्फिक्सस्य आवश्यकता भवति (उदा., sm) ।
• अद्यतनं ग्रिड् आकाराः, मिक्सिन्, चर च।
  • ग्रिड् गटर्स् इत्यत्र इदानीं Sass map अस्ति अतः भवान् प्रत्येकस्मिन् breakpoint इत्यत्र विशिष्टानि gutter widths निर्दिष्टुं शक्नोति ।
  • अद्यतनं ग्रिड् मिक्सिन् एकं make-col-readyप्रिप् मिक्सिन् इत्यस्य उपयोगाय तथा च एकं make-colसेट् कर्तुं flexतथा max-widthव्यक्तिगतस्तम्भस्य आकारीकरणस्य कृते।
  • 12नूतनजालस्तरस्य लेखान् कर्तुं तथा च स्तम्भाः स्वस्य अधिकतमविस्तारेण समानरूपेण विभक्ताः इति सुनिश्चित्य जालप्रणालीमाध्यमप्रश्नविच्छेदबिन्दवः पात्रविस्ताराः च परिवर्तिताः
  • ग्रिड् ब्रेकपॉइण्ट्स् तथा कन्टेनर् विड्थ्स् इदानीं मुष्टिभ्यां पृथक् चरानाम् स्थाने Sass maps ( $grid-breakpointsand ) मार्गेण नियन्त्रिताः भवन्ति । $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) { ... })/
  • यदि भवान् अतिरिक्तानि, अशैल्यानि प्रयोक्तुं Affix इत्यस्य उपयोगं करोति स्म position, तर्हि बहुपूरणानि भवतः उपयोगप्रकरणं समर्थयितुं न शक्नुवन्ति । एतादृशानां उपयोगानां कृते एकः विकल्पः तृतीयपक्षस्य ScrollPos-Styler पुस्तकालयः अस्ति ।
• पेजर घटकं पातितवान् यतः तत् मूलतः किञ्चित् अनुकूलितं बटनम् आसीत्।
• अतिविशिष्टबालचयनकर्तृणां स्थाने अधिकानि अ-नेस्टेड् वर्गचयनकर्तृणां उपयोगाय प्रायः सर्वान् घटकान् पुनः निर्मितवान् ।

अवयवात्

एषा सूची v3.xx तथा v4.0.0 मध्ये घटकद्वारा प्रमुखपरिवर्तनानि प्रकाशयति ।

पुनः आरभत

Bootstrap 4 मध्ये नवीनं Reboot , एकं नूतनं शैलीपत्रकं यत् अस्माकं स्वकीयैः किञ्चित् मतयुक्तैः रीसेट् शैल्याभिः सह Normalize इत्यत्र निर्मितम् अस्ति । अस्मिन् सञ्चिकायां दृश्यमानाः चयनकर्तारः केवलं तत्त्वानां उपयोगं कुर्वन्ति—अत्र वर्गाः नास्ति । एतेन अधिकमॉड्यूलर-दृष्टिकोणार्थं अस्माकं रीसेट्-शैल्याः अस्माकं घटक-शैल्याः पृथक् भवति । अस्मिन् समाविष्टाः केचन महत्त्वपूर्णाः रीसेट् box-sizing: border-boxपरिवर्तनम्, अनेकेषु तत्त्वेषु, लिङ्कशैल्याः, अनेकेषु रूपतत्त्वपुनर्स्थापनेषु च एककानां मध्ये emगमनम् ।rem

टाइपोग्राफी

• सर्वाणि .text-उपयोगितानि _utilities.scssसञ्चिकायां स्थानान्तरितानि ।
• पातितम् .page-headerयतः तस्य शैल्याः उपयोगितानां माध्यमेन प्रयोक्तुं शक्यन्ते।
• .dl-horizontalपातितम् अस्ति। तस्य स्थाने on इत्यस्य उपयोगं .rowकुर्वन्तु तथा च तस्य तथा बालकानां <dl>उपरि grid column classes (or mixins) इत्यस्य उपयोगं कुर्वन्तु ।<dt><dd>
• पुनः परिकल्पिताः blockquotes, तेषां शैल्याः <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-smto .form-control-lgतथा .form-control-sm, क्रमशः।
• सरलतायै .form-group-*कक्षाः त्यक्ताः। .form-control-*इदानीं तस्य स्थाने वर्गाणां उपयोगं कुर्वन्तु ।
• त्यक्त्वा .help-blockप्रतिस्थापितम् .form-textfor block-level help text इति । इनलाइन सहायता पाठस्य अन्येषां च लचीलानां विकल्पानां कृते, यथा उपयोगितावर्गाणां उपयोगं कुर्वन्तु .text-muted।
• पातितम् .radio-inlineच .checkbox-inline.
• समेकितं .checkboxच .radioतथा .form-checkच विविधवर्गाः .form-check-*।
• क्षैतिज रूपों को ओवरहाल किये गये : १.
  • .form-horizontalवर्ग आवश्यकता छोड़ा ।
  • .form-groupन पुनः .rowvia mixin तः शैल्याः प्रयोजयति, अतः .rowइदानीं क्षैतिजजालविन्यासानां कृते आवश्यकम् (उदा., <div class="form-group row">) ।
  • s .col-form-labelइत्यनेन सह लम्बवत् केन्द्रे लेबल् मध्ये नूतनं वर्गं योजितम् ।.form-control
  • जालवर्गैः सह संकुचितरूपविन्यासानां कृते नूतनं योजितम् .form-row(स्वैप् your .rowfor a .form-rowand go) ।
• इष्टप्रपत्रसमर्थनं योजितम् (चेकबॉक्स, रेडियो, चयनं, सञ्चिकानिवेशानां च कृते) ।
• .has-error, .has-warning, तथा वर्गाणां स्थाने CSS's तथा छद्म-वर्गाणां .has-successमाध्यमेन HTML5 रूपसत्यापनेन सह ।:invalid:valid
• नामान्तरितम् . .form-control-static_.form-control-plaintext

बटन्स्

• नामान्तरितम् . .btn-default_.btn-secondary
• .btn-xsवर्गं पूर्णतया त्यक्तवान् यथा आनुपातिकरूपेण .btn-smv3 इत्यस्य अपेक्षया बहु लघु अस्ति।
• jQuery प्लगिन् इत्यस्य स्टेट्फुल् बटन् विशेषता पातितम् अस्ति । button.jsअस्मिन् $().button(string)च $().button('reset')विधिः अपि अन्तर्भवति । वयं तस्य स्थाने कस्टम् जावास्क्रिप्ट् इत्यस्य लघुबिट् इत्यस्य उपयोगं कर्तुं सल्लाहं दद्मः, यस्य लाभः भविष्यति यत् भवान् इच्छति तथा एव व्यवहारं करोति ।
  • ध्यानं कुर्वन्तु यत् प्लगिन् इत्यस्य अन्ये विशेषताः (बटन चेकबॉक्स, बटन रेडियो, एक-टॉग्ल् बटन्) v4 इत्यस्मिन् अवशिष्टाः सन्ति ।
• बटन्स्' परिवर्तयन्तु [disabled]यथा :disabledIE9+ समर्थयति :disabled. तथापि fieldset[disabled]अद्यापि आवश्यकं यतः देशी अक्षम क्षेत्रसमूहाः अद्यापि IE11 मध्ये त्रुटिपूर्णाः सन्ति |

बटन समूह

• flexbox इत्यनेन सह घटकं पुनः लिखितम्।
• निष्कासितम् .btn-group-justified. <div class="btn-group d-flex" role="group"></div>प्रतिस्थापनरूपेण भवन्तः .w-100.
• पातितवान् .btn-group-xsवर्गं पूर्णतया दत्तं निष्कासनं .btn-xs.
• बटन-उपकरणपट्टिकासु बटनसमूहानां मध्ये स्पष्टं अन्तरं निष्कासितम्; अधुना मार्जिन उपयोगितानां उपयोगं कुर्वन्तु।
• अन्यैः घटकैः सह उपयोगाय उन्नतदस्तावेजीकरणम् ।

ड्रॉपडाउन्स्

• सर्वेषां घटकानां, परिवर्तकानाम् इत्यादीनां कृते मूलचयनकर्तृभ्यः एकवचनवर्गेषु परिवर्तितम् ।
• ड्रॉपडाउन मेनू मध्ये संलग्नाः ऊर्ध्वं अधः वा मुखं वा बाणैः सह न प्रेषयितुं सरलीकृताः ड्रॉपडाउन शैल्याः ।
• इदानीं <div>s अथवा s इत्यनेन सह ड्रॉपडाउन् निर्मातुं शक्यते ।<ul>
• पुनः निर्मिताः ड्रॉपडाउनशैल्याः तथा मार्कअपः सुलभं, अन्तर्निर्मितं समर्थनं <a>तथा च <button>आधारितं ड्रॉपडाउन-वस्तूनाम् प्रदातुं ।
• नामान्तरितम् . .divider_.dropdown-divider
• अधुना ड्रॉपडाउन आइटम्स् इत्यस्य आवश्यकता अस्ति .dropdown-item.
• ड्रॉपडाउन टॉगल्स् कृते स्पष्टस्य आवश्यकता नास्ति <span class="caret"></span>; इदं इदानीं CSS's ::afteron मार्गेण स्वयमेव प्रदत्तम् अस्ति .dropdown-toggle।

जाल प्रणाली

• नूतनं 576pxजालविच्छेदबिन्दुरूपेण योजितम् sm, अर्थात् अधुना पञ्च कुलस्तराः ( xs, sm, md, lg, तथा xl) सन्ति ।
• सरलतरजालवर्गाणां कृते प्रतिक्रियाशीलजालसंशोधकवर्गाणां नामकरणं .col-{breakpoint}-{modifier}-{size}to to इति .{modifier}-{breakpoint}-{size}कृतम् ।
• नूतनानां flexbox-सञ्चालितवर्गाणां कृते push and pull modifier वर्गाः त्यक्ताः order। यथा, .col-8.push-4and इत्यस्य स्थाने .col-4.pull-8भवान् .col-8.order-2and इत्यस्य उपयोगं करिष्यति .col-4.order-1।
• ग्रिड् सिस्टम् तथा घटकानां कृते flexbox उपयोगितावर्गाः योजिताः।

समूहों को सूचीबद्ध करें

• flexbox इत्यनेन सह घटकं पुनः लिखितम्।
• सूचीसमूहवस्तूनाम् स्टाइलिङ्गलिङ्क् बटनसंस्करणं च कृते स्पष्टवर्गेण प्रतिस्थापितम् a.list-group-item, , ।.list-group-item-action
• .list-group-flushकार्डैः सह उपयोगाय वर्गः योजितः ।

मोडल

• flexbox इत्यनेन सह घटकं पुनः लिखितम्।
• flexbox प्रति चालनं दत्तं, हेडर् मध्ये dismiss चिह्नानां संरेखणं सम्भवतः भग्नं भवति यतः वयं floats इत्यस्य उपयोगं न कुर्मः । प्लवमानसामग्री प्रथमं आगच्छति, परन्तु flexbox इत्यनेन सह तत् न भवति । समाधानार्थं मोडल शीर्षकाणां पश्चात् आगन्तुं स्वस्य निष्कासनचिह्नानि अद्यतनं कुर्वन्तु।
• विकल्पः ( यस्य remoteउपयोगेन स्वयमेव बाह्यसामग्रीम् एकस्मिन् मोडल् मध्ये लोड् कर्तुं प्रविशितुं च शक्यते) तत्सम्बद्धं loaded.bs.modalघटना च निष्कासितम् । वयं तस्य स्थाने क्लायन्ट्-साइड् टेम्पलेटिङ्ग् अथवा डाटा बाइण्डिङ्ग् फ्रेमवर्क् इत्यस्य उपयोगं कर्तुं, अथवा jQuery.load इति स्वयमेव आह्वयितुं अनुशंसयामः ।

नवस्

• flexbox इत्यनेन सह घटकं पुनः लिखितम्।
• >अ-नेस्टेड् वर्गाणां माध्यमेन सरलतर स्टाइलिंग् कृते प्रायः सर्वे चयनकर्तारः पातिताः।
• HTML-विशिष्टानां चयनकर्तानां स्थाने यथा , वयं s, s , s इत्येतयोः .nav > li > aकृते पृथक् पृथक् वर्गान् उपयुञ्ज्महे । एतेन भवतः HTML अधिकं लचीला भवति तथा च वर्धिता विस्तारता आनयति ।.nav.nav-item.nav-link

नवबर

नवबारं सम्पूर्णतया flexbox मध्ये पुनः लिखितम् अस्ति यत्र संरेखणस्य, प्रतिक्रियाशीलतायाः, अनुकूलनस्य च उन्नतसमर्थनम् अस्ति ।

• प्रतिक्रियाशीलाः नवबारव्यवहाराः इदानीं आवश्यकस्य.navbar माध्यमेन वर्गे प्रयुक्ताः भवन्ति यत्र भवान् नवबारं कुत्र संकुचितं कर्तव्यमिति चिनोति । पूर्वं एतत् Less variable modification आसीत् तथा च पुनः संकलनस्य आवश्यकता आसीत् । .navbar-expand-{breakpoint}
• .navbar-defaultis now .navbar-light, यद्यपि .navbar-darkतथैव तिष्ठति। प्रत्येकं नवबारस्य उपरि एतेषु एकं आवश्यकम् अस्ति । तथापि एते वर्गाः background-colors न पुनः सेट् कुर्वन्ति; instead ते अनिवार्यतया केवलं प्रभावितयन्ति color.
• नवबारेषु इदानीं केनचित् प्रकारेण पृष्ठभूमिघोषणा आवश्यकी भवति । अस्माकं पृष्ठभूमि-उपयोगितायाः ( ) चयनं कुर्वन्तु अथवा उन्मत्त-अनुकूलनार्थं.bg-* उपरि प्रकाश/विलोमवर्गैः सह स्वस्य सेट् कुर्वन्तु ।
• flexbox शैल्याः दत्ताः, navbars इदानीं सुलभसंरेखणविकल्पानां कृते flexbox उपयोगितानां उपयोगं कर्तुं शक्नुवन्ति ।
• .navbar-toggleअधुना अस्ति .navbar-togglerतथा च भिन्नाः शैल्याः अन्तः मार्कअपः च अस्ति (अधिकं त्रीणि <span>s नास्ति)।
• .navbar-formकक्षां सम्पूर्णतया त्यक्तवान् । न पुनः आवश्यकम्; अपि तु .form-inlineआवश्यकतानुसारं केवलं मार्जिन-उपयोगितानां उपयोगं कृत्वा प्रयोजयन्तु ।
• नवबारेषु पूर्वनिर्धारितरूपेण margin-bottomवा न भवति । border-radiusआवश्यकतानुसारं उपयोगितानां उपयोगं कुर्वन्तु।
• नवबारं दर्शयन्तः सर्वे उदाहरणानि नूतनं मार्कअपं समावेशयितुं अद्यतनं कृतम् अस्ति ।

पृष्ठकरणम्

• flexbox इत्यनेन सह घटकं पुनः लिखितम्।
• षस्य वंशजेषु इदानीं स्पष्टवर्गाः ( , ) आवश्यकाः .page-itemसन्ति.page-link.pagination
• घटकं पूर्णतया पातितवान् .pagerयतः अनुकूलितरूपरेखाबटनात् किञ्चित् अधिकं आसीत् ।

ब्रेडक्रम्ब्स्

• स्पष्टवर्गः, .breadcrumb-item, इदानीं षस्य वंशजेषु अपेक्षितः .breadcrumbअस्ति

लेबल एवं बैज

• समेकित .labelएवं तत्व .badgeसे अस्पष्टीकरण <label>एवं सम्बन्धित घटकों को सरल बनाना।
• .badge-pillगोल “गोली” रूपस्य कृते संशोधकरूपेण योजितम् ।
• सूचीसमूहादिषु घटकेषु स्वयमेव बिल्लाः न प्लवन्ति । तदर्थम् अधुना उपयोगितावर्गाः आवश्यकाः सन्ति ।
• .badge-default.badge-secondaryअन्यत्र प्रयुक्तानां घटकसंशोधकवर्गाणां मेलार्थं त्यक्त्वा योजितम् अस्ति ।

फलक, लघुचित्र, एवं कूप

नूतनकार्डघटकस्य कृते पूर्णतया पातितम्।

फलकम्

• .panelto .card, इदानीं flexbox इत्यनेन निर्मितम् ।
• .panel-defaultनिष्कासितम् न च प्रतिस्थापनम्।
• .panel-groupनिष्कासितम् न च प्रतिस्थापनम्। .card-groupन प्रतिस्थापनम्, भिन्नम् ।
• .panel-headingइत्यस्मै.card-header
• .panel-titleto .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.rightand .carousel-control.leftare now .carousel-control-nextand .carousel-control-prev, अर्थात् तेषां विशिष्टस्य आधारवर्गस्य आवश्यकता नास्ति ।
• सर्वाणि प्रतिक्रियाशीलशैलीनि निष्कासितानि, उपयोगितानां कृते स्थगितानि (उदा., कतिपयेषु दृश्यस्थानेषु कैप्शनं दर्शयन्ति) आवश्यकतानुसारं कस्टमशैल्याः च ।
• उपयोगितानां कृते स्थगयित्वा, हिंडोला-वस्तूनाम् चित्राणां कृते चित्र-अवरोहणं निष्कासितम् ।
• नूतनं मार्कअपं शैल्यां च समाविष्टं कर्तुं Carousel उदाहरणं ट्वीक् कृतवान् ।

सारणीः

• शैलीकृतनेस्टेड् सारणीनां समर्थनं निष्कासितम् । सरलतरचयनकर्तृणां कृते इदानीं सर्वाणि सारणीशैल्यानि v4 इत्यस्मिन् अनुवंशिकरूपेण भवन्ति ।
• विलोम सारणी वेरिएंट जोड़ा गया।

उपयोगिताएँ

• प्रदर्शनं, गुप्तं, इत्यादीनि च : १.
  • प्रदर्शन उपयोगिताओं को प्रतिक्रियाशील बनाया (उदा., .d-noneऔर d-{sm,md,lg,xl}-none).
  • .hidden-*नूतनानां प्रदर्शनोपयोगितानां कृते उपयोगितानां अधिकांशं पातितवान् . यथा - इत्यस्य स्थाने .hidden-sm-up, इत्यस्य प्रयोगः .d-sm-noneभवति । .hidden-printप्रदर्शन-उपयोगिता-नामकरण-योजनायाः उपयोगाय उपयोगितानां पुनर्नामकरणं कृतम् । अस्य पृष्ठस्य Responsive utilities इति विभागस्य अधः अधिका सूचना।
  • .float-{sm,md,lg,xl}-{left,right,none}प्रतिक्रियाशीलप्लवकानां कृते वर्गाः योजिताः अपसारिताः च .pull-leftयतः .pull-rightते तथा .float-leftच अनावश्यकाः सन्ति .float-right।
• प्रकारः:
  • अस्माकं पाठसंरेखणवर्गेषु प्रतिक्रियाशीलविविधताः योजिताः .text-{sm,md,lg,xl}-{left,center,right}|
• संरेखण एवं अंतराल : १.
  • सर्वेषां पक्षानां कृते नूतनं प्रतिक्रियाशीलं मार्जिनं तथा च पैडिंग् उपयोगिता :, प्लस् ऊर्ध्वाधरं क्षैतिजं च आशुलिपिं योजितम्।
  • flexbox उपयोगितानां बोटलोड् योजितः .
  • नूतनवर्गस्य .center-blockकृते पातितम् .mx-auto।
• पुरातनब्राउजरसंस्करणानाम् समर्थनं त्यक्तुं Clearfix अद्यतनम्।

विक्रेता उपसर्ग mixins

Bootstrap 3 इत्यस्य विक्रेता उपसर्गस्य mixins, ये v3.2.0 मध्ये अप्रचलिताः आसन्, ते Bootstrap 4 मध्ये निष्कासिताः यतः वयं Autoprefixer इत्यस्य उपयोगं कुर्मः , ते इदानीं आवश्यकाः न सन्ति।

Removed the following mixins : 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.translate3duser-select

दस्तावेजीकरणम्

अस्माकं दस्तावेजीकरणं सम्पूर्णे बोर्डे अपि उन्नयनं प्राप्तवान्। अत्र निम्नम् अधः अस्ति : १.

• वयम् अद्यापि Jekyll इत्यस्य उपयोगं कुर्मः, परन्तु अस्माकं मिश्रणे प्लगिन्स् सन्ति:
  • bugify.rbअस्माकं ब्राउजर् -दोष- पृष्ठे प्रविष्टीनां कुशलतापूर्वकं सूचीकरणाय उपयुज्यते ।
  • example.rbपूर्वनिर्धारितप्लगिन् इत्यस्य कस्टम् फोर्क् अस्ति highlight.rb, यत् सुलभतरं उदाहरण-कोड्-नियन्त्रणं अनुमन्यते ।
  • callout.rbतस्य समानः कस्टम् फोर्कः अस्ति, परन्तु अस्माकं विशेष-docs callouts कृते डिजाइनं कृतम् अस्ति ।
  • jekyll-toc इत्यस्य उपयोगः अस्माकं सामग्रीसारणीं जनयितुं भवति ।
• सर्वाणि docs सामग्रीः Markdown मध्ये (HTML इत्यस्य स्थाने) पुनः लिखितानि सन्ति, येन सम्पादनं सुलभं भवति ।
• सरलतरसामग्रीणां कृते अधिकसमीपगम्यपदानुक्रमणार्थं च पृष्ठानां पुनर्गठनं कृतम् अस्ति ।
• Bootstrap इत्यस्य चरस्य, mixins इत्यस्य, इत्यादीनां पूर्णलाभं ​​ग्रहीतुं वयं नियमितरूपेण CSS तः SCSS - मध्ये गतवन्तः ।

प्रतिक्रियाशील उपयोगिताएँ

v4.0.0 इत्यस्मिन् सर्वे @screen-चराः निष्कासिताः सन्ति । media-breakpoint-up()तस्य स्थाने , media-breakpoint-down(), अथवा media-breakpoint-only()Sass mixins अथवा $grid-breakpointsSass map इत्यस्य उपयोगं कुर्वन्तु ।

अस्माकं प्रतिक्रियाशील-उपयोगितावर्गाः स्पष्ट-उपयोगितानां पक्षे बहुधा निष्कासिताः सन्ति display।

• .hiddenand वर्गाः jQuery's तथा मेथड्स् इत्यनेन सह विग्रहं कृतवन्तः इति .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 इत्यस्य उपयोगः करणीयः भविष्यति ।