Migreer tans na v3.x
Leiding oor hoe om van Bootstrap v2.x na v3.x op te gradeer met die klem op groot veranderinge, wat nuut is en wat verwyder is.
Leiding oor hoe om van Bootstrap v2.x na v3.x op te gradeer met die klem op groot veranderinge, wat nuut is en wat verwyder is.
Bootstrap 3 is nie agteruit versoenbaar met v2.x nie. Gebruik hierdie afdeling as 'n algemene gids vir die opgradering van v2.x na v3.0. Vir 'n breër oorsig, sien wat is nuut in die v3.0-vrystelling-aankondiging.
Hierdie tabel toon die stylveranderinge tussen v2.x en 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 |
Verdeel in.visible-md .visible-lg |
.hidden-phone |
.hidden-xs |
.hidden-tablet |
.hidden-sm |
.hidden-desktop |
Verdeel in.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 |
Ons het nuwe elemente bygevoeg en sommige bestaande verander. Hier is die nuwe of opgedateerde style.
Element | Beskrywing |
---|---|
Panele | .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse |
Lys groepe | .list-group .list-group-item .list-group-item-text .list-group-item-heading |
Glyphicons | .glyphicon |
Jumbotron | .jumbotron |
Ekstra klein rooster (<768 px) | .col-xs-* |
Klein rooster (≥768px) | .col-sm-* |
Medium rooster (≥992px) | .col-md-* |
Groot rooster (≥1200px) | .col-lg-* |
Responsiewe nutsklasse (≥1200px) | .visible-lg .hidden-lg |
Verrekeninge | .col-sm-offset-* .col-md-offset-* .col-lg-offset-* |
Druk | .col-sm-push-* .col-md-push-* .col-lg-push-* |
Trek | .col-sm-pull-* .col-md-pull-* .col-lg-pull-* |
Invoer hoogte groottes | .input-sm .input-lg |
Invoergroepe | .input-group .input-group-addon .input-group-btn |
Vormkontroles | .form-control .form-group |
Knoppie groep groottes | .btn-group-xs .btn-group-sm .btn-group-lg |
Navbar teks | .navbar-text |
Navbar-opskrif | .navbar-header |
Geregverdigde oortjies / pille | .nav-justified |
Responsiewe beelde | .img-responsive |
Kontekstuele tabelrye | .success .danger .warning .active .info |
Kontekstuele panele | .panel-success .panel-danger .panel-warning .panel-info |
Modaal | .modal-dialog .modal-content |
Kleinkiekieprent | .img-thumbnail |
Put groottes | .well-sm .well-lg |
Waarskuwingskakels | .alert-link |
Die volgende elemente is in v3.0 laat vaar of verander.
Element | Verwyder uit 2.x | 3.0 Ekwivalent |
---|---|---|
Vorm aksies | .form-actions |
NVT |
Soek vorm | .form-search |
NVT |
Vorm groep met inligting | .control-group.info |
NVT |
Invoergroottes met vaste breedte | .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge |
Gebruik .form-control en die roosterstelsel eerder. |
Blokvlakvorminvoer | .input-block-level |
Geen direkte ekwivalent nie, maar vormkontroles is soortgelyk. |
Omgekeerde knoppies | .btn-inverse |
NVT |
Vloeistof ry | .row-fluid |
.row (nie meer vaste rooster nie) |
Beheer omhulsel | .controls |
NVT |
Beheer ry | .controls-row |
.row of.form-group |
Navbar binne | .navbar-inner |
NVT |
Navbar vertikale verdelers | .navbar .divider-vertical |
NVT |
Aftreklys subkieslys | .dropdown-submenu |
NVT |
Oortjiebelynings | .tabs-left .tabs-right .tabs-below |
NVT |
Pil-gebaseerde tabable area | .pill-content |
.tab-content |
Pil-gebaseerde paneel met tik | .pill-pane |
.tab-pane |
Nav lyste | .nav-list .nav-header |
Geen direkte ekwivalent nie, maar lysgroepe en .panel-group s is soortgelyk. |
Inlyn hulp vir vormkontroles | .help-inline |
Geen presiese ekwivalent nie, maar .help-block is soortgelyk. |
Nie-staafvlak-vorderingskleure | .progress-info .progress-success .progress-warning .progress-danger |
Gebruik eerder .progress-bar-* op die ..progress-bar |
Ander veranderinge in v3.0 is nie onmiddellik sigbaar nie. Basisklasse, sleutelstyle en gedrag is aangepas vir buigsaamheid en ons eerste mobiele benadering. Hier is 'n gedeeltelike lys:
.form-control
klas op die element toe om te styl..form-control
klas toegepas is nou by verstek 100% wyd. Draai insette binne <div class="col-*"></div>
om invoerwydtes te beheer..badge
het nie meer kontekstuele (-sukses,-primêre, ens..) klasse nie..btn
moet ook gebruik .btn-default
om die "default"-knoppie te kry..row
is nou vloeibaar..img-responsive
vir vloeistofgrootte <img>
..glyphicon
, is nou lettertipe gebaseer. Ikone vereis ook 'n basis- en ikoonklas (bv .glyphicon .glyphicon-asterisk
. )..modal-header
, .modal-body
, en .modal-footer
afdelings is nou toegedraai .modal-content
en .modal-dialog
vir beter mobiele stilering en gedrag. Jy moet ook nie meer aansoek doen .hide
om .modal
in jou opmaak nie.remote
modale opsie gelaai word, nou in die .modal-content
(van v3.0.0 tot v3.0.3, in die .modal
) ingespuit in plaas van in die .modal-body
. Dit laat jou toe om ook maklik die kop- en voetskrif van die modale te verander, nie net die modale liggaam nie.data-toggle="buttons"
plaas van data-toggle="buttons-checkbox"
of data-toggle="buttons-radio"
in hul opmaak.'show.bs.modal'
. Vir oortjies "getoon" gebruik 'shown.bs.tab'
, ens.Vir meer inligting oor die opgradering na v3.0, en kodebrokkies van die gemeenskap, sien Bootply .