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 |
Биз жаңы элементтерди кошуп, айрымдарын өзгөрттүк. Бул жерде жаңы же жаңыртылган стилдер.
Элемент | Description |
---|---|
Панелдер | .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 | .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-* |
Push | .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 тексти | .navbar-text |
Navbar аталышы | .navbar-header |
Негизделген табулатура / таблеткалар | .nav-justified |
Жооптуу сүрөттөр | .img-responsive |
Контексттик таблица саптары | .success .danger .warning .active .info |
Контексттик панелдер | .panel-success .panel-danger .panel-warning .panel-info |
Modal | .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 ички | .navbar-inner |
Жок |
Navbar тик бөлгүчтөрү | .navbar .divider-vertical |
Жок |
Ашылма субменю | .dropdown-submenu |
Жок |
Өтмөк тегиздөөлөрү | .tabs-left .tabs-right .tabs-below |
Жок |
Таблетка негизиндеги таблица аянты | .pill-content |
.tab-content |
Таблетка негизиндеги табак аянты панели | .pill-pane |
.tab-pane |
Nav тизмелери | .nav-list .nav-header |
Түз эквиваленти жок, бирок тизмедеги топтор жана .panel-group лар окшош. |
Формаларды башкаруу үчүн саптык жардам | .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-body
data-toggle="buttons"
ордуна колдонулат.data-toggle="buttons-checkbox"
data-toggle="buttons-radio"
'show.bs.modal'
. "көрсөтүлгөн" өтмөктөр үчүн 'shown.bs.tab'
ж.б.v3.0 жана коомчулуктун код үзүндүлөрү жөнүндө көбүрөөк маалымат алуу үчүн, карагыла Bootply .