Migreren van 2.x naar 3.0

Bootstrap 3 is niet achterwaarts compatibel met v2.x. Gebruik dit gedeelte als een algemene gids voor het upgraden van v2.x naar v3.0. Zie voor een breder overzicht wat er nieuw is in de release-aankondiging van v3.0.

Grote klassewijzigingen

Deze tabel toont de stijlwijzigingen tussen 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 Splitsen in.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Splitsen in.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 er nieuw

We hebben nieuwe elementen toegevoegd en enkele bestaande gewijzigd. Hier zijn de nieuwe of bijgewerkte stijlen.

Element Beschrijving
Panelen .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Lijst groepen .list-group .list-group-item .list-group-item-text .list-group-item-heading
glyphicons .glyphicon
Jumbotron .jumbotron
Extra klein raster (<768px) .col-xs-*
Klein raster (≥768px) .col-sm-*
Gemiddeld raster (≥992px) .col-md-*
Groot raster (≥1200px) .col-lg-*
Responsieve hulpprogramma-klassen (≥1200px) .visible-lg .hidden-lg
compensaties .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Duw .col-sm-push-* .col-md-push-* .col-lg-push-*
Trekken .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Invoerhoogte maten .input-sm .input-lg
Invoergroepen .input-group .input-group-addon .input-group-btn
Formulierbesturingselementen .form-control .form-group
Grootte van knopgroep .btn-group-xs .btn-group-sm .btn-group-lg
Navigatietekst .navbar-text
Koptekst navigatie .navbar-header
Gerechtvaardigde tabs / pillen .nav-justified
Responsieve afbeeldingen .img-responsive
Contextuele tabelrijen .success .danger .warning .active .info
Contextuele panelen .panel-success .panel-danger .panel-warning .panel-info
Modaal .modal-dialog .modal-content
Miniatuurafbeelding .img-thumbnail
Nou maten .well-sm .well-lg
Waarschuwingslinks .alert-link

Wat is verwijderd

De volgende elementen zijn verwijderd of gewijzigd in v3.0.

Element Verwijderd uit 2.x 3.0 Equivalent
Formulieracties .form-actions Nvt
Zoekformulier .form-search Nvt
Groepsformulier met info .control-group.info Nvt
Invoerformaten met vaste breedte .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Gebruik in plaats daarvan .form-controlen het rastersysteem .
Formulierinvoer op blokniveau .input-block-level Geen direct equivalent, maar formulierbesturingen zijn vergelijkbaar.
Omgekeerde knoppen .btn-inverse Nvt
Vloeiende rij .row-fluid .row(geen vast rooster meer)
Bedieningswrapper .controls Nvt
Regels rij .controls-row .rowof.form-group
Navbar binnen .navbar-inner Nvt
Navbar verticale verdelers .navbar .divider-vertical Nvt
Vervolgkeuzemenu .dropdown-submenu Nvt
Tab-uitlijning .tabs-left .tabs-right .tabs-below Nvt
Op pil gebaseerd gebied met tabbladen .pill-content .tab-content
Op pil gebaseerd deelvenster met tabbaar gebied .pill-pane .tab-pane
Navigatielijsten .nav-list .nav-header Geen direct equivalent, maar lijstgroepen en .panel-groups zijn vergelijkbaar.
Inline help voor formulierbesturingselementen .help-inline Geen exacte equivalent, maar .help-blockis vergelijkbaar.
Voortgangskleuren op niet-balkniveau .progress-info .progress-success .progress-warning .progress-danger Gebruik .progress-bar-*in .progress-barplaats daarvan.

Extra notities

Andere wijzigingen in v3.0 zijn niet meteen duidelijk. Basisklassen, sleutelstijlen en gedragingen zijn aangepast voor flexibiliteit en onze mobile first- aanpak. Hier is een gedeeltelijke lijst:

  • Standaard krijgen op tekst gebaseerde formulierbesturingselementen nu slechts minimale opmaak. Voor focuskleuren en afgeronde hoeken past u de .form-controlklasse toe op het element voor stijl.
  • Op tekst gebaseerde formulierbesturingselementen waarop de .form-controlklasse is toegepast, zijn nu standaard 100% breed. Wikkel de invoer naar binnen <div class="col-*"></div>om de invoerbreedten te regelen.
  • .badgeheeft niet langer contextuele (-success,-primary,etc..) klassen.
  • .btnmoet ook gebruiken .btn-defaultom de "standaard" knop te krijgen.
  • .rowis nu vloeibaar.
  • Afbeeldingen reageren standaard niet meer. Gebruik .img-responsivevoor vloeistofgrootte <img>.
  • De pictogrammen, nu .glyphicon, zijn nu op lettertypen gebaseerd. Pictogrammen vereisen ook een basis- en pictogramklasse (bijv .glyphicon .glyphicon-asterisk. ).
  • Typeahead is geschrapt, ten gunste van het gebruik van Twitter Typeahead .
  • Modal markup is aanzienlijk veranderd. De secties .modal-header, .modal-body, en .modal-footerzijn nu ingepakt .modal-contenten .modal-dialogvoor een betere mobiele stijl en gedrag. U moet ook niet langer van toepassing zijn .hideop .modalin uw opmaak.
  • Vanaf v3.1.0 wordt de HTML geladen door de remotemodale optie nu geïnjecteerd in de .modal-content(van v3.0.0 tot v3.0.3, in de .modal) in plaats van in de .modal-body. Hierdoor kunt u ook eenvoudig de kop- en voettekst van de modal variëren, niet alleen de modale body.
  • Het selectievakje en de radiofuncties van de button.js-plug-in gebruiken nu beide in data-toggle="buttons"plaats van data-toggle="buttons-checkbox"of data-toggle="buttons-radio"in hun opmaak.
  • JavaScript-gebeurtenissen hebben een naamruimte. Gebruik bijvoorbeeld om de modale "show"-gebeurtenis af te handelen 'show.bs.modal'. Gebruik voor tabbladen "afgebeeld" 'shown.bs.tab', etc.

Zie Bootply voor meer informatie over upgraden naar v3.0 en codefragmenten van de community .