Woretu afiri 2.x akɔ 3.0

Bootstrap 3 no ntumi nkɔ akyi ne v2.x. Fa ɔfa yi di dwuma sɛ akwankyerɛ a ɛfa sɛnea wobɛma nneɛma akɔ soro afi v2.x so akɔ v3.0 so. Sɛ wopɛ nsɛm a ɛtrɛw a, hwɛ nea ɛyɛ foforo wɔ v3.0 a wɔayi no adi ho dawurubɔ no mu.

Adesuakuw mu nsakrae atitiriw

Saa table yi kyerɛ style nsakraeɛ a ɛwɔ v2.x ne v3.0 ntam.

Bootstrap no yɛ 2.x Bootstrap no yɛ 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 Mpaapaemu mu ayɛ no.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Mpaapaemu mu ayɛ no.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

Nea ɛyɛ foforo

Yɛde nneɛma foforo aka ho na yɛasesa nea ɛwɔ hɔ dedaw no bi. Nneɛma foforo anaa wɔayɛ no foforo no ni.

Adeɛ Nkyerɛmu
Panel ahorow .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Kyerɛw akuw ahorow din .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons a wɔde kyerɛw nsɛm .glyphicon
Jumbotron a ɛyɛ hu .jumbotron
Grid ketewa foforo (<768px) . .col-xs-*
Grid ketewaa bi (≥768px) . .col-sm-*
Grid a ɛwɔ mfinimfini (≥992px) . .col-md-*
Grid kɛse (≥1200px) . .col-lg-*
Mmuae mfaso adesua ahorow (≥1200px) . .visible-lg .hidden-lg
Nneɛma a wɔde siw nneɛma ano .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Pia .col-sm-push-* .col-md-push-* .col-lg-push-*
Twe .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Input ɔsorokɔ akɛse .input-sm .input-lg
Nsɛm a wɔde hyɛ mu akuw ahorow .input-group .input-group-addon .input-group-btn
Fom a wɔde di dwuma .form-control .form-group
Button akuw akɛse .btn-group-xs .btn-group-sm .btn-group-lg
Navbar nsɛm a wɔakyerɛw .navbar-text
Navbar asɛmti .navbar-header
Tabs / pills a ɛfata .nav-justified
Mfonini ahorow a ɛma mmuae .img-responsive
Nsɛm a ɛfa ho pon so nkyerɛwde ahorow .success .danger .warning .active .info
Nsɛm a ɛfa ho a wɔde kyerɛw nsɛm .panel-success .panel-danger .panel-warning .panel-info
Modal a wɔde di dwuma .modal-dialog .modal-content
Mfonini ketewaa bi .img-thumbnail
Abura akɛse .well-sm .well-lg
Kɔkɔbɔ link ahorow .alert-link

Nea wɔayi afi hɔ

Wɔato nneɛma a edidi so yi agu anaa wɔasesa wɔ v3.0 mu.

Adeɛ Wɔayi afi 2.x 3.0 Nea ɛne no sɛ
Form nneyɛe ahorow .form-actions N/A na ɛwɔ hɔ
Hwehwɛ kratasin no .form-search N/A na ɛwɔ hɔ
Form kuw a ɛwɔ info .control-group.info N/A na ɛwɔ hɔ
Fixed-width nsɛm a wɔde hyɛ mu akɛse .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Fa .form-controlne grid nhyehyɛe no di dwuma mmom.
Block level krataa a wɔde hyɛ mu .input-block-level No direct equivalent, nanso forms controls no te sɛ nea ɛte saa ara.
Nneɛma a wɔde bɔ akyi .btn-inverse N/A na ɛwɔ hɔ
Nsu a ɛwɔ row mu .row-fluid .row(grid a wɔahyɛ da ayɛ biara nni hɔ bio)
Ɛhwɛ wrapper so .controls N/A na ɛwɔ hɔ
Nkonimdifo row .controls-row .rowanaasɛ.form-group
Navbar a ɛwɔ mu .navbar-inner N/A na ɛwɔ hɔ
Navbar a ɛkyekyɛ nneɛma mu gyina hɔ .navbar .divider-vertical N/A na ɛwɔ hɔ
Menu a ɛwɔ ase hɔ no .dropdown-submenu N/A na ɛwɔ hɔ
Tab ahorow a wɔahyehyɛ no pɛpɛɛpɛ .tabs-left .tabs-right .tabs-below N/A na ɛwɔ hɔ
Pill-gyina tabbable beae .pill-content .tab-content
Pill-gyina tabbable beae pane .pill-pane .tab-pane
Nav nsɛm a wɔahyehyɛ .nav-list .nav-header Ɛnnyɛ nea ɛne no sɛ tẽẽ, nanso list akuw ne .panel-groups no di nsɛ.
Inline mmoa ma kratasin sohwɛ ahorow .help-inline Ɛnnyɛ nea ɛne no sɛ pɛpɛɛpɛ, nanso .help-blockɛte saa ara.
Nkɔso kɔla ahorow a ɛnyɛ bar-level .progress-info .progress-success .progress-warning .progress-danger Fa di dwuma .progress-bar-*wɔ .progress-barmmom no so.

Nsɛm foforo a wɔakyerɛw

Nsakrae afoforo a aba wɔ v3.0 mu no ntumi nna adi ntɛm ara. Wɔayɛ nsakrae wɔ nnyinaso adesua ahorow, akwan atitiriw, ne nneyɛe ahorow mu ama nsakrae ne yɛn mobile kwan a edi kan no. Nsɛm a wɔahyehyɛ no fã bi ni:

  • Sɛnea wɔahyɛ no, mprempren text-based form controls no nya styling kakraa bi pɛ. Sɛ wopɛ focus colors ne rounded corners a, fa .form-controlclass no di dwuma wɔ element no so to style.
  • Text-based form controls a .form-controlclass a wɔde adi dwuma no mprempren trɛw 100% default so. Wrap inputs mu <div class="col-*"></div>na hwɛ input widths so.
  • .badgenni nsɛm a ɛfa ho (-success,-primary,etc..) adesua ahorow bio.
  • .btnɛsɛ sɛ wɔde di dwuma nso de .btn-defaultnya "default" button no.
  • .rowmprempren ɛyɛ nsu.
  • Mfonini ahorow no ntumi nyɛ adwuma bio default so. Fa di dwuma .img-responsivema nsu <img>kɛse.
  • Ahyɛnsode ahorow no, mprempren .glyphicon, mprempren egyina font so. Icons nso hwehwɛ base ne icon class (sɛ nhwɛso no .glyphicon .glyphicon-asterisk).
  • Wɔagyae Typeahead, de apene so sɛ wɔde Twitter Typeahead bedi dwuma .
  • Modal markup asesa kɛse. Mprempren wɔabɔ .modal-header, .modal-body, ne .modal-footerafã horow no mu .modal-contentna .modal-dialogama wɔatumi ayɛ mobile styling ne suban a eye. .hideAfei nso, ɛnsɛ sɛ wobisa bio .modalwɔ wo markup no mu.
  • Ɛde besi v3.1.0 no, HTML a remotemodal option no de ahyɛ mu no afei de wɔde ahyɛ .modal-content(efi v3.0.0 kosi v3.0.3, akɔ .modal) no mu sen sɛ wɔde bɛkɔ .modal-body. Wei ma wo nso yɛ mmerɛ sɛ wobɛsesa modal no ti ne ase, ɛnyɛ modal nipadua no nko ara.
  • Checkbox ne radio features a ɛwɔ button.js plugin no mu mprempren abien no nyinaa de di dwuma data-toggle="buttons"sen data-toggle="buttons-checkbox"anaasɛ wɔde di dwuma data-toggle="buttons-radio"wɔ wɔn markup no mu.
  • JavaScript nsɛm a esisi no yɛ nea wɔde din ahyɛ mu. Sɛ nhwɛso no, sɛ wopɛ sɛ wodi modal "kyerɛ" adeyɛ no ho dwuma a, fa 'show.bs.modal'. Sɛ tabs "akyerɛ" fa 'shown.bs.tab', ne nea ɛkeka ho.

Sɛ wopɛ nsɛm pii fa upgrade a wobɛkɔ v3.0 so, ne code snippets a ɛfiri mpɔtam hɔ a, hwɛ Bootply .