Migrace z 2.x na 3.0

Bootstrap 3 není zpětně kompatibilní s v2.x. Tuto část použijte jako obecnou příručku k upgradu z v2.x na v3.0. Pro širší přehled se podívejte, co je nového v oznámení o vydání v3.0.

Hlavní změny třídy

Tato tabulka ukazuje změny stylu mezi v2.xa 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 Rozdělit na.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Rozdělit na.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

Co je nového

Přidali jsme nové prvky a změnili některé stávající. Zde jsou nové nebo aktualizované styly.

Živel Popis
Panely .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Seznam skupin .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyfikony .glyphicon
Jumbotron .jumbotron
Extra malá mřížka (<768px) .col-xs-*
Malá mřížka (≥768 pixelů) .col-sm-*
Střední mřížka (≥992 pixelů) .col-md-*
Velká mřížka (≥1200px) .col-lg-*
Responzivní třídy utilit (≥1200px) .visible-lg .hidden-lg
Ofsety .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
TLAČIT .col-sm-push-* .col-md-push-* .col-lg-push-*
SEM .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Velikosti vstupní výšky .input-sm .input-lg
Vstupní skupiny .input-group .input-group-addon .input-group-btn
Ovládací prvky formuláře .form-control .form-group
Velikosti skupin tlačítek .btn-group-xs .btn-group-sm .btn-group-lg
Text navigační lišty .navbar-text
Záhlaví navigační lišty .navbar-header
Odůvodněné tablety / pilulky .nav-justified
Responzivní obrázky .img-responsive
Řádky kontextové tabulky .success .danger .warning .active .info
Kontextové panely .panel-success .panel-danger .panel-warning .panel-info
Modální .modal-dialog .modal-content
Obrázek miniatury .img-thumbnail
Velikosti studní .well-sm .well-lg
Odkazy na upozornění .alert-link

Co je odstraněno

Následující prvky byly ve verzi 3.0 vypuštěny nebo změněny.

Živel Odebráno z 2.x 3.0 Ekvivalent
Formální akce .form-actions N/A
Vyhledávací formulář .form-search N/A
Formulářová skupina s informacemi .control-group.info N/A
Vstupní velikosti s pevnou šířkou .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Místo toho použijte .form-controla mřížkový systém .
Vstup formuláře na úrovni bloku .input-block-level Žádný přímý ekvivalent, ale ovládací prvky formulářů jsou podobné.
Inverzní tlačítka .btn-inverse N/A
Fluidní řada .row-fluid .row(už žádná pevná mřížka)
Ovládá obal .controls N/A
Řídí řádek .controls-row .rownebo.form-group
Vnitřní navigační lišta .navbar-inner N/A
Vertikální oddělovače navigační lišty .navbar .divider-vertical N/A
Rozbalovací podnabídka .dropdown-submenu N/A
Zarovnání karet .tabs-left .tabs-right .tabs-below N/A
Tabletová oblast založená na tabletách .pill-content .tab-content
Panel tabelovací oblasti na bázi pilulek .pill-pane .tab-pane
Navigační seznamy .nav-list .nav-header Žádný přímý ekvivalent, ale skupiny seznamu a .panel-groups jsou podobné.
Inline nápověda pro ovládací prvky formuláře .help-inline Žádný přesný ekvivalent, ale .help-blockje podobný.
Barvy postupu, které nejsou na úrovni pruhu .progress-info .progress-success .progress-warning .progress-danger Místo toho použijte .progress-bar-*na .progress-bar.

Další poznámky

Další změny ve verzi 3.0 nejsou hned patrné. Základní třídy, klíčové styly a chování byly upraveny pro flexibilitu a náš první mobilní přístup. Zde je částečný seznam:

  • Ve výchozím nastavení nyní textové ovládací prvky formuláře dostávají pouze minimální styl. Pro barvy fokusu a zaoblené rohy použijte .form-controltřídu na prvek pro styl.
  • Textové ovládací prvky formuláře s .form-controlaplikovanou třídou jsou nyní ve výchozím nastavení 100% široké. Zabalte vstupy dovnitř <div class="col-*"></div>, abyste mohli ovládat vstupní šířky.
  • .badgejiž nemá kontextové třídy (-success,-primary,atd..).
  • .btnmusí také použít .btn-defaultk získání tlačítka „výchozí“.
  • .rowje nyní tekutý.
  • Obrázky již ve výchozím nastavení nereagují. Použijte .img-responsivepro velikost tekutiny <img>.
  • Ikony .glyphiconjsou nyní založeny na písmech. Ikony také vyžadují základní a třídu ikon (např .glyphicon .glyphicon-asterisk. ).
  • Od Typeahead bylo upuštěno ve prospěch používání Twitter Typeahead .
  • Modální značení se výrazně změnilo. Sekce .modal-header, .modal-body, a .modal-footerjsou nyní zabaleny do .modal-contenta .modal-dialogpro lepší mobilní styl a chování. Také byste již neměli používat .hideve .modalsvém označení.
  • Od verze 3.1.0 je nyní HTML načtené remotemodální volbou vkládáno do .modal-content(od v3.0.0 do 3.0.3, do .modal) namísto do .modal-body. To vám také umožňuje snadno měnit záhlaví a zápatí modálu, nejen modální tělo.
  • Funkce zaškrtávacího políčka a rádia pluginu button.js se nyní používají data-toggle="buttons"namísto označení data-toggle="buttons-checkbox"nebo data-toggle="buttons-radio"ve svém označení.
  • Události JavaScriptu mají jmenný prostor. Například pro zpracování modální události "show" použijte 'show.bs.modal'. Pro "zobrazené" karty použijte 'shown.bs.tab', atd.

Další informace o upgradu na v3.0 a úryvky kódu od komunity najdete v tématu Bootply .