Różnice Bootstrap 2.x / 3.0 | Kurs / Tutorial Bootstrap

Różnice Bootstrap 2.x / 3.0
autor: Robert

21 sierpnia 2013

Jak już wiecie nowa wersja wprowadziła szereg zmian i udogodnień, część klas przestała mieć zastosowanie, część zmieniła swoje nazwy ale pojawiło się też szereg nowych.

Poniższe tabele pokazują różnice pomiędzy Bootstrap 2.x a Bootstrap 3.0

Najważniejsze zmiany klas

Tabela pokazuje jak nazywały się klasy w 2.3.2 a jak nazywają się w 3.0

Bootstrap 2.x	Bootstrap 3.0
`.container-fluid`	`.container`
`.row-fluid`	`.row`
`.span*`	`.col-md-*`
`.offset*`	`.col-md-offset-*`
`.brand`	`.navbar-brand`
`.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`
`.visible-phone`	`.visible-sm`
`.visible-tablet`	`.visible-md`
`.visible-desktop`	`.visible-lg`
`.hidden-phone`	`.hidden-sm`
`.hidden-tablet`	`.hidden-md`
`.hidden-desktop`	`.hidden-lg`
`.input-small`	`.input-sm`
`.input-large`	`.input-lg`
`.checkbox.inline` `.radio.inline`	`.checkbox-inline` `.radio-inline`
`.input-prepend` `.input-append`	`.input-group`
`.add-on`	`.input-group-addon`
`.thumbnail`	`.img-thumbnail`
`ul.unstyled`	`.list-unstyled`
`ul.inline`	`.list-inline`

Co nowego

Nowości w Bootstrap 3.0

Element	Opis
Panele	`.panel .panel-default` `.panel-body` `.panel-title` `.panel-heading` `.panel-footer` `.panel-collapse`
Grupy list	`.list-group` `.list-group-item` `.list-group-item-text` `.list-group-item-heading`
Glyphicons	`.glyphicon`
Jumbotron	`.jumbotron`
Kolumny dla widoku mobilnego (<768 px)	`.col-xs-*`
Kolumny dla tabletów (>768 px)	`.col-sm-*`
Kolumny dla małych rozdzielczości (>992 px)	`.col-md-*`
Kolumny dla dużych rozdzielczości (>1200 px)	`.col-lg-*`
Offset / Przestawianie	`.col-sm-offset-` `.col-md-offset-` `.col-lg-offset-*`
Push / Wypychanie	`.col-sm-push-` `.col-md-push-` `.col-lg-push-*`
Pull / Podciąganie	`.col-sm-pull-` `.col-md-pull-` `.col-lg-pull-*`
Grupy pól formularza	`.input-group` `.input-group-addon` `.input-group-btn`
Kontrolowanie formularzy	`.form-control` `.form-group`
Rozmiary grup przycisków	`.btn-group-xs` `.btn-group-sm` `.btn-group-lg`
Tekst w menu strony	`.navbar-text`
Nagłówek w menu strony	`.navbar-header`
Justowanie zakładek	`.nav-justified`
Responsywne obrazki	`.img-responsive`
Kolorowanie rzędów tabeli	`.success` `.danger` `.warning` `.active`
Kolorowanie paneli	`.panel-success` `.panel-danger` `.panel-warning` `.panel-info`
Modal	`.modal-dialog` `.modal-content`
Miniatury obrazów	`.img-thumbnail`
Rozmiary „studni”	`.well-sm` `.well-lg`
Linki z ostrzeżeniami	`.alert-link`

Co usunięto

Element	Usunięto z 2.x	Odpowiednik w 3.0
Akcje formularzy	`.form-actions`	N/A
Pole wyszukiwania	`.form-search`	N/A
Płynne kontenery	`.container-fluid`	`.container` (brak „sztywnego” layoutu)
Płynne rzędy	`.row-fluid`	`.row` (brak „sztywnego” layoutu)
Klasa „inner” z menu	`.navbar-inner`	N/A
Submenu w menu rozwijanym	`.dropdown-submenu`	N/A
Ustawianie zakładek	`.tabs-left` `.tabs-right` `.tabs-below`	N/A