Prechod z 2.x na 3.0

Bootstrap 3 nie je spätne kompatibilný s v2.x. Túto časť použite ako všeobecný návod na inováciu z verzie 2.x na verziu 3.0. Pre širší prehľad si pozrite, čo je nové v oznámení o vydaní v3.0.

Hlavné zmeny triedy

Táto tabuľka zobrazuje zmeny štýlu medzi 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 Rozdelená do.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Rozdelená do.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

Čo je nové

Pridali sme nové prvky a zmenili niektoré existujúce. Tu sú nové alebo aktualizované štýly.

Prvok Popis
Panely .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Zoznam skupín .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyfikony .glyphicon
Jumbotron .jumbotron
Extra malá mriežka (<768px) .col-xs-*
Malá mriežka (≥768 pixelov) .col-sm-*
Stredná mriežka (≥992 pixelov) .col-md-*
Veľká mriežka (≥1200px) .col-lg-*
Responzívne pomocné triedy (≥1200px) .visible-lg .hidden-lg
Ofsety .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
TLAČIŤ .col-sm-push-* .col-md-push-* .col-lg-push-*
ŤAHAŤ .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Veľkosti vstupných výšok .input-sm .input-lg
Vstupné skupiny .input-group .input-group-addon .input-group-btn
Ovládacie prvky formulára .form-control .form-group
Veľkosti skupiny tlačidiel .btn-group-xs .btn-group-sm .btn-group-lg
Text navigačného panela .navbar-text
Hlavička navigačného panela .navbar-header
Ospravedlnené tablety / pilulky .nav-justified
Responzívne obrázky .img-responsive
Riadky kontextovej tabuľky .success .danger .warning .active .info
Kontextové panely .panel-success .panel-danger .panel-warning .panel-info
Modálny .modal-dialog .modal-content
Obrázok miniatúry .img-thumbnail
Veľkosti studní .well-sm .well-lg
Odkazy na upozornenia .alert-link

Čo je odstránené

Nasledujúce prvky boli vo verzii 3.0 vypustené alebo zmenené.

Prvok Odstránené z 2.x 3.0 Ekvivalent
Akcie formulára .form-actions N/A
Vyhľadávací formulár .form-search N/A
Skupina formulárov s informáciami .control-group.info N/A
Vstupné veľkosti s pevnou šírkou .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Namiesto toho použite .form-controla mriežkový systém .
Vstup formulára na úrovni bloku .input-block-level Žiadny priamy ekvivalent, ale ovládacie prvky formulárov sú podobné.
Inverzné tlačidlá .btn-inverse N/A
Tekutý riadok .row-fluid .row(už žiadna pevná mriežka)
Ovláda obal .controls N/A
Riadok riadkov .controls-row .rowalebo.form-group
Vnútorná navigačná lišta .navbar-inner N/A
Vertikálne oddeľovače navigačnej lišty .navbar .divider-vertical N/A
Rozbaľovacia podponuka .dropdown-submenu N/A
Zarovnania kariet .tabs-left .tabs-right .tabs-below N/A
Tabletová oblasť na báze tabletiek .pill-content .tab-content
Tabla tabuľkovej oblasti na báze tabletiek .pill-pane .tab-pane
Navigačné zoznamy .nav-list .nav-header Žiadny priamy ekvivalent, ale skupiny zoznamov a .panel-groupskupiny sú podobné.
Inline pomocník pre ovládacie prvky formulárov .help-inline Žiadny presný ekvivalent, ale .help-blockje podobný.
Farby postupu, ktoré nie sú na úrovni pruhov .progress-info .progress-success .progress-warning .progress-danger Namiesto toho použite .progress-bar-*na ..progress-bar

Doplňujúce Poznámky

Ďalšie zmeny vo verzii 3.0 nie sú okamžite viditeľné. Základné triedy, kľúčové štýly a správanie boli upravené pre flexibilitu a náš prvý mobilný prístup. Tu je čiastočný zoznam:

  • Textové ovládacie prvky formulárov teraz v predvolenom nastavení dostávajú len minimálny štýl. Pre farby zaostrenia a zaoblené rohy použite .form-controltriedu na prvok na štýl.
  • Textové ovládacie prvky formulárov s .form-controlaplikovanou triedou sú teraz predvolene široké 100 %. Zabaľte vstupy dovnútra <div class="col-*"></div>, aby ste mohli ovládať vstupné šírky.
  • .badgeuž nemá kontextové (-úspech,-primárne,atď..) triedy.
  • .btnmusíte použiť aj .btn-defaultna získanie tlačidla „predvolené“.
  • .rowje teraz tekutý.
  • Obrázky už v predvolenom nastavení nereagujú. Použite pre veľkosť .img-responsivetekutiny .<img>
  • Ikony .glyphiconsú teraz založené na písme. Ikony tiež vyžadujú základnú triedu a triedu ikon (napr .glyphicon .glyphicon-asterisk. ).
  • Od Typeahead sa upustilo v prospech používania Twitter Typeahead .
  • Modálne značenie sa výrazne zmenilo. Sekcie , .modal-header, .modal-bodya .modal-footersú teraz zabalené do .modal-contenta .modal-dialogpre lepší mobilný štýl a správanie. Okrem toho by ste už nemali používať .hidevo .modalsvojom označení.
  • Od verzie 3.1.0 sa kód HTML načítaný modálnou remotevoľbou teraz vkladá do súboru .modal-content(od verzie 3.0.0 do verzie 3.0.3 do súboru .modal) namiesto do súboru .modal-body. To vám umožňuje jednoducho meniť aj hlavičku a pätu modálneho obrázku, nielen jeho telo.
  • Funkcie začiarkavacieho políčka a rádia v doplnku button.js sa teraz používajú data-toggle="buttons"namiesto označenia data-toggle="buttons-checkbox"alebo data-toggle="buttons-radio"vo svojom označení.
  • Udalosti JavaScriptu majú menný priestor. Napríklad na spracovanie modálnej udalosti „show“ použite 'show.bs.modal'. Pre "zobrazené" karty použite 'shown.bs.tab', atď.

Ďalšie informácie o inovácii na verziu 3.0 a úryvky kódu od komunity nájdete v téme Bootply .