2.x થી 3.0 સુધી સ્થળાંતર

બુટસ્ટ્રેપ 3 v2.x સાથે પાછળની તરફ સુસંગત નથી. v2.x થી v3.0 માં અપગ્રેડ કરવા માટે સામાન્ય માર્ગદર્શિકા તરીકે આ વિભાગનો ઉપયોગ કરો. વ્યાપક વિહંગાવલોકન માટે, જુઓ v3.0 રિલીઝ જાહેરાતમાં નવું શું છે .

મુખ્ય વર્ગ ફેરફારો

આ કોષ્ટક v2.x અને v3.0 વચ્ચેની શૈલીમાં થતા ફેરફારો બતાવે છે.

બુટસ્ટ્રેપ 2.x બુટસ્ટ્રેપ 3.0
.row-fluid .row
.span* .col-md-*
.offset* .col-md-offset-*
.brand .navbar-brand
.navbar .nav .navbar-nav
.nav-collapse .navbar-collapse
.nav-toggle .navbar-toggle
.btn-navbar .navbar-btn
.hero-unit .jumbotron
.icon-* .glyphicon .glyphicon-*
.btn .btn .btn-default
.btn-mini .btn-xs
.btn-small .btn-sm
.btn-large .btn-lg
.alert .alert .alert-warning
.alert-error .alert-danger
.visible-phone .visible-xs
.visible-tablet .visible-sm
.visible-desktop વિભાજિત.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop વિભાજિત.hidden-md .hidden-lg
.input-block-level .form-control
.control-group .form-group
.control-group.warning .control-group.error .control-group.success .form-group.has-*
.checkbox.inline .radio.inline .checkbox-inline .radio-inline
.input-prepend .input-append .input-group
.add-on .input-group-addon
.img-polaroid .img-thumbnail
ul.unstyled .list-unstyled
ul.inline .list-inline
.muted .text-muted
.label .label .label-default
.label-important .label-danger
.text-error .text-danger
.table .error .table .danger
.bar .progress-bar
.bar-* .progress-bar-*
.accordion .panel-group
.accordion-group .panel .panel-default
.accordion-heading .panel-heading
.accordion-body .panel-collapse
.accordion-inner .panel-body

નવું શું છે

અમે નવા ઘટકો ઉમેર્યા છે અને કેટલાક અસ્તિત્વમાં છે તે બદલ્યા છે. અહીં નવી અથવા અપડેટ કરેલી શૈલીઓ છે.

તત્વ વર્ણન
પેનલ્સ .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
જૂથોની સૂચિ બનાવો .list-group .list-group-item .list-group-item-text .list-group-item-heading
ગ્લિફિકન્સ .glyphicon
જમ્બોટ્રોન .jumbotron
વધારાની નાની ગ્રીડ (<768px) .col-xs-*
નાની ગ્રીડ (≥768px) .col-sm-*
મધ્યમ ગ્રીડ (≥992px) .col-md-*
મોટી ગ્રીડ (≥1200px) .col-lg-*
રિસ્પોન્સિવ યુટિલિટી ક્લાસ (≥1200px) .visible-lg .hidden-lg
ઑફસેટ્સ .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
દબાણ .col-sm-push-* .col-md-push-* .col-lg-push-*
ખેંચો .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
ઇનપુટ ઊંચાઈ માપો .input-sm .input-lg
ઇનપુટ જૂથો .input-group .input-group-addon .input-group-btn
ફોર્મ નિયંત્રણો .form-control .form-group
બટન જૂથ માપો .btn-group-xs .btn-group-sm .btn-group-lg
નવબાર ટેક્સ્ટ .navbar-text
નવબાર હેડર .navbar-header
વાજબી ટેબ્સ / ગોળીઓ .nav-justified
પ્રતિભાવ છબીઓ .img-responsive
સંદર્ભિત કોષ્ટક પંક્તિઓ .success .danger .warning .active .info
સંદર્ભિત પેનલ્સ .panel-success .panel-danger .panel-warning .panel-info
મોડલ .modal-dialog .modal-content
થંબનેલ છબી .img-thumbnail
વેલ માપો .well-sm .well-lg
ચેતવણી લિંક્સ .alert-link

શું દૂર કર્યું છે

નીચેના ઘટકોને v3.0 માં છોડવામાં અથવા બદલવામાં આવ્યા છે.

તત્વ 2.x માંથી દૂર કરેલ 3.0 સમકક્ષ
ફોર્મ ક્રિયાઓ .form-actions N/A
શોધ ફોર્મ .form-search N/A
માહિતી સાથે જૂથ બનાવો .control-group.info N/A
નિશ્ચિત-પહોળાઈના ઇનપુટ કદ .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge તેના બદલે ગ્રીડ સિસ્ટમનો ઉપયોગ .form-controlકરો .
બ્લોક લેવલ ફોર્મ ઇનપુટ .input-block-level કોઈ સીધી સમકક્ષ નથી, પરંતુ ફોર્મ નિયંત્રણો સમાન છે.
વ્યસ્ત બટનો .btn-inverse N/A
પ્રવાહી પંક્તિ .row-fluid .row(કોઈ વધુ નિશ્ચિત ગ્રીડ નથી)
રેપરને નિયંત્રિત કરે છે .controls N/A
પંક્તિને નિયંત્રિત કરે છે .controls-row .rowઅથવા.form-group
નવબાર આંતરિક .navbar-inner N/A
Navbar વર્ટિકલ ડિવાઈડર્સ .navbar .divider-vertical N/A
ડ્રોપડાઉન સબમેનુ .dropdown-submenu N/A
ટૅબ ગોઠવણી .tabs-left .tabs-right .tabs-below N/A
ગોળી આધારિત ટેબલેબલ વિસ્તાર .pill-content .tab-content
ગોળી-આધારિત ટેબેબલ વિસ્તાર ફલક .pill-pane .tab-pane
એનએવી યાદીઓ .nav-list .nav-header કોઈ પ્રત્યક્ષ સમકક્ષ નથી, પરંતુ સૂચિ જૂથો અને .panel-groups સમાન છે.
ફોર્મ નિયંત્રણો માટે ઇનલાઇન મદદ .help-inline કોઈ ચોક્કસ સમકક્ષ નથી, પરંતુ .help-blockસમાન છે.
નોન-બાર-લેવલ પ્રોગ્રેસ કલર્સ .progress-info .progress-success .progress-warning .progress-danger તેના બદલે ઉપયોગ .progress-bar-*કરો ..progress-bar

વધારાની નોંધો

v3.0 માં અન્ય ફેરફારો તરત જ દેખાતા નથી. આધાર વર્ગો, મુખ્ય શૈલીઓ અને વર્તણૂકોને સુગમતા અને અમારા મોબાઇલ પ્રથમ અભિગમ માટે સમાયોજિત કરવામાં આવ્યા છે. અહીં આંશિક સૂચિ છે:

  • મૂળભૂત રીતે, ટેક્સ્ટ-આધારિત ફોર્મ નિયંત્રણો હવે માત્ર ન્યૂનતમ શૈલી પ્રાપ્ત કરે છે. ફોકસ રંગો અને ગોળાકાર ખૂણાઓ માટે, .form-controlતત્વ પરના વર્ગને શૈલીમાં લાગુ કરો.
  • લાગુ કરેલ વર્ગ સાથે ટેક્સ્ટ-આધારિત ફોર્મ નિયંત્રણો .form-controlહવે મૂળભૂત રીતે 100% પહોળા છે. <div class="col-*"></div>ઇનપુટ પહોળાઈને નિયંત્રિત કરવા માટે ઇનપુટ્સને અંદર લપેટી .
  • .badgeહવે સંદર્ભિત (-સફળતા, -પ્રાથમિક, વગેરે.) વર્ગો નથી.
  • .btn.btn-default"ડિફોલ્ટ" બટન મેળવવા માટે પણ ઉપયોગ કરવો આવશ્યક છે.
  • .rowહવે પ્રવાહી છે.
  • ડિફૉલ્ટ રૂપે છબીઓ હવે પ્રતિભાવશીલ નથી. .img-responsiveપ્રવાહીના <img>કદ માટે ઉપયોગ કરો .
  • ચિહ્નો, હવે .glyphicon, હવે ફોન્ટ આધારિત છે. ચિહ્નોને પણ આધાર અને ચિહ્ન વર્ગની જરૂર હોય છે (દા.ત. .glyphicon .glyphicon-asterisk).
  • ટ્વીટર ટાઈપહેડનો ઉપયોગ કરવાની તરફેણમાં ટાઈપહેડ કાઢી નાખવામાં આવ્યું છે .
  • મોડલ માર્કઅપ નોંધપાત્ર રીતે બદલાઈ ગયું છે. .modal-header, .modal-body, અને .modal-footerવિભાગો હવે વધુ સારી મોબાઇલ સ્ટાઇલ અને વર્તન માટે .modal-contentઆવરિત છે. .modal-dialogઉપરાંત, તમારે હવે તમારા માર્કઅપમાં અરજી .hideકરવી જોઈએ નહીં..modal
  • v3.1.0 મુજબ, remoteમોડલ વિકલ્પ દ્વારા લોડ થયેલ HTML હવે ની જગ્યાએ .modal-content(v3.0.0 થી v3.0.3 માં .modal) માં દાખલ કરવામાં આવે છે .modal-body. આનાથી તમે મોડલના હેડર અને ફૂટરને પણ સરળતાથી બદલી શકો છો, માત્ર મોડલ બોડીમાં જ નહીં.
  • button.js પ્લગઇનના ચેકબોક્સ અને રેડિયો લક્ષણો હવે તેમના માર્કઅપને data-toggle="buttons"બદલે data-toggle="buttons-checkbox"અથવા બંનેનો ઉપયોગ કરે છે.data-toggle="buttons-radio"
  • JavaScript ઇવેન્ટ્સ નેમસ્પેસ છે. ઉદાહરણ તરીકે, મોડલ "શો" ઇવેન્ટને હેન્ડલ કરવા માટે, ઉપયોગ કરો 'show.bs.modal'. ટેબ્સ માટે "બતાવેલ" નો ઉપયોગ કરો 'shown.bs.tab', વગેરે.

v3.0 પર અપગ્રેડ કરવા અને સમુદાયમાંથી કોડ સ્નિપેટ્સ વિશે વધુ માહિતી માટે, Bootply જુઓ .