Inahamia v3.x
Mwongozo wa jinsi ya kupata toleo jipya la Bootstrap v2.x hadi v3.x kwa kusisitiza mabadiliko makubwa, ni nini kipya, na kile ambacho kimeondolewa.
Mwongozo wa jinsi ya kupata toleo jipya la Bootstrap v2.x hadi v3.x kwa kusisitiza mabadiliko makubwa, ni nini kipya, na kile ambacho kimeondolewa.
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.
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 |
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 |
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-control na 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 |
.row au.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-group s vinafanana. |
Usaidizi wa ndani wa vidhibiti vya fomu | .help-inline |
Hakuna sawa kabisa, lakini .help-block ni sawa. |
Rangi zisizo za kiwango cha upau wa maendeleo | .progress-info .progress-success .progress-warning .progress-danger |
Tumia .progress-bar-* kwenye .progress-bar badala yake. |
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:
.form-control
darasa kwenye kipengele kwa mtindo..form-control
darasa linalotumika sasa vina upana wa 100% kwa chaguomsingi. Funga pembejeo ndani <div class="col-*"></div>
ili kudhibiti upana wa ingizo..badge
haina tena madarasa ya muktadha (-mafanikio,-msingi, nk..)..btn
lazima pia utumie .btn-default
kupata kitufe cha "chaguo-msingi"..row
sasa ni maji..img-responsive
kwa ukubwa wa kioevu <img>
..glyphicon
, zinategemea fonti. Ikoni pia zinahitaji darasa la msingi na ikoni (kwa mfano .glyphicon .glyphicon-asterisk
)..modal-header
, .modal-body
, na .modal-footer
sehemu sasa zimefungwa ndani .modal-content
na .modal-dialog
kwa mitindo na tabia bora ya rununu. Pia, hupaswi kuomba tena .hide
kwenye .modal
lebo yako.remote
chaguo la modal sasa .modal-content
inadungwa 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.data-toggle="buttons"
badala ya data-toggle="buttons-checkbox"
au data-toggle="buttons-radio"
katika uwekaji lebo yao.'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 .