We de muf go na v3.x
Gayd fɔ aw fɔ ɔpgrɛd frɔm Bootstrap v2.x to v3.x wit ɛmpɛshimɛnt pan big chenj dɛn, wetin nyu, ɛn wetin dɛn dɔn pul.
Gayd fɔ aw fɔ ɔpgrɛd frɔm Bootstrap v2.x to v3.x wit ɛmpɛshimɛnt pan big chenj dɛn, wetin nyu, ɛn wetin dɛn dɔn pul.
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.
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 |
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 |
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 |
Kɔntrol dɛn row | .controls-row |
.row ɔ.form-group |
Navbar insay de | .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-group s fiba. |
Inlayn ɛp fɔ fɔm kɔntrol dɛn | .help-inline |
Nɔ ɛksaktɔl ikwal, bɔt .help-block i 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-bar insted. |
Ɔ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:
.form-control
klas pan di ɛlimɛnt fɔ stayl..form-control
klas we dɛn aplay naw 100% waid bay difɔlt. Wrap inputs insay <div class="col-*"></div>
fɔ kɔntrol input width dɛn..badge
nɔ gɛt kɔntɛkstual (-sakses,-praymari,etc..) klas dɛn igen..btn
fɔ yuz bak .btn-default
fɔ gɛt di "difɔlt" bɔtin..row
na wata naw..img-responsive
fɔ wata .<img>
.glyphicon
, naw na font bays. Aykɔn dɛn nid bak fɔ gɛt bays ɛn aykɔn klas (ɛgz. .glyphicon .glyphicon-asterisk
)..modal-header
, .modal-body
, ɛn .modal-footer
sɛkshɔn dɛn dɔn rap naw insay .modal-content
ɛn .modal-dialog
fɔ mek dɛn stayl ɛn biev fayn fayn wan na di mobayl. Dɔn bak, yu nɔ fɔ aplay .hide
to .modal
insay yu mak igen.remote
modal 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 fɔ chenj bak izi wan di hεda ɛn fut fɔ di modal, nɔto jɔs di modal bɔdi.data-toggle="buttons"
instead data-toggle="buttons-checkbox"
ɔ data-toggle="buttons-radio"
na dɛn mak.'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 .