Migrazzjoni minn 2.x għal 3.0

Bootstrap 3 mhuwiex kompatibbli b'lura ma' v2.x. Uża din it-taqsima bħala gwida ġenerali għall-aġġornament minn v2.x għal v3.0. Għal ħarsa ġenerali usa', ara x'hemm ġdid fit-tħabbira tar-rilaxx v3.0.

Bidliet kbar fil-klassi

Din it-tabella turi l-bidliet fl-istil bejn v2.x u v3.0.

Bootstrap 2.x Bootstrap 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 Qasam fi.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Qasam fi.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

X'hemm ġdid

Żidna elementi ġodda u biddel xi wħud eżistenti. Hawn huma l-istili ġodda jew aġġornati.

Element Deskrizzjoni
Pannelli .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Lista gruppi .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Grilja żgħira żejda (<768px) .col-xs-*
Grilja żgħira (≥768px) .col-sm-*
Grilja medja (≥992px) .col-md-*
Grilja kbira (≥1200px) .col-lg-*
Klassijiet ta' utilità li jirrispondu (≥1200px) .visible-lg .hidden-lg
Offsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Imbotta .col-sm-push-* .col-md-push-* .col-lg-push-*
Iġbed .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Daqsijiet tal-għoli tad-dħul .input-sm .input-lg
Gruppi ta' input .input-group .input-group-addon .input-group-btn
Kontrolli tal-formola .form-control .form-group
Daqsijiet tal-gruppi tal-buttuni .btn-group-xs .btn-group-sm .btn-group-lg
Test tan-Navbar .navbar-text
Navbar header .navbar-header
Tabs / pilloli ġustifikati .nav-justified
Immaġini li jirrispondu .img-responsive
Ringieli ta' tabella kuntestwali .success .danger .warning .active .info
Pannelli kuntestwali .panel-success .panel-danger .panel-warning .panel-info
Modali .modal-dialog .modal-content
Miniatura immaġini .img-thumbnail
Daqsijiet tal-bir .well-sm .well-lg
Links ta' twissija .alert-link

X'inhu mneħħi

L-elementi li ġejjin tneħħew jew tinbidlu fi v3.0.

Element Imneħħi minn 2.x 3.0 Ekwivalenti
Forma azzjonijiet .form-actions N/A
Formola ta' tfittxija .form-search N/A
Form grupp bl-info .control-group.info N/A
Daqsijiet ta' input ta' wisa' fiss .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Uża .form-controlu s-sistema tal-grilja minflok.
Input tal-formola tal-livell tal-blokk .input-block-level L-ebda ekwivalenti dirett, iżda l- kontrolli tal-formoli huma simili.
Buttuni inversi .btn-inverse N/A
Ringiela fluwidu .row-fluid .row(mhux aktar grid fissa)
Jikkontrolla l-ippakkjar .controls N/A
Kontrolli ringiela .controls-row .rowjew.form-group
Navbar ġewwa .navbar-inner N/A
Navbar diviżuri vertikali .navbar .divider-vertical N/A
Sottomenu dropdown .dropdown-submenu N/A
Allinjamenti tat-tab .tabs-left .tabs-right .tabs-below N/A
Żona tabbable bbażata fuq il-pilloli .pill-content .tab-content
Panew taż-żona tabbable bbażata fuq il-pilloli .pill-pane .tab-pane
Nav listi .nav-list .nav-header L-ebda ekwivalenti dirett, iżda l- gruppi tal-lista u .panel-groups huma simili.
Għajnuna inline għall-kontrolli tal-formoli .help-inline L-ebda ekwivalenti eżatt, iżda .help-blockhuwa simili.
Kuluri tal-progress fil-livell mhux tal-bar .progress-info .progress-success .progress-warning .progress-danger Uża .progress-bar-*fuq il- .progress-barminflok.

Noti addizzjonali

Bidliet oħra fil-v3.0 mhumiex apparenti immedjatament. Il-klassijiet bażi, l-istili ewlenin, u l-imġieba ġew aġġustati għall-flessibbiltà u l -approċċ tal-ewwel mobbli tagħna . Hawn lista parzjali:

  • B'mod awtomatiku, il-kontrolli tal-formoli bbażati fuq it-test issa jirċievu biss stil minimu. Għal kuluri ta 'fokus u kantunieri fit-tond, applika l- .form-controlklassi fuq l-element għall-istil.
  • Kontrolli tal-forma bbażati fuq test bil- .form-controlklassi applikata issa huma 100% wesgħin b'mod awtomatiku. Kebbeb l-inputs ġewwa <div class="col-*"></div>biex tikkontrolla l-wisgħat tad-dħul.
  • .badgem'għadx għandu klassijiet kuntestwali (-suċċess,-primarju, eċċ..).
  • .btntrid tuża wkoll .btn-defaultbiex tikseb il-buttuna "default".
  • .rowissa huwa fluwidu.
  • L-istampi m'għadhomx jirrispondu b'mod awtomatiku. Uża għad- daqs .img-responsivetal-fluwidu .<img>
  • L-ikoni, issa .glyphicon, issa huma bbażati fuq it-tipa. L-ikoni jeħtieġu wkoll klassi bażi u ikona (eż .glyphicon .glyphicon-asterisk.).
  • Typeahead twaqqfet, favur l-użu ta ' Twitter Typeahead .
  • Il-markup modali nbidel b'mod sinifikanti. Is -sezzjonijiet .modal-header, .modal-body, u .modal-footerissa huma mgeżwra fi .modal-contentu .modal-dialoggħal stil u mġiba mobbli aħjar. Ukoll, m'għandekx tapplika aktar .hidefil .modal-markup tiegħek.
  • Minn v3.1.0, l-HTML mgħobbi mill- remotegħażla modali issa huwa injettat fil- .modal-content(minn v3.0.0 sa v3.0.3, fil- .modal) minflok fil- .modal-body. Dan jippermettilek li tvarja wkoll faċilment l-header u l-footer tal-modal, mhux biss il-korp modali.
  • Il-checkbox u l-karatteristiċi tar-radju tal-plugin button.js issa jużaw it-tnejn data-toggle="buttons"minflok data-toggle="buttons-checkbox"jew data-toggle="buttons-radio"fil-markup tagħhom.
  • Avvenimenti JavaScript huma namespaced. Pereżempju, biex timmaniġġja l-avveniment modali "show", uża 'show.bs.modal'. Għal tabs "muri" uża 'shown.bs.tab', eċċ.

Għal aktar informazzjoni dwar l-aġġornament għal v3.0, u snippets tal-kodiċi mill-komunità, ara Bootply .