in English

v4 પર સ્થળાંતર

બુટસ્ટ્રેપ 4 એ સમગ્ર પ્રોજેક્ટનું મુખ્ય પુનર્લેખન છે. સૌથી નોંધપાત્ર ફેરફારોનો સારાંશ નીચે આપેલ છે, ત્યારબાદ સંબંધિત ઘટકોમાં વધુ ચોક્કસ ફેરફારો.

સ્થિર ફેરફારો

બીટા 3 થી અમારા સ્થિર v4.x રીલીઝમાં ખસેડવું, ત્યાં કોઈ બ્રેકિંગ ફેરફારો નથી, પરંતુ કેટલાક નોંધપાત્ર ફેરફારો છે.

પ્રિન્ટીંગ

  • સ્થિર તૂટેલી પ્રિન્ટ યુટિલિટીઝ. પહેલાં, .d-print-*વર્ગનો ઉપયોગ અણધારી રીતે કોઈપણ અન્ય .d-*વર્ગને ઓવરરુલ કરશે. હવે, તેઓ અમારી અન્ય ડિસ્પ્લે યુટિલિટી સાથે મેળ ખાય છે અને માત્ર તે મીડિયા ( @media print) પર જ લાગુ પડે છે.

  • અન્ય ઉપયોગિતાઓને મેચ કરવા માટે ઉપલબ્ધ પ્રિન્ટ ડિસ્પ્લે યુટિલિટીઝને વિસ્તૃત કરી. બીટા 3 અને તેથી વધુ ઉંમરના માત્ર block, inline-block, inline, અને હતા none. સ્થિર v4 ઉમેર્યું flex, inline-flex, table, table-row, અને table-cell.

  • નિશ્ચિત પ્રિન્ટ પ્રીવ્યૂ રેન્ડરિંગ સમગ્ર બ્રાઉઝર્સમાં નવી પ્રિન્ટ શૈલીઓ સાથે જે સ્પષ્ટ કરે છે @page size.

બીટા 3 ફેરફારો

જ્યારે બીટા 2 એ બીટા તબક્કા દરમિયાન અમારા બ્રેકિંગ ફેરફારોનો મોટા ભાગનો ભાગ જોયો, પરંતુ અમારી પાસે હજુ પણ થોડા છે જેને બીટા 3 રિલીઝમાં સંબોધિત કરવાની જરૂર છે. જો તમે બીટા 2 અથવા બુટસ્ટ્રેપના કોઈપણ જૂના સંસ્કરણમાંથી બીટા 3 પર અપડેટ કરી રહ્યાં હોવ તો આ ફેરફારો લાગુ થાય છે.

વિવિધ

  • ન વપરાયેલ $thumbnail-transitionચલ દૂર કર્યું. અમે કંઈપણ સંક્રમણ કરતા ન હતા, તેથી તે માત્ર વધારાનો કોડ હતો.
  • npm પેકેજમાં હવે અમારી સ્ત્રોત અને ડિસ્ટ ફાઇલો સિવાયની કોઈપણ ફાઈલોનો સમાવેશ થતો નથી; node_modulesજો તમે તેમના પર આધાર રાખતા હોવ અને ફોલ્ડર દ્વારા અમારી સ્ક્રિપ્ટો ચલાવી રહ્યા હોવ, તો તમારે તમારા વર્કફ્લોને અનુકૂલિત કરવું જોઈએ.

સ્વરૂપો

  • કસ્ટમ અને ડિફોલ્ટ ચેકબોક્સ અને રેડિયો બંનેને ફરીથી લખો. <div>હવે, બંને પાસે મેળ ખાતું HTML માળખું છે ( ભાઈ સાથે બાહ્ય <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સાસ વેરીએબલમાં ફેરફાર મળ્યો છે. તે હવે નેસ્ટેડ સાસ નકશો નથી અને હવે માત્ર એક જ સ્ટ્રિંગને પાવર કરે છે- Browseબટન કારણ કે તે હવે આપણા સાસમાંથી જનરેટ થયેલું એકમાત્ર સ્યુડો-તત્વ છે. Choose fileટેક્સ્ટ હવે માંથી આવે છે .custom-file-label.

ઇનપુટ જૂથો

  • ઇનપુટ જૂથ એડઓન્સ હવે ઇનપુટને સંબંધિત તેમના પ્લેસમેન્ટ માટે વિશિષ્ટ છે. અમે છોડી દીધું છે .input-group-addonઅને .input-group-btnબે નવા વર્ગો માટે, .input-group-prependઅને .input-group-append. તમારે હવે સ્પષ્ટપણે એપેન્ડ અથવા પ્રિપેન્ડનો ઉપયોગ કરવો જોઈએ, અમારા મોટા ભાગના CSSને સરળ બનાવીને. એપેન્ડ અથવા પ્રિપેન્ડની અંદર, તમારા બટનોને એ રીતે મૂકો જેમ કે તે બીજે ક્યાંય પણ હશે, પરંતુ ટેક્સ્ટને માં લપેટી .input-group-text.

  • માન્યતા શૈલીઓ હવે સમર્થિત છે, જેમ કે બહુવિધ ઇનપુટ્સ છે (જોકે તમે જૂથ દીઠ માત્ર એક ઇનપુટને માન્ય કરી શકો છો).

  • કદ બદલવાના વર્ગો માતાપિતા પર હોવા જોઈએ .input-groupઅને વ્યક્તિગત સ્વરૂપ ઘટકો પર નહીં.

બીટા 2 ફેરફારો

બીટામાં હોવા પર, અમારું લક્ષ્ય છે કે કોઈ બ્રેકિંગ ફેરફારો ન થાય. જો કે, વસ્તુઓ હંમેશા યોજના પ્રમાણે જતી નથી. બીટા 1 થી બીટા 2 માં ખસેડતી વખતે ધ્યાનમાં રાખવા માટે નીચે બ્રેકીંગ ફેરફારો છે.

બ્રેકિંગ

  • $badge-colorવેરીએબલ અને તેનો ઉપયોગ દૂર કર્યો .badge. colorપર આધારિત પસંદ કરવા માટે અમે કલર કોન્ટ્રાસ્ટ ફંક્શનનો ઉપયોગ કરીએ છીએ 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}જરૂર મુજબ.
  • પેકેજ મેનેજર તરીકે ડ્રોપ્ડ બોવર સપોર્ટ વિકલ્પો (દા.ત., યાર્ન અથવા એનપીએમ) માટે નાપસંદ કરવામાં આવ્યો છે. વિગતો માટે બોવર/બોવર#2298 જુઓ.
  • બુટસ્ટ્રેપને હજુ પણ jQuery 1.9.1 અથવા ઉચ્ચતરની જરૂર છે, પરંતુ તમને 3.x સંસ્કરણનો ઉપયોગ કરવાની સલાહ આપવામાં આવે છે કારણ કે v3.x ના સપોર્ટેડ બ્રાઉઝર્સ એ જ છે જેને બુટસ્ટ્રેપ સપોર્ટ કરે છે ઉપરાંત v3.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-contentpointer-events: auto

સારાંશ

અહીં મોટી ટિકિટ આઇટમ્સ છે જે તમે v3 થી v4 તરફ જતી વખતે વાકેફ રહેવા માગો છો.

બ્રાઉઝર સપોર્ટ

  • IE8, IE9 અને iOS 6 સપોર્ટ છોડ્યો. v4 હવે માત્ર IE10+ અને iOS 7+ છે. તેમાંથી એકની જરૂર હોય તેવી સાઇટ્સ માટે, v3 નો ઉપયોગ કરો.
  • Android v5.0 Lollipop ના બ્રાઉઝર અને WebView માટે સત્તાવાર સમર્થન ઉમેર્યું. એન્ડ્રોઇડ બ્રાઉઝર અને વેબવ્યૂના અગાઉના વર્ઝન ફક્ત બિનસત્તાવાર રીતે સપોર્ટેડ રહે છે.

વૈશ્વિક ફેરફારો

  • Flexbox ડિફૉલ્ટ રૂપે સક્ષમ છે. સામાન્ય રીતે આનો અર્થ એ છે કે ફ્લોટ્સથી દૂર જવું અને અમારા ઘટકોમાં વધુ.
  • અમારી સ્ત્રોત CSS ફાઇલો માટે Less થી Sass પર સ્વિચ કર્યું .
  • pxઅમારા પ્રાથમિક CSS એકમ તરીકે થી પર સ્વિચ કર્યું rem, જોકે મીડિયા ક્વેરી અને ગ્રીડ વર્તણૂક માટે પિક્સેલ્સનો ઉપયોગ હજુ પણ થાય છે કારણ કે ઉપકરણ વ્યુપોર્ટ્સ પ્રકાર કદથી પ્રભાવિત થતા નથી.
  • વૈશ્વિક ફોન્ટ-સાઇઝ થી 14pxવધીને 16px.
  • પાંચમો વિકલ્પ ઉમેરવા માટે ગ્રીડના સ્તરોને સુધાર્યા (નાના ઉપકરણોને 576pxનીચે અને નીચે સંબોધતા) અને -xsતે વર્ગોમાંથી ઇ��્ફિક્સ દૂર કર્યા. ઉદાહરણ .col-6.col-sm-4.col-md-3:.
  • SCSS ચલો (દા.ત., $enable-gradients: true) દ્વારા રૂપરેખાંકિત વિકલ્પો સાથે અલગ વૈકલ્પિક થીમ બદલાઈ.
  • ગ્રન્ટને બદલે npm સ્ક્રિપ્ટની શ્રેણીનો ઉપયોગ કરવા માટે સિસ્ટમને ઓવરહોલ કરો. package.jsonસ્થાનિક વિકાસની જરૂરિયાતો માટે તમામ સ્ક્રિપ્ટ્સ અથવા અમારા પ્રોજેક્ટ રીડમી માટે જુઓ .
  • બુટસ્ટ્રેપનો બિન-પ્રતિભાવશીલ ઉપયોગ હવે સમર્થિત નથી.
  • વધુ વ્યાપક સેટઅપ દસ્તાવેજીકરણ અને કસ્ટમાઇઝ્ડ બિલ્ડ્સની તરફેણમાં ઑનલાઇન કસ્ટમાઇઝર છોડ્યું.
  • સામાન્ય CSS પ્રોપર્ટી-વેલ્યુ જોડી અને માર્જિન/પેડિંગ સ્પેસિંગ શૉર્ટકટ્સ માટે ડઝનેક નવા ઉપયોગિતા વર્ગો ઉમેર્યા.

ગ્રીડ સિસ્ટમ

  • ફ્લેક્સબોક્સમાં ખસેડવામાં આવ્યું.
    • ગ્રીડ મિક્સિન્સ અને પૂર્વવ્યાખ્યાયિત વર્ગોમાં ફ્લેક્સબોક્સ માટે સમર્થન ઉમેર્યું.
    • ફ્લેક્સબોક્સના ભાગ રૂપે, વર્ટિકલ અને હોરીઝોન્ટલ એલાઈનમેન્ટ ક્લાસ માટે સપોર્ટનો સમાવેશ થાય છે.
  • અપડેટ કરેલ ગ્રીડ વર્ગના નામ અને એક નવું ગ્રીડ સ્તર.
    • વધુ દાણાદાર નિયંત્રણ માટે નીચે એક નવું smગ્રીડ સ્તર ઉમેર્યું. 768pxઅમારી પાસે હવે xs, sm, md, lg, અને છે xl. આનો અર્થ એ પણ થાય છે કે દરેક સ્તરને એક સ્તર ઉપર બમ્પ કરવામાં આવ્યું છે (તેથી .col-md-6v3 હવે .col-lg-6v4 માં છે).
    • xsગ્રિડ વર્ગોને વધુ ચોક્કસ રીતે રજૂ કરવા માટે ઇન્ફિક્સની જરૂર ન પડે તે માટે સંશોધિત કરવામાં આવ્યા છે કે તેઓ min-width: 0સેટ પિક્સેલ મૂલ્ય પર નહીં પણ શૈલીઓ લાગુ કરવાનું શરૂ કરે છે. તેના બદલે .col-xs-6, તે હવે છે .col-6. અન્ય તમામ ગ્રીડ સ્તરોને ઇન્ફિક્સની જરૂર છે (દા.ત., sm).
  • અપડેટ કરેલ ગ્રીડ કદ, મિક્સિન્સ અને ચલ.
    • ગ્રીડ ગટર પાસે હવે સાસ નકશો છે જેથી તમે દરેક બ્રેકપોઇન્ટ પર ચોક્કસ ગટરની પહોળાઈનો ઉલ્લેખ કરી શકો.
    • make-col-readyપ્રેપ મિક્સિનનો ઉપયોગ કરવા અને વ્યક્તિગત કૉલમ કદ બદલવા make-colમાટે સેટ કરવા માટે ગ્રીડ મિક્સિન અપડેટ કર્યા .flexmax-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 નો ઉપયોગ કરી રહ્યાં હોવ, તો પોલીફિલ્સ તમારા ઉપયોગના કેસને સમર્થન આપી શકશે નહીં. આવા ઉપયોગો માટેનો એક વિકલ્પ તૃતીય-પક્ષ ScrollPos-Styler લાઇબ્રેરી છે.
  • પેજર ઘટકને છોડી દીધું કારણ કે તે આવશ્યકપણે સહેજ કસ્ટમાઇઝ કરેલ બટનો હતા.
  • ઓવર-સ્પેસિફિક ચિલ્ડ્રન સિલેક્ટરને બદલે વધુ અન-નેસ્ટેડ ક્લાસ સિલેક્ટરનો ઉપયોગ કરવા માટે લગભગ તમામ ઘટકોને રિફેક્ટર કર્યા .

ઘટક દ્વારા

આ યાદી v3.xx અને v4.0.0 વચ્ચેના ઘટક દ્વારા મુખ્ય ફેરફારોને પ્રકાશિત કરે છે.

રીબૂટ કરો

બુટસ્ટ્રેપ 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હવે via 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.
  • .btn-xsવર્ગને સંપૂર્ણપણે છોડી દીધો કારણ કે .btn-smv3 કરતાં પ્રમાણસર ઘણો નાનો છે.
  • 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-colors સેટ કરતા નથી; તેના બદલે તેઓ અનિવાર્યપણે માત્ર અસર કરે છે color.
  • નવબાર્સને હવે અમુક પ્રકારની પૃષ્ઠભૂમિ ઘોષણા જરૂરી છે. અમારી બેકગ્રાઉન્ડ યુટિલિટીઝમાંથી પસંદ કરો ( ) અથવા મેડ કસ્ટમાઇઝેશન માટે.bg-* ઉપરના લાઇટ/વિપરીત વર્ગો સાથે તમારી પોતાની સેટ કરો .
  • ફ્લેક્સબોક્સ શૈલીઓ જોતાં, નેવબાર્સ હવે સરળ ગોઠવણી વિકલ્પો માટે ફ્લેક્સબોક્સ ઉપયોગિતાઓનો ઉપયોગ કરી શકે છે.
  • .navbar-toggleહવે છે .navbar-togglerઅને તેની વિવિધ શૈલીઓ અને આંતરિક માર્કઅપ છે (ત્રણ <span>સે વધુ નહીં).
  • .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, હવે ફ્લેક્સબોક્સ સાથે બનેલ છે.
  • .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}.
  • સંરેખણ અને અંતર:
  • જૂના બ્રાઉઝર સંસ્કરણો માટે સપોર્ટ છોડવા માટે ક્લિયરફિક્સ અપડેટ કર્યું.

વિક્રેતા ઉપસર્ગ મિક્સિન્સ

બુટસ્ટ્રેપ 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 ને બદલે) માં ફરીથી લખવામાં આવી છે.
  • સરળ સામગ્રી અને વધુ સુલભ વંશવેલો માટે પૃષ્ઠોને ફરીથી ગોઠવવામાં આવ્યા છે.
  • અમે બૂટસ્ટ્રેપના ચલો, મિક્સિન્સ અને વધુનો સંપૂર્ણ લાભ લેવા માટે નિયમિત CSS થી SCSS પર ગયા.

રિસ્પોન્સિવ ઉપયોગિતાઓ

બધા @screen-ચલો v4.0.0 માં દૂર કરવામાં આવ્યા છે. media-breakpoint-up()તેના બદલે , media-breakpoint-down(), અથવા media-breakpoint-only()Sass મિક્સન્સ અથવા $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 આલ્ફામાંથી દૂર કરેલ:.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 નો ઉપયોગ કરવાની જરૂર પડશે.