مهاجرت از 2.x به 3.0

Bootstrap 3 با v2.x سازگار نیست. از این بخش به عنوان راهنمای کلی برای ارتقا از v2.x به v3.0 استفاده کنید. برای یک نمای کلی تر، ببینید چه چیزی در اعلامیه انتشار نسخه 3.0 جدید است.

تغییرات عمده طبقاتی

این جدول تغییرات سبک بین v2.x و v3.0 را نشان می دهد.

بوت استرپ 2.x بوت استرپ 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

آنچه حذف شده است

عناصر زیر در نسخه 3.0 حذف شده یا تغییر کرده اند.

عنصر از 2.x حذف شد 3.0 معادل
اقدامات را شکل دهید .form-actions N/A
فرم جستجو .form-search N/A
تشکیل گروه با اطلاعات .control-group.info N/A
اندازه های ورودی با عرض ثابت .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge به جای آن از سیستم شبکه استفاده .form-controlکنید .
ورودی فرم سطح بلوک .input-block-level معادل مستقیم وجود ندارد، اما فرم‌های کنترل مشابه هستند.
دکمه های معکوس .btn-inverse N/A
ردیف سیال .row-fluid .row(شبکه ثابت دیگر وجود ندارد)
لفاف را کنترل می کند .controls N/A
ردیف را کنترل می کند .controls-row .rowیا.form-group
نوار داخلی .navbar-inner N/A
تقسیم کننده های عمودی نوار ناوبری .navbar .divider-vertical N/A
زیر منوی کشویی .dropdown-submenu N/A
ترازهای برگه ها .tabs-left .tabs-right .tabs-below N/A
منطقه Tabbable مبتنی بر قرص .pill-content .tab-content
قاب ناحیه جدولی مبتنی بر قرص .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عوض استفاده کنید .

یادداشت های اضافی

تغییرات دیگر در نسخه 3.0 فوراً مشخص نیست. کلاس‌های پایه، سبک‌های کلیدی و رفتارها برای انعطاف‌پذیری و رویکرد اول تلفن همراه ما تنظیم شده‌اند. در اینجا یک لیست جزئی آمده است:

  • به‌طور پیش‌فرض، کنترل‌های فرم مبتنی بر متن اکنون فقط سبک‌های حداقلی را دریافت می‌کنند. برای رنگ‌های فوکوس و گوشه‌های گرد، .form-controlکلاس را روی عنصر برای استایل اعمال کنید.
  • Text-based form controls with the .form-control class applied are now 100% wide by default. Wrap inputs inside <div class="col-*"></div> to control input widths.
  • .badge no longer has contextual (-success,-primary,etc..) classes.
  • .btn must also use .btn-default to get the "default" button.
  • .row is now fluid.
  • Images are no longer responsive by default. Use .img-responsive for fluid <img> size.
  • The icons, now .glyphicon, are now font based. Icons also require a base and icon class (e.g. .glyphicon .glyphicon-asterisk).
  • Typeahead has been dropped, in favor of using Twitter Typeahead.
  • Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and behavior. Also, you should no longer apply .hide to .modal in your markup.
  • As of v3.1.0, the HTML loaded by the remote modal option is now injected into the .modal-content (from v3.0.0 to v3.0.3, into the .modal) instead of into the .modal-body. This allows you to also easily vary the header and footer of the modal, not just the modal body.
  • The checkbox and radio features of the button.js plugin now both use data-toggle="buttons" instead of data-toggle="buttons-checkbox" or data-toggle="buttons-radio" in their markup.
  • رویدادهای جاوا اسکریپت دارای فضای نام هستند. به عنوان مثال، برای رسیدگی به رویداد معین "نمایش"، از 'show.bs.modal'. برای برگه های "نشان داده شده" استفاده کنید 'shown.bs.tab'و غیره.

برای اطلاعات بیشتر در مورد ارتقاء به نسخه 3.0 و قطعه کدهای انجمن، به Bootply مراجعه کنید .