Siirtyminen 2.x:stä 3.0:aan

Bootstrap 3 ei ole taaksepäin yhteensopiva v2.x:n kanssa. Käytä tätä osiota yleisoppaana päivittäessäsi v2.x:stä v3.0:aan. Saat laajemman yleiskatsauksen katsomalla v3.0:n julkaisuilmoituksen uudet ominaisuudet.

Suuret luokkamuutokset

Tämä taulukko näyttää tyylimuutokset v2.x:n ja v3.0:n välillä.

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

Mikä on uutta

Olemme lisänneet uusia elementtejä ja muuttaneet joitain olemassa olevia. Tässä ovat uudet tai päivitetyt tyylit.

Elementti Kuvaus
Paneelit .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Listaa ryhmät .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyfikonit .glyphicon
Jumbotron .jumbotron
Erittäin pieni ruudukko (<768px) .col-xs-*
Pieni ruudukko (≥ 768 kuvapistettä) .col-sm-*
Keskikokoinen ruudukko (≥ 992 kuvapistettä) .col-md-*
Suuri ruudukko (≥ 1200 kuvapistettä) .col-lg-*
Responsiiviset hyötyluokat (≥1200px) .visible-lg .hidden-lg
Offsetit .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Työntää .col-sm-push-* .col-md-push-* .col-lg-push-*
Vedä .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Syötä korkeuskoot .input-sm .input-lg
Syöteryhmät .input-group .input-group-addon .input-group-btn
Lomakeohjaimet .form-control .form-group
Painikeryhmien koot .btn-group-xs .btn-group-sm .btn-group-lg
Navbar-teksti .navbar-text
Navbar-otsikko .navbar-header
Perusteltu välilehdet / pillerit .nav-justified
Responsiiviset kuvat .img-responsive
Taulukon kontekstirivit .success .danger .warning .active .info
Kontekstuaaliset paneelit .panel-success .panel-danger .panel-warning .panel-info
Modaalinen .modal-dialog .modal-content
Pikkukuva .img-thumbnail
Hyvin koot .well-sm .well-lg
Varoituslinkit .alert-link

Mikä on poistettu

Seuraavat elementit on jätetty pois tai niitä on muutettu v3.0:ssa.

Elementti Poistettu 2.x:stä 3.0 Vastaava
Lomaketoiminnot .form-actions Ei käytössä
Hakulomake .form-search Ei käytössä
Muodosta ryhmä tiedoilla .control-group.info Ei käytössä
Kiinteän leveyden tulokoot .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Käytä .form-controlsen sijaan verkkojärjestelmää .
Lohkotason lomakkeen syöttö .input-block-level Ei suoraa vastinetta, mutta lomakkeiden ohjausobjektit ovat samanlaisia.
Käänteiset painikkeet .btn-inverse Ei käytössä
Neste rivi .row-fluid .row(ei enää kiinteää verkkoa)
Ohjaa käärettä .controls Ei käytössä
Ohjausrivi .controls-row .rowtai.form-group
Navbarin sisäpuoli .navbar-inner Ei käytössä
Navbar pystyjakajat .navbar .divider-vertical Ei käytössä
Pudotusvalikko .dropdown-submenu Ei käytössä
Välilehtien tasaukset .tabs-left .tabs-right .tabs-below Ei käytössä
Pilleripohjainen välilehtialue .pill-content .tab-content
Pilleripohjainen välilehtialue .pill-pane .tab-pane
Nav-luettelot .nav-list .nav-header Ei suoraa vastinetta, mutta luetteloryhmät ja .panel-groups ovat samanlaisia.
Sisäänrakennettu ohje lomakehallintaan .help-inline Ei tarkkaa vastinetta, mutta .help-blockon samanlainen.
Ei-palkkitason edistymisvärit .progress-info .progress-success .progress-warning .progress-danger Käytä .progress-bar-*sen .progress-barsijaan.

Lisämerkinnät

Muut v3.0:n muutokset eivät ole heti nähtävissä. Perusluokkia, avaintyylejä ja käyttäytymismalleja on mukautettu joustavuuden ja mobiilin ensisijaisuuden vuoksi . Tässä on osittainen luettelo:

  • Oletuksena tekstipohjaiset lomakeohjaimet saavat nyt vain vähän tyyliä. Käytä tarkennusvärejä ja pyöristettyjä kulmia .form-controlvarten elementin luokkaa tyyliin.
  • Tekstipohjaiset lomakeohjaimet, joissa .form-controlluokka on käytössä, ovat nyt oletuksena 100 % leveät. Kääri sisääntulot <div class="col-*"></div>sisääntulon leveyksien säätämiseksi.
  • .badgeei ole enää kontekstuaalisia (-menestys,-ensisijainen jne..) luokkia.
  • .btntäytyy myös käyttää .btn-defaultsaadakseen "oletus"-painikkeen.
  • .rowon nyt nestemäinen.
  • Kuvat eivät enää reagoi oletuksena. Käytä .img-responsivenesteen <img>kokoon.
  • Kuvakkeet .glyphiconovat nyt fonttipohjaisia. Kuvakkeet vaativat myös perus- ja kuvakeluokan (esim .glyphicon .glyphicon-asterisk. ).
  • Typeahead on hylätty Twitter Typeaheadin käytön hyväksi .
  • Modaalinen merkintä on muuttunut merkittävästi. Osat .modal-header, .modal-body, ja .modal-footerovat nyt käärittyinä .modal-contentja .modal-dialogparantavat mobiilityyliä ja -käyttäytymistä. Sinun ei myöskään pitäisi enää soveltaa .hidemerkinnöissäsi .modal.
  • Vuodesta 3.1.0 alkaen modaalivaihtoehdon lataama HTML-koodi remoteruiskutetaan nyt .modal-content(v3.0.0:sta v3.0.3:een .modal) :n sijaan .modal-body. Tämän avulla voit helposti vaihdella myös modaalin ylä- ja alatunnistetta, ei vain modaalirunkoa.
  • Button.js-laajennuksen valintaruutu ja radio-ominaisuudet käyttävät nyt molemmat merkinnöissään tai data-toggle="buttons"sen sijaan .data-toggle="buttons-checkbox"data-toggle="buttons-radio"
  • JavaScript-tapahtumat ovat nimivälillä. Jos haluat esimerkiksi käsitellä modaalista "show"-tapahtumaa, käytä 'show.bs.modal'. Käytä "näytetyille" välilehdille 'shown.bs.tab'jne.

Lisätietoja päivittämisestä v3.0:aan ja yhteisön koodinpätkiä on kohdassa Bootply .