Migrarea de la 2.x la 3.0

Bootstrap 3 nu este compatibil cu v2.x. Utilizați această secțiune ca ghid general pentru actualizarea de la v2.x la v3.0. Pentru o imagine de ansamblu mai amplă, vedeți ce este nou în anunțul de lansare v3.0.

Schimbări majore de clasă

Acest tabel arată modificările de stil între v2.x și 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 Împărțit în.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Împărțit în.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

Ce mai e nou

Am adăugat elemente noi și am schimbat unele existente. Iată stilurile noi sau actualizate.

Element Descriere
Panouri .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Listează grupuri .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glificonuri .glyphicon
Jumbotron .jumbotron
Grilă foarte mică (<768px) .col-xs-*
Grilă mică (≥768px) .col-sm-*
Grilă medie (≥992px) .col-md-*
Grilă mare (≥1200px) .col-lg-*
Clase de utilitate receptive (≥1200px) .visible-lg .hidden-lg
Compensare .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Apăsaţi .col-sm-push-* .col-md-push-* .col-lg-push-*
Trage .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Introduceți dimensiunile înălțimii .input-sm .input-lg
Grupuri de intrare .input-group .input-group-addon .input-group-btn
Controale de formulare .form-control .form-group
Dimensiunile grupurilor de butoane .btn-group-xs .btn-group-sm .btn-group-lg
Text bara de navigare .navbar-text
Antet din bara de navigare .navbar-header
Tablete/pastile justificate .nav-justified
Imagini receptive .img-responsive
Rânduri de tabel contextuale .success .danger .warning .active .info
Panouri contextuale .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Imagine in miniatură .img-thumbnail
Dimensiuni bine .well-sm .well-lg
Linkuri de alertă .alert-link

Ce este eliminat

Următoarele elemente au fost abandonate sau modificate în v3.0.

Element Eliminat din 2.x 3.0 Echivalent
Formează acțiuni .form-actions N / A
Formular de căutare .form-search N / A
Formează grup cu informații .control-group.info N / A
Dimensiuni de intrare cu lățime fixă .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Utilizați .form-controlși sistemul de grilă în schimb.
Intrare formular la nivel de bloc .input-block-level Nu există un echivalent direct, dar controalele de formulare sunt similare.
Butoane inverse .btn-inverse N / A
Rând fluid .row-fluid .row(nu mai este grila fixa)
Controlează ambalajul .controls N / A
Rândul de controale .controls-row .rowsau.form-group
Bara de navigare interioară .navbar-inner N / A
Navbar separatoare verticale .navbar .divider-vertical N / A
Submeniu derulant .dropdown-submenu N / A
Alinierea filelor .tabs-left .tabs-right .tabs-below N / A
Zona de tablă pe bază de pastile .pill-content .tab-content
Panoul de zonă cu tabele pe bază de pastile .pill-pane .tab-pane
Liste de navigare .nav-list .nav-header Nu există un echivalent direct, dar grupurile de liste și .panel-groups sunt similare.
Ajutor inline pentru controalele formularului .help-inline Nu este echivalent exact, dar .help-blockeste similar.
Culori de progres non-bar .progress-info .progress-success .progress-warning .progress-danger Utilizați .progress-bar-*în .progress-barschimb.

Note Aditionale

Alte modificări în v3.0 nu sunt imediat evidente. Clasele de bază, stilurile cheie și comportamentele au fost ajustate pentru flexibilitate și abordarea noastră în primul rând pe mobil . Iată o listă parțială:

  • În mod implicit, controalele de formular bazate pe text primesc acum doar stil minim. Pentru culorile focalizate și colțurile rotunjite, aplicați .form-controlclasa pe element pentru stil.
  • Controalele de formular bazate pe text cu .form-controlclasa aplicată sunt acum 100% largi în mod implicit. Înfășurați intrările în interior <div class="col-*"></div>pentru a controla lățimile de intrare.
  • .badgenu mai are clase contextuale (-success,-primary,etc..).
  • .btntrebuie folosit și .btn-defaultpentru a obține butonul „implicit”.
  • .rowacum este fluid.
  • Imaginile nu mai răspund implicit. Utilizați .img-responsivepentru dimensiunea fluidului <img>.
  • Pictogramele, acum .glyphicon, sunt acum bazate pe fonturi. Pictogramele necesită, de asemenea, o clasă de bază și de pictograme (de ex .glyphicon .glyphicon-asterisk. ).
  • Typeahead a fost renunțat, în favoarea utilizării Twitter Typeahead .
  • Markupul modal s-a schimbat semnificativ. Secțiunile .modal-header, .modal-body, și .modal-footersunt acum împachetate în .modal-contentși .modal-dialogpentru un stil și un comportament mai bun pentru mobil. De asemenea, nu ar trebui să mai aplicați .hideîn .modalmarkup.
  • Începând cu v3.1.0, HTML-ul încărcat de remoteopțiunea modală este acum injectat în .modal-content(de la v3.0.0 la v3.0.3, în .modal) în loc de în .modal-body. Acest lucru vă permite, de asemenea, să variați cu ușurință antetul și subsolul modului, nu doar corpul modal.
  • Caseta de selectare și funcțiile radio ale pluginului button.js folosesc acum ambele data-toggle="buttons"în locul data-toggle="buttons-checkbox"sau data-toggle="buttons-radio"în marcajul lor.
  • Evenimentele JavaScript sunt spațiate de nume. De exemplu, pentru a gestiona evenimentul modal „show”, utilizați 'show.bs.modal'. Pentru filele „prezentate” utilizați 'shown.bs.tab', etc.

Pentru mai multe informații despre actualizarea la v3.0 și fragmente de cod din comunitate, consultați Bootply .