Migrering fra 2.x til 3.x

Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see what's new in the v3.0 release announcement.

Store klasse ændring

Denne tabel viser stil skifter 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-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

Hvad er nyt

Vi har tilføjet nye elementer og ændrede nogle eksisterende. Her er nye eller opdaterede stilarter.

Element Beskrivelse
Paneler .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Listen over 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-*
Medium grid (≥992px) .col-md-*
Stort gitter (≥1200px) .col-lg-*
Hurtigtreagerende utility klasser (≥1200px) .visible-lg .hidden-lg
Forskydninger .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Skub .col-sm-push-* .col-md-push-* .col-lg-push-*
Træk .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Input højde størrelser .input-sm .input-lg
Indgangsgrupper .input-group .input-group-addon .input-group-btn
Formularkontrolelementer .form-control .form-group
Knappen gruppestørrelser .btn-group-xs .btn-group-sm .btn-group-lg
Navbar - tekst .navbar-text
Navbar - skærebord .navbar-header
Begrundede faner / piller .nav-justified
Hurtige billeder .img-responsive
Kontekstuel tabel rækker .success .danger .warning .active .info
Kontekstuel paneler .panel-success .panel-danger .panel-warning .panel-info
Modalt .modal-dialog .modal-content
Miniaturebillede .img-thumbnail
Og størrelse .well-sm .well-lg
Alert links .alert-link

Hvad er fjernet

Følgende elementer er blevet opgivet eller ændret i v3.0.

Element Fjernet i 2.x 3.0 Tilsvarende
Form aktioner .form-actions N/A
Søgeformularen .form-search N/A
En gruppe med info .control-group.info N/A
Fast bredde input størrelser .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Brug .form-control og grid system i stedet.
Block form input .input-block-level Ingen direkte svarer, men former kontrol er lignende.
Omvendte knapper .btn-inverse N/A
Fluid række .row-fluid .row (ingen fast gitter)
Styrer indpakker .controls N/A
Styrer række .controls-row .row eller .form-group
Navbar - indvendig .navbar-inner N/A
Navbar - lodrette skillerum .navbar .divider-vertical N/A
Rulleliste undermenu .dropdown-submenu N/A
Fanen justeringer .tabs-left .tabs-right .tabs-below N/A
Pille-baseret tabbable område .pill-content .tab-content
Pille-baseret tabbable område rude .pill-pane .tab-pane
Nav lister .nav-list .nav-header Ingen direkte svarer, men liste grupper og .panel-groups er lignende.
Inline-hjælp til form kontrol .help-inline En nøjagtig tilsvarende, men .help-block er lignende.
Ikke-bar-niveau fremskridt farver .progress-info .progress-success .progress-warning .progress-danger Brug .progress-bar-* på .progress-bar i stedet.

Yderligere bemærkninger

Andre ændringer i v3.0 er ikke umiddelbart synlige. Base klasser, stil og adfærd er blevet justeret for fleksibilitet og vores mobile første tilgang. Her er en delvis liste:

  • Som standard tekst-baseret form kontrollerer nu kun får minimale stil. Til focus farver og afrundede hjørner, anvende .form-control klasse på det element af stil.
  • Text-based form controls with the .form-control class applied are now 100% wide by default. Wrap inputs inside <div class="col-*"></div> to control input widths.
  • .badge Ikke længere er kontekstuel ( -succes, -primære,osv. .) klasser.
  • .btn Skal også bruge .btn-default for at få et "standard" -knappen.
  • .row Nu er væske.
  • Billeder er ikke længere reagerer som standard. Brug .img-responsive for væske <img>.
  • Ikonerne, nu .glyphicon, er nu font baseret. Ikoner kræver også en base og ikon klasse (f. eks. .glyphicon .glyphicon-asterisk).
  • Typeahead er blevet opgivet til fordel for hjælp Twitter Typeahead.
  • Modal markup har ændret sig betydeligt. .modal-header, .modal-body og .modal-footer sektioner er nu pakket ind i .modal-content og .modal-dialog for bedre mobil styling og adfærd. Desuden bør du ikke længere anvende .hide til .modal i dit markup.
  • Som til v3.1.0, HTML-belastet af remote modal indstilling er nu sprøjtes ind i .modal-content (fra v3.0.0 til v3.0.3, til .modal) i stedet for i .modal-body. Dette giver dig mulighed for at nemt at variere sidehoved og sidefod for de forskellige transportformer, ikke blot den modale organ.
  • Afkrydsningsfeltet og radio har i de knap.js plugin nu både bruge data-toggle="buttons" i stedet for data-toggle="buttons-checkbox" eller data-toggle="buttons-radio" i deres markup.
  • JavaScript events er namespaced. F. eks. til at håndtere den modale "vis" tilfælde, brug 'show.bs.modal'. For fanebladene "vist" 'shown.bs.tab', osv..

For mere information om opgradering til version 3.0 og kode udsnit fra fællesskabet, se Bootply.