Migrasyon soti nan 2.x a 3.0

Bootstrap 3 pa bak konpatib ak v2.x. Sèvi ak seksyon sa a kòm yon gid jeneral pou amelyore soti nan v2.x rive nan v3.0. Pou yon apèsi pi laj, gade sa ki nouvo nan anons lage v3.0 la.

Gwo chanjman nan klas yo

Tablo sa a montre chanjman style ant v2.x ak 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 Divize an.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Divize an.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

Sa ki nouvo

Nou te ajoute nouvo eleman epi chanje kèk eleman ki deja egziste. Isit la yo se nouvo estil yo oswa mete ajou.

Eleman Deskripsyon
Panno .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Lis gwoup yo .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Siplemantè ti kadriyaj (<768px) .col-xs-*
Ti kadriyaj (≥768px) .col-sm-*
Kadriyaj mwayen (≥992px) .col-md-*
Gwo kadriyaj (≥1200px) .col-lg-*
Klas sèvis piblik ki reponn (≥1200px) .visible-lg .hidden-lg
Offsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Pouse .col-sm-push-* .col-md-push-* .col-lg-push-*
Rale .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Antre gwosè wotè .input-sm .input-lg
Antre gwoup yo .input-group .input-group-addon .input-group-btn
Kontwòl fòm .form-control .form-group
Gwosè gwoup bouton .btn-group-xs .btn-group-sm .btn-group-lg
Navbar tèks .navbar-text
Navbar header .navbar-header
Onglet jistifye / grenn .nav-justified
Imaj reponn .img-responsive
Ranje kontèks tab la .success .danger .warning .active .info
Panno kontèks .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Imaj miniature .img-thumbnail
Byen gwosè .well-sm .well-lg
Avètisman lyen .alert-link

Sa ki retire

Eleman sa yo te tonbe oswa chanje nan v3.0.

Eleman Retire nan 2.x 3.0 ekivalan
Fòme aksyon yo .form-actions N/A
Fòm rechèch .form-search N/A
Fòme gwoup ak enfòmasyon .control-group.info N/A
Gwosè opinyon fiks lajè .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Sèvi .form-controlak ak sistèm nan gri olye.
Blòk nivo fòm antre .input-block-level Pa gen ekivalan dirèk, men kontwòl fòm yo sanble.
Bouton envès .btn-inverse N/A
Ranje likid .row-fluid .row(pa gen plis griy fiks)
Kontwole wrapper .controls N/A
Kontwole ranje .controls-row .rowoswa.form-group
Navbar enteryè .navbar-inner N/A
Navbar divizyon vètikal .navbar .divider-vertical N/A
Sou-menu déroulant .dropdown-submenu N/A
Aliyman tab .tabs-left .tabs-right .tabs-below N/A
Zòn tabtab ki baze sou grenn .pill-content .tab-content
Grenn ki baze sou tabtab zòn fenèt .pill-pane .tab-pane
Nav lis .nav-list .nav-header Pa gen ekivalan dirèk, men gwoup lis ak .panel-groups yo sanble.
Èd Inline pou kontwòl fòm .help-inline Pa gen ekivalan egzak, men .help-blockse menm jan an.
Koulè pwogrè ki pa nivo bar .progress-info .progress-success .progress-warning .progress-danger Sèvi ak .progress-bar-*sou .progress-barolye de sa.

Nòt adisyonèl

Lòt chanjman nan v3.0 pa parèt imedyatman. Klas debaz yo, estil kle, ak konpòtman yo te ajiste pou fleksibilite ak premye apwòch mobil nou an. Men yon lis pasyèl:

  • Pa default, kontwòl fòm ki baze sou tèks kounye a resevwa sèlman estil minim. Pou koulè konsantre ak kwen awondi, aplike .form-controlklas la sou eleman nan style.
  • Kontwòl fòm ki baze sou tèks ak .form-controlklas la aplike yo kounye a se 100% lajè pa default. Vlope entrées anndan <div class="col-*"></div>pou kontwole lajè D'.
  • .badgepa gen klas kontèks ankò (-siksè,-primè, elatriye.).
  • .btndwe itilize tou .btn-defaultpou jwenn bouton "default".
  • .rowse kounye a likid.
  • Imaj yo pa reponn ankò pa default. Itilize pou gwosè .img-responsivelikid .<img>
  • Kounye a, ikon .glyphiconyo baze sou font. Ikon yo mande tou yon baz ak yon klas ikon (egzanp .glyphicon .glyphicon-asterisk).
  • Typeahead te tonbe, an favè itilize Twitter Typeahead .
  • Markup modal te chanje anpil. Seksyon yo .modal-header, .modal-body, ak .modal-footeryo kounye a vlope nan .modal-contentak .modal-dialogpou pi bon manier mobil ak konpòtman. Epitou, ou pa ta dwe aplike .hidenan .modalmaketing ou ankò.
  • Apati v3.1.0, HTML ki chaje pa remoteopsyon modal la kounye a enjekte nan .modal-content(soti nan v3.0.0 rive nan v3.0.3, nan .modal) olye pou yo nan .modal-body. Sa a pèmèt ou tou fasil varye header ak footer nan modal la, pa sèlman kò a modal.
  • Karakteristik kaz ak radyo nan plugin button.js kounye a tou de itilize data-toggle="buttons"olye pou yo data-toggle="buttons-checkbox"oswa data-toggle="buttons-radio"nan maketing yo.
  • Evènman JavaScript yo gen espas non. Pa egzanp, pou okipe evènman "montre" modal la, sèvi ak 'show.bs.modal'. Pou onglè "montre" itilize 'shown.bs.tab', elatriye.

Pou plis enfòmasyon sou ajou nan v3.0, ak fragman kòd nan kominote a, gade Bootply .