Migrerer fra 2.x til 3.0

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.

Store klasseendringer

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

Hva er nytt

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 (≥1200 piksler) .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

Hva er fjernet

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-controlog 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 .roweller.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-groups er like.
Innebygd hjelp for skjemakontroller .help-inline Ingen eksakt ekvivalent, men .help-blocker lik.
Fremdriftsfarger på ikke-bar-nivå .progress-info .progress-success .progress-warning .progress-danger Bruk .progress-bar-*på i .progress-barstedet.

Ytterligere merknader

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:

  • Som standard får tekstbaserte skjemakontroller nå kun minimal stil. For fokusfarger og avrundede hjørner, bruk .form-controlklassen på elementet for å style.
  • Tekstbaserte skjemakontroller med .form-controlklassen brukt er nå 100 % brede som standard. Pakk inn innganger <div class="col-*"></div>for å kontrollere inngangsbredder.
  • .badgehar ikke lenger kontekstuelle (-suksess,-primær, etc..) klasser.
  • .btnmå også bruke .btn-defaultfor å få "standard"-knappen.
  • .rower nå flytende.
  • Bilder er ikke lenger responsive som standard. Bruk .img-responsivefor væskestørrelse <img>.
  • Ikonene, nå .glyphicon, er nå skriftbaserte. Ikoner krever også en base og ikonklasse (f.eks .glyphicon .glyphicon-asterisk. ).
  • Typeahead har blitt droppet, til fordel for bruk av Twitter Typeahead .
  • Modal markup har endret seg betydelig. Seksjonene .modal-header, .modal-body, og .modal-footerer nå pakket inn .modal-contentog .modal-dialogfor bedre mobilstyling og oppførsel. Du bør heller ikke lenger søke .hidepå .modali markeringen din.
  • Fra og med v3.1.0 injiseres HTML-koden som er lastet av det remotemodale 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.
  • Avmerkingsboksen og radiofunksjonene til button.js-plugin-modulen bruker nå begge data-toggle="buttons"i stedet for data-toggle="buttons-checkbox"eller data-toggle="buttons-radio"i markeringen.
  • JavaScript-hendelser er med navn. For å håndtere den modale "show"-hendelsen, bruk for eksempel '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 .