Migreer van 2.x na 3.0

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.

Groot klasveranderinge

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

Wat's nuut

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

Wat verwyder is

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-controlen 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 .rowof.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 tabbare area paneel .pill-pane .tab-pane
Nav lyste .nav-list .nav-header Geen direkte ekwivalent nie, maar lysgroepe en .panel-groups is soortgelyk.
Inlyn hulp vir vormkontroles .help-inline Geen presiese ekwivalent nie, maar .help-blockis soortgelyk.
Nie-staafvlak-vorderingskleure .progress-info .progress-success .progress-warning .progress-danger Gebruik eerder .progress-bar-*op die ..progress-bar

Bykomende notas

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:

  • By verstek kry teksgebaseerde vormkontroles nou slegs minimale stilering. Vir fokuskleure en afgeronde hoeke, pas die .form-controlklas op die element toe om te styl.
  • Teksgebaseerde vormkontroles met die .form-controlklas toegepas is nou by verstek 100% wyd. Draai insette binne <div class="col-*"></div>om invoerwydtes te beheer.
  • .badgehet nie meer kontekstuele (-sukses,-primêre, ens..) klasse nie.
  • .btnmoet ook gebruik .btn-defaultom die "default"-knoppie te kry.
  • .rowis nou vloeibaar.
  • Prente reageer nie meer by verstek nie. Gebruik .img-responsivevir vloeistofgrootte <img>.
  • Die ikone, nou .glyphicon, is nou lettertipe gebaseer. Ikone vereis ook 'n basis- en ikoonklas (bv .glyphicon .glyphicon-asterisk. ).
  • Typeahead is laat vaar, ten gunste van die gebruik van Twitter Typeahead .
  • Modale opmaak het aansienlik verander. Die .modal-header, .modal-body, en .modal-footerafdelings is nou toegedraai .modal-contenten .modal-dialogvir beter mobiele stilering en gedrag. Jy moet ook nie meer aansoek doen .hideom .modalin jou opmaak nie.
  • Vanaf v3.1.0 word die HTML wat deur die remotemodale 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.
  • Die merkblokkie en radiokenmerke van die button.js-inprop gebruik nou albei in data-toggle="buttons"plaas van data-toggle="buttons-checkbox"of data-toggle="buttons-radio"in hul opmaak.
  • JavaScript-gebeurtenisse is met name gespasieer. Byvoorbeeld, om die modale "show" gebeurtenis te hanteer, gebruik '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 .