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-control le 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 |
.row kapa.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-group s lia tšoana. |
Thuso ea inline bakeng sa ho laola liforomo | .help-inline |
Ha ho na e tšoanang hantle, empa .help-block e 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-bar hoo. |
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-control
sehlopha ho element ho setaele..form-control
sehlopha 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..badge
ha e sa na litlelase tsa maemo (-katleho,-ea mantlha, joalo-joalo)..btn
E tlameha hape ho sebelisa .btn-default
ho fumana konopo ea "default"..row
joale ke mokelikeli..img-responsive
mokelikeli .<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-footer
likarolo li se li phuthetsoe ka har'a .modal-content
le .modal-dialog
bakeng sa setaele le boitšoaro bo betere ba mehala. Hape, ha u sa tlameha ho etsa kopo .hide
ho .modal
li-markup tsa hau.remote
khetho 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 .