Perkeliama iš 2.x į 3.0

Bootstrap 3 atgal nesuderinamas su v2.x. Naudokite šį skyrių kaip bendrą vadovą, kaip atnaujinti iš v2.x į v3.0. Norėdami gauti platesnę apžvalgą, peržiūrėkite, kas naujo yra v3.0 išleidimo pranešime.

Pagrindiniai klasių pokyčiai

Šioje lentelėje rodomi stiliaus pokyčiai tarp v2.x ir 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 Pasidalinti į.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Pasidalinti į.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

Kas naujo

Pridėjome naujų elementų ir pakeitėme kai kuriuos esamus. Čia yra nauji arba atnaujinti stiliai.

Elementas apibūdinimas
Plokštės .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Išvardykite grupes .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glifikonai .glyphicon
Džumbotronas .jumbotron
Itin mažas tinklelis (<768 pikseliai) .col-xs-*
Mažas tinklelis (≥ 768 piks.) .col-sm-*
Vidutinis tinklelis (≥ 992 piks.) .col-md-*
Didelis tinklelis (≥ 1200 piks.) .col-lg-*
Interaktyvios naudingumo klasės (≥ 1200 pikselių) .visible-lg .hidden-lg
Užskaitymai .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Stumti .col-sm-push-* .col-md-push-* .col-lg-push-*
Traukti .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Įvesties aukščio dydžiai .input-sm .input-lg
Įvesties grupės .input-group .input-group-addon .input-group-btn
Formos valdikliai .form-control .form-group
Mygtukų grupių dydžiai .btn-group-xs .btn-group-sm .btn-group-lg
Navigacijos juostos tekstas .navbar-text
Navigacijos juostos antraštė .navbar-header
Pagrįsti skirtukai / tabletės .nav-justified
Atsakingi vaizdai .img-responsive
Kontekstinės lentelės eilutės .success .danger .warning .active .info
Kontekstinės plokštės .panel-success .panel-danger .panel-warning .panel-info
Modalinis .modal-dialog .modal-content
Miniatiūros vaizdas .img-thumbnail
Šulinių dydžiai .well-sm .well-lg
Įspėjimo nuorodos .alert-link

Kas pašalinta

Šie elementai buvo atmesti arba pakeisti 3.0 versijoje.

Elementas Pašalinta iš 2.x 3.0 ekvivalentas
Formos veiksmai .form-actions N/A
Paieškos forma .form-search N/A
Suformuokite grupę su informacija .control-group.info N/A
Fiksuoto pločio įvesties dydžiai .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Vietoj to naudokite .form-controlir tinklelio sistemą .
Bloko lygio formos įvestis .input-block-level Nėra tiesioginio atitikmens, tačiau formų valdikliai yra panašūs.
Atvirkštiniai mygtukai .btn-inverse N/A
Skysčių eilė .row-fluid .row(nebėra fiksuoto tinklelio)
Valdo apvalkalą .controls N/A
Valdiklių eilutė .controls-row .rowarba.form-group
Vidinė navigacijos juosta .navbar-inner N/A
Navbar vertikalios pertvaros .navbar .divider-vertical N/A
Išskleidžiamasis submeniu .dropdown-submenu N/A
Skirtukų lygiavimas .tabs-left .tabs-right .tabs-below N/A
Tablečių pagrindu skirta tabuliavimo sritis .pill-content .tab-content
Tablečių pagrindu esanti skirtukų srities sritis .pill-pane .tab-pane
Navigacijos sąrašai .nav-list .nav-header Nėra tiesioginio atitikmens, bet sąrašų grupės ir .panel-groups yra panašūs.
Tiesioginė formų valdiklių pagalba .help-inline Tikslaus atitikmens nėra, bet .help-blockpanašus.
Ne juostos lygio progreso spalvos .progress-info .progress-success .progress-warning .progress-danger Naudokite .progress-bar-*vietoj .progress-bar.

Papildomi užrašai

Kiti 3.0 versijos pakeitimai nėra akivaizdūs. Bazinės klasės, pagrindiniai stiliai ir elgsena buvo pritaikyti lankstumui ir mūsų mobiliajam požiūriui. Štai dalinis sąrašas:

  • Pagal numatytuosius nustatymus teksto formos valdikliai dabar turi tik minimalų stilių. Norėdami sufokusuoti spalvas ir suapvalintus kampus, .form-controlstiliui pritaikykite elemento klasę.
  • .form-controlPagal numatytuosius nustatymus teksto formos valdikliai, kuriems taikoma klasė, dabar yra 100 % pločio. Apvyniokite įvestis viduje <div class="col-*"></div>, kad valdytumėte įvesties plotį.
  • .badgenebeturi kontekstinių (-sėkmės,-pradinių ir kt..) klasių.
  • .btntaip pat turi naudoti .btn-defaultnorėdami gauti mygtuką „numatytasis“.
  • .rowdabar yra skystas.
  • Pagal numatytuosius nustatymus vaizdai nebereaguoja. Naudokite .img-responsiveskysčio <img>dydžiui.
  • Piktogramos dabar .glyphiconyra pagrįstos šriftu. Piktogramoms taip pat reikalinga bazė ir piktogramų klasė (pvz ., .glyphicon .glyphicon-asterisk).
  • „Typeahead“ atsisakyta, o „ Twitter Typeahead “ naudojimui .
  • Modalinis žymėjimas labai pasikeitė. Skiltys .modal-header, .modal-body, ir .modal-footerdabar yra apvyniotos .modal-contentir .modal-dialogužtikrina geresnį mobilųjį stilių ir elgesį. .hideBe to , .modalsavo žymėjime nebeturėtumėte taikyti .
  • Nuo 3.1.0 versijos modalinės parinkties įkeltas HTML remotedabar įterpiamas į .modal-content(nuo v3.0.0 iki v3.0.3, į .modal), o ne į .modal-body. Tai taip pat leidžia lengvai keisti modalo antraštę ir poraštę, o ne tik modalo korpusą.
  • Papildinio button.js žymimieji laukeliai ir radijo funkcijos dabar naudojami data-toggle="buttons"vietoje data-toggle="buttons-checkbox"arba data-toggle="buttons-radio"žymėjime.
  • „JavaScript“ įvykiai yra su vardų tarpais. Pavyzdžiui, norėdami apdoroti modalinį „show“ įvykį, naudokite 'show.bs.modal'. „Rodomiems“ skirtukams naudokite 'shown.bs.tab'ir kt.

Norėdami gauti daugiau informacijos apie naujovinimą į v3.0 ir kodo fragmentus iš bendruomenės, žr . Bootply .