Ho fallela ho v3.x
Tataiso mabapi le mokhoa oa ho ntlafatsa ho tloha Bootstrap v2.x ho v3.x ka ho hatisa liphetoho tse kholo, tse ncha, le tse tlositsoeng.
Tataiso mabapi le mokhoa oa ho ntlafatsa ho tloha Bootstrap v2.x ho v3.x ka ho hatisa liphetoho tse kholo, tse ncha, le tse tlositsoeng.
Bootstrap 3 ha e tsamaellane ka morao le v2.x. Sebelisa karolo ena e le tataiso e akaretsang ea ho ntlafatsa ho tloha ho v2.x ho ea ho v3.0. Bakeng sa kakaretso e batsi, bona se secha phatlalatsong ea tokollo ea v3.0.
Tafole ena e bontša liphetoho tsa setaele lipakeng tsa v2.x le 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 |
Arohane ka.visible-md .visible-lg |
.hidden-phone |
.hidden-xs |
.hidden-tablet |
.hidden-sm |
.hidden-desktop |
Arohane ka.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 |
Re kentse likarolo tse ncha 'me re fetotse tse seng li ntse li le teng. Mekhoa e mecha kapa e ntlafalitsoeng ke ena.
| Element | Tlhaloso |
|---|---|
| Liphanele | .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse |
| Etsa lethathamo la lihlopha | .list-group .list-group-item .list-group-item-text .list-group-item-heading |
| Li-Glyphicons | .glyphicon |
| Jumbotron | .jumbotron |
| Gridi e nyane haholo (<768px) | .col-xs-* |
| Keriti e nyane (≥768px) | .col-sm-* |
| Gridi e mahareng (≥992px) | .col-md-* |
| Keriti e kholo (≥1200px) | .col-lg-* |
| Litlelase tsa lisebelisoa tse arabelang (≥1200px) | .visible-lg .hidden-lg |
| Li-offsets | .col-sm-offset-* .col-md-offset-* .col-lg-offset-* |
| Sututsa | .col-sm-push-* .col-md-push-* .col-lg-push-* |
| Hula | .col-sm-pull-* .col-md-pull-* .col-lg-pull-* |
| Bophahamo ba ho kenya | .input-sm .input-lg |
| Kena lihlopha | .input-group .input-group-addon .input-group-btn |
| Litaolo tsa foromo | .form-control .form-group |
| Likonopo tsa lihlopha tsa boholo | .btn-group-xs .btn-group-sm .btn-group-lg |
| Mongolo oa Navbar | .navbar-text |
| Sehlooho sa Navbar | .navbar-header |
| Li-tab / lipilisi tse lokiselitsoeng | .nav-justified |
| Litšoantšo tse arabelang | .img-responsive |
| Mela ea tafole ea maemo | .success .danger .warning .active .info |
| Liphanele tsa maemo | .panel-success .panel-danger .panel-warning .panel-info |
| Modal | .modal-dialog .modal-content |
| Setšoantšo sa setšoantšo | .img-thumbnail |
| Seliba sa boholo | .well-sm .well-lg |
| Lihokelo tsa tlhokomeliso | .alert-link |
Lintlha tse latelang li lahliloe kapa li fetotsoe ho v3.0.
| Element | E tlositsoe ho 2.x | 3.0 E lekanang |
|---|---|---|
| Liketso tsa foromo | .form-actions |
N/A |
| Batla foromo | .form-search |
N/A |
| Theha sehlopha ka lintlha | .control-group.info |
N/A |
| Bophahamo bo sa fetoheng ba boholo | .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge |
Sebelisa .form-controlle tsamaiso ea grid ho e -na le hoo. |
| Thibela boemo ba ho kenya foromo | .input-block-level |
Ha ho na litekanyo tse tobileng, empa litsamaiso tsa mefuta li tšoana. |
| Likonopo tse fapaneng | .btn-inverse |
N/A |
| Mola oa metsi | .row-fluid |
.row(ha ho sa na grid e tsitsitseng) |
| E laola sekoahelo | .controls |
N/A |
| E laola mola | .controls-row |
.rowkapa.form-group |
| Navbar ka hare | .navbar-inner |
N/A |
| Navbar tse otlolohileng tse arolang | .navbar .divider-vertical |
N/A |
| Menu e tlase e theoha | .dropdown-submenu |
N/A |
| Litlhophiso tsa li-tab | .tabs-left .tabs-right .tabs-below |
N/A |
| Sebaka sa lipilisi se thehiloeng ho lipilisi | .pill-content |
.tab-content |
| Letlapa le nang le lipilisi tse nang le lipilisi | .pill-pane |
.tab-pane |
| Manane a Nav | .nav-list .nav-header |
Ha ho na tse lekanang ka ho toba, empa lihlopha tsa lenane le .panel-groups lia tšoana. |
| Thuso ea inline bakeng sa ho laola liforomo | .help-inline |
Ha ho na e tšoanang hantle, empa .help-blocke tšoana. |
| Mebala ea tsoelo-pele e se nang bar-level | .progress-info .progress-success .progress-warning .progress-danger |
Sebelisa .progress-bar-*ho e-na le .progress-barhoo. |
Liphetoho tse ling ho v3.0 ha li bonahale hang-hang. Litlelase tsa mantlha, mekhoa ea mantlha, le boits'oaro li lokisitsoe molemong oa ho fetoha le maemo le mokhoa oa rona oa pele oa mobile . Lenane le sa fellang ke lena:
.form-controlsehlopha ho element ho setaele..form-controlsehlopha se sebelisitsoeng li se li le bophara ba 100% ka mokhoa o ikhethileng. Koaela lintho tse kenang ka hare <div class="col-*"></div>ho laola bophara ba ho kenya..badgeha e sa na litlelase tsa maemo (-katleho,-ea mantlha, joalo-joalo)..btnE tlameha hape ho sebelisa .btn-defaultho fumana konopo ea "default"..rowjoale ke mokelikeli..img-responsivemokelikeli .<img>.glyphicon, li thehiloe ka fonte. Lits'oants'o li boetse li hloka sehlopha sa mantlha le li-icon (mohlala .glyphicon .glyphicon-asterisk)..modal-header, .modal-body, le .modal-footerlikarolo li se li phuthetsoe ka har'a .modal-contentle .modal-dialogbakeng sa setaele le boitšoaro bo betere ba mehala. Hape, ha u sa tlameha ho etsa kopo .hideho .modalli-markup tsa hau.remotekhetho ea modal e se e kentsoe ho .modal-content(ho tloha ho v3.0.0 ho isa ho v3.0.3, ho ea ho .modal) ho fapana le ho kena .modal-body. Sena se o lumella ho fetola habonolo hlooho le botlaaseng ba modal, eseng feela 'mele oa modal.data-toggle="buttons"e-na le data-toggle="buttons-checkbox"kapa data-toggle="buttons-radio"ka har'a markup ea tsona.'show.bs.modal'. Bakeng sa li-tab tse "bontšitsoeng" sebelisa 'shown.bs.tab', joalo-joalo.Bakeng sa lintlha tse ling mabapi le ho ntlafatsa ho v3.0, le li-code snippets tse tsoang sechabeng, bona Bootply .