Migrɛt frɔm 2.x to 3.0

Bootstrap 3 nɔ de bak-wɔd kɔmpitabl wit v2.x. Yuz dis sɛkshɔn as jenɛral gayd fɔ ɔpgrɛd frɔm v2.x to v3.0. Fɔ wan brayt ɔvaviu, si wetin nyu na di v3.0 rilis anɔnsmɛnt.

Big big chenj dɛn na di klas

Dis tebul de sho di stayl chenj dɛn bitwin v2.x ɛn v3.0.

Bootstrap na 2.x Bootstrap na 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 Split insay.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Split insay.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

Wetin na nyu tin

Wi dɔn ad nyu ɛlimɛnt dɛn ɛn chenj sɔm wan dɛn we dɔn de. Na di nyu ɔ ɔpdet stayl dɛn ya.

Tin Tɔk bɔt
Panɛl dɛn .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Lista di grup dɛn .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glifikɔn dɛn .glyphicon
Jumbotron we dɛn kɔl Jumbotron .jumbotron
Ekstra smɔl grid (<768px) .col-xs-*
Smɔl grid (≥768px) . .col-sm-*
Grid we de midul (≥992px) .col-md-*
Big grid (≥1200px) . .col-lg-*
Rispɔnsiv yutiliti klas dɛn (≥1200px) . .visible-lg .hidden-lg
Ɔfset dɛn .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Push .col-sm-push-* .col-md-push-* .col-lg-push-*
Drɔ .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Input ayt saiz dɛn .input-sm .input-lg
Input grup dɛn .input-group .input-group-addon .input-group-btn
Fɔm kɔntrol dɛn .form-control .form-group
Bɔtin grup saiz dɛn .btn-group-xs .btn-group-sm .btn-group-lg
Navbar tɛks .navbar-text
Navbar di hεda .navbar-header
Tab dɛn / pils dɛn we dɛn jɔstifay .nav-justified
Imej dɛn we de ansa .img-responsive
Di tebul row dɛn we de na di kɔntɛks .success .danger .warning .active .info
Panɛl dɛn we de insay di kɔntɛks .panel-success .panel-danger .panel-warning .panel-info
Modal we de sho aw fɔ du am .modal-dialog .modal-content
Imej we gɛt smɔl pikchɔ dɛn .img-thumbnail
Wɛl saiz dɛn .well-sm .well-lg
Alɛrt link dɛn .alert-link

Wetin dɛn dɔn pul

Dɛn dɔn drɔp ɔ chenj di ɛlimɛnt dɛn we de dɔŋ ya na v3.0.

Tin Dɛn dɔn pul am na 2.x 3.0 Di sem tin
Fɔm akshɔn dɛn .form-actions N/A fɔ di wan dɛn we de
Fɔm fɔ fɛn tin dɛn .form-search N/A fɔ di wan dɛn we de
Fom grup wit info .control-group.info N/A fɔ di wan dɛn we de
Fiks-wid input saiz dɛn .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Yuz .form-controlɛn di grid sistem insted.
Blɔk lɛvɛl fɔm input .input-block-level Nɔ dairekt ikwal, bɔt fɔm kɔntrol dɛn fiba.
Invas bɔtin dɛn .btn-inverse N/A fɔ di wan dɛn we de
Fluid row we de na di row .row-fluid .row(nɔ gɛt mɔ fiks grid)
Kontrol di wrap .controls N/A fɔ di wan dɛn we de
Kontrol di row .controls-row .rowɔ.form-group
Navbar we de insay .navbar-inner N/A fɔ di wan dɛn we de
Navbar vertikal divayda dɛn .navbar .divider-vertical N/A fɔ di wan dɛn we de
Di sabmɛnyu we de drɔp dɔŋ .dropdown-submenu N/A fɔ di wan dɛn we de
Tab alaynɛshɔn dɛn .tabs-left .tabs-right .tabs-below N/A fɔ di wan dɛn we de
Pil-based tabbul eria .pill-content .tab-content
Pil-based tabbul eria pan .pill-pane .tab-pane
Nav list dɛn .nav-list .nav-header Nɔ dairekt ikwal, bɔt list grup ɛn .panel-groups fiba.
Inlayn ɛp fɔ fɔm kɔntrol dɛn .help-inline Nɔ ɛksaktɔl ikwal, bɔt .help-blocki fiba am.
Nɔn-bar-lɛvel prɔgrɛs kɔlɔ dɛn .progress-info .progress-success .progress-warning .progress-danger Yuz .progress-bar-*pan di .progress-barinsted.

Ɔda tin dɛn we wi fɔ no bɔt

Ɔda chenj dɛn na v3.0 nɔ de apin wantɛm wantɛm. Bays klas, ki stayl, ɛn bihayvya dɛn dɔn ajɔst fɔ fleksibiliti ɛn wi mobayl fɔs we fɔ du tin. Na dis na wan pat pan di list:

  • Bay difɔlt, tɛks-bɛs fɔm kɔntrol dɛn naw de gɛt smɔl stayl nɔmɔ. Fɔ fɔs kɔlɔ ɛn rawnd kɔna, aplay di .form-controlklas pan di ɛlimɛnt fɔ stayl.
  • Tekst-bez fɔm kɔntrol wit di .form-controlklas we dɛn aplay naw 100% waid bay difɔlt. Wrap inputs insay <div class="col-*"></div>fɔ kɔntrol input width dɛn.
  • .badgenɔ gɛt kɔntɛkstual (-sakses,-praymari,etc..) klas dɛn igen.
  • .btnfɔ yuz bak .btn-defaultfɔ gɛt di "difɔlt" bɔtin.
  • .rowna wata naw.
  • Imej dɛn nɔ de ansa igen bay difɔlt. Yuz fɔ di sayz .img-responsivefɔ wata .<img>
  • Di aykɔn dɛn, naw .glyphicon, naw na font bays. Aykɔn dɛn nid bak fɔ gɛt bays ɛn aykɔn klas (ɛgz. .glyphicon .glyphicon-asterisk).
  • Dɛn dɔn drɔp Typeahead, fɔ yuz Twitter Typeahead .
  • Modal mak-ap dɔn chenj bad bad wan. Di .modal-header, .modal-body, ɛn .modal-footersɛkshɔn dɛn dɔn rap naw insay .modal-contentɛn .modal-dialogfɔ mek dɛn stayl ɛn biev fayn fayn wan na di mobayl. Dɔn bak, yu nɔ fɔ aplay .hideto .modalinsay yu mak igen.
  • As of v3.1.0, di HTML we di remotemodal opshɔn lod dɔn injɛkt naw insay di .modal-content(frɔm v3.0.0 to v3.0.3, insay di .modal) instead fɔ insay di .modal-body. Dis de mek yu ebul bak izi wan fɔ chenj di hεda ɛn fut fɔ di modal, nɔto jɔs di modal bɔdi.
  • Di chɛkbɔks ɛn redio ficha dɛn na di button.js plɔgin naw dɛn ɔl tu de yuz data-toggle="buttons"instead data-toggle="buttons-checkbox"ɔ data-toggle="buttons-radio"na dɛn mak.
  • JavaSkript ivin dɛn gɛt nemspɛs. Fɔ ɛgzampul, fɔ handle di modal "sho" ivin, yuz 'show.bs.modal'. Fɔ tab dɛn "sho" yuz 'shown.bs.tab', ɛn ɔda wan dɛn.

Fɔ no mɔ bɔt aw fɔ ɔpgrɛd to v3.0, ɛn kɔd snipɛt dɛn frɔm di kɔmyuniti, si Bootply .