Муҳоҷират ба v3.x
Роҳнамо оид ба чӣ гуна навсозӣ аз Bootstrap v2.x ба v3.x бо таваҷҷӯҳ ба тағйироти асосӣ, чизҳои нав ва он чи хориҷ карда шудаанд.
Роҳнамо оид ба чӣ гуна навсозӣ аз Bootstrap v2.x ба v3.x бо таваҷҷӯҳ ба тағйироти асосӣ, чизҳои нав ва он чи хориҷ карда шудаанд.
Bootstrap 3 бо v2.x ба ақиб мувофиқ нест. Ин бахшро ҳамчун дастури умумӣ барои навсозӣ аз v2.x ба v3.0 истифода баред. Барои шарҳи васеътар, бубинед, ки дар эълони барориши v3.0 чӣ чизи нав мавҷуд аст.
Ин ҷадвал тағироти услубро байни v2.x ва 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 |
Ба тақсим кардан.visible-md .visible-lg |
.hidden-phone |
.hidden-xs |
.hidden-tablet |
.hidden-sm |
.hidden-desktop |
Ба тақсим кардан.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 |
Мо унсурҳои нав илова кардем ва баъзеи мавҷударо иваз кардем. Инҳоянд услубҳои нав ё навшуда.
| Элемент | Тавсифи |
|---|---|
| Панелхо | .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse |
| Рӯйхати гурӯҳҳо | .list-group .list-group-item .list-group-item-text .list-group-item-heading |
| Глификонҳо | .glyphicon |
| Ҷумботрон | .jumbotron |
| Шабакаи хурди иловагӣ (<768px) | .col-xs-* |
| Шабакаи хурд (≥768px) | .col-sm-* |
| Шабакаи миёна (≥992px) | .col-md-* |
| Шабакаи калон (≥1200px) | .col-lg-* |
| Синфҳои хидматрасонии ҷавобгӯ (≥1200px) | .visible-lg .hidden-lg |
| Офсетҳо | .col-sm-offset-* .col-md-offset-* .col-lg-offset-* |
| Тела | .col-sm-push-* .col-md-push-* .col-lg-push-* |
| Кашидан | .col-sm-pull-* .col-md-pull-* .col-lg-pull-* |
| Андозаи баландии вуруд | .input-sm .input-lg |
| Гурӯҳҳои воридотӣ | .input-group .input-group-addon .input-group-btn |
| Назорати шакл | .form-control .form-group |
| Андозаи гурӯҳи тугмаҳо | .btn-group-xs .btn-group-sm .btn-group-lg |
| Матни Навбар | .navbar-text |
| Сарлавҳаи Навбар | .navbar-header |
| Ҷадвалҳо / доруҳои асоснок | .nav-justified |
| Тасвирҳои ҷавобӣ | .img-responsive |
| Сатрҳои ҷадвали контекстӣ | .success .danger .warning .active .info |
| Панелҳои контекстӣ | .panel-success .panel-danger .panel-warning .panel-info |
| Модал | .modal-dialog .modal-content |
| Тасвири эскиз | .img-thumbnail |
| Андозаҳои хуб | .well-sm .well-lg |
| Истинодҳои огоҳкунанда | .alert-link |
Унсурҳои зерин дар v3.0 партофта шудаанд ё тағир дода шудаанд.
| Элемент | Аз 2.x хориҷ карда шуд | 3.0 Муодил |
|---|---|---|
| Амалҳои шакл | .form-actions |
Не |
| Шакли ҷустуҷӯ | .form-search |
Не |
| Гурӯҳро бо маълумот ташкил кунед | .control-group.info |
Не |
| Андозаи вуруди паҳнои собит | .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge |
.form-controlБа ҷои он системаи шабакаро истифода баред . |
| Вуруди шакли блоки сатҳи | .input-block-level |
Муодили мустақим нест, аммо идоракунии шаклҳо шабеҳанд . |
| Тугмаҳои баръакс | .btn-inverse |
Не |
| Қатори моеъ | .row-fluid |
.row(шабакаи собит дигар нест) |
| Сарпӯшро назорат мекунад | .controls |
Не |
| Сатрро назорат мекунад | .controls-row |
.rowё.form-group |
| Навбари дохилӣ | .navbar-inner |
Не |
| Навбар тақсимкунакҳои амудӣ | .navbar .divider-vertical |
Не |
| Зерменюи афтанда | .dropdown-submenu |
Не |
| Ҳамоҳангсозии ҷадвалҳо | .tabs-left .tabs-right .tabs-below |
Не |
| Минтақаи таблиғшаванда дар асоси ҳабҳо | .pill-content |
.tab-content |
| Панели майдони tabbable дар асоси њабњо | .pill-pane |
.tab-pane |
| Рӯйхати нав | .nav-list .nav-header |
Муодили мустақим нест, аммо гурӯҳҳо ва .panel-groups рӯйхат шабеҳанд. |
| Кӯмаки дохилӣ барои идоракунии шакл | .help-inline |
Муодили дақиқ нест, аммо .help-blockшабеҳ аст. |
| Рангҳои пешрафти сатҳи ғайрибарӣ | .progress-info .progress-success .progress-warning .progress-danger |
.progress-bar-*Ба ҷои он истифода баред .progress-bar. |
Дигар тағирот дар v3.0 дарҳол маълум нестанд. Синфҳои асосӣ, услубҳои асосӣ ва рафторҳо барои чандирӣ ва равиши аввалини мобилии мо тасҳеҳ карда шуданд. Дар ин ҷо як рӯйхат қисман аст:
.form-controlсинфро дар элемент ба услуб татбиқ кунед..form-controlсинфи татбиқшаванда ҳоло ба таври нобаёнӣ 100% васеъ мебошанд. <div class="col-*"></div>Барои назорат кардани паҳнои вуруд вурудҳоро дар дохили он печонед ..badgeдигар синфҳои контекстӣ (-муваффақият,-ибтидоӣ ва ғайра) надорад..btnниз бояд .btn-defaultбарои ба даст овардани тугмаи "пешфарз" истифода..rowҳоло моеъ аст..img-responsiveмоеъ истифода баред .<img>.glyphiconба ҳарф асос ёфтаанд. Нишонаҳо инчунин синфи асос ва нишонаро талаб мекунанд (масалан .glyphicon .glyphicon-asterisk)..modal-header, .modal-body, ва .modal-footerҳоло барои ороиш ва рафтори беҳтари мобилӣ печонида .modal-contentшудаанд .modal-dialog. Ғайр аз он, шумо набояд дигар дар қайди худ муроҷиат .hideкунед .modal.remote, ҳоло ба ҷои ба . Ин ба шумо имкон медиҳад, ки ба осонӣ сарлавҳа ва поёни модалиро тағир диҳед, на танҳо бадани модалӣ..modal-content.modal.modal-bodydata-toggle="buttons"ба ҷои data-toggle="buttons-checkbox"ё data-toggle="buttons-radio"дар аломатгузории худ истифода мешаванд.'show.bs.modal'. Барои ҷадвалҳои "нишон додашуда" истифода баред 'shown.bs.tab'ва ғайра.Барои маълумоти бештар дар бораи навсозӣ ба v3.0 ва пораҳои код аз ҷомеа, нигаред ба Bootply .