مهاجرت از 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کلاس را روی عنصر برای استایل اعمال کنید.
  • کنترل‌های فرم مبتنی بر متن با .form-controlکلاس اعمال شده اکنون به‌طور پیش‌فرض 100% گسترده هستند. ورودی ها را در داخل بپیچید <div class="col-*"></div>تا عرض ورودی را کنترل کنید.
  • .badgeدیگر کلاسهای متنی (-موفقیت،-اصلی، و غیره) ندارد.
  • .btnهمچنین باید از .btn-defaultدکمه "پیش فرض" استفاده کنید.
  • .rowاکنون سیال است
  • تصاویر دیگر به طور پیش فرض پاسخگو نیستند. .img-responsiveبرای اندازه مایع استفاده <img>کنید.
  • نمادها، اکنون .glyphicon، اکنون بر اساس فونت هستند. نمادها همچنین به یک کلاس پایه و نماد نیاز دارند (به عنوان مثال .glyphicon .glyphicon-asterisk).
  • Typeahead حذف شده است، به نفع استفاده از توییتر Typeahead .
  • نشانه گذاری مودال به طور قابل توجهی تغییر کرده است. بخش‌های .modal-header, .modal-body, و .modal-footerاکنون برای استایل و رفتار بهتر در تلفن همراه پیچیده .modal-contentشده‌اند .modal-dialog. همچنین، دیگر نباید در نشانه‌گذاری خود درخواست .hideدهید .modal.
  • از نسخه 3.1.0، HTML بارگیری شده توسط remoteگزینه modal اکنون به جای اینکه در ) به .modal-content(از v3.0.0 تا v3.0.3، به .modal) تزریق شود .modal-body. این به شما این امکان را می دهد که به راحتی هدر و پاورقی مدال را تغییر دهید، نه فقط بدنه مدال.
  • چک باکس و ویژگی های رادیویی افزونه button.js اکنون هر دو data-toggle="buttons"به جای data-toggle="buttons-checkbox"یا data-toggle="buttons-radio"در نشانه گذاری خود استفاده می کنند.
  • رویدادهای جاوا اسکریپت دارای فضای نام هستند. به عنوان مثال، برای رسیدگی به رویداد معین "نمایش"، از 'show.bs.modal'. برای برگه های "نشان داده شده" استفاده کنید 'shown.bs.tab'و غیره.

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