Üleminek versioonile v3.x
Juhised Bootstrapi versioonilt 2.x versioonile v3.x üleminekuks, keskendudes suurematele muudatustele, uuele ja eemaldatule.
Juhised Bootstrapi versioonilt 2.x versioonile v3.x üleminekuks, keskendudes suurematele muudatustele, uuele ja eemaldatule.
Bootstrap 3 ei ühildu versiooniga v2.x. Kasutage seda jaotist üldise juhendina versioonilt v2.x versioonile 3.0 üleminekuks. Laiema ülevaate saamiseks vaadake, mis on uut v3.0 väljalaske teatest.
See tabel näitab stiilimuutusi v2.x ja v3.0 vahel.
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 |
Jaguneb.visible-md .visible-lg |
.hidden-phone |
.hidden-xs |
.hidden-tablet |
.hidden-sm |
.hidden-desktop |
Jaguneb.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 |
Oleme lisanud uusi elemente ja muutnud mõnda olemasolevat. Siin on uued või värskendatud stiilid.
Element | Kirjeldus |
---|---|
Paneelid | .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse |
Loetlege rühmad | .list-group .list-group-item .list-group-item-text .list-group-item-heading |
Glyphicons | .glyphicon |
Jumbotron | .jumbotron |
Eriti väike ruudustik (<768 pikslit) | .col-xs-* |
Väike ruudustik (≥ 768 pikslit) | .col-sm-* |
Keskmine ruudustik (≥ 992 pikslit) | .col-md-* |
Suur ruudustik (≥ 1200 pikslit) | .col-lg-* |
Kohanduvad kasuliku klassid (≥1200 pikslit) | .visible-lg .hidden-lg |
Tasumised | .col-sm-offset-* .col-md-offset-* .col-lg-offset-* |
Push | .col-sm-push-* .col-md-push-* .col-lg-push-* |
Tõmba | .col-sm-pull-* .col-md-pull-* .col-lg-pull-* |
Sisestage kõrguse suurused | .input-sm .input-lg |
Sisestusrühmad | .input-group .input-group-addon .input-group-btn |
Vormi juhtelemendid | .form-control .form-group |
Nupurühmade suurused | .btn-group-xs .btn-group-sm .btn-group-lg |
Naviriba tekst | .navbar-text |
Navbari päis | .navbar-header |
Põhjendatud sakid / pillid | .nav-justified |
Reageerivad pildid | .img-responsive |
Kontekstitabeli read | .success .danger .warning .active .info |
Kontekstuaalsed paneelid | .panel-success .panel-danger .panel-warning .panel-info |
Modaalne | .modal-dialog .modal-content |
Pisipilt | .img-thumbnail |
Kaevude suurused | .well-sm .well-lg |
Hoiatuslingid | .alert-link |
Järgmised elemendid on versioonis 3.0 välja jäetud või muudetud.
Element | 2.x-st eemaldatud | 3,0 ekvivalent |
---|---|---|
Vormi toimingud | .form-actions |
Ei kehti |
Otsinguvorm | .form-search |
Ei kehti |
Moodustage teabega grupp | .control-group.info |
Ei kehti |
Fikseeritud laiusega sisendi suurused | .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge |
Kasutage selle asemel .form-control ja võrgusüsteemi . |
Blokeerimistaseme vormi sisend | .input-block-level |
Otsest ekvivalenti pole, kuid vormide juhtelemendid on sarnased. |
Pöördnupud | .btn-inverse |
Ei kehti |
Vedeliku rida | .row-fluid |
.row (pole enam fikseeritud võrku) |
Juhib ümbrist | .controls |
Ei kehti |
Juhtriba | .controls-row |
.row või.form-group |
Navbar sisemine | .navbar-inner |
Ei kehti |
Navbar vertikaalsed jaoturid | .navbar .divider-vertical |
Ei kehti |
Rippmenüü alammenüü | .dropdown-submenu |
Ei kehti |
Tabeldusjooned | .tabs-left .tabs-right .tabs-below |
Ei kehti |
Pillipõhine tabable ala | .pill-content |
.tab-content |
Pillipõhine vahekaartide ala paan | .pill-pane |
.tab-pane |
Navi loendid | .nav-list .nav-header |
Otsest vastet pole, kuid loendirühmad ja .panel-group s on sarnased. |
Vormide juhtelementide tekstisisene abi | .help-inline |
Pole täpset vastet, kuid .help-block on sarnane. |
Mitte-tulbataseme edenemisvärvid | .progress-info .progress-success .progress-warning .progress-danger |
Kasutage .progress-bar-* selle .progress-bar asemel. |
Muud muudatused versioonis 3.0 ei ole kohe nähtavad. Baasklassid, võtmestiilid ja käitumisviisid on kohandatud paindlikkuse ja meie mobiilse esmase lähenemisviisi jaoks. Siin on osaline loend:
.form-control
stiilile elemendi klass..form-control
rakendatud klass, on nüüd vaikimisi 100% laiad. Mähkige sisendid <div class="col-*"></div>
sisendite laiuse reguleerimiseks sisse..badge
pole enam kontekstuaalseid (-edu,-esmane jne) klasse..btn
peab kasutama .btn-default
ka "vaikimisi" nupu saamiseks..row
on nüüd vedel..img-responsive
vedeliku <img>
suuruse jaoks..glyphicon
on nüüd fondipõhised. Ikoonid nõuavad ka baasi ja ikooniklassi (nt .glyphicon .glyphicon-asterisk
)..modal-header
, .modal-body
ja .modal-footer
on nüüd mähitud .modal-content
ning .modal-dialog
parema mobiilistiili ja käitumise tagamiseks. Samuti ei tohiks te oma märgistuses enam kasutada .hide
..modal
remote
nüüd .modal-content
(v3.0.0 kuni v3.0.3, .modal
) asemel .modal-body
. See võimaldab teil hõlpsasti muuta ka modaali päist ja jalust, mitte ainult modaalkeha.data-toggle="buttons"
asemel data-toggle="buttons-checkbox"
või data-toggle="buttons-radio"
sees.'show.bs.modal'
. Vahekaartide "näidatud" jaoks kasutage 'shown.bs.tab'
jne.Lisateavet versioonile 3.0 täiendamise ja kogukonna koodilõikude kohta leiate teemast Bootply .