Wole ʋuʋum yi v3.x
Mɔfiame le alesi woawɔ adoe ɖe ŋgɔ tso Bootstrap v2.x dzi ayi v3.x dzi kple gbetete ɖe tɔtrɔ gãwo, nu yeyewo, kple nusiwo woɖe ɖa dzi.
Wole ʋuʋum tso 2.x dzi yi 3.0 dzi
Bootstrap 3 mewɔ ɖeka kple v2.x le megbe o. Zã akpa sia abe mɔfiame gbadzaa ene le asitɔtrɔ tso v2.x dzi va ɖo v3.0 ŋu. Ne èdi nyatakaka si keke ta wu la, kpɔ nu yeye siwo le v3.0 ƒe dodoɖeŋgɔ ƒe gbeƒãɖeɖea me.
Klass ƒe tɔtrɔ gãwo
Tabla sia ɖe atsyã ƒe tɔtrɔ siwo le v2.x kple v3.0 dome fia.
| Afɔɖeɖe ƒe ƒuƒoƒo 2.x | Afɔɖeɖe ƒe ƒuƒoƒo 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 |
Womae ɖe akpa vovovowo me.visible-md .visible-lg |
.hidden-phone |
.hidden-xs |
.hidden-tablet |
.hidden-sm |
.hidden-desktop |
Womae ɖe akpa vovovowo me.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 |
Nu yeye kae nye esi
Míetsɔ nu yeyewo kpee eye míetrɔ esiwo li xoxo la dometɔ aɖewo. Atsyã yeyeawo alo esiwo wowɔ yeyee lae nye esi.
| Na | Nuɖᴐɖᴐ |
|---|---|
| Panelwo ƒe akpawo | .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse |
| Ŋlɔ ƒuƒoƒoawo ɖi | .list-group .list-group-item .list-group-item-text .list-group-item-heading |
| Glyphicons ƒe nuŋɔŋlɔwo | .glyphicon |
| Jumbotron ƒe ƒuƒoƒo | .jumbotron |
| Grid sue bubu (<768px) . | .col-xs-* |
| Grid sue aɖe (≥768px) . | .col-sm-* |
| Grid si le titina (≥992px) . | .col-md-* |
| Grid gã aɖe (≥1200px) . | .col-lg-* |
| Dɔwɔnu ƒe klass siwo ɖoa nya ŋu (≥1200px) . | .visible-lg .hidden-lg |
| Nusiwo wotsɔna tsia tre ɖe nu ŋu | .col-sm-offset-* .col-md-offset-* .col-lg-offset-* |
| Tutu | .col-sm-push-* .col-md-push-* .col-lg-push-* |
| Hee | .col-sm-pull-* .col-md-pull-* .col-lg-pull-* |
| De kɔkɔme ƒe lolomewo eme | .input-sm .input-lg |
| Nusiwo wotsɔ de eme ƒe ƒuƒoƒowo | .input-group .input-group-addon .input-group-btn |
| Kpeɖodzinyawo dzi kpɔkpɔ | .form-control .form-group |
| Button ƒe ƒuƒoƒo ƒe lolomewo | .btn-group-xs .btn-group-sm .btn-group-lg |
| Navbar nuŋɔŋlɔ | .navbar-text |
| Navbar ƒe tanya | .navbar-header |
| Tabs / atikekui siwo ŋu woɖo kpee | .nav-justified |
| Nɔnɔmetata siwo ɖoa nya ŋu | .img-responsive |
| Nya siwo ƒo xlãe ƒe kplɔ̃wo ƒe fliwo | .success .danger .warning .active .info |
| Nya siwo ƒo xlãe ƒe akpawo | .panel-success .panel-danger .panel-warning .panel-info |
| Modal ƒe nɔnɔme | .modal-dialog .modal-content |
| Nɔnɔmetata sue aɖe | .img-thumbnail |
| Vudo ƒe lolomewo | .well-sm .well-lg |
| Nuxlɔ̃ame kadodowo | .alert-link |
Nusi woɖe ɖa
Woɖe nusiwo gbɔna la ɖa alo trɔ wo le v3.0 me.
| Na | Woɖee ɖa le 2.x | 3.0 Nusi sɔ kple esia |
|---|---|---|
| Wɔ nuwɔnawo | .form-actions |
N/A |
| Didi ƒe agbalẽvi | .form-search |
N/A |
| Form ƒuƒoƒo kple info | .control-group.info |
N/A |
| Fixed-width nyawo tsɔtsɔ de eme ƒe lolomewo | .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge |
Zã .form-controlkple grid ɖoɖoa boŋ. |
| Block level ƒe agbalẽvi ƒe nyawo tsɔtsɔ de eme | .input-block-level |
No direct equivalent o, gake forms controls sɔ kple wo nɔewo. |
| Trɔtrɔ ɖe megbe ƒe abɔtawo | .btn-inverse |
N/A |
| Lãmetsiwo ƒe fli | .row-fluid |
.row(grid si woɖo ɖi megali o) |
| Ekpɔa agbalẽ xatsaxatsa dzi | .controls |
N/A |
| Ekpɔa fli dzi | .controls-row |
.rowalo.form-group |
| Navbar ememetɔ | .navbar-inner |
N/A |
| Navbar tsitrenu mamawo | .navbar .divider-vertical |
N/A |
| Submenu si le fli dzi | .dropdown-submenu |
N/A |
| Tab ƒe ɖoɖowɔwɔwo | .tabs-left .tabs-right .tabs-below |
N/A |
| Tabbable ƒe teƒe si wotu ɖe atikekui dzi | .pill-content |
.tab-content |
| Tabbable ƒe teƒe ƒe akpa si wotu ɖe atikekui dzi | .pill-pane |
.tab-pane |
| Nav ŋlɔ ŋkɔwo | .nav-list .nav-header |
Menye nusi sɔ kplii tẽ o, gake ŋlɔ ƒuƒoƒowo kple .panel-groups ɖi. |
| Kpekpeɖeŋunana le fli me na agbalẽviwo dzi kpɔkpɔ | .help-inline |
Menye esi sɔ kplii tututu o, gake .help-blockeɖii nenema. |
| Non-bar-dzidzenu ŋgɔyiyi amadedewo | .progress-info .progress-success .progress-warning .progress-danger |
Zãe .progress-bar-*ɖe .progress-bareteƒe. |
Nuŋlɔɖi bubuwo
Tɔtrɔ bubu siwo va le v3.0 me la medzena enumake o. Wotrɔ asi le gɔmeɖoanyi ƒe klasswo, atsyã veviwo, kple nuwɔnawo ŋu hena asitɔtrɔ le nɔnɔmewo ŋu kple míaƒe asitelefon gbãtɔ ƒe mɔnu. Nusiwo woŋlɔ ƒe akpa aɖee nye esi:
- Le gɔmedzedzea me la, atsyã sue aɖe koe xɔa nuŋɔŋlɔ si wotu ɖe nuŋɔŋlɔ dzi fifia. Ne èdi be yeakpɔ amadede siwo wotsɔna léa ŋku ɖe nu ŋu kple dzogoe siwo le goglo la, tsɔ
.form-controlklass si le element la dzi la de atsyã me. - Text-based form controls kple
.form-controlklass si wozã la keke 100% fifia le gɔmedzedzea me. Kpe nya siwo wotsɔ de eme la ɖe eme<div class="col-*"></div>be nàkpɔ nyawo ƒe kekeme dzi. .badgemegale nya siwo ƒo xlãe (-dzidzedzekpɔkpɔ,-gɔmedzedze,etc..) ƒe klasswo me o..btnele be woazã hã atsɔ.btn-defaultaxɔ "default" ƒe dzesi..rownye tsi fifia.- Nɔnɔmetatawo megawɔa dɔ le gɔmedzedzea me o. Zãe
.img-responsivena tsi<img>ƒe lolome. - Nɔnɔmetataawo, fifia
.glyphicon, nye esiwo wotu ɖe ŋɔŋlɔdzesiwo dzi azɔ. Nɔnɔmetatawo hã bia gɔmeɖoanyi kple nɔnɔmetata ƒe hatsotso (le kpɔɖeŋu me.glyphicon .glyphicon-asterisk). - Woɖe asi le Typeahead ŋu, tsɔ da asi ɖe Twitter Typeahead zazã dzi .
- Modal markup trɔ ŋutɔ. Woxatsa
.modal-header,.modal-body, kple.modal-footerakpaawo ɖe asitelefon dzi ƒe atsyã.modal-contentkple.modal-dialognuwɔna si nyo wu me fifia. Azɔ hã, mele be nàgabia tso asiwò.hideo.modalnàgabia tso asiwò le wò dzesidegbalẽvia me o. - Tso v3.1.0 dzi la, HTML si
remotemodal tiatia la tsɔ de eme la le.modal-content(tso v3.0.0 va ɖo v3.0.3, ɖe.modal) me azɔ tsɔ wu be woatsɔe ade eme.modal-body. Esia na be nàte ŋu atrɔ asi le modal ƒe ta kple afɔti hã ŋu bɔbɔe, ke menye modal ƒe ŋutilã ɖeɖeko o. - Fifia button.js ƒe kpeɖeŋutɔ ƒe dzesiɖaka kple radio ƒe nɔnɔmewo siaa zãna
data-toggle="buttons"ɖedata-toggle="buttons-checkbox"alo teƒedata-toggle="buttons-radio"le woƒe dzesidede me. - JavaScript nudzɔdzɔwo nye ŋkɔwo ƒe dometsotso. Le kpɔɖeŋu me, be nàkpɔ modal "ɖee fia" nudzɔdzɔa gbɔ la, zã
'show.bs.modal'. Le tabs "woɖee fia" zã'shown.bs.tab', kple bubuawo.
Ne èdi nyatakaka bubuwo tso tɔtrɔ ɖe v3.0 ŋu, kple kɔda ƒe akpa aɖewo tso nutoa me ŋu la, kpɔ Bootply .