Üleminek versioonilt 2.x versioonile 3.0

Bootstrap 3 ei ühildu versiooniga v2.x. Kasutage seda jaotist üldise juhendina versioonilt v2.x versioonile 3.0 üleminekuks. Laiema ülevaate saamiseks vaadake, mis on uut v3.0 väljalaske teatest.

Suured klassimuudatused

See tabel näitab stiilimuutusi v2.x ja v3.0 vahel.

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 Jaguneb.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Jaguneb.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

Mis on uut

Oleme lisanud uusi elemente ja muutnud mõnda olemasolevat. Siin on uued või värskendatud stiilid.

Element Kirjeldus
Paneelid .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Loetlege rühmad .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Eriti väike ruudustik (<768 pikslit) .col-xs-*
Väike ruudustik (≥ 768 pikslit) .col-sm-*
Keskmine ruudustik (≥ 992 pikslit) .col-md-*
Suur ruudustik (≥ 1200 pikslit) .col-lg-*
Kohanduvad kasuliku klassid (≥1200 pikslit) .visible-lg .hidden-lg
Tasumised .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Push .col-sm-push-* .col-md-push-* .col-lg-push-*
Tõmba .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Sisestage kõrguse suurused .input-sm .input-lg
Sisestusrühmad .input-group .input-group-addon .input-group-btn
Vormi juhtelemendid .form-control .form-group
Nupurühmade suurused .btn-group-xs .btn-group-sm .btn-group-lg
Naviriba tekst .navbar-text
Navbari päis .navbar-header
Põhjendatud sakid / pillid .nav-justified
Reageerivad pildid .img-responsive
Kontekstitabeli read .success .danger .warning .active .info
Kontekstuaalsed paneelid .panel-success .panel-danger .panel-warning .panel-info
Modaalne .modal-dialog .modal-content
Pisipilt .img-thumbnail
Kaevude suurused .well-sm .well-lg
Hoiatuslingid .alert-link

Mis on eemaldatud

Järgmised elemendid on versioonis 3.0 välja jäetud või muudetud.

Element 2.x-st eemaldatud 3,0 ekvivalent
Vormi toimingud .form-actions Ei kehti
Otsinguvorm .form-search Ei kehti
Moodustage teabega grupp .control-group.info Ei kehti
Fikseeritud laiusega sisendi suurused .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Kasutage selle asemel .form-controlja võrgusüsteemi .
Blokeerimistaseme vormi sisend .input-block-level Otsest ekvivalenti pole, kuid vormide juhtelemendid on sarnased.
Pöördnupud .btn-inverse Ei kehti
Vedeliku rida .row-fluid .row(pole enam fikseeritud võrku)
Juhib ümbrist .controls Ei kehti
Juhtriba .controls-row .rowvõi.form-group
Navbar sisemine .navbar-inner Ei kehti
Navbar vertikaalsed jaoturid .navbar .divider-vertical Ei kehti
Rippmenüü alammenüü .dropdown-submenu Ei kehti
Tabeldusjooned .tabs-left .tabs-right .tabs-below Ei kehti
Pillipõhine tabable ala .pill-content .tab-content
Pillipõhine vahekaartide ala paan .pill-pane .tab-pane
Navi loendid .nav-list .nav-header Otsest vastet pole, kuid loendirühmad ja .panel-groups on sarnased.
Vormide juhtelementide tekstisisene abi .help-inline Pole täpset vastet, kuid .help-blockon sarnane.
Mitte-tulbataseme edenemisvärvid .progress-info .progress-success .progress-warning .progress-danger Kasutage .progress-bar-*selle .progress-barasemel.

Lisamärkmed

Muud muudatused versioonis 3.0 ei ole kohe nähtavad. Baasklassid, võtmestiilid ja käitumisviisid on kohandatud paindlikkuse ja meie mobiilse esmase lähenemisviisi jaoks. Siin on osaline loend:

  • Vaikimisi saavad tekstipõhised vormi juhtelemendid nüüd ainult minimaalse stiili. Fookusvärvide ja ümarate nurkade puhul rakendage .form-controlstiilile elemendi klass.
  • Tekstipõhised vormi juhtelemendid, millele on .form-controlrakendatud klass, on nüüd vaikimisi 100% laiad. Mähkige sisendid <div class="col-*"></div>sisendite laiuse reguleerimiseks sisse.
  • .badgepole enam kontekstuaalseid (-edu,-esmane jne) klasse.
  • .btnpeab kasutama .btn-defaultka "vaikimisi" nupu saamiseks.
  • .rowon nüüd vedel.
  • Pildid ei reageeri enam vaikimisi. Kasutage .img-responsivevedeliku <img>suuruse jaoks.
  • Ikoonid .glyphiconon nüüd fondipõhised. Ikoonid nõuavad ka baasi ja ikooniklassi (nt .glyphicon .glyphicon-asterisk).
  • Typeahead on loobutud Twitteri Typeaheadi kasutamise kasuks .
  • Modaalne märgistus on oluliselt muutunud. Jaotised .modal-header, .modal-bodyja .modal-footeron nüüd mähitud .modal-contentning .modal-dialogparema mobiilistiili ja käitumise tagamiseks. Samuti ei tohiks te oma märgistuses enam kasutada .hide..modal
  • Alates versioonist 3.1.0 sisestatakse modaalsuvandiga laaditud HTML remotenüüd .modal-content(v3.0.0 kuni v3.0.3, .modal) asemel .modal-body. See võimaldab teil hõlpsasti muuta ka modaali päist ja jalust, mitte ainult modaalkeha.
  • Pistikprogrammi button.js märkeruut ja raadiofunktsioonid kasutavad nüüd mõlemad märgistuse data-toggle="buttons"asemel data-toggle="buttons-checkbox"või data-toggle="buttons-radio"sees.
  • JavaScripti sündmused on nimeruumis. Näiteks modaalse "show" sündmuse käsitlemiseks kasutage 'show.bs.modal'. Vahekaartide "näidatud" jaoks kasutage 'shown.bs.tab'jne.

Lisateavet versioonile 3.0 täiendamise ja kogukonna koodilõikude kohta leiate teemast Bootply .