Migrerar till v3.x
Vägledning om hur du uppgraderar från Bootstrap v2.x till v3.x med tonvikt på stora förändringar, vad som är nytt och vad som har tagits bort.
Vägledning om hur du uppgraderar från Bootstrap v2.x till v3.x med tonvikt på stora förändringar, vad som är nytt och vad som har tagits bort.
Bootstrap 3 är inte bakåtkompatibel med v2.x. Använd det här avsnittet som en allmän guide för att uppgradera från v2.x till v3.0. För en bredare översikt, se vad som är nytt i v3.0-versionsmeddelandet.
Den här tabellen visar stiländringarna mellan v2.x och 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 |
Delas upp i.visible-md .visible-lg |
.hidden-phone |
.hidden-xs |
.hidden-tablet |
.hidden-sm |
.hidden-desktop |
Delas upp 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 lagt till nya element och ändrat några befintliga. Här är de nya eller uppdaterade stilarna.
Element | Beskrivning |
---|---|
Paneler | .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse |
Lista grupper | .list-group .list-group-item .list-group-item-text .list-group-item-heading |
Glyfikoner | .glyphicon |
Jumbotron | .jumbotron |
Extra litet rutnät (<768px) | .col-xs-* |
Litet rutnät (≥768px) | .col-sm-* |
Medium rutnät (≥992px) | .col-md-* |
Stort rutnät (≥1200px) | .col-lg-* |
Responsiva verktygsklasser (≥1200px) | .visible-lg .hidden-lg |
Offsets | .col-sm-offset-* .col-md-offset-* .col-lg-offset-* |
Tryck | .col-sm-push-* .col-md-push-* .col-lg-push-* |
Dra | .col-sm-pull-* .col-md-pull-* .col-lg-pull-* |
Inmatningshöjdstorlekar | .input-sm .input-lg |
Inmatningsgrupper | .input-group .input-group-addon .input-group-btn |
Formulärkontroller | .form-control .form-group |
Knappgruppstorlekar | .btn-group-xs .btn-group-sm .btn-group-lg |
Navbar text | .navbar-text |
Navbar rubrik | .navbar-header |
Berättigade tabs / piller | .nav-justified |
Responsiva bilder | .img-responsive |
Kontextuella tabellrader | .success .danger .warning .active .info |
Kontextuella paneler | .panel-success .panel-danger .panel-warning .panel-info |
Modal | .modal-dialog .modal-content |
Tumnagel bild | .img-thumbnail |
Bra storlekar | .well-sm .well-lg |
Varningslänkar | .alert-link |
Följande element har tagits bort eller ändrats i v3.0.
Element | Borttagen från 2.x | 3,0 Motsvarande |
---|---|---|
Forma åtgärder | .form-actions |
N/A |
Sökformulär | .form-search |
N/A |
Formgrupp med info | .control-group.info |
N/A |
Inmatningsstorlekar med fast bredd | .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge |
Använd .form-control och rutsystemet istället. |
Inmatning av formulär på blocknivå | .input-block-level |
Ingen direkt motsvarighet, men formulärkontroller är likartade. |
Inverterade knappar | .btn-inverse |
N/A |
Vätskerad | .row-fluid |
.row (inga mer fast rutnät) |
Styr omslag | .controls |
N/A |
Kontroller rad | .controls-row |
.row eller.form-group |
Navbar inre | .navbar-inner |
N/A |
Navbar vertikala avdelare | .navbar .divider-vertical |
N/A |
Dropdown undermeny | .dropdown-submenu |
N/A |
Flikjusteringar | .tabs-left .tabs-right .tabs-below |
N/A |
Piller-baserat tabbar område | .pill-content |
.tab-content |
Piller-baserad flikbar områdesruta | .pill-pane |
.tab-pane |
Nav listor | .nav-list .nav-header |
Ingen direkt motsvarighet, men listgrupper och .panel-group s är likartade. |
Inline hjälp för formulärkontroller | .help-inline |
Ingen exakt motsvarighet, men .help-block är snarlik. |
Framstegsfärger på icke-stapelnivå | .progress-info .progress-success .progress-warning .progress-danger |
Använd .progress-bar-* på .progress-bar istället. |
Andra ändringar i v3.0 är inte direkt uppenbara. Basklasser, nyckelstilar och beteenden har justerats för flexibilitet och vår mobila första strategi. Här är en dellista:
.form-control
klassen på elementet för att utforma..form-control
klassen tillämpad är nu 100 % bred som standard. Linda ingångar inuti <div class="col-*"></div>
för att styra ingångsbredder..badge
har inte längre kontextuella (-framgång,-primär, etc..) klasser..btn
måste också använda .btn-default
för att få "default"-knappen..row
är nu flytande..img-responsive
för vätskestorlek <img>
..glyphicon
, är nu teckensnittsbaserade. Ikoner kräver också en bas- och ikonklass (t.ex. .glyphicon .glyphicon-asterisk
)..modal-header
, .modal-body
, och .modal-footer
är nu insvepta .modal-content
och .modal-dialog
för bättre mobil styling och beteende. Dessutom bör du inte längre ansöka .hide
om .modal
i din uppmärkning.remote
modala alternativet nu i .modal-content
(från v3.0.0 till v3.0.3, i .modal
) istället för i .modal-body
. Detta gör att du också enkelt kan variera sidhuvudet och sidfoten för modalen, inte bara den modala kroppen.data-toggle="buttons"
istället för data-toggle="buttons-checkbox"
eller data-toggle="buttons-radio"
i deras uppmärkning.'show.bs.modal'
. För flikar "visade" använd 'shown.bs.tab'
, etc.Mer information om uppgradering till v3.0 och kodavsnitt från communityn finns i Bootply .