Migrerer til v3.x
Veiledning om hvordan du oppgraderer fra Bootstrap v2.x til v3.x med vekt på store endringer, hva som er nytt og hva som er fjernet.
Veiledning om hvordan du oppgraderer fra Bootstrap v2.x til v3.x med vekt på store endringer, hva som er nytt og hva som er fjernet.
Bootstrap 3 er ikke bakoverkompatibel med v2.x. Bruk denne delen som en generell veiledning for å oppgradere fra v2.x til v3.0. For en bredere oversikt, se hva som er nytt i v3.0-utgivelseskunngjøringen.
Denne tabellen viser stilendringene mellom 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 |
Dele inn i.visible-md .visible-lg |
.hidden-phone |
.hidden-xs |
.hidden-tablet |
.hidden-sm |
.hidden-desktop |
Dele inn 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 til nye elementer og endret noen eksisterende. Her er de nye eller oppdaterte stilene.
Element | Beskrivelse |
---|---|
Paneler | .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse |
List grupper | .list-group .list-group-item .list-group-item-text .list-group-item-heading |
Glyfikoner | .glyphicon |
Jumbotron | .jumbotron |
Ekstra lite rutenett (<768 piksler) | .col-xs-* |
Lite rutenett (≥768 piksler) | .col-sm-* |
Middels rutenett (≥992 piksler) | .col-md-* |
Stort rutenett (≥1200px) | .col-lg-* |
Responsive verktøyklasser (≥1200px) | .visible-lg .hidden-lg |
Forskyvninger | .col-sm-offset-* .col-md-offset-* .col-lg-offset-* |
Trykk | .col-sm-push-* .col-md-push-* .col-lg-push-* |
Dra | .col-sm-pull-* .col-md-pull-* .col-lg-pull-* |
Inndatahøydestørrelser | .input-sm .input-lg |
Inndatagrupper | .input-group .input-group-addon .input-group-btn |
Skjemakontroller | .form-control .form-group |
Knappgruppestørrelser | .btn-group-xs .btn-group-sm .btn-group-lg |
Navbar tekst | .navbar-text |
Navbar-overskrift | .navbar-header |
Rettferdiggjorte tabs / piller | .nav-justified |
Responsive bilder | .img-responsive |
Kontekstuelle tabellrader | .success .danger .warning .active .info |
Kontekstuelle paneler | .panel-success .panel-danger .panel-warning .panel-info |
Modal | .modal-dialog .modal-content |
Miniatyrbilde | .img-thumbnail |
Brønnstørrelser | .well-sm .well-lg |
Varslingslenker | .alert-link |
Følgende elementer er slettet eller endret i v3.0.
Element | Fjernet fra 2.x | 3,0 tilsvarende |
---|---|---|
Form handlinger | .form-actions |
N/A |
Søkeskjema | .form-search |
N/A |
Skjemagruppe med info | .control-group.info |
N/A |
Inndatastørrelser med fast bredde | .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge |
Bruk .form-control og rutenettet i stedet. |
Skjemainndata på blokknivå | .input-block-level |
Ingen direkte ekvivalent, men skjemakontrollene er like. |
Inverse knapper | .btn-inverse |
N/A |
Væskerekke | .row-fluid |
.row (ikke mer fast rutenett) |
Kontroller innpakning | .controls |
N/A |
Kontroller rad | .controls-row |
.row eller.form-group |
Navbar indre | .navbar-inner |
N/A |
Navbar vertikale skillevegger | .navbar .divider-vertical |
N/A |
Rullegardin undermeny | .dropdown-submenu |
N/A |
Fanejusteringer | .tabs-left .tabs-right .tabs-below |
N/A |
Pillebasert tabbar område | .pill-content |
.tab-content |
Pillebasert feltfeltrute | .pill-pane |
.tab-pane |
Nav-lister | .nav-list .nav-header |
Ingen direkte ekvivalent, men listegrupper og .panel-group s er like. |
Innebygd hjelp for skjemakontroller | .help-inline |
Ingen eksakt ekvivalent, men .help-block er lik. |
Fremdriftsfarger på ikke-bar-nivå | .progress-info .progress-success .progress-warning .progress-danger |
Bruk .progress-bar-* på i .progress-bar stedet. |
Andre endringer i v3.0 er ikke umiddelbart synlige. Basisklasser, nøkkelstiler og atferd har blitt justert for fleksibilitet og vår mobile first- tilnærming. Her er en delvis liste:
.form-control
klassen på elementet for å style..form-control
klassen brukt er nå 100 % brede som standard. Pakk inn innganger <div class="col-*"></div>
for å kontrollere inngangsbredder..badge
har ikke lenger kontekstuelle (-suksess,-primær, etc..) klasser..btn
må også bruke .btn-default
for å få "standard"-knappen..row
er nå flytende..img-responsive
for væskestørrelse <img>
..glyphicon
, er nå skriftbaserte. Ikoner krever også en base og ikonklasse (f.eks .glyphicon .glyphicon-asterisk
. )..modal-header
, .modal-body
, og .modal-footer
er nå pakket inn .modal-content
og .modal-dialog
for bedre mobilstyling og oppførsel. Du bør heller ikke lenger søke .hide
på .modal
i markeringen din.remote
modale alternativet nå inn i .modal-content
(fra v3.0.0 til v3.0.3, inn i .modal
) i stedet for i .modal-body
. Dette lar deg også enkelt variere toppteksten og bunnteksten til modalen, ikke bare den modale kroppen.data-toggle="buttons"
i stedet for data-toggle="buttons-checkbox"
eller data-toggle="buttons-radio"
i markeringen.'show.bs.modal'
. For faner "vist" bruk 'shown.bs.tab'
, etc.For mer informasjon om oppgradering til v3.0 og kodebiter fra fellesskapet, se Bootply .