2.x-tik 3.0-ra migratzen

Bootstrap 3 ez da atzerantz bateragarria v2.x-ekin. Erabili atal hau v2.x v3.0ra eguneratzeko gida orokor gisa. Ikuspegi zabalagoa lortzeko, ikusi zer berri dagoen v3.0 bertsioaren iragarpenean.

Klase aldaketa nagusiak

Taula honek v2.x eta v3.0 arteko estilo aldaketak erakusten ditu.

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

Zer berri

Elementu berriak gehitu ditugu eta lehendik zeuden batzuk aldatu ditugu. Hona hemen estilo berriak edo eguneratuak.

Elementua Deskribapena
Panelak .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Taldeak zerrenda .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glifikonoak .glyphicon
Jumbotron .jumbotron
Sare txikia (<768 px) .col-xs-*
Sare txikia (≥768 px) .col-sm-*
Sare ertaina (≥992 px) .col-md-*
Sare handia (≥1200px) .col-lg-*
Erabilgarritasun klasikoak (≥1200px) .visible-lg .hidden-lg
Desplazamenduak .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Bultza .col-sm-push-* .col-md-push-* .col-lg-push-*
Tira .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Sarrerako altuera-tamainak .input-sm .input-lg
Sarrera-taldeak .input-group .input-group-addon .input-group-btn
Inprimakien kontrolak .form-control .form-group
Botoien taldeen tamainak .btn-group-xs .btn-group-sm .btn-group-lg
Nabigazio-barrako testua .navbar-text
Nabigazio-barrako goiburua .navbar-header
Justifikatutako fitxak / pilulak .nav-justified
Irudi sentikorrak .img-responsive
Testuinguruko taulako errenkadak .success .danger .warning .active .info
Testuinguruko panelak .panel-success .panel-danger .panel-warning .panel-info
Modala .modal-dialog .modal-content
Irudi txikia .img-thumbnail
Ondo tamainak .well-sm .well-lg
Alerta estekak .alert-link

Zer kendu

Elementu hauek kendu edo aldatu egin dira v3.0-n.

Elementua 2.x-tik kendu da 3.0 Baliokidea
Forma ekintzak .form-actions N/A
Bilaketa formularioa .form-search N/A
Osatu taldea informazioarekin .control-group.info N/A
Zabalera finkoko sarrera-tamainak .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Erabili .form-controleta sareta sistema horren ordez.
Bloke-mailako formularioaren sarrera .input-block-level Ez dago zuzeneko baliokiderik, baina inprimakien kontrolak antzekoak dira.
Alderantzizko botoiak .btn-inverse N/A
Fluido errenkada .row-fluid .row(sare finkorik ez)
Kontrolen bilgarria .controls N/A
Kontrolak errenkada .controls-row .rowedo.form-group
Barruko nabigazioa .navbar-inner N/A
Navbar banatzaile bertikalak .navbar .divider-vertical N/A
Goitibeherako azpimenua .dropdown-submenu N/A
Fitxen lerrokatzeak .tabs-left .tabs-right .tabs-below N/A
Piluletan oinarritutako tabulazio-eremua .pill-content .tab-content
Piluletan oinarritutako tabulazio-eremuaren panela .pill-pane .tab-pane
Nabigazio-zerrendak .nav-list .nav-header Zuzeneko baliokiderik ez, baina zerrenda taldeak eta .panel-groups antzekoak dira.
Inprimaki-kontroletarako lineako laguntza .help-inline Ez dago baliokide zehatzik, baina .help-blockantzekoa da.
Barra-mailakoak ez diren aurrerapen koloreak .progress-info .progress-success .progress-warning .progress-danger Erabili .progress-bar-*horren .progress-barordez.

Ohar osagarriak

v3.0-ko beste aldaketa batzuk ez dira berehala ikusten. Oinarrizko klaseak, gako-estiloak eta jokabideak malgutasunerako eta gure mugikorrerako lehen hurbilpenerako egokitu dira . Hona hemen zerrenda partziala:

  • Lehenespenez, testuan oinarritutako inprimaki-kontrolek estilo minimoa baino ez dute jasotzen. Foku-koloreetarako eta ertz biribilduetarako, aplikatu .form-controlklasea elementuari estiloari.
  • Testuan oinarritutako inprimakiaren kontrolak .form-controlaplikatutako klasearekin % 100eko zabalera dute orain lehenespenez. Itzulbiratu sarrerak barruan <div class="col-*"></div>sarrera-zabalera kontrolatzeko.
  • .badgejada ez ditu testuinguruko klaseak (-arrakasta,-lehen mailakoak, etab..).
  • .btn.btn-default"Lehenetsitako" botoia lortzeko ere erabili behar da.
  • .rowfluidoa da orain.
  • Irudiek jada ez dute erantzuten lehenespenez. Erabili .img-responsivefluidoen <img>tamainarako.
  • Ikonoak, orain .glyphicon, letra-tipoan oinarrituta daude. Ikonoek oinarrizko eta ikono klase bat ere behar dute (adib .glyphicon .glyphicon-asterisk.).
  • Typeahead kendu egin da, Twitter Typeahead erabiltzearen alde .
  • Markatze modala nabarmen aldatu da. , .modal-header, .modal-bodyeta .modal-footeratalak orain mugikorren estilo eta portaera hobea lortzeko bilduta .modal-contentdaude .modal-dialog. Gainera, ez zenuke gehiago aplikatu .hidebehar .modalzure markaketa-n.
  • v3.1.0-tik aurrera, remoteaukera modalak kargatutako HTMLa .modal-content(v3.0.0-tik v3.0.3-ra, )-ra txertatzen .modalda orain .modal-body. Horri esker, moduaren goiburua eta oina ere erraz alda ditzakezu, ez bakarrik moduaren gorputza.
  • Button.js pluginaren kontrol-laukia eta irrati-funtzioak orain biak erabiltzen dituzte beren markaketaren data-toggle="buttons"ordez .data-toggle="buttons-checkbox"data-toggle="buttons-radio"
  • JavaScript gertaerak izen-tartea jartzen dira. Adibidez, "erakutsi" gertaera modala kudeatzeko, erabili 'show.bs.modal'. "Bistaratzen" fitxetarako erabili 'shown.bs.tab', etab.

v3.0 bertsiora eguneratzeari eta komunitateko kode zatiei buruzko informazio gehiago lortzeko, ikusi Bootply .