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.
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.
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.
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 |
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 |
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-control kple 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 |
.row alo.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-group s ɖi. |
Kpekpeɖeŋunana le fli me na agbalẽviwo dzi kpɔkpɔ | .help-inline |
Menye esi sɔ kplii tututu o, gake .help-block eɖii nenema. |
Non-bar-dzidzenu ŋgɔyiyi amadedewo | .progress-info .progress-success .progress-warning .progress-danger |
Zãe .progress-bar-* ɖe .progress-bar eteƒe. |
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:
.form-control
klass si le element la dzi la de atsyã me..form-control
klass si wozã la keke 100% fifia le gɔmedzedzea me. Kpe nyawo ɖe eme <div class="col-*"></div>
be nàkpɔ nyawo ƒe kekeme dzi..badge
megale nya siwo ƒo xlãe (-dzidzedzekpɔkpɔ,-gɔmedzedze,etc..) ƒe klasswo me o..btn
ele be woazã hã atsɔ .btn-default
axɔ "default" ƒe dzesi..row
nye tsi fifia..img-responsive
na tsi <img>
ƒe lolome..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
)..modal-header
, .modal-body
, kple .modal-footer
akpaawo ɖe asitelefon dzi ƒe atsyã .modal-content
kple .modal-dialog
nuwɔna si nyo wu me fifia. Azɔ hã, mele .hide
be .modal
nàgabia tso asiwò le wò dzesidegbalẽvia me o.remote
modal tiatia la de la me fifia ɖe .modal-content
(tso v3.0.0 va ɖo v3.0.3, ɖe .modal
) me le esi teƒe be woatsɔe ade .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.data-toggle="buttons"
teƒe data-toggle="buttons-checkbox"
alo data-toggle="buttons-radio"
le woƒe dzesidede me.'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 .