Migrerer til v3.x
Vejledning i, hvordan du opgraderer fra Bootstrap v2.x til v3.x med vægt på større ændringer, hvad der er nyt, og hvad der er blevet fjernet.
Vejledning i, hvordan du opgraderer fra Bootstrap v2.x til v3.x med vægt på større ændringer, hvad der er nyt, og hvad der er blevet fjernet.
Bootstrap 3 er ikke bagudkompatibel med v2.x. Brug dette afsnit som en generel guide til opgradering fra v2.x til v3.0. For et bredere overblik, se, hvad der er nyt i v3.0-udgivelsesmeddelelsen.
Denne tabel viser stilændringerne mellem v2.x og 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 |
Opdelt i.visible-md .visible-lg |
.hidden-phone |
.hidden-xs |
.hidden-tablet |
.hidden-sm |
.hidden-desktop |
Opdelt i.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 |
Vi har tilføjet nye elementer og ændret nogle eksisterende. Her er de nye eller opdaterede styles.
Element | Beskrivelse |
---|---|
Paneler | .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse |
Liste grupper | .list-group .list-group-item .list-group-item-text .list-group-item-heading |
Glyphicons | .glyphicon |
Jumbotron | .jumbotron |
Ekstra lille gitter (<768px) | .col-xs-* |
Lille gitter (≥768px) | .col-sm-* |
Mellemstor gitter (≥992px) | .col-md-* |
Stort gitter (≥1200px) | .col-lg-* |
Responsive hjælpeprogrammer (≥1200px) | .visible-lg .hidden-lg |
Forskydninger | .col-sm-offset-* .col-md-offset-* .col-lg-offset-* |
Skubbe | .col-sm-push-* .col-md-push-* .col-lg-push-* |
Trække | .col-sm-pull-* .col-md-pull-* .col-lg-pull-* |
Input højde størrelser | .input-sm .input-lg |
Input grupper | .input-group .input-group-addon .input-group-btn |
Form kontrolelementer | .form-control .form-group |
Knapgruppestørrelser | .btn-group-xs .btn-group-sm .btn-group-lg |
Navbar tekst | .navbar-text |
Navbar header | .navbar-header |
Berettigede tabs / piller | .nav-justified |
Responsive billeder | .img-responsive |
Kontekstuelle tabelrækker | .success .danger .warning .active .info |
Kontekstuelle paneler | .panel-success .panel-danger .panel-warning .panel-info |
Modal | .modal-dialog .modal-content |
Miniaturebillede | .img-thumbnail |
Brønd størrelser | .well-sm .well-lg |
Advarselslinks | .alert-link |
Følgende elementer er blevet slettet eller ændret i v3.0.
Element | Fjernet fra 2.x | 3,0 Tilsvarende |
---|---|---|
Form handlinger | .form-actions |
N/A |
Søgeformular | .form-search |
N/A |
Form gruppe med info | .control-group.info |
N/A |
Indtastningsstørrelser med fast bredde | .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge |
Brug .form-control og gittersystemet i stedet. |
Indtastning af form på blokniveau | .input-block-level |
Ingen direkte ækvivalent, men formularkontrollerne ligner hinanden. |
Omvendte knapper | .btn-inverse |
N/A |
Væskerække | .row-fluid |
.row (ikke mere fast gitter) |
Styrer indpakning | .controls |
N/A |
Kontrolrækken | .controls-row |
.row eller.form-group |
Navbar indre | .navbar-inner |
N/A |
Navbar lodrette skillevægge | .navbar .divider-vertical |
N/A |
Dropdown undermenu | .dropdown-submenu |
N/A |
Fanejusteringer | .tabs-left .tabs-right .tabs-below |
N/A |
Pillebaseret tabbar område | .pill-content |
.tab-content |
Pillebaseret rude med tabulatorer | .pill-pane |
.tab-pane |
Nav lister | .nav-list .nav-header |
No direct equivalent, but list groups and .panel-group s are similar. |
Inline help for form controls | .help-inline |
No exact equivalent, but .help-block is similar. |
Non-bar-level progress colors | .progress-info .progress-success .progress-warning .progress-danger |
Use .progress-bar-* on the .progress-bar instead. |
Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:
.form-control
class on the element to style..form-control
class applied are now 100% wide by default. Wrap inputs inside <div class="col-*"></div>
to control input widths..badge
no longer has contextual (-success,-primary,etc..) classes..btn
must also use .btn-default
to get the "default" button..row
is now fluid..img-responsive
for fluid <img>
size..glyphicon
, are now font based. Icons also require a base and icon class (e.g. .glyphicon .glyphicon-asterisk
)..modal-header
, .modal-body
, and .modal-footer
sections are now wrapped in .modal-content
and .modal-dialog
for better mobile styling and behavior. Also, you should no longer apply .hide
to .modal
in your markup.remote
modale indstilling nu injiceret i .modal-content
(fra v3.0.0 til v3.0.3, i .modal
) i stedet for i .modal-body
. Dette giver dig også mulighed for nemt at variere sidehovedet og sidefoden af modalen, ikke kun den modale krop.data-toggle="buttons"
i stedet for data-toggle="buttons-checkbox"
eller data-toggle="buttons-radio"
i deres opmærkning.'show.bs.modal'
. For faner "vist" brug 'shown.bs.tab'
osv.For flere oplysninger om opgradering til v3.0 og kodestykker fra fællesskabet, se Bootply .