Migráció a v3.x verzióra
Útmutató a Bootstrap v2.x verzióról v3.x verzióra való frissítéshez, különös tekintettel a főbb változtatásokra, az újdonságokra és az eltávolítottakra.
Útmutató a Bootstrap v2.x verzióról v3.x verzióra való frissítéshez, különös tekintettel a főbb változtatásokra, az újdonságokra és az eltávolítottakra.
A Bootstrap 3 visszafelé nem kompatibilis a v2.x verzióval. Használja ezt a részt általános útmutatóként a v2.x verzióról a v3.0-ra való frissítéshez. A tágabb áttekintésért tekintse meg a v3.0 kiadási közlemény újdonságait .
Ez a táblázat a v2.x és v3.0 közötti stílusváltozásokat mutatja be.
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 |
Feloszt.visible-md .visible-lg |
.hidden-phone |
.hidden-xs |
.hidden-tablet |
.hidden-sm |
.hidden-desktop |
Feloszt.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 |
Új elemeket adtunk hozzá, és módosítottunk néhány meglévőt. Itt vannak az új vagy frissített stílusok.
Elem | Leírás |
---|---|
Panelek | .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse |
Csoportok listázása | .list-group .list-group-item .list-group-item-text .list-group-item-heading |
Glyphicons | .glyphicon |
Jumbotron | .jumbotron |
Extra kicsi rács (<768 képpont) | .col-xs-* |
Kis rács (≥ 768 képpont) | .col-sm-* |
Közepes rács (≥ 992 képpont) | .col-md-* |
Nagy rács (≥ 1200 képpont) | .col-lg-* |
Reszponzív használati osztályok (≥1200 képpont) | .visible-lg .hidden-lg |
Eltolások | .col-sm-offset-* .col-md-offset-* .col-lg-offset-* |
Nyom | .col-sm-push-* .col-md-push-* .col-lg-push-* |
Húzni | .col-sm-pull-* .col-md-pull-* .col-lg-pull-* |
Beviteli magassági méretek | .input-sm .input-lg |
Beviteli csoportok | .input-group .input-group-addon .input-group-btn |
Űrlapvezérlők | .form-control .form-group |
A gombcsoportok méretei | .btn-group-xs .btn-group-sm .btn-group-lg |
Navbar szöveg | .navbar-text |
Navbar fejléc | .navbar-header |
Indokolt fülek / tabletták | .nav-justified |
Reszponzív képek | .img-responsive |
Kontextuális táblázatsorok | .success .danger .warning .active .info |
Kontextuális panelek | .panel-success .panel-danger .panel-warning .panel-info |
Modal | .modal-dialog .modal-content |
Miniatűr kép | .img-thumbnail |
Kút méretek | .well-sm .well-lg |
Figyelmeztető hivatkozások | .alert-link |
A következő elemek kimaradtak vagy megváltoztak a 3.0-s verzióban.
Elem | Eltávolítva a 2.x-ből | 3.0 egyenértékű |
---|---|---|
Űrlapműveletek | .form-actions |
N/A |
Keresés űrlap | .form-search |
N/A |
Csoport létrehozása információval | .control-group.info |
N/A |
Fix szélességű bemeneti méretek | .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge |
Használja .form-control helyette a rácsrendszert . |
Blokk szintű űrlap bevitel | .input-block-level |
Nincs közvetlen megfelelője, de az űrlapvezérlők hasonlóak. |
Inverz gombok | .btn-inverse |
N/A |
Folyadék sor | .row-fluid |
.row (nincs több fix rács) |
Vezérli a burkolatot | .controls |
N/A |
Vezérlősor | .controls-row |
.row vagy.form-group |
Navbar belső | .navbar-inner |
N/A |
Navbar függőleges elválasztók | .navbar .divider-vertical |
N/A |
Legördülő almenü | .dropdown-submenu |
N/A |
Tabulátor-igazítások | .tabs-left .tabs-right .tabs-below |
N/A |
Tabletta alapú lapozható terület | .pill-content |
.tab-content |
Tabletta alapú lapozható terület panel | .pill-pane |
.tab-pane |
Nav listák | .nav-list .nav-header |
Nincs közvetlen megfelelője, de a listacsoportok és az .panel-group s hasonlóak. |
Soron belüli súgó az űrlapvezérlőkhöz | .help-inline |
Nincs pontos megfelelője, de .help-block hasonló. |
Nem sáv szintű folyamatszínek | .progress-info .progress-success .progress-warning .progress-danger |
Használja .progress-bar-* helyette .progress-bar . |
A v3.0 egyéb változásai nem azonnaliak. Az alaposztályokat, a kulcsstílusokat és a viselkedésmódokat a rugalmasság és a mobil első megközelítés érdekében módosítottuk. Íme egy részleges lista:
.form-control
az elem osztályát a stílushoz..form-control
alkalmazott osztályú szövegalapú űrlapvezérlők alapértelmezés szerint 100%-ban szélesek. Csomagolja be a bemeneteket <div class="col-*"></div>
a bemeneti szélességek szabályozásához..badge
már nincsenek kontextuális (-siker,-elsődleges stb.) osztályai..btn
is használnia .btn-default
kell az "alapértelmezett" gomb eléréséhez..row
most folyékony..img-responsive
a folyadék <img>
méretéhez..glyphicon
most betűtípus alapúak. Az ikonokhoz alap és ikonosztály is szükséges (pl .glyphicon .glyphicon-asterisk
. )..modal-header
, .modal-body
, és .modal-footer
szakaszok most már be vannak csomagolva, .modal-content
és .modal-dialog
a jobb mobilstílus és viselkedés érdekében. Ezenkívül a továbbiakban ne alkalmazza .hide
a .modal
következőt a jelölésben.remote
A 3.1.0-s verziótól kezdve a modális opció által betöltött HTML- t a rendszer a .modal-content
(v3.0.0-ról v3.0.3-ra, a .modal
)-be injektálja, nem pedig a .modal-body
. Ez lehetővé teszi a modál fejlécének és láblécének egyszerű variálását, nem csak a modális törzsét.data-toggle="buttons"
helyett, data-toggle="buttons-checkbox"
mind data-toggle="buttons-radio"
pedig a jelölésben szerepelnek.'show.bs.modal'
. A "megjelenített" lapokhoz használja 'shown.bs.tab'
a stb.A 3.0-s verzióra való frissítésről és a közösség kódrészleteiről a Bootply című témakörben talál további információt .