Migrearjen fan 2.x nei 3.0

Bootstrap 3 is net efterút kompatibel mei v2.x. Brûk dizze seksje as in algemiene hantlieding foar it opwurdearjen fan v2.x nei v3.0. Sjoch foar in breder oersjoch wat nij is yn 'e v3.0 release oankundiging.

Grutte klasse feroarings

Dizze tabel toant de styl feroarings tusken v2.x en 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 Splitst yn.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Splitst yn.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

Wat is nij

Wy hawwe nije eleminten tafoege en guon besteande feroare. Hjir binne de nije as bywurke stilen.

Elemint Beskriuwing
Panels .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
List groepen .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Ekstra lyts raster (<768px) .col-xs-*
Lyts raster (≥768px) .col-sm-*
Medium raster (≥992px) .col-md-*
Grut raster (≥1200px) .col-lg-*
Responsive utility classes (≥1200px) .visible-lg .hidden-lg
Offsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Triuwe .col-sm-push-* .col-md-push-* .col-lg-push-*
Lûke .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Input hichte maten .input-sm .input-lg
Ynput groepen .input-group .input-group-addon .input-group-btn
Form kontrôles .form-control .form-group
Knop groep maten .btn-group-xs .btn-group-sm .btn-group-lg
Navbar tekst .navbar-text
Navbar header .navbar-header
Rjochtfeardige ljeppers / pillen .nav-justified
Responsive ôfbyldings .img-responsive
Kontekstuele tabel rigen .success .danger .warning .active .info
Kontekstuele panielen .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Miniatuerôfbylding .img-thumbnail
Well maten .well-sm .well-lg
Alert keppelings .alert-link

Wat is fuorthelle

De folgjende eleminten binne fallen of feroare yn v3.0.

Elemint Fuortsmite út 2.x 3.0 lykweardich
Formearje aksjes .form-actions N/A
Sykje formulier .form-search N/A
Formulier groep mei ynformaasje .control-group.info N/A
Fêste breedte ynfier maten .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Brûk .form-controlen it raster systeem ynstee.
Blokkearje nivo formulier ynfier .input-block-level Gjin direkte ekwivalint, mar formulieren kontrôles binne ferlykber.
Omkearde knoppen .btn-inverse N/A
Fluid rige .row-fluid .row(gjin fêste raster mear)
Kontrolearret wrapper .controls N/A
Controls rige .controls-row .rowof.form-group
Navbar binnen .navbar-inner N/A
Navbar fertikale dividers .navbar .divider-vertical N/A
Dropdown submenu .dropdown-submenu N/A
Tab alignments .tabs-left .tabs-right .tabs-below N/A
Pille-basearre tabable gebiet .pill-content .tab-content
Pille-basearre tabbere gebiet pane .pill-pane .tab-pane
Nav listen .nav-list .nav-header Gjin direkte ekwivalint, mar list groepen en .panel-groups binne ferlykber.
Inline help foar formulierkontrôles .help-inline Gjin eksakte ekwivalint, mar .help-blockis gelyk.
Non-bar-nivo foarútgong kleuren .progress-info .progress-success .progress-warning .progress-danger Brûk .progress-bar-*op 'e .progress-barynstee.

Oanfoljende notysjes

Oare feroarings yn v3.0 binne net daliks dúdlik. Basisklassen, kaaistilen en gedrach binne oanpast foar fleksibiliteit en ús earste mobile oanpak. Hjir is in diellist:

  • Standert krije tekst-basearre formulierkontrôles no mar minimale styling. Foar fokuskleuren en rûne hoeken tapasse de .form-controlklasse op it elemint om te styljen.
  • Tekst-basearre formulierkontrôles mei de .form-controltapaste klasse binne no standert 100% breed. Wrap yngongen binnen <div class="col-*"></div>om ynfierbreedtes te kontrolearjen.
  • .badgehat gjin kontekstuele (-sukses,-primêr, ensfh.) klassen mear.
  • .btnmoat ek brûke .btn-defaultom de "standert" knop te krijen.
  • .rowis no floeiber.
  • Ofbyldings binne standert net mear reageare. Brûk .img-responsivefoar floeibere <img>grutte.
  • De ikoanen, no .glyphicon, binne no lettertype basearre. Ikoanen hawwe ek in basis- en ikoanklasse nedich (bgl .glyphicon .glyphicon-asterisk.).
  • Typeahead is fallen, yn it foardiel fan it brûken fan Twitter Typeahead .
  • Modale markup is signifikant feroare. De .modal-header, .modal-body, en .modal-footerseksjes binne no ferpakt yn .modal-contenten .modal-dialogfoar bettere mobile styling en gedrach. Ek moatte jo net mear oanfreegje .hideyn .modaljo markup.
  • Fanôf v3.1.0 wurdt de HTML laden troch de remotemodale opsje no yn 'e .modal-content(fan v3.0.0 nei v3.0.3, yn 'e .modal) ynjeksje ynstee fan yn 'e .modal-body. Hjirmei kinne jo ek maklik de kop- en fuottekst fan 'e modale feroarje, net allinich it modale lichem.
  • It karfakje en radiofunksjes fan 'e button.js-plugin brûke no beide data-toggle="buttons"ynstee fan data-toggle="buttons-checkbox"of data-toggle="buttons-radio"yn har markup.
  • JavaScript-eveneminten binne nammespaced. Bygelyks, om it modale "show" evenemint te behanneljen, brûk 'show.bs.modal'. Foar ljeppers "oanjûn" brûke 'shown.bs.tab', ensfh.

Foar mear ynformaasje oer it opwurdearjen nei v3.0, en koade snippets fan 'e mienskip, sjoch Bootply .