Bootstrap tutorial logo

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


Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (3 głosów, średnia: 5,00 na 5)
Loading...

Komentarze: Bądź pierwszy!