Go hudugela go v3.x
Tlhahlo ya kamoo o ka kaonafatšago go tšwa go Bootstrap v2.x go ya go v3.x ka go gatelela diphetogo tše kgolo, seo se lego se sefsa, le seo se tlošitšwego.
Tlhahlo ya kamoo o ka kaonafatšago go tšwa go Bootstrap v2.x go ya go v3.x ka go gatelela diphetogo tše kgolo, seo se lego se sefsa, le seo se tlošitšwego.
Bootstrap 3 ga e sepelelana morago le v2.x. Šomiša karolo ye bjalo ka tlhahlo ya kakaretšo ya go kaonafatša go tšwa go v2.x go ya go v3.0. Bakeng sa kakaretšo e nabilego, bona seo se lego se sefsa tsebišong ya tokollo ya v3.0.
Tafola ye e bontšha diphetogo tša setaele magareng ga v2.x le v3.0.
Sebopego sa go thoma 2.x | Bootstrap ya 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 |
Aroganywa ka.visible-md .visible-lg |
.hidden-phone |
.hidden-xs |
.hidden-tablet |
.hidden-sm |
.hidden-desktop |
Aroganywa 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 okeditše dielemente tše mpsha gomme ra fetoša tše dingwe tše di lego gona. Mekgwa ye mefsa goba ye e mpshafaditšwego ke ye.
Ntlha | Tlhalošo |
---|---|
Diphanele | .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse |
Lokeletša dihlopha | .list-group .list-group-item .list-group-item-text .list-group-item-heading |
Di-Glyphicon tša go ngwala | .glyphicon |
Jumbotron ya go swana le yona | .jumbotron |
Keriti e nyenyane e eketsehileng (<768px) . | .col-xs-* |
Keriti e nyenyane (≥768px) . | .col-sm-* |
Keriti e mahareng (≥992px) . | .col-md-* |
Keriti e kgolo (≥1200px) . | .col-lg-* |
Diklase tša utility tše di arabelago (≥1200px) . | .visible-lg .hidden-lg |
Di-offset | .col-sm-offset-* .col-md-offset-* .col-lg-offset-* |
Kgorometša | .col-sm-push-* .col-md-push-* .col-lg-push-* |
Goga | .col-sm-pull-* .col-md-pull-* .col-lg-pull-* |
Input bophahamo boholo | .input-sm .input-lg |
Dihlopha tša go tsenya | .input-group .input-group-addon .input-group-btn |
Ditaolo tša foromo | .form-control .form-group |
Button sehlopha boholo | .btn-group-xs .btn-group-sm .btn-group-lg |
Sengwalwa sa Navbar | .navbar-text |
Hlogo ya Navbar | .navbar-header |
Dithepo tše di lokafaditšwego / dipilisi | .nav-justified |
Diswantšho tše di arabelago | .img-responsive |
Methaladi ya tafola ya seemo | .success .danger .warning .active .info |
Diphanele tša seemo | .panel-success .panel-danger .panel-warning .panel-info |
Modal | .modal-dialog .modal-content |
Seswantšho se senyenyane | .img-thumbnail |
Bogolo bja didiba | .well-sm .well-lg |
Dikgokagano tša temošo | .alert-link |
Dielemente tše di latelago di lahlilwe goba di fetotšwe go v3.0.
Ntlha | E tlošitšwe go tšwa go 2.x | 3.0 E lekanago le yona |
---|---|---|
Bopa ditiro | .form-actions |
N/A |
Batla foromo | .form-search |
N/A |
Foromo sehlopha le info | .control-group.info |
N/A |
Bogolo bja tsenyo bja bophara bjo bo sa fetogego | .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge |
Diriša .form-control le tshepedišo ya keriti go e na le moo. |
Block boemo foromo input | .input-block-level |
Ga go na se se lekanago ka go lebanya, eupša taolo ya dibopego di a swana. |
Dikonope tša go bušetša morago | .btn-inverse |
N/A |
Mothaladi wa seela | .row-fluid |
.row (ga go sa na keriti ye e sa fetogego) . |
E laola sephuthelwana | .controls |
N/A |
E laola mothaladi | .controls-row |
.row goba.form-group |
Navbar ka gare | .navbar-inner |
N/A |
Navbar paatsepama dividers | .navbar .divider-vertical |
N/A |
Thepo ya ka tlase ya go theoga | .dropdown-submenu |
N/A |
Dithulaganyo tša dithepo | .tabs-left .tabs-right .tabs-below |
N/A |
Sebaka sa tabbable se thehiloeng pilisi | .pill-content |
.tab-content |
Lefasetešana la lefelo la tabbable leo le theilwego godimo ga pilisi | .pill-pane |
.tab-pane |
Mananeo a Nav | .nav-list .nav-header |
Ga go na se se lekanago thwii, eupša dihlopha tša lenaneo le .panel-group s di a swana. |
Thušo ya ka gare ga mothaladi bakeng sa ditaolo tša foromo | .help-inline |
Ga go na se se lekanago gabotse, eupša .help-block se a swana. |
Mebala ya tšwelopele yeo e sego ya maemo a bareng | .progress-info .progress-success .progress-warning .progress-danger |
Diriša .progress-bar-* godimo ga .progress-bar go e na le moo. |
Diphetogo tše dingwe go v3.0 ga di bonagale ka pela. Diklase tša motheo, mekgwa ya bohlokwa, le boitshwaro di fetotšwe bakeng sa go feto-fetoga le maemo le mokgwa wa rena wa pele wa sellathekeng . Lenaneo la karolo ke le:
.form-control
sehlopha godimo ga elemente go setaele..form-control
sehlopha seo se dirišitšwego bjale di na le bophara bja 100% ka go ikemela. Phuthelela ditshenyegelo ka gare <div class="col-*"></div>
go laola bophara bja ditseno..badge
ga e sa na le diklase tša diteng (-katlego,-primary,bj.bj.)..btn
e swanetše go šomiša gape .btn-default
go hwetša konope ya "ya go se fetoge"..row
bjale ke seela..img-responsive
seela .<img>
.glyphicon
, bjale di theilwe godimo ga fonte. Diaekhone gape di nyaka motheo le sehlopha sa maswao (mohlala .glyphicon .glyphicon-asterisk
)..modal-header
, .modal-body
, le .modal-footer
bjale di phuthetšwe ka gare .modal-content
le .modal-dialog
bakeng sa go dira setaele le boitshwaro bjo bokaone bja sellathekeng. Gape, ga se wa swanela go hlwa o dira kgopelo .hide
go .modal
ka go markup ya gago.remote
kgetho ya modal bjale e hlabja ka gare ga .modal-content
(go tloga go v3.0.0 go ya go v3.0.3, ka gare ga .modal
) go e na le go tsena ka gare ga .modal-body
. Se se go dumelela gape go fapantšha gabonolo hlogo le letlakala la ka fase la modal, e sego fela mmele wa modal.data-toggle="buttons"
go e na le data-toggle="buttons-checkbox"
goba data-toggle="buttons-radio"
ka go swaya ga bona.'show.bs.modal'
. Bakeng sa dithepo "bontšitsoeng" sebelisa 'shown.bs.tab'
, joalo-joalo.Bakeng sa tshedimošo ye ntši ka ga go kaonafatša go v3.0, le dikarolwana tša khoutu go tšwa setšhabeng, bona Bootply .