Inahama kutoka 2.x hadi 3.0

Bootstrap 3 haiendani nyuma na v2.x. Tumia sehemu hii kama mwongozo wa jumla wa kuboresha kutoka v2.x hadi v3.0. Kwa muhtasari mpana, angalia ni nini kipya katika tangazo la toleo la v3.0.

Mabadiliko makubwa ya darasa

Jedwali hili linaonyesha mabadiliko ya mtindo kati ya v2.x na 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 Gawanya ndani.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Gawanya ndani.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

Nini mpya

Tumeongeza vipengele vipya na kubadilisha baadhi ya vilivyopo. Hapa kuna mitindo mipya au iliyosasishwa.

Kipengele Maelezo
Paneli .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Orodhesha vikundi .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Gridi ndogo zaidi (<768px) .col-xs-*
Gridi ndogo (≥768px) .col-sm-*
Gridi ya wastani (≥992px) .col-md-*
Gridi kubwa (≥1200px) .col-lg-*
Madarasa ya matumizi yanayojibu (≥1200px) .visible-lg .hidden-lg
Vipunguzo .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Sukuma .col-sm-push-* .col-md-push-* .col-lg-push-*
Vuta .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Ukubwa wa urefu wa pembejeo .input-sm .input-lg
Vikundi vya kuingiza .input-group .input-group-addon .input-group-btn
Vidhibiti vya fomu .form-control .form-group
Vifungo vya ukubwa wa kikundi .btn-group-xs .btn-group-sm .btn-group-lg
Maandishi ya upau wa urambazaji .navbar-text
Kichwa cha upau wa urambazaji .navbar-header
Vichupo / vidonge vilivyohesabiwa haki .nav-justified
Picha za mwitikio .img-responsive
Safu za jedwali za muktadha .success .danger .warning .active .info
Paneli za muktadha .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Picha ya kijipicha .img-thumbnail
Vizuri ukubwa .well-sm .well-lg
Viungo vya tahadhari .alert-link

Ni nini kimeondolewa

Vipengele vifuatavyo vimetolewa au kubadilishwa katika v3.0.

Kipengele Imeondolewa kutoka 2.x 3.0 Sawa
Vitendo vya fomu .form-actions N/A
Tafuta fomu .form-search N/A
Unda kikundi na habari .control-group.info N/A
Ukubwa wa uingizaji wa upana usiobadilika .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Tumia .form-controlna mfumo wa gridi badala yake.
Zuia ingizo la fomu ya kiwango .input-block-level Hakuna sawa moja kwa moja, lakini udhibiti wa fomu ni sawa.
Vifungo kinyume .btn-inverse N/A
Safu ya kioevu .row-fluid .row(hakuna gridi ya kudumu)
Hudhibiti kanga .controls N/A
Vidhibiti safu .controls-row .rowau.form-group
Upau wa urambazaji wa ndani .navbar-inner N/A
Vigawanyaji vya wima vya Upau wa Urambazaji .navbar .divider-vertical N/A
Menyu ndogo kunjuzi .dropdown-submenu N/A
Mipangilio ya vichupo .tabs-left .tabs-right .tabs-below N/A
Sehemu ya kidonge yenye kidonge .pill-content .tab-content
Kidirisha cha eneo la kichupo chenye kidonge .pill-pane .tab-pane
Orodha za Nav .nav-list .nav-header Hakuna sawa moja kwa moja, lakini vikundi vya orodha na .panel-groups vinafanana.
Usaidizi wa ndani wa vidhibiti vya fomu .help-inline Hakuna sawa kabisa, lakini .help-blockni sawa.
Rangi zisizo za kiwango cha upau wa maendeleo .progress-info .progress-success .progress-warning .progress-danger Tumia .progress-bar-*kwenye .progress-barbadala yake.

Vidokezo vya ziada

Mabadiliko mengine katika v3.0 hayaonekani mara moja. Madarasa ya msingi, mitindo kuu, na tabia zimerekebishwa kwa unyumbufu na mbinu yetu ya kwanza ya rununu . Hapa kuna orodha ya sehemu:

  • Kwa chaguo-msingi, vidhibiti vya fomu vinavyotegemea maandishi sasa vinapokea mitindo ndogo tu. Kwa rangi za kuzingatia na pembe za mviringo, tumia .form-controldarasa kwenye kipengele kwa mtindo.
  • Vidhibiti vya fomu vinavyotegemea maandishi na .form-controldarasa linalotumika sasa vina upana wa 100% kwa chaguomsingi. Funga pembejeo ndani <div class="col-*"></div>ili kudhibiti upana wa ingizo.
  • .badgehaina tena madarasa ya muktadha (-mafanikio,-msingi, nk..).
  • .btnlazima pia utumie .btn-defaultkupata kitufe cha "chaguo-msingi".
  • .rowsasa ni maji.
  • Picha hazifanyi kazi tena kwa chaguo-msingi. Tumia .img-responsivekwa ukubwa wa kioevu <img>.
  • Ikoni, sasa .glyphicon, zinategemea fonti. Ikoni pia zinahitaji darasa la msingi na ikoni (kwa mfano .glyphicon .glyphicon-asterisk).
  • Typeahead imetupiliwa mbali, kwa kupendelea kutumia Twitter Typeahead .
  • Alama ya modal imebadilika sana. The .modal-header, .modal-body, na .modal-footersehemu sasa zimefungwa ndani .modal-contentna .modal-dialogkwa mitindo na tabia bora ya rununu. Pia, hupaswi kuomba tena .hidekwenye .modallebo yako.
  • Kufikia v3.1.0, HTML iliyopakiwa na remotechaguo la modal sasa .modal-contentinadungwa kwenye (kutoka v3.0.0 hadi v3.0.3, hadi kwenye .modal) badala ya kwenye .modal-body. Hii hukuruhusu pia kubadilisha kwa urahisi kichwa na kijachini cha modali, sio mwili wa modali tu.
  • Kisanduku cha kuteua na vipengele vya redio vya programu-jalizi ya button.js sasa vyote vinatumika data-toggle="buttons"badala ya data-toggle="buttons-checkbox"au data-toggle="buttons-radio"katika uwekaji lebo yao.
  • Matukio ya JavaScript yametengwa kwa majina. Kwa mfano, kushughulikia tukio la "show" la modal, tumia 'show.bs.modal'. Kwa tabo "zilizoonyeshwa" tumia 'shown.bs.tab', nk.

Kwa maelezo zaidi kuhusu kupata toleo jipya la v3.0, na vijisehemu vya msimbo kutoka kwa jumuiya, angalia Bootply .