Migreren naar v3.x
Richtlijnen voor het upgraden van Bootstrap v2.x naar v3.x met de nadruk op grote veranderingen, wat er nieuw is en wat er is verwijderd.
Richtlijnen voor het upgraden van Bootstrap v2.x naar v3.x met de nadruk op grote veranderingen, wat er nieuw is en wat er is verwijderd.
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.
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 |
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 |
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-control en 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 |
.row of.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-group s zijn vergelijkbaar. |
Inline help voor formulierbesturingselementen | .help-inline |
Geen exacte equivalent, maar .help-block is vergelijkbaar. |
Voortgangskleuren op niet-balkniveau | .progress-info .progress-success .progress-warning .progress-danger |
Gebruik .progress-bar-* in .progress-bar plaats daarvan. |
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:
.form-control
klasse toe op het element voor stijl..form-control
klasse is toegepast, zijn nu standaard 100% breed. Wikkel de invoer naar binnen <div class="col-*"></div>
om de invoerbreedten te regelen..badge
heeft niet langer contextuele (-success,-primary,etc..) klassen..btn
moet ook gebruiken .btn-default
om de "standaard" knop te krijgen..row
is nu vloeibaar..img-responsive
voor vloeistofgrootte <img>
..glyphicon
, zijn nu op lettertypen gebaseerd. Pictogrammen vereisen ook een basis- en pictogramklasse (bijv .glyphicon .glyphicon-asterisk
. )..modal-header
, .modal-body
, en .modal-footer
zijn nu ingepakt .modal-content
en .modal-dialog
voor een betere mobiele stijl en gedrag. U moet ook niet langer van toepassing zijn .hide
op .modal
in uw opmaak.remote
modale 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.data-toggle="buttons"
plaats van data-toggle="buttons-checkbox"
of data-toggle="buttons-radio"
in hun opmaak.'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 .