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
Dropdown submenu .dropdown-submenu N/A
Tab alignments .tabs-left .tabs-right .tabs-below N/A
Pill-based tabbable area .pill-content .tab-content
Pill-based tabbable area pane .pill-pane .tab-pane
Nav lists .nav-list .nav-header No direct equivalent, but list groups and .panel-groups are similar.
Inline help for form controls .help-inline No exact equivalent, but .help-block is similar.
Non-bar-level progress colors .progress-info .progress-success .progress-warning .progress-danger Use .progress-bar-* on the .progress-bar instead.

Additional notes

Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:

  • By default, text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the .form-control class on the element to style.
  • Text-based form controls with the .form-control class applied are now 100% wide by default. Wrap inputs inside <div class="col-*"></div> to control input widths.
  • .badge no longer has contextual (-success,-primary,etc..) classes.
  • .btn must also use .btn-default to get the "default" button.
  • .row is now fluid.
  • Images are no longer responsive by default. Use .img-responsive for fluid <img> size.
  • The icons, now .glyphicon, are now font based. Icons also require a base and icon class (e.g. .glyphicon .glyphicon-asterisk).
  • Typeahead has been dropped, in favor of using Twitter Typeahead.
  • Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and behavior. Also, you should no longer apply .hide to .modal in your markup.
  • As of v3.1.0, the HTML loaded by the remote modal option is now injected into the .modal-content (from v3.0.0 to v3.0.3, into the .modal) instead of into the .modal-body. This allows you to also easily vary the header and footer of the modal, not just the modal body.
  • The checkbox and radio features of the button.js plugin now both use data-toggle="buttons" instead of data-toggle="buttons-checkbox" or data-toggle="buttons-radio" in their markup.
  • 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 .