v3.x ga ko‘chirilmoqda
Bootstrap v2.x-dan v3.x-ga qanday yangilash bo'yicha yo'riqnoma, asosiy o'zgarishlar, nima yangilik va nima olib tashlanganiga urg'u beradi.
2.x dan 3.0 ga koʻchirilmoqda
Bootstrap 3 v2.x bilan orqaga qarab mos kelmaydi. Ushbu bo'limdan v2.x dan v3.0 ga yangilash uchun umumiy qo'llanma sifatida foydalaning. Kengroq maʼlumot olish uchun v3.0 versiyasi eʼlonida nima yangiliklar borligini koʻring.
Asosiy sinf o'zgarishlari
Bu jadval v2.x va v3.0 oʻrtasidagi uslub oʻzgarishlarini koʻrsatadi.
| 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 |
Bo'linish.visible-md .visible-lg |
.hidden-phone |
.hidden-xs |
.hidden-tablet |
.hidden-sm |
.hidden-desktop |
Bo'linish.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 |
Nima yangiliklar
Biz yangi elementlar qo‘shdik va mavjudlarini o‘zgartirdik. Mana yangi yoki yangilangan uslublar.
| Element | Tavsif |
|---|---|
| Panellar | .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse |
| Guruhlarni ro'yxatga olish | .list-group .list-group-item .list-group-item-text .list-group-item-heading |
| Glifonlar | .glyphicon |
| Jumbotron | .jumbotron |
| Qo'shimcha kichik panjara (<768px) | .col-xs-* |
| Kichik panjara (≥768px) | .col-sm-* |
| Oʻrtacha panjara (≥992px) | .col-md-* |
| Katta panjara (≥1200px) | .col-lg-* |
| Responsive utility sinflari (≥1200px) | .visible-lg .hidden-lg |
| Ofsetlar | .col-sm-offset-* .col-md-offset-* .col-lg-offset-* |
| Durang | .col-sm-push-* .col-md-push-* .col-lg-push-* |
| Torting | .col-sm-pull-* .col-md-pull-* .col-lg-pull-* |
| Kirish balandligi o'lchamlari | .input-sm .input-lg |
| Kirish guruhlari | .input-group .input-group-addon .input-group-btn |
| Shakl boshqaruvlari | .form-control .form-group |
| Tugmalar guruhi o'lchamlari | .btn-group-xs .btn-group-sm .btn-group-lg |
| Navbar matni | .navbar-text |
| Navbar sarlavhasi | .navbar-header |
| Asoslangan yorliqlar / tabletkalar | .nav-justified |
| Javob beruvchi tasvirlar | .img-responsive |
| Kontekstli jadval qatorlari | .success .danger .warning .active .info |
| Kontekst panellari | .panel-success .panel-danger .panel-warning .panel-info |
| Modal | .modal-dialog .modal-content |
| Eskiz tasviri | .img-thumbnail |
| Quduq o'lchamlari | .well-sm .well-lg |
| Ogohlantirish havolalari | .alert-link |
Nima olib tashlangan
v3.0 da quyidagi elementlar olib tashlangan yoki o'zgartirilgan.
| Element | 2.x dan olib tashlandi | 3.0 ekvivalenti |
|---|---|---|
| Shakl harakatlar | .form-actions |
Yoʻq |
| Qidiruv shakli | .form-search |
Yoʻq |
| Ma'lumot bilan guruh tuzing | .control-group.info |
Yoʻq |
| Ruxsat etilgan kenglikdagi kirish o'lchamlari | .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge |
.form-controlBuning o'rniga grid tizimidan foydalaning . |
| Blok darajasidagi shakl kiritish | .input-block-level |
To'g'ridan-to'g'ri ekvivalenti yo'q, lekin shakllarni boshqarish o'xshash. |
| Teskari tugmalar | .btn-inverse |
Yoʻq |
| Suyuqlik qatori | .row-fluid |
.row(sobit tarmoq yo'q) |
| O'ramni boshqaradi | .controls |
Yoʻq |
| Qatorni boshqaradi | .controls-row |
.rowyoki.form-group |
| Navbar ichki | .navbar-inner |
Yoʻq |
| Navbar vertikal ajratgichlari | .navbar .divider-vertical |
Yoʻq |
| Ochiladigan pastki menyu | .dropdown-submenu |
Yoʻq |
| Tablarni tekislash | .tabs-left .tabs-right .tabs-below |
Yoʻq |
| Tabletkalar asosidagi tabbable maydoni | .pill-content |
.tab-content |
| Tabletkalar asosidagi tabbable maydoni paneli | .pill-pane |
.tab-pane |
| Nav ro'yxatlari | .nav-list .nav-header |
To'g'ridan-to'g'ri ekvivalenti yo'q, lekin ro'yxat guruhlari va .panel-groups o'xshash. |
| Shaklni boshqarish uchun ichki yordam | .help-inline |
Aniq ekvivalenti yo'q, lekin .help-blockshunga o'xshash. |
| Bar darajasida bo'lmagan progress ranglari | .progress-info .progress-success .progress-warning .progress-danger |
Buning .progress-bar-*o'rniga foydalaning .progress-bar. |
Qo'shimcha eslatmalar
v3.0 dagi boshqa o'zgarishlar darhol ko'rinmaydi. Asosiy sinflar, asosiy uslublar va xatti-harakatlar moslashuvchanlik va mobil birinchi yondashuvimiz uchun sozlangan. Bu qisman ro'yxat:
- Odatiy bo'lib, matnga asoslangan shakl boshqaruvlari endi faqat minimal uslubni oladi. Fokus ranglari va yumaloq burchaklar
.form-controluchun elementdagi sinfni uslubga qo'llang. - Sinf qo'llanilgan matnga asoslangan shakl boshqaruvlari
.form-controlendi sukut bo'yicha 100% keng.<div class="col-*"></div>Kirish kengliklarini boshqarish uchun kirishlarni ichkariga oʻrang . .badgeendi kontekstli (-muvaffaqiyat,-asosiy, va hokazo) sinflari yo'q..btn.btn-default"standart" tugmasini olish uchun ham foydalanish kerak ..rowhozir suyuq.- Rasmlar endi sukut bo'yicha javob bermaydi.
.img-responsiveSuyuqlik<img>hajmi uchun foydalaning . - Belgilar
.glyphiconendi shriftga asoslangan. Belgilar shuningdek, asosiy va piktogramma sinfini talab qiladi (masalan,.glyphicon .glyphicon-asterisk). - Twitter Typeahead dan foydalanish foydasiga Typeahead bekor qilindi .
- Modal belgilar sezilarli darajada o'zgardi. ,
.modal-header,.modal-bodyva.modal-footerbo'limlari endi yaxshi mobil uslub va xatti-harakatlar uchun.modal-contento'ralgan ..modal-dialogBundan tashqari, siz endi belgilashingizda qo'llamasligingiz.hidekerak.modal. remotev3.1.0 dan boshlab modal opsiya tomonidan yuklangan HTML endi.modal-content.oʻrniga (v3.0.0 dan v3.0.3 gacha.modal) ichiga kiritiladi.modal-body. Bu sizga modal tanasini emas, balki modalning sarlavhasi va altbilgisini ham osongina o'zgartirishga imkon beradi.- button.js plaginining belgilash katakchasi va radio funksiyalari endi ularning
data-toggle="buttons"oʻrnigadata-toggle="buttons-checkbox"yokidata-toggle="buttons-radio"belgilashda ishlatiladi. - JavaScript hodisalari nomlar maydonidir. Masalan, modal "shou" hodisasini boshqarish uchun dan foydalaning
'show.bs.modal'. Yorliqlar uchun "ko'rsatilgan" dan foydalaning'shown.bs.tab'va hokazo.
v3.0 ga yangilash va hamjamiyatdan olingan kod parchalari haqida ko'proq ma'lumot olish uchun Bootply ga qarang .