Migrasyon nan v3.x
Gid sou fason pou ajou soti nan Bootstrap v2.x rive nan v3.x ak anfaz sou gwo chanjman, sa ki nouvo, ak sa ki te retire.
Gid sou fason pou ajou soti nan Bootstrap v2.x rive nan v3.x ak anfaz sou gwo chanjman, sa ki nouvo, ak sa ki te retire.
Bootstrap 3 pa bak konpatib ak v2.x. Sèvi ak seksyon sa a kòm yon gid jeneral pou amelyore soti nan v2.x rive nan v3.0. Pou yon apèsi pi laj, gade sa ki nouvo nan anons lage v3.0 la.
Tablo sa a montre chanjman style ant v2.x ak 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 |
Divize an.visible-md .visible-lg |
.hidden-phone |
.hidden-xs |
.hidden-tablet |
.hidden-sm |
.hidden-desktop |
Divize an.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 |
Nou te ajoute nouvo eleman epi chanje kèk eleman ki deja egziste. Isit la yo se nouvo estil yo oswa mete ajou.
Eleman | Deskripsyon |
---|---|
Panno yo | .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse |
Lis gwoup yo | .list-group .list-group-item .list-group-item-text .list-group-item-heading |
Glyphicons | .glyphicon |
Jumbotron | .jumbotron |
Siplemantè ti kadriyaj (<768px) | .col-xs-* |
Ti kadriyaj (≥768px) | .col-sm-* |
Kadriyaj mwayen (≥992px) | .col-md-* |
Gwo kadriyaj (≥1200px) | .col-lg-* |
Klas sèvis piblik ki reponn (≥1200px) | .visible-lg .hidden-lg |
Offsets | .col-sm-offset-* .col-md-offset-* .col-lg-offset-* |
Pouse | .col-sm-push-* .col-md-push-* .col-lg-push-* |
Rale | .col-sm-pull-* .col-md-pull-* .col-lg-pull-* |
Antre gwosè wotè | .input-sm .input-lg |
Antre gwoup yo | .input-group .input-group-addon .input-group-btn |
Kontwòl fòm | .form-control .form-group |
Gwosè gwoup bouton | .btn-group-xs .btn-group-sm .btn-group-lg |
Navbar tèks | .navbar-text |
Navbar header | .navbar-header |
Onglet jistifye / grenn | .nav-justified |
Imaj reponn | .img-responsive |
Ranje kontèks tab la | .success .danger .warning .active .info |
Panno kontèks | .panel-success .panel-danger .panel-warning .panel-info |
Modal | .modal-dialog .modal-content |
Imaj miniature | .img-thumbnail |
Byen gwosè | .well-sm .well-lg |
Avètisman lyen | .alert-link |
Eleman sa yo te tonbe oswa chanje nan v3.0.
Eleman | Retire nan 2.x | 3.0 ekivalan |
---|---|---|
Fòme aksyon yo | .form-actions |
N/A |
Fòm rechèch | .form-search |
N/A |
Fòme gwoup ak enfòmasyon | .control-group.info |
N/A |
Gwosè opinyon fiks lajè | .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge |
Sèvi .form-control ak ak sistèm nan gri olye. |
Blòk nivo fòm antre | .input-block-level |
Pa gen ekivalan dirèk, men kontwòl fòm yo sanble. |
Bouton envès | .btn-inverse |
N/A |
Ranje likid | .row-fluid |
.row (pa gen plis griy fiks) |
Kontwole wrapper | .controls |
N/A |
Kontwole ranje | .controls-row |
.row oswa.form-group |
Navbar enteryè | .navbar-inner |
N/A |
Navbar divizyon vètikal | .navbar .divider-vertical |
N/A |
Sou-menu déroulant | .dropdown-submenu |
N/A |
Aliyman tab | .tabs-left .tabs-right .tabs-below |
N/A |
Zòn tabtab ki baze sou grenn | .pill-content |
.tab-content |
Vèt zòn tabtab ki baze sou grenn | .pill-pane |
.tab-pane |
Nav lis | .nav-list .nav-header |
Pa gen ekivalan dirèk, men gwoup lis ak .panel-group s yo sanble. |
Èd Inline pou kontwòl fòm | .help-inline |
Pa gen ekivalan egzak, men .help-block se menm jan an. |
Koulè pwogrè ki pa nivo bar | .progress-info .progress-success .progress-warning .progress-danger |
Sèvi ak .progress-bar-* sou .progress-bar olye de sa. |
Lòt chanjman nan v3.0 pa parèt imedyatman. Klas debaz yo, estil kle, ak konpòtman yo te ajiste pou fleksibilite ak premye apwòch mobil nou an. Men yon lis pasyèl:
.form-control
klas la sou eleman nan style..form-control
klas la aplike yo kounye a se 100% lajè pa default. Vlope entrées anndan <div class="col-*"></div>
pou kontwole lajè D'..badge
pa gen klas kontèks ankò (-siksè,-primè, elatriye.)..btn
dwe itilize tou .btn-default
pou jwenn bouton "default"..row
se kounye a likid..img-responsive
likid .<img>
.glyphicon
yo baze sou font. Ikon yo mande tou yon baz ak klas ikon (egzanp .glyphicon .glyphicon-asterisk
)..modal-header
, .modal-body
, ak .modal-footer
yo kounye a vlope nan .modal-content
ak .modal-dialog
pou pi bon manier mobil ak konpòtman. Epitou, ou pa ta dwe aplike .hide
nan .modal
maketing ou ankò.remote
opsyon modal la kounye a enjekte nan .modal-content
(soti nan v3.0.0 rive nan v3.0.3, nan .modal
) olye pou yo nan .modal-body
. Sa a pèmèt ou tou fasil varye header ak footer nan modal la, pa sèlman kò a modal.data-toggle="buttons"
olye pou yo data-toggle="buttons-checkbox"
oswa data-toggle="buttons-radio"
nan maketing yo.'show.bs.modal'
. Pou onglè "montre" itilize 'shown.bs.tab'
, elatriye.Pou plis enfòmasyon sou ajou nan v3.0, ak fragman kòd nan kominote a, gade Bootply .