Paglalin gikan sa 2.x ngadto sa 3.0

Ang Bootstrap 3 dili paatras nga compatible sa v2.x. Gamita kini nga seksyon isip usa ka kinatibuk-ang giya sa pag-upgrade gikan sa v2.x ngadto sa v3.0. Para sa mas lapad nga overview, tan-awa unsay bag-o sa v3.0 release announcement.

Dakong kausaban sa klase

Kini nga lamesa nagpakita sa mga kausaban sa estilo tali sa v2.x ug 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 Gibahin sa.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Gibahin sa.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

Unsay bag-o

Nagdugang kami og bag-ong mga elemento ug giusab ang pipila nga anaa na. Ania ang bag-o o gi-update nga mga istilo.

elemento Deskripsyon
Mga panel .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Ilista ang mga grupo .list-group .list-group-item .list-group-item-text .list-group-item-heading
Mga Glyphicon .glyphicon
Jumbotron .jumbotron
Dugang gamay nga grid (<768px) .col-xs-*
Gamay nga grid (≥768px) .col-sm-*
Medium nga grid (≥992px) .col-md-*
Dako nga grid (≥1200px) .col-lg-*
Matubag nga mga klase sa utility (≥1200px) .visible-lg .hidden-lg
Mga offset .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Iduso .col-sm-push-* .col-md-push-* .col-lg-push-*
Ibira .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Mga gidak-on sa gitas-on sa input .input-sm .input-lg
Mga grupo sa input .input-group .input-group-addon .input-group-btn
Mga kontrol sa porma .form-control .form-group
Mga gidak-on sa grupo sa buton .btn-group-xs .btn-group-sm .btn-group-lg
Navbar nga teksto .navbar-text
Navbar nga ulohan .navbar-header
Gipakamatarong nga mga tab / pills .nav-justified
Matubag nga mga imahe .img-responsive
Mga laray sa lamesa sa konteksto .success .danger .warning .active .info
Mga panel sa konteksto .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Thumbnail nga hulagway .img-thumbnail
Maayo nga mga laki .well-sm .well-lg
Mga link sa alerto .alert-link

Unsa ang gitangtang

Ang mosunod nga mga elemento gihulog o giusab sa v3.0.

elemento Gikuha gikan sa 2.x 3.0 Katumbas
Porma nga mga aksyon .form-actions N/A
Pagpangita nga porma .form-search N/A
Pagporma og grupo nga adunay impormasyon .control-group.info N/A
Fixed-width nga mga gidak-on sa input .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Gamit .form-controlug ang grid system hinuon.
Pagsulod sa porma sa lebel sa block .input-block-level Walay direkta nga katumbas, apan ang mga kontrol sa porma parehas.
Balikbalik nga mga butones .btn-inverse N/A
Fluid nga linya .row-fluid .row(wala nay fixed grid)
Gikontrol ang wrapper .controls N/A
Gikontrol ang linya .controls-row .rowo.form-group
Navbar sa sulod .navbar-inner N/A
Navbar bertikal divider .navbar .divider-vertical N/A
Dropdown nga submenu .dropdown-submenu N/A
Mga paglinya sa tab .tabs-left .tabs-right .tabs-below N/A
Tabbable nga lugar nga gibase sa pildoras .pill-content .tab-content
Pill-based tabable area pane .pill-pane .tab-pane
Mga lista sa Nav .nav-list .nav-header Walay direkta nga katumbas, apan ang listahan sa mga grupo ug .panel-groups managsama.
Inline nga tabang alang sa mga kontrol sa porma .help-inline Walay eksaktong katumbas, apan .help-blocksusama.
Non-bar-level nga mga kolor sa pag-uswag .progress-info .progress-success .progress-warning .progress-danger Gamita .progress-bar-*sa .progress-barbaylo.

Dugang nga mga nota

Ang ubang mga kausaban sa v3.0 dili dayon makita. Ang mga base nga klase, yawe nga mga istilo, ug pamatasan gi-adjust para sa pagka-flexible ug sa among mobile first approach. Ania ang usa ka partial nga listahan:

  • Sa kasagaran, ang mga kontrol sa porma nga gibase sa teksto nakadawat na lang og gamay nga estilo. Para sa focus nga mga kolor ug rounded corners, i-apply ang .form-controlklase sa elemento sa estilo.
  • Ang mga kontrol sa porma nga gibase sa teksto uban sa .form-controlklase nga gipadapat karon 100% ang gilapdon pinaagi sa default. I- wrap ang mga input sa sulod <div class="col-*"></div>aron makontrol ang mga gilapdon sa input.
  • .badgewala nay contextual (-success,-primary, etc..) nga mga klase.
  • .btnkinahanglan usab nga gamiton .btn-defaultaron makuha ang "default" nga buton.
  • .rowkaron fluid.
  • Ang mga imahe dili na motubag pinaagi sa default. Paggamit .img-responsivealang sa fluid <img>size.
  • Ang mga icon, karon .glyphicon, gibase sa font. Ang mga icon nagkinahanglan usab og base ug icon nga klase (eg .glyphicon .glyphicon-asterisk).
  • Ang Typeahead gihulog, pabor sa paggamit sa Twitter Typeahead .
  • Ang markup sa modal dako kaayog kausaban. Ang .modal-header, .modal-body, ug .modal-footermga seksyon giputos na karon .modal-contentug .modal-dialogpara sa mas maayo nga mobile nga estilo ug kinaiya. Usab, kinahanglan nga dili ka na mag-aplay .hidesa .modalimong markup.
  • Sa v3.1.0, ang HTML nga gikarga sa remotemodal nga opsyon kay gi-inject na karon sa .modal-content(gikan sa v3.0.0 ngadto sa v3.0.3, ngadto sa .modal) ​​imbes sa .modal-body. Gitugotan ka niini nga dali usab nga usbon ang header ug footer sa modal, dili lang ang modal nga lawas.
  • Ang checkbox ug radio features sa button.js plugin karon kay gigamit data-toggle="buttons"na sa data-toggle="buttons-checkbox"o data-toggle="buttons-radio"sa ilang markup.
  • Ang mga panghitabo sa JavaScript kay namespaced. Pananglitan, aron pagdumala sa modal nga "ipakita" nga panghitabo, gamita ang 'show.bs.modal'. Para sa mga tab nga "gipakita" gamita 'shown.bs.tab', etc.

Alang sa dugang nga impormasyon sa pag-upgrade sa v3.0, ug code snippet gikan sa komunidad, tan-awa ang Bootply .