v4-ലേക്ക് മൈഗ്രേറ്റ് ചെയ്യുന്നു

ബൂട്ട്‌സ്‌ട്രാപ്പ് 4 മുഴുവൻ പ്രോജക്റ്റിന്റെയും ഒരു പ്രധാന തിരുത്തിയെഴുത്താണ്. ഏറ്റവും ശ്രദ്ധേയമായ മാറ്റങ്ങൾ ചുവടെ സംഗ്രഹിച്ചിരിക്കുന്നു, തുടർന്ന് പ്രസക്തമായ ഘടകങ്ങളിൽ കൂടുതൽ നിർദ്ദിഷ്ട മാറ്റങ്ങൾ.

സ്ഥിരമായ മാറ്റങ്ങൾ

ബീറ്റ 3-ൽ നിന്ന് ഞങ്ങളുടെ സ്ഥിരതയുള്ള v4.x റിലീസിലേക്ക് നീങ്ങുമ്പോൾ, ബ്രേക്കിംഗ് മാറ്റങ്ങളൊന്നുമില്ല, എന്നാൽ ചില ശ്രദ്ധേയമായ മാറ്റങ്ങളുണ്ട്.

പ്രിന്റിംഗ്

• തകർന്ന പ്രിന്റ് യൂട്ടിലിറ്റികൾ പരിഹരിച്ചു. മുമ്പ്, ഒരു .d-print-*ക്ലാസ് ഉപയോഗിക്കുന്നത് മറ്റേതൊരു .d-*ക്ലാസിനെയും അപ്രതീക്ഷിതമായി അസാധുവാക്കും. @media printഇപ്പോൾ, അവ ഞങ്ങളുടെ മറ്റ് ഡിസ്പ്ലേ യൂട്ടിലിറ്റികളുമായി പൊരുത്തപ്പെടുന്നു, ആ മീഡിയയിൽ ( ) മാത്രം ബാധകമാണ് .

• മറ്റ് യൂട്ടിലിറ്റികളുമായി പൊരുത്തപ്പെടുന്നതിന് ലഭ്യമായ പ്രിന്റ് ഡിസ്പ്ലേ യൂട്ടിലിറ്റികൾ വിപുലീകരിച്ചു. ബീറ്റ 3- ഉം അതിലും പഴയതും മാത്രമേ blockഉണ്ടായിരുന്നുള്ളൂ inline-block. സ്ഥിരതയുള്ള v4 ചേർത്തു , , , ഒപ്പം .inlinenoneflexinline-flextabletable-rowtable-cell

• വ്യക്തമാക്കുന്ന പുതിയ പ്രിന്റ് ശൈലികൾ ഉപയോഗിച്ച് ബ്രൗസറുകളിലുടനീളം സ്ഥിരമായ പ്രിന്റ് പ്രിവ്യൂ റെൻഡറിംഗ് @page size.

ബീറ്റ 3 മാറുന്നു

ബീറ്റ ഘട്ടത്തിൽ ഞങ്ങളുടെ ബ്രേക്കിംഗ് മാറ്റങ്ങളിൽ ഭൂരിഭാഗവും ബീറ്റ 2 കണ്ടെങ്കിലും, ബീറ്റ 3 റിലീസിൽ പരിഹരിക്കേണ്ട ചിലത് ഇപ്പോഴും ഞങ്ങളുടെ പക്കലുണ്ട്. നിങ്ങൾ ബീറ്റ 2-ൽ നിന്നോ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഏതെങ്കിലും പഴയ പതിപ്പിൽ നിന്നോ ബീറ്റ 3-ലേക്ക് അപ്‌ഡേറ്റ് ചെയ്യുകയാണെങ്കിൽ ഈ മാറ്റങ്ങൾ ബാധകമാണ്.

വിവിധ

• ഉപയോഗിക്കാത്ത $thumbnail-transitionവേരിയബിൾ നീക്കം ചെയ്തു. ഞങ്ങൾ ഒന്നും പരിവർത്തനം ചെയ്യുന്നില്ല, അതിനാൽ ഇത് ഒരു അധിക കോഡ് മാത്രമായിരുന്നു.
• npm പാക്കേജിൽ ഇനിമുതൽ ഞങ്ങളുടെ സോഴ്‌സ്, ഡിസ്‌റ്റ് ഫയലുകൾ ഒഴികെയുള്ള ഫയലുകൾ ഉൾപ്പെടുന്നില്ല; നിങ്ങൾ അവയിൽ ആശ്രയിക്കുകയും node_modulesഫോൾഡറിലൂടെ ഞങ്ങളുടെ സ്ക്രിപ്റ്റുകൾ പ്രവർത്തിപ്പിക്കുകയും ചെയ്യുന്നുവെങ്കിൽ, നിങ്ങളുടെ വർക്ക്ഫ്ലോ ക്രമീകരിക്കണം.

ഫോമുകൾ

• ഇഷ്‌ടാനുസൃതവും സ്ഥിരവുമായ ചെക്ക്ബോക്സുകളും റേഡിയോകളും വീണ്ടും എഴുതി. ഇപ്പോൾ, രണ്ടിനും പൊരുത്തമുള്ള HTML ഘടനയും ( <div>സഹോദരങ്ങളുമൊത്തുള്ള <input>ബാഹ്യവും <label>) ഒരേ ലേഔട്ട് ശൈലികളും (സ്റ്റാക്ക് ചെയ്ത ഡിഫോൾട്ട്, മോഡിഫയർ ക്ലാസിനൊപ്പം ഇൻലൈൻ) ഉണ്ട്. ഇൻപുട്ടിന്റെ അവസ്ഥയെ അടിസ്ഥാനമാക്കി ലേബൽ സ്റ്റൈൽ ചെയ്യാനും disabledആട്രിബ്യൂട്ടിനുള്ള പിന്തുണ ലളിതമാക്കാനും (മുമ്പ് ഒരു പാരന്റ് ക്ലാസ് ആവശ്യമാണ്) ഞങ്ങളുടെ ഫോം മൂല്യനിർണ്ണയത്തെ മികച്ച രീതിയിൽ പിന്തുണയ്ക്കാനും ഇത് ഞങ്ങളെ അനുവദിക്കുന്നു.

  background-imageഇതിന്റെ ഭാഗമായി, ഇഷ്‌ടാനുസൃത ഫോം ചെക്ക്‌ബോക്‌സുകളിലും റേഡിയോകളിലും ഒന്നിലധികം സെകൾ കൈകാര്യം ചെയ്യുന്നതിനായി ഞങ്ങൾ CSS മാറ്റി . മുമ്പ്, ഇപ്പോൾ നീക്കം ചെയ്ത .custom-control-indicatorഘടകത്തിന് പശ്ചാത്തല വർണ്ണവും ഗ്രേഡിയന്റും SVG ഐക്കണും ഉണ്ടായിരുന്നു. പശ്ചാത്തല ഗ്രേഡിയന്റ് ഇഷ്‌ടാനുസൃതമാക്കുക എന്നതിനർത്ഥം നിങ്ങൾക്ക് ഒരെണ്ണം മാത്രം മാറ്റേണ്ട ഓരോ തവണയും അവയെല്ലാം മാറ്റിസ്ഥാപിക്കുക എന്നതാണ്. ഇപ്പോൾ, നമുക്ക് .custom-control-label::beforeഫില്ലിനും ഗ്രേഡിയന്റിനും ഒപ്പം .custom-control-label::afterഐക്കൺ കൈകാര്യം ചെയ്യുന്നു.

  ഒരു ഇഷ്‌ടാനുസൃത ചെക്ക് ഇൻലൈൻ ഉണ്ടാക്കാൻ, ചേർക്കുക .custom-control-inline.

• ഇൻപുട്ട് അടിസ്ഥാനമാക്കിയുള്ള ബട്ടൺ ഗ്രൂപ്പുകൾക്കായി അപ്ഡേറ്റ് ചെയ്ത സെലക്ടർ. സ്‌റ്റൈലിനും പെരുമാറ്റത്തിനും പകരം, JS പെരുമാറ്റങ്ങൾക്കായി [data-toggle="buttons"] { }ഞങ്ങൾ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു, സ്റ്റൈലിംഗിനായി ഒരു പുതിയ ക്ലാസിനെ dataആശ്രയിക്കുന്നു ..btn-group-toggle

• .col-form-legendഅല്പം മെച്ചപ്പെടുത്തിയതിന് അനുകൂലമായി നീക്കം ചെയ്തു .col-form-label. ഈ രീതിയിൽ .col-form-label-sm, ഘടകങ്ങളിൽ എളുപ്പത്തിൽ .col-form-label-lgഉപയോഗിക്കാനാകും .<legend>

• $custom-file-textഇഷ്‌ടാനുസൃത ഫയൽ ഇൻപുട്ടുകൾക്ക് അവയുടെ Sass വേരിയബിളിലേക്ക് ഒരു മാറ്റം ലഭിച്ചു . ഇത് ഇപ്പോൾ ഒരു നെസ്റ്റഡ് സാസ് മാപ്പ് അല്ല, ഇപ്പോൾ ഒരു സ്ട്രിംഗിന് മാത്രമേ പവർ നൽകുന്നുള്ളൂ- Browseബട്ടണാണ് ഇപ്പോൾ നമ്മുടെ Sass-ൽ നിന്ന് സൃഷ്‌ടിക്കപ്പെട്ട ഒരേയൊരു വ്യാജ ഘടകം. എന്നതിൽ നിന്നാണ് ഇപ്പോൾ Choose fileവാചകം വരുന്നത് .custom-file-label.

ഇൻപുട്ട് ഗ്രൂപ്പുകൾ

• ഇൻപുട്ട് ഗ്രൂപ്പ് ആഡ്‌ഓണുകൾ ഒരു ഇൻപുട്ടുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ അവയുടെ പ്ലേസ്‌മെന്റിന് ഇപ്പോൾ പ്രത്യേകമാണ്. ഞങ്ങൾ രണ്ട് പുതിയ ക്ലാസുകൾ ഉപേക്ഷിച്ചു .input-group-addon, കൂടാതെ . ഞങ്ങളുടെ സി‌എസ്‌എസിന്റെ ഭൂരിഭാഗവും ലളിതമാക്കിക്കൊണ്ട് നിങ്ങൾ ഇപ്പോൾ ഒരു അനുബന്ധമോ മുൻ‌കൂട്ടിയോ വ്യക്തമായി ഉപയോഗിക്കണം. നിങ്ങളുടെ ബട്ടണുകൾ മറ്റെവിടെയെങ്കിലും ഉള്ളതുപോലെ സ്ഥാപിക്കുക, എന്നാൽ വാചകം പൊതിയുക ..input-group-btn.input-group-prepend.input-group-append.input-group-text

• ഒന്നിലധികം ഇൻപുട്ടുകൾ പോലെ മൂല്യനിർണ്ണയ ശൈലികൾ ഇപ്പോൾ പിന്തുണയ്ക്കുന്നു (നിങ്ങൾക്ക് ഒരു ഗ്രൂപ്പിന് ഒരു ഇൻപുട്ട് മാത്രമേ സാധൂകരിക്കാൻ കഴിയൂ).

• സൈസിംഗ് ക്ലാസുകൾ മാതാപിതാക്കളിൽ ആയിരിക്കണം .input-group, വ്യക്തിഗത ഫോം ഘടകങ്ങളല്ല.

ബീറ്റ 2 മാറുന്നു

ബീറ്റയിലായിരിക്കുമ്പോൾ, ബ്രേക്കിംഗ് മാറ്റങ്ങളൊന്നും ഉണ്ടാകാതിരിക്കാൻ ഞങ്ങൾ ലക്ഷ്യമിടുന്നു. എന്നിരുന്നാലും, എല്ലായ്‌പ്പോഴും കാര്യങ്ങൾ ആസൂത്രണം ചെയ്തതുപോലെ നടക്കുന്നില്ല. ബീറ്റ 1 ൽ നിന്ന് ബീറ്റ 2 ലേക്ക് മാറുമ്പോൾ ശ്രദ്ധിക്കേണ്ട ബ്രേക്കിംഗ് മാറ്റങ്ങൾ ചുവടെയുണ്ട്.

ബ്രേക്കിംഗ്

• $badge-colorവേരിയബിളും അതി��്റെ ഉപയോഗവും നീക്കം ചെയ്തു .badge. colorഎന്നതിനെ അടിസ്ഥാനമാക്കി ഒരു കളർ കോൺട്രാസ്റ്റ് ഫംഗ്‌ഷൻ ഞങ്ങൾ ഉപയോഗിക്കുന്നു background-color, അതിനാൽ വേരിയബിൾ അനാവശ്യമാണ്.
• CSS നേറ്റീവ് ഫിൽട്ടറുമായുള്ള വൈരുദ്ധ്യം ഒഴിവാക്കാൻ grayscale()ഫംഗ്‌ഷന്റെ പേര് മാറ്റി.gray()grayscale
• മറ്റൊരിടത്ത് ഉപയോഗിക്കുന്ന ഞങ്ങളുടെ വർണ്ണ സ്കീമുകളുമായി പൊരുത്തപ്പെടുന്ന .table-inverse, പുനർനാമകരണം .thead-inverseചെയ്തു ..thead-default.*-dark.*-light
• റെസ്‌പോൺസീവ് ടേബിളുകൾ ഇപ്പോൾ ഓരോ ഗ്രിഡ് ബ്രേക്ക്‌പോയിന്റിനും ക്ലാസുകൾ സൃഷ്ടിക്കുന്നു. ഇത് ബീറ്റ 1-ൽ നിന്ന് വ്യതിചലിക്കുന്നു, കാരണം .table-responsiveനിങ്ങൾ ഉപയോഗിച്ചിരുന്നത് കൂടുതൽ ഇതുപോലെയാണ് .table-responsive-md. നിങ്ങൾക്ക് ഇപ്പോൾ ഉപയോഗിക്കാം .table-responsiveഅല്ലെങ്കിൽ .table-responsive-{sm,md,lg,xl}ആവശ്യാനുസരണം ഉപയോഗിക്കാം.
• ഇതരമാർഗങ്ങൾക്കായി പാക്കേജ് മാനേജർ അവസാനിപ്പിച്ചതിനാൽ ബോവർ പിന്തുണ ഉപേക്ഷിച്ചു (ഉദാ, നൂൽ അല്ലെങ്കിൽ npm). വിശദാംശങ്ങൾക്ക് 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 Lollipop-ന്റെ ബ്രൗസറിനും 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, അല്ലെങ്കിൽ പ്രാദേശിക വികസന ആവശ്യങ്ങൾക്കായി ഞങ്ങളുടെ പ്രോജക്റ്റ് റീഡ്മെ കാണുക.
• ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ നോൺ-റെസ്‌പോൺസിവ് ഉപയോഗം ഇനി പിന്തുണയ്‌ക്കില്ല.
• കൂടുതൽ വിപുലമായ സജ്ജീകരണ ഡോക്യുമെന്റേഷനും ഇഷ്‌ടാനുസൃതമാക്കിയ ബിൽഡുകൾക്കും അനുകൂലമായി ഓൺലൈൻ കസ്റ്റമൈസർ ഉപേക്ഷിച്ചു.
• സാധാരണ CSS പ്രോപ്പർട്ടി-വാല്യൂ ജോഡികൾക്കും മാർജിൻ/പാഡിംഗ് സ്‌പെയ്‌സിംഗ് കുറുക്കുവഴികൾക്കുമായി ഡസൻ കണക്കിന് പുതിയ യൂട്ടിലിറ്റി ക്ലാസുകൾ ചേർത്തു.

ഗ്രിഡ് സിസ്റ്റം

• ഫ്ലെക്സ്ബോക്സിലേക്ക് മാറ്റി.
  • ഗ്രിഡ് മിക്സിനുകളിലും മുൻകൂട്ടി നിശ്ചയിച്ച ക്ലാസുകളിലും ഫ്ലെക്സ്ബോക്സിന് പിന്തുണ ചേർത്തു.
  • ഫ്ലെക്സ്ബോക്സിൻറെ ഭാഗമായി, ലംബവും തിരശ്ചീനവുമായ അലൈൻമെന്റ് ക്ലാസുകൾക്കുള്ള പിന്തുണ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.
• അപ്ഡേറ്റ് ചെയ്ത ഗ്രിഡ് ക്ലാസ് പേരുകളും ഒരു പുതിയ ഗ്രിഡ് ടയറും.
  • കൂടുതൽ ഗ്രാനുലാർ നിയന്ത്രണത്തിനായി താഴെ ഒരു പുതിയ smഗ്രിഡ് ടയർ ചേർത്തു. 768pxഞങ്ങൾക്ക് ഇപ്പോൾ ,,,,, xsകൂടാതെ smഉണ്ട് md. ഇതിനർത്ഥം എല്ലാ ടയറുകളും ഒരു ലെവൽ ഉയർത്തി എന്നാണ് (അതിനാൽ v3-ൽ ഇപ്പോൾ v4-ലാണ്).lgxl.col-md-6.col-lg-6
  • xsmin-width: 0ഗ്രിഡ് ക്ലാസുകൾ ഒരു സെറ്റ് പിക്‌സൽ മൂല്യത്തിലല്ല, ശൈലികൾ പ്രയോഗിക്കാൻ തുടങ്ങുന്നതിനെ കൂടുതൽ കൃത്യമായി പ്രതിനിധീകരിക്കുന്നതിന് ഇൻഫിക്‌സ് ആവശ്യമില്ലാത്ത തരത്തിൽ പരിഷ്‌ക്കരിച്ചിരിക്കുന്നു . പകരം .col-xs-6, അത് ഇപ്പോൾ .col-6. മറ്റെല്ലാ ഗ്രിഡ് ശ്രേണികൾക്കും ഇൻഫിക്സ് ആവശ്യമാണ് (ഉദാ, sm).
• ഗ്രിഡ് വലുപ്പങ്ങൾ, മിക്സിനുകൾ, വേരിയബിളുകൾ എന്നിവ അപ്ഡേറ്റ് ചെയ്തു.
  • ഗ്രിഡ് ഗട്ടറുകൾക്ക് ഇപ്പോൾ ഒരു സാസ് മാപ്പ് ഉള്ളതിനാൽ ഓരോ ബ്രേക്ക്‌പോയിന്റിലും നിങ്ങൾക്ക് പ്രത്യേക ഗട്ടർ വീതി വ്യക്തമാക്കാനാകും.
  • make-col-readyഒരു പ്രെപ്പ് മിക്‌സിൻ ഉപയോഗിക്കുന്നതിന് ഗ്രിഡ് മിക്‌സിനുകൾ അപ്‌ഡേറ്റുചെയ്‌തു , കൂടാതെ വ്യക്തിഗത കോളം വലുപ്പം make-colക്രമീകരിക്കുന്നതിനും എ.flexmax-width
  • പുതിയ ഗ്രിഡ് ടയർ അക്കൗണ്ടിലേക്ക് മാറ്റുന്നതിനും നിരകൾ 12അവയുടെ പരമാവധി വീതിയിൽ തുല്യമായി വിഭജിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നതിനും ഗ്രിഡ് സിസ്റ്റം മീഡിയ ക്വറി ബ്രേക്ക്‌പോയിന്റുകളും കണ്ടെയ്‌നർ വീതിയും മാറ്റി.
  • ഗ്രിഡ് ബ്രേക്ക്‌പോയിന്റുകളും കണ്ടെയ്‌നർ വീതികളും ഇപ്പോൾ ഒരുപിടി പ്രത്യേക വേരിയബിളുകൾക്ക് പകരം Sass മാപ്പുകൾ ( $grid-breakpointsഒപ്പം ) വഴിയാണ് കൈകാര്യം ചെയ്യുന്നത്. $container-max-widthsഇവ @screen-*വേരിയബിളുകളെ പൂർണ്ണമായും മാറ്റിസ്ഥാപിക്കുകയും ഗ്രിഡ് ടയറുകൾ പൂർണ്ണമായും ഇച്ഛാനുസൃതമാക്കാൻ നിങ്ങളെ അനുവദിക്കുകയും ചെയ്യുന്നു.
  • മാധ്യമങ്ങളുടെ ചോദ്യങ്ങളും മാറി. ഓരോ തവണയും ഒരേ മൂല്യത്തിൽ ഞങ്ങളുടെ മീഡിയ അന്വേഷണ പ്രഖ്യാപനങ്ങൾ ആവർത്തിക്കുന്നതിനുപകരം, ഞങ്ങൾക്ക് ഇപ്പോൾ ഉണ്ട് @include media-breakpoint-up/down/only. ഇനി എഴുതുന്നതിനു പകരം @media (min-width: @screen-sm-min) { ... }എഴുതാം @include media-breakpoint-up(sm) { ... }.

ഘടകങ്ങൾ

• ഡ്രോപ്പ് ചെയ്ത പാനലുകൾ, ലഘുചിത്രങ്ങൾ, കിണറുകൾ എന്നിവയെല്ലാം ഉൾക്കൊള്ളുന്ന ഒരു പുതിയ ഘടകം, കാർഡുകൾ .
• Glyphicons ഐക്കൺ ഫോണ്ട് ഉപേക്ഷിച്ചു. നിങ്ങൾക്ക് ഐക്കണുകൾ വേണമെങ്കിൽ, ചില ഓപ്ഷനുകൾ ഇവയാണ്:
  • Glyphicons- ന്റെ അപ്സ്ട്രീം പതിപ്പ്
  • ഒക്ടിക്കോൺസ്
  • ഫോണ്ട് വിസ്മയം
  • ഇതരമാർഗങ്ങളുടെ പട്ടികയ്ക്കായി വിപുലീകരിക്കുക പേജ് കാണുക . കൂടുതൽ നിർദ്ദേശങ്ങൾ ഉണ്ടോ? ദയവായി ഒരു പ്രശ്നം അല്ലെങ്കിൽ PR തുറക്കുക.
• Affix jQuery പ്ലഗിൻ ഉപേക്ഷിച്ചു.
  • position: stickyപകരം ഉപയോഗിക്കാൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു . HTML5 കാണുക വിശദാംശങ്ങൾക്കും നിർദ്ദിഷ്ട പോളിഫിൽ ശുപാർശകൾക്കും ദയവായി എൻട്രി ചെയ്യുക . @supportsഇത് നടപ്പിലാക്കുന്നതിനായി ഒരു നിയമം ഉപയോഗിക്കുക എന്നതാണ് ഒരു നിർദ്ദേശം (ഉദാ, @supports (position: sticky) { ... })/
  • അധികവും അല്ലാത്തതുമായ ശൈലികൾ പ്രയോഗിക്കാൻ നിങ്ങൾ Affix ഉപയോഗിക്കുകയാണെങ്കിൽ position, പോളിഫില്ലുകൾ നിങ്ങളുടെ ഉപയോഗ കേസിനെ പിന്തുണച്ചേക്കില്ല. അത്തരം ഉപയോഗങ്ങൾക്കുള്ള ഒരു ഓപ്ഷൻ മൂന്നാം കക്ഷി സ്ക്രോൾപോസ്-സ്റ്റൈലർ ലൈബ്രറിയാണ്.
• ചെറുതായി ഇഷ്‌ടാനുസൃതമാക്കിയ ബട്ടണുകൾ ആയതിനാൽ പേജർ ഘടകം ഉപേക്ഷിച്ചു .
• ഓവർ-സ്പെസിഫിക് ചിൽഡ്രൻ സെലക്ടർമാർക്ക് പകരം കൂടുതൽ അൺ-നെസ്റ്റഡ് ക്ലാസ് സെലക്ടറുകൾ ഉപയോഗിക്കുന്നതിന് മിക്കവാറും എല്ലാ ഘടകങ്ങളും റീഫാക്റ്റർ ചെയ്തു.

ഘടകം പ്രകാരം

ഈ ലിസ്റ്റ് v3.xx നും v4.0.0 നും ഇടയിലുള്ള ഘടകങ്ങൾ അനുസരിച്ച് പ്രധാന മാറ്റങ്ങൾ എടുത്തുകാണിക്കുന്നു.

റീബൂട്ട് ചെയ്യുക

ബൂട്ട്‌സ്‌ട്രാപ്പ് 4-ലേയ്‌ക്ക് പുതിയത് റീബൂട്ട് ആണ് , ഞങ്ങളുടെ സ്വന്തം അഭിപ്രായമുള്ള റീസെറ്റ് ശൈലികൾ ഉപയോഗിച്ച് നോർമലൈസ് ചെയ്യുന്ന പുതിയ സ്റ്റൈൽഷീറ്റ്. ഈ ഫയലിൽ ദൃശ്യമാകുന്ന സെലക്ടറുകൾ ഘടകങ്ങൾ മാത്രമേ ഉപയോഗിക്കുന്നുള്ളൂ - ഇവിടെ ക്ലാസുകളൊന്നുമില്ല. കൂടുതൽ മോഡുലാർ സമീപനത്തിനായി ഇത് ഞങ്ങളുടെ റീസെറ്റ് ശൈലികളെ ഞങ്ങളുടെ ഘടക ശൈലികളിൽ നിന്ന് വേർതിരിക്കുന്നു. ഇതിൽ ഉൾപ്പെടുന്ന ഏറ്റവും പ്രധാനപ്പെട്ട പുനഃസജ്ജീകരണങ്ങളിൽ ചിലതാണ് മാറ്റം, പല ഘടകങ്ങളിൽ നിന്ന് യൂണിറ്റുകളിലേക്ക് box-sizing: border-boxനീങ്ങുന്നത് , ലിങ്ക് ശൈലികൾ, നിരവധി ഫോം എലമെന്റ് റീസെറ്റുകൾ.emrem

ടൈപ്പോഗ്രാഫി

• എല്ലാ .text-യൂട്ടിലിറ്റികളും _utilities.scssഫയലിലേക്ക് നീക്കി.
• യൂട്ടിലിറ്റികൾ .page-headerവഴി അതിന്റെ ശൈലികൾ പ്രയോഗിക്കാൻ കഴിയുമെന്നതിനാൽ ഉപേക്ഷിച്ചു.
• .dl-horizontalഒഴിവാക്കിയിരിക്കുന്നു. പകരം, അതിലെയും കുട്ടികളിലെയും ഗ്രിഡ് കോളം ക്ലാസുകൾ (അല്ലെങ്കിൽ മിക്സിനുകൾ) ഉപയോഗിക്കുക .row.<dl><dt><dd>
• പുനർരൂപകൽപ്പന ചെയ്‌ത ബ്ലോക്ക്‌ക്വോട്ടുകൾ, അവയുടെ ശൈലികൾ <blockquote>ഘടകത്തിൽ നിന്ന് ഒരൊറ്റ ക്ലാസിലേക്ക് മാറ്റുന്നു, .blockquote. .blockquote-reverseടെക്സ്റ്റ് യൂട്ടിലിറ്റികൾക്കായുള്ള മോഡിഫയർ ഉപേക്ഷിച്ചു .
• .list-inlineഇപ്പോൾ അതിന്റെ കുട്ടികളുടെ ലിസ്റ്റ് ഇനങ്ങൾക്ക് പുതിയ .list-inline-itemക്ലാസ് ബാധകമാക്കേണ്ടതുണ്ട്.

ചിത്രങ്ങൾ

• എന്ന് പുനർനാമകരണം .img-responsiveചെയ്തു .img-fluid.
• എന്ന് പുനർനാമകരണം .img-roundedചെയ്തു.rounded
• എന്ന് പുനർനാമകരണം .img-circleചെയ്തു.rounded-circle

പട്ടികകൾ

• സെലക്‌ടറിന്റെ മിക്കവാറും എല്ലാ സംഭവങ്ങളും >നീക്കം ചെയ്‌തു, അതായത് നെസ്റ്റഡ് ടേബിളുകൾ ഇപ്പോൾ സ്വയമേവ അവരുടെ മാതാപിതാക്കളിൽ നിന്ന് ശൈലികൾ അവകാശമാക്കും. ഇത് ഞങ്ങളുടെ സെലക്ടർമാരെയും സാധ്യതയുള്ള ഇഷ്‌ടാനുസൃതമാക്കലുകളെയും വളരെ ലളിതമാക്കുന്നു.
• സ്ഥിരതയ്ക്കായി പുനർനാമകരണം .table-condensedചെയ്തു .table-sm.
• ഒരു പുതിയ .table-inverseഓപ്ഷൻ ചേർത്തു.
• പട്ടിക തലക്കെട്ട് മോഡിഫയറുകൾ ചേർത്തു: .thead-defaultഒപ്പം .thead-inverse.
• സാന്ദർഭിക ക്ലാസുകളുടെ .table-പേര് -പ്രിഫിക്‌സ് ആയി. അതിനാൽ .active, .success, ഒപ്പം , , .warning, ഒപ്പം . _ _.danger.info.table-active.table-success.table-warning.table-danger.table-info

ഫോമുകൾ

• _reboot.scssഫയലിലേക്ക് എലമെന്റ് റീസെറ്റുകൾ നീക്കി .
• എന്ന് പുനർനാമകരണം .control-labelചെയ്തു .col-form-label.
• യഥാക്രമം പുനർനാമകരണം .input-lgചെയ്‌തു . .input-sm_.form-control-lg.form-control-sm
• ലാളിത്യത്തിനുവേണ്ടി .form-group-*ക്ലാസുകൾ ഉപേക്ഷിച്ചു. .form-control-*പകരം ഇപ്പോൾ ക്ലാസുകൾ ഉപയോഗിക്കുക .
• ബ്ലോക്ക്-ലെവൽ ഹെൽപ്പ് ടെക്‌സ്‌റ്റിനായി അത് ഉപേക്ഷിച്ച് .help-blockമാറ്റി . .form-textഇൻലൈൻ സഹായ വാചകത്തിനും മറ്റ് ഫ്ലെക്സിബിൾ ഓപ്ഷനുകൾക്കും, പോലുള്ള യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിക്കുക .text-muted.
• ഉപേക്ഷിച്ചു .radio-inlineഒപ്പം .checkbox-inline.
• ഏകീകൃതവും .checkboxവിവിധ .radioക്ലാസുകളിലേക്കും . .form-check_.form-check-*
• തിരശ്ചീന രൂപങ്ങൾ പുനഃപരിശോധിച്ചു:
  • ക്ലാസ് .form-horizontalആവശ്യകത ഒഴിവാക്കി.
  • .form-group.rowമിക്‌സിൻ വഴിയുള്ള ശൈലികൾ മേലിൽ ബാധകമല്ല , അതിനാൽ .rowഇപ്പോൾ തിരശ്ചീന ഗ്രിഡ് ലേഔട്ടുകൾക്ക് (ഉദാ, <div class="form-group row">) ആവശ്യമാണ്.
  • 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 അല്ലെങ്കിൽ s ഉപയോഗിച്ച് നിർമ്മിക്കാം .<ul>
• ഡ്രോപ്പ്ഡൗൺ ഇനങ്ങൾക്ക് എളുപ്പവും ബിൽറ്റ്-ഇൻ പിന്തുണയും അടിസ്ഥാനമാക്കിയുള്ള ഡ്രോപ്പ്ഡൗൺ ശൈലികളും മാർക്ക്അപ്പും പുനർനിർമ്മിച്ചു <a>.<button>
• എന്ന് പുനർനാമകരണം .dividerചെയ്തു .dropdown-divider.
• ഡ്രോപ്പ്ഡൗൺ ഇനങ്ങൾ ഇപ്പോൾ ആവശ്യമാണ് .dropdown-item.
• ഡ്രോപ്പ്ഡൗൺ ടോഗിളുകൾക്ക് ഇനി ഒരു സ്പഷ്ടമായ ആവശ്യമില്ല <span class="caret"></span>; ഇത് ഇപ്പോൾ CSS-ന്റെ ::afterഓൺ വഴി സ്വയമേവ നൽകുന്നു .dropdown-toggle.

ഗ്രിഡ് സിസ്റ്റം

• എന്ന നിലയിൽ ഒരു പുതിയ 576pxഗ്രിഡ് ബ്രേക്ക്‌പോയിന്റ് ചേർത്തു sm, അതായത് ഇപ്പോൾ ആകെ അഞ്ച് ടയറുകളാണുള്ളത് ( xs, sm, md, lgകൂടാതെ xl).
• ലളിതമായ ഗ്രിഡ് ക്ലാസുകൾക്കായി പ്രതികരിക്കുന്ന ഗ്രിഡ് മോഡിഫയർ ക്ലാസുകളുടെ പേര് .col-{breakpoint}-{modifier}-{size}മാറ്റി ..{modifier}-{breakpoint}-{size}
• പുതിയ ഫ്ലെക്‌സ്‌ബോക്‌സ് പവർ ചെയ്യുന്ന ക്ലാസുകൾക്കായി പുഷ് ആൻഡ് പുൾ മോഡിഫയർ ക്ലാസുകൾ ഉപേക്ഷിച്ചു order. ഉദാഹരണത്തിന്, .col-8.push-4കൂടാതെ .col-4.pull-8, നിങ്ങൾ ഉപയോഗിക്കും .col-8.order-2ഒപ്പം .col-4.order-1.
• ഗ്രിഡ് സിസ്റ്റത്തിനും ഘടകങ്ങൾക്കുമായി ഫ്ലെക്സ്ബോക്സ് യൂട്ടിലിറ്റി ക്ലാസുകൾ ചേർത്തു.

ലിസ്റ്റ് ഗ്രൂപ്പുകൾ

• ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിച്ച് ഘടകം മാറ്റിയെഴുതി.
• ലിസ്റ്റ് ഗ്രൂപ്പ് ഇനങ്ങളുടെ സ്‌റ്റൈലിംഗ് ലിങ്ക്, ബട്ടൺ പതിപ്പുകൾ എന്നിവയ്‌ക്കായി a.list-group-itemഒരു വ്യക്തമായ ക്ലാസ് ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിച്ചു ..list-group-item-action
• .list-group-flushകാർഡുകൾക്കൊപ്പം ഉപയോഗിക്കാനുള്ള ക്ലാസ് ചേർത്തു .

മോഡൽ

• ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിച്ച് ഘടകം മാറ്റിയെഴുതി.
• ഫ്ലെക്‌സ്‌ബോക്‌സിലേക്കുള്ള നീക്കം കണക്കിലെടുക്കുമ്പോൾ, ഞങ്ങൾ ഇനി ഫ്ലോട്ടുകൾ ഉപയോഗിക്കാത്തതിനാൽ ഹെഡറിലെ ഡിസ്‌മിസ് ഐക്കണുകളുടെ വിന്യാസം തകർന്നിരിക്കാം. ഫ്ലോട്ടഡ് ഉള്ളടക്കമാണ് ആദ്യം വരുന്നത്, എന്നാൽ ഫ്ലെക്സ്ബോക്സിൽ ഇനി അങ്ങനെയല്ല. മോഡൽ ശീർഷകങ്ങൾക്ക് ശേഷം പരിഹരിക്കാൻ നിങ്ങളുടെ ഡിസ്മിസ് ഐക്കണുകൾ അപ്ഡേറ്റ് ചെയ്യുക.
• ഓപ്‌ഷനും ( remoteബാഹ്യ ഉള്ളടക്കം ഒരു മോഡലിലേക്ക് സ്വയമേവ ലോഡുചെയ്യാനും കുത്തിവയ്ക്കാനും ഇത് ഉപയോഗിക്കാം) അനുബന്ധ loaded.bs.modalഇവന്റും നീക്കം ചെയ്‌തു. പകരം ക്ലയന്റ്-സൈഡ് ടെംപ്ലേറ്റിംഗ് അല്ലെങ്കിൽ ഒരു ഡാറ്റ ബൈൻഡിംഗ് ഫ്രെയിംവർക്ക് അല്ലെങ്കിൽ jQuery.load എന്ന് വിളിക്കാൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു.

നവ്സ്

• ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിച്ച് ഘടകം മാറ്റിയെഴുതി.
• >അൺ-നെസ്റ്റഡ് ക്ലാസുകൾ വഴി ലളിതമായ സ്റ്റൈലിംഗിനായി മിക്കവാറും എല്ലാ സെലക്ടർമാരെയും ഒഴിവാക്കി.
• പോലുള്ള HTML-നിർദ്ദിഷ്ട സെലക്‌ടറുകൾക്ക് പകരം ഞങ്ങൾ s, s, s .nav > li > aഎന്നിവയ്‌ക്കായി പ്രത്യേക ക്ലാസുകൾ ഉപയോഗിക്കുന്നു . ഇത് നിങ്ങളുടെ HTML-നെ കൂടുതൽ അയവുള്ളതാക്കുന്നു, അതേസമയം വർദ്ധിച്ച വിപുലീകരണം കൊണ്ടുവരുന്നു..nav.nav-item.nav-link

നവബാർ

വിന്യാസം, പ്രതികരണശേഷി, ഇഷ്‌ടാനുസൃതമാക്കൽ എന്നിവയ്‌ക്കുള്ള മെച്ചപ്പെട്ട പിന്തുണയോടെ നവബാർ പൂർണ്ണമായും ഫ്ലെക്‌സ്‌ബോക്‌സിൽ മാറ്റിയെഴുതിയിരിക്കുന്നു.

• നവബാർ എവിടേക്ക് ചുരുക്കണമെന്ന് നിങ്ങൾ തിരഞ്ഞെടുക്കുന്നിടത്ത് ആവശ്യമായ.navbar വഴിയാണ് ഇപ്പോൾ റെസ്‌പോൺസീവ് നാവ്‌ബാർ പെരുമാറ്റങ്ങൾ ക്ലാസിലേക്ക് പ്രയോഗിക്കുന്നത് . മുമ്പ് ഇതൊരു കുറഞ്ഞ വേരിയബിൾ മോഡിഫിക്കേഷനും ആവശ്യമായ റീകംപൈലിംഗ് ആയിരുന്നു. .navbar-expand-{breakpoint}
• .navbar-defaultഇപ്പോൾ .navbar-light, .navbar-darkഅതേപടി തുടരുന്നു. ഓരോ നവബാറിലും ഇവയിലൊന്ന് ആവശ്യമാണ്. എന്നിരുന്നാലും, ഈ ക്ലാസുകൾ ഇനിമുതൽ സജ്ജീകരിക്കില്ല background-color; പകരം അവ അടിസ്ഥാനപരമായി മാത്രമേ ബാധിക്കുകയുള്ളൂ color.
• നവബാറുകൾക്ക് ഇപ്പോൾ ഏതെങ്കിലും തരത്തിലുള്ള പശ്ചാത്തല പ്രഖ്യാപനം ആവശ്യമാണ്. ഞങ്ങളുടെ പശ്ചാത്തല യൂട്ടിലിറ്റികളിൽ നിന്ന് തിരഞ്ഞെടുക്കുക ( ) അല്ലെങ്കിൽ ഭ്രാന്തമായ ഇഷ്‌ടാനുസൃതമാക്കലിനായി.bg-* മുകളിലുള്ള ലൈറ്റ്/ഇൻവേഴ്‌സ് ക്ലാസുകൾ ഉപയോഗിച്ച് നിങ്ങളുടേത് സജ്ജമാക്കുക .
• ഫ്ലെക്‌സ്‌ബോക്‌സ് ശൈലികൾ നൽകിയാൽ, എളുപ്പത്തിലുള്ള വിന്യാസ ഓപ്ഷനുകൾക്കായി നവബാറുകൾക്ക് ഇപ്പോൾ ഫ്ലെക്‌സ്ബോക്‌സ് യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കാം.
• .navbar-toggleഇപ്പോഴുണ്ട് .navbar-toggler, വ്യത്യസ്ത ശൈലികളും ആന്തരിക മാർക്ക്അപ്പും ഉണ്ട് (മൂന്ന് <span>സെക്കൻഡ് ഇല്ല).
• .navbar-formക്ലാസ് മുഴുവനായും ഉപേക്ഷിച്ചു . അത് ഇനി ആവശ്യമില്ല; പകരം, .form-inlineആവശ്യാനുസരണം മാർജിൻ യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുകയും പ്രയോഗിക്കുകയും ചെയ്യുക.
• Navbars ഇനി ഉൾപ്പെടുന്നില്ല margin-bottomഅല്ലെങ്കിൽ border-radiusസ്ഥിരസ്ഥിതിയായി. ആവശ്യാനുസരണം യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുക.
• നവബാറുകൾ ഫീച്ചർ ചെയ്യുന്ന എല്ലാ ഉദാഹരണങ്ങളും പുതിയ മാർക്ക്അപ്പ് ഉൾപ്പെടുത്തുന്നതിനായി അപ്ഡേറ്റ് ചെയ്തിട്ടുണ്ട്.

പേജിനേഷൻ

• ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിച്ച് ഘടകം മാറ്റിയെഴുതി.
• യുടെ പിൻഗാമികളിൽ വ്യക്തമായ ക്ലാസുകൾ ( .page-item, .page-link) ഇപ്പോൾ ആവശ്യമാണ്.pagination
• .pagerഇഷ്‌ടാനുസൃതമാക്കിയ ഔട്ട്‌ലൈൻ ബട്ടണുകളേക്കാൾ അൽപ്പം കൂടുതലായതിനാൽ ഘടകം പൂർണ്ണമായും ഉപേക്ഷിച്ചു .

ബ്രെഡ്ക്രംബ്സ്

• s-ന്റെ പിൻഗാമികളിൽ വ്യക്തമായ ഒരു ക്ലാസ്, .breadcrumb-item, ഇപ്പോൾ ആവശ്യമാണ്.breadcrumb

ലേബലുകളും ബാഡ്ജുകളും

• ഏകീകൃതവും മൂലകത്തിൽ നിന്ന് .labelഅവ്യക്തമാക്കാനും അനുബന്ധ ഘടകങ്ങൾ ലളിതമാക്കാനും..badge<label>
• .badge-pillവൃത്താകൃതിയിലുള്ള "ഗുളിക" രൂപത്തിന് മോഡിഫയറായി ചേർത്തു .
• ലിസ്റ്റ് ഗ്രൂപ്പുകളിലും മറ്റ് ഘടകങ്ങളിലും ബാഡ്ജുകൾ ഇനി സ്വയമേവ ഫ്ലോട്ടുചെയ്യില്ല. അതിനായി ഇപ്പോൾ യൂട്ടിലിറ്റി ക്ലാസുകൾ ആവശ്യമാണ്.
• .badge-defaultമറ്റെവിടെയെങ്കിലും ഉപയോഗിച്ചിരിക്കുന്ന മാച്ച് കോംപോണന്റ് മോഡിഫയർ ക്ലാസുകളിലേക്ക് ഒഴിവാക്കി .badge-secondaryചേർത്തു.

പാനലുകൾ, ലഘുചിത്രങ്ങൾ, കിണറുകൾ

പുതിയ കാർഡ് ഘടകത്തിനായി പൂർണ്ണമായും ഉപേക്ഷിച്ചു.

പാനലുകൾ

• .panelലേക്ക് .card, ഇപ്പോൾ ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിച്ച് നിർമ്മിച്ചിരിക്കുന്നു.
• .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ഞങ്ങളുടെ Sass മാപ്പിൽ നിന്ന് ജനറേറ്റുചെയ്‌ത , , കൂടാതെ യൂട്ടിലിറ്റികൾക്കായി , , , .panel-success, .panel-infoഎന്നിവ .panel-warningഉപേക്ഷിച്ചു .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ക്ലാസ്സിലേക്ക് ഇറക്കി വിട്ടു .
• പഴയ ബ്രൗസർ പതിപ്പുകൾക്കുള്ള പിന്തുണ ഉപേക്ഷിക്കാൻ Clearfix അപ്ഡേറ്റ് ചെയ്തു.

വെണ്ടർ പ്രിഫിക്സ് മിക്സിൻസ്

ബൂട്ട്‌സ്‌ട്രാപ്പ് 3-ന്റെ വെണ്ടർ പ്രിഫിക്‌സ് മിക്‌സിനുകൾ, v3.2.0-ൽ ഒഴിവാക്കി, ബൂട്ട്‌സ്‌ട്രാപ്പ് 4-ൽ നീക്കം ചെയ്‌തു. ഞങ്ങൾ Autoprefixer ഉപയോഗിക്കുന്നതിനാൽ , അവ ഇനി ആവശ്യമില്ല.

ഇനിപ്പറയുന്ന മിക്‌സിനുകൾ നീക്കം ചെയ്‌തു : animation,,,,,,,,,,,,,,,, _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-timing-functionbackface-visibilitybox-sizingcontent-columnshyphensopacityperspectiveperspective-originrotaterotateXrotateYscalescaleXscaleYskewtransform-origintransition-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

പ്രമാണീകരണം

ഞങ്ങളുടെ ഡോക്യുമെന്റേഷന് ബോർഡിലുടനീളം ഒരു നവീകരണം ലഭിച്ചു. താഴ്ന്നത് ഇതാ:

• ഞങ്ങൾ ഇപ്പോഴും ജെക്കിൽ ഉപയോഗിക്കുന്നു, പക്ഷേ മിക്‌സിൽ ഞങ്ങൾക്ക് പ്ലഗിനുകൾ ഉണ്ട്:
  • bugify.rbഞങ്ങളുടെ ബ്രൗസർ ബഗ് പേജിലെ എൻട്രികൾ കാര്യക്ഷമമായി ലിസ്റ്റ് ചെയ്യാൻ ഉപയോഗിക്കുന്നു .
  • example.rbഡിഫോൾട്ട് പ്ലഗിന്റെ ഒരു ഇഷ്‌ടാനുസൃത ഫോർക്ക് ആണ്, highlight.rbഉദാഹരണം-കോഡ് കൈകാര്യം ചെയ്യുന്നത് എളുപ്പമാക്കുന്നു.
  • callout.rbഇതിന് സമാനമായ ഒരു ഇഷ്‌ടാനുസൃത ഫോർക്ക് ആണ്, എന്നാൽ ഞങ്ങളുടെ പ്രത്യേക ഡോക്‌സ് കോൾഔട്ടുകൾക്കായി രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നു.
  • ഞങ്ങളുടെ ഉള്ളടക്ക പട്ടിക സൃഷ്ടിക്കാൻ jekyll-toc ഉപയോഗിക്കുന്നു.
• എളുപ്പത്തിൽ എഡിറ്റുചെയ്യുന്നതിനായി എല്ലാ ഡോക്‌സ് ഉള്ളടക്കവും മാർക്ക്ഡൗണിൽ (HTML-ന് പകരം) മാറ്റിയെഴുതിയിരിക്കുന്നു.
• ലളിതമായ ഉള്ളടക്കത്തിനും കൂടുതൽ സമീപിക്കാവുന്ന ശ്രേണിക്കുമായി പേജുകൾ പുനഃക്രമീകരിച്ചു.
• ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ വേരിയബിളുകൾ, മിക്‌സിനുകൾ എന്നിവയും മറ്റും പരമാവധി പ്രയോജനപ്പെടുത്തുന്നതിന് ഞങ്ങൾ സാധാരണ CSS-ൽ നിന്ന് SCSS-ലേക്ക് മാറി.

പ്രതികരിക്കുന്ന യൂട്ടിലിറ്റികൾ

എല്ലാ @screen-വേരിയബിളുകളും v4.0.0-ൽ നീക്കം ചെയ്‌തു. പകരം media-breakpoint-up(), media-breakpoint-down()അല്ലെങ്കിൽ media-breakpoint-only()Sass mixins അല്ലെങ്കിൽ $grid-breakpointsSass മാപ്പ് ഉപയോഗിക്കുക.

displayഞങ്ങളുടെ പ്രതികരിക്കുന്ന യൂട്ടിലിറ്റി ക്ലാസുകൾ വ്യക്തമായ യൂട്ടിലിറ്റികൾക്ക് അനുകൂലമായി നീക്കം ചെയ്തിട്ടുണ്ട് .

• .hiddenക്ലാസുകളും jQuery- കളുമായും രീതികളുമായും വൈരുദ്ധ്യമുള്ളതിനാൽ .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 ആൽഫാസിൽ നിന്ന് നീക്കം ചെയ്‌തു:.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 ഉപയോഗിക്കേണ്ടതുണ്ട്.