Migrimi nga 2.x në 3.0

Bootstrap 3 nuk është në përputhje me v2.x. Përdoreni këtë seksion si një udhëzues të përgjithshëm për përmirësimin nga v2.x në v3.0. Për një përmbledhje më të gjerë, shihni se çfarë ka të re në njoftimin e lëshimit të v3.0.

Ndryshime të mëdha në klasë

Kjo tabelë tregon ndryshimet e stilit midis v2.x dhe 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 Ndaje në.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Ndaje në.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

Cfare ka te re

Ne kemi shtuar elementë të rinj dhe kemi ndryshuar disa ekzistues. Këtu janë stilet e reja ose të përditësuara.

Elementi Përshkrim
Panele .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Listoni grupet .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Rrjetë shumë e vogël (<768 px) .col-xs-*
Rrjetë e vogël (≥768 px) .col-sm-*
Rrjetë mesatare (≥992 px) .col-md-*
Rrjetë e madhe (≥1200 px) .col-lg-*
Klasat e shërbimeve të përgjegjshme (≥1200px) .visible-lg .hidden-lg
Kompensimet .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Shtyni .col-sm-push-* .col-md-push-* .col-lg-push-*
Tërhiqe .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Madhësitë e lartësisë së hyrjes .input-sm .input-lg
Grupet hyrëse .input-group .input-group-addon .input-group-btn
Kontrollet e formularit .form-control .form-group
Madhësitë e grupeve të butonave .btn-group-xs .btn-group-sm .btn-group-lg
Teksti i shiritit navigues .navbar-text
Kreu i shiritit të navigimit .navbar-header
Skedat / pilulat e justifikuara .nav-justified
Imazhe të përgjegjshme .img-responsive
Rreshtat e tabelave kontekstuale .success .danger .warning .active .info
Panelet kontekstuale .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Imazhi miniaturë .img-thumbnail
Madhësitë e puseve .well-sm .well-lg
Lidhje alarmi .alert-link

Çfarë është hequr

Elementët e mëposhtëm janë hequr ose ndryshuar në v3.0.

Elementi Hequr nga 2.x 3.0 Ekuivalente
Formoni veprime .form-actions N/A
Formulari i kërkimit .form-search N/A
Formoni grupin me informacion .control-group.info N/A
Madhësitë e hyrjes me gjerësi fikse .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Përdorni .form-controldhe sistemin e rrjetit në vend.
Hyrja e formës së nivelit të bllokut .input-block-level Nuk ka ekuivalent të drejtpërdrejtë, por kontrollet e formave janë të ngjashme.
Butonat e kundërt .btn-inverse N/A
Rreshti i lëngut .row-fluid .row(nuk ka më rrjet fiks)
Mbështjellësi i kontrolleve .controls N/A
Rreshti i kontrolleve .controls-row .rowose.form-group
Brendësia e navigimit .navbar-inner N/A
Ndarësit vertikal të Navbarit .navbar .divider-vertical N/A
Nënmenyja rënëse .dropdown-submenu N/A
Rreshtimi i skedave .tabs-left .tabs-right .tabs-below N/A
Zona tabelare e bazuar në pilula .pill-content .tab-content
Paneli i zonës me tabela të bazuara në pilula .pill-pane .tab-pane
Listat Nav .nav-list .nav-header Nuk ka ekuivalent të drejtpërdrejtë, por grupet e listave dhe .panel-groups janë të ngjashëm.
Ndihmë në linjë për kontrollet e formularit .help-inline Nuk ka ekuivalent të saktë, por .help-blockështë i ngjashëm.
Ngjyrat e progresit jo të nivelit të shiritit .progress-info .progress-success .progress-warning .progress-danger Përdorni .progress-bar-*në .progress-barvend.

Shenime shtese

Ndryshime të tjera në v3.0 nuk janë menjëherë të dukshme. Klasat bazë, stilet kryesore dhe sjelljet janë përshtatur për fleksibilitetin dhe qasjen tonë të parë celular . Këtu është një listë e pjesshme:

  • Si parazgjedhje, kontrollet e formave të bazuara në tekst tani marrin vetëm një stil minimal. Për ngjyrat e fokusit dhe qoshet e rrumbullakosura, aplikoni .form-controlklasën në element për stil.
  • Kontrollet e formave të bazuara në tekst me .form-controlklasën e aplikuar tani janë 100% të gjera si parazgjedhje. Mbështillni hyrjet brenda <div class="col-*"></div>për të kontrolluar gjerësinë e hyrjes.
  • .badgenuk ka më klasa kontekstuale (-sukses,-fillore, etj.).
  • .btnduhet të përdoret gjithashtu .btn-defaultpër të marrë butonin "default".
  • .rowtani është lëng.
  • Imazhet nuk janë më reaguese si parazgjedhje. Përdorni .img-responsivepër madhësinë e lëngut <img>.
  • Ikonat, tani .glyphicon, tani janë të bazuara në shkronja. Ikonat gjithashtu kërkojnë një klasë bazë dhe ikonë (p.sh. .glyphicon .glyphicon-asterisk).
  • Typeahead është hequr, në favor të përdorimit të Twitter Typeahead .
  • Shënimi modal ka ndryshuar ndjeshëm. Seksionet .modal-header, .modal-body, dhe .modal-footertani janë mbështjellë .modal-contentdhe .modal-dialogpër një stil dhe sjellje më të mirë celulare. Gjithashtu, nuk duhet të aplikoni më .hidenë .modalshënimin tuaj.
  • Që nga v3.1.0, HTML-ja e ngarkuar nga remoteopsioni modal tani është injektuar në .modal-content(nga v3.0.0 në v3.0.3, në .modal) në vend të në .modal-body. Kjo ju lejon gjithashtu të ndryshoni lehtësisht kokën dhe fundin e modalit, jo vetëm trupin modal.
  • Kutia e kontrollit dhe veçoritë e radios së plugin-it button.js tani përdorin të dyja data-toggle="buttons"në vend data-toggle="buttons-checkbox"ose data-toggle="buttons-radio"në shënimin e tyre.
  • Ngjarjet e JavaScript janë me hapësirë ​​emri. Për shembull, për të trajtuar ngjarjen modale "show", përdorni 'show.bs.modal'. Për skedat "treguara" përdorni 'shown.bs.tab', etj.

Për më shumë informacion mbi përmirësimin në v3.0 dhe copa kodesh nga komuniteti, shihni Bootply .