Flutningur yfir í v3.x
Leiðbeiningar um hvernig á að uppfæra úr Bootstrap v2.x í v3.x með áherslu á helstu breytingar, það sem er nýtt og það sem hefur verið fjarlægt.
Leiðbeiningar um hvernig á að uppfæra úr Bootstrap v2.x í v3.x með áherslu á helstu breytingar, það sem er nýtt og það sem hefur verið fjarlægt.
Bootstrap 3 er ekki afturábak samhæft við v2.x. Notaðu þennan hluta sem almenna leiðbeiningar til að uppfæra úr v2.x í v3.0. Fyrir víðtækara yfirlit, sjáðu hvað er nýtt í útgáfutilkynningu v3.0.
Þessi tafla sýnir stílbreytingar á milli v2.x og 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 |
Skipta í.visible-md .visible-lg |
.hidden-phone |
.hidden-xs |
.hidden-tablet |
.hidden-sm |
.hidden-desktop |
Skipta í.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 |
Við höfum bætt við nýjum þáttum og breytt nokkrum núverandi. Hér eru nýju eða uppfærðu stílarnir.
Frumefni | Lýsing |
---|---|
Spjöld | .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse |
Listaðu hópa | .list-group .list-group-item .list-group-item-text .list-group-item-heading |
Glyphicons | .glyphicon |
Jumbotron | .jumbotron |
Extra lítið rist (<768px) | .col-xs-* |
Lítið rist (≥768px) | .col-sm-* |
Miðlungs rist (≥992px) | .col-md-* |
Stórt rist (≥1200px) | .col-lg-* |
Móttækilegur tólaflokkar (≥1200px) | .visible-lg .hidden-lg |
Jöfnun | .col-sm-offset-* .col-md-offset-* .col-lg-offset-* |
Ýttu | .col-sm-push-* .col-md-push-* .col-lg-push-* |
Dragðu | .col-sm-pull-* .col-md-pull-* .col-lg-pull-* |
Stærðir inntakshæðar | .input-sm .input-lg |
Inntakshópar | .input-group .input-group-addon .input-group-btn |
Formstýringar | .form-control .form-group |
Hnappastærðir | .btn-group-xs .btn-group-sm .btn-group-lg |
Navbar texti | .navbar-text |
Navbar haus | .navbar-header |
Réttlætar flipar / pillur | .nav-justified |
Móttækilegar myndir | .img-responsive |
Samhengisbundnar töflulínur | .success .danger .warning .active .info |
Samhengispjöld | .panel-success .panel-danger .panel-warning .panel-info |
Módel | .modal-dialog .modal-content |
Smámynd | .img-thumbnail |
Brunastærðir | .well-sm .well-lg |
Viðvörunartenglar | .alert-link |
Eftirfarandi þáttum hefur verið sleppt eða breytt í v3.0.
Frumefni | Fjarlægt úr 2.x | 3,0 Jafngildi |
---|---|---|
Mynda aðgerðir | .form-actions |
N/A |
Leitarform | .form-search |
N/A |
Myndaðu hóp með upplýsingum | .control-group.info |
N/A |
Inntaksstærðir með fastri breidd | .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge |
Notaðu .form-control og ristkerfið í staðinn. |
Inntak eyðublaðs á lokastigi | .input-block-level |
Ekkert beint samsvarandi, en formstýringar eru svipaðar. |
Andhverfa hnappar | .btn-inverse |
N/A |
Vökva röð | .row-fluid |
.row (ekki lengur fast rist) |
Stjórnar umbúðum | .controls |
N/A |
Stýrir röð | .controls-row |
.row eða.form-group |
Navbar innri | .navbar-inner |
N/A |
Navbar lóðrétt skilrúm | .navbar .divider-vertical |
N/A |
Undirvalmynd fellivalmyndar | .dropdown-submenu |
N/A |
Flipajöfnun | .tabs-left .tabs-right .tabs-below |
N/A |
Tabable svæði sem byggir á pillu | .pill-content |
.tab-content |
Pillu-undirstaða flipasvæðisrúða | .pill-pane |
.tab-pane |
Nav listar | .nav-list .nav-header |
Ekkert beint jafngildi, en listahópar og .panel-group s eru svipaðir. |
Innbyggð hjálp fyrir formstýringar | .help-inline |
Ekkert nákvæmlega jafngildi, en .help-block er svipað. |
Framfaralitir sem ekki eru á striki | .progress-info .progress-success .progress-warning .progress-danger |
Notaðu .progress-bar-* á í .progress-bar staðinn. |
Aðrar breytingar í v3.0 eru ekki strax áberandi. Grunnflokkar, lykilstíll og hegðun hafa verið aðlöguð fyrir sveigjanleika og fyrstu nálgun okkar fyrir farsíma . Hér er listi að hluta:
.form-control
flokkinn á þáttinn til að stíla..form-control
flokkurinn er notaður eru nú sjálfgefið 100% breiður. Vefjið inntak inni <div class="col-*"></div>
til að stjórna inntaksbreiddum..badge
hefur ekki lengur samhengisbundna (-árangur,-aðal, osfrv.) flokka..btn
verður líka að nota .btn-default
til að fá "default" hnappinn..row
er nú fljótandi..img-responsive
fyrir vökvastærð <img>
..glyphicon
, eru nú leturgerð. Tákn þurfa einnig grunn og táknflokk (td .glyphicon .glyphicon-asterisk
)..modal-header
, .modal-body
og .modal-footer
hlutarnir eru nú pakkaðir inn .modal-content
og .modal-dialog
fyrir betri stíl og hegðun fyrir farsíma. Einnig ættir þú ekki lengur að sækja .hide
um .modal
í álagningunni þinni.remote
modal valmöguleikanum nú sprautað inn í .modal-content
(frá v3.0.0 til v3.0.3, inn í .modal
) í stað .modal-body
. Þetta gerir þér einnig kleift að breyta haus og síðu síðunnar á einfaldan hátt, ekki bara meginmáli formsins.data-toggle="buttons"
í stað data-toggle="buttons-checkbox"
eða data-toggle="buttons-radio"
í merkingu þeirra.'show.bs.modal'
. Fyrir flipa "sýndir" notaðu 'shown.bs.tab'
, osfrv.Fyrir frekari upplýsingar um uppfærslu í v3.0 og kóðabúta frá samfélaginu, sjá Bootply .