الترحيل من 2.x إلى 3.0

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 Split into .visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Split into .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

ما هو الجديد

لقد أضفنا عناصر جديدة و غيرنا بعض العناصر الموجودة. إليكم الأنماط الجديدة أو المحدثة.

العنصر الوصف
Panels .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
List groups .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Extra small grid (<768px) .col-xs-*
Small grid (≥768px) .col-sm-*
Medium grid (≥992px) .col-md-*
Large grid (≥1200px) .col-lg-*
Responsive utility classes (≥1200px) .visible-lg .hidden-lg
Offsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Push .col-sm-push-* .col-md-push-* .col-lg-push-*
Pull .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Input height sizes .input-sm .input-lg
Input groups .input-group .input-group-addon .input-group-btn
Form controls .form-control .form-group
Button group sizes .btn-group-xs .btn-group-sm .btn-group-lg
Navbar text .navbar-text
Navbar header .navbar-header
Justified tabs / pills .nav-justified
Responsive images .img-responsive
Contextual table rows .success .danger .warning .active .info
Contextual panels .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Thumbnail image .img-thumbnail
Well sizes .well-sm .well-lg
Alert links .alert-link

ما تمت إزالته

تم إزالة أو تغيير العناصر التالية في v3.0.

العنصر تمت إزالته من 2.x معادل 3.0
Form actions .form-actions N/A
Search form .form-search N/A
Form group with info .control-group.info N/A
Fixed-width input sizes .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Use .form-control and the grid system instead.
Block level form input .input-block-level No direct equivalent, but forms controls are similar.
Inverse buttons .btn-inverse N/A
Fluid row .row-fluid .row (no more fixed grid)
Controls wrapper .controls N/A
Controls row .controls-row .row or .form-group
Navbar inner .navbar-inner N/A
Navbar vertical dividers .navbar .divider-vertical N/A
Dropdown submenu .dropdown-submenu N/A
Tab alignments .tabs-left .tabs-right .tabs-below N/A
Pill-based tabbable area .pill-content .tab-content
Pill-based tabbable area pane .pill-pane .tab-pane
Nav lists .nav-list .nav-header No direct equivalent, but list groups and .panel-groups are similar.
Inline help for form controls .help-inline No exact equivalent, but .help-block is similar.
Non-bar-level progress colors .progress-info .progress-success .progress-warning .progress-danger Use .progress-bar-* on the .progress-bar instead.

ملاحظات إضافية

التغييرات الأخرى في v3.0 ليست واضحة على الفور. تم تعديل الفئات الأساسية، والأنماط الرئيسية، والتصرفات للت гибкость ونهجنا الجوال الأول. إليك قائمة جزئية:

  • بشكل افتراضي، تستقبل عناصر التحكم في النماذج القائمة على النص فقط تجميلًا بسيطًا. للحصول على ألوان التركيز والزوايا الدائرية، استخدم فئة .form-control على العنصر الذي تريد تجليله.
  • عناصر التحكم في النماذج القائمة على النص التي تم تطبيق فئة .form-control عليها الآن على عرض 100٪ بشكل افتراضي. احيط الإدخالات داخل <div class="col-*"></div> للتحكم في أعرض الإدخالات.
  • لم تعد .badge تمتلك فئات سياقية (-success,-primary، إلخ).
  • يجب أن يستخدم .btn أيضًا .btn-default للحصول على "الزر" الافتراضي.
  • الآن .row سائل.
  • لم تعد الصور متجاوبة بشكل افتراضي. استخدم .img-responsive للحصول على حجم <img> سائل.
  • أصبحت الأيقونات، الآن .glyphicon، مبنية على الخط. تتطلب الأيقونات أيضًا فئة أساس وأيقونة (على سبيل المثال .glyphicon .glyphicon-asterisk).
  • تم إزالة Typeahead، لصالح استخدام Twitter Typeahead.
  • تغير بنية Modal بشكل كبير. يتم الآن تضمين أقسام .modal-header و .modal-body و .modal-footer في .modal-content و .modal-dialog لتлучيع التصميم والسلوك على الأجهزة المحمولة. أيضًا، يجب ألا تستخدم .hide على .modal في بنيتك.
  • اعتبارًا من الإصدار v3.1.0، يتم الآن حقن HTML الذي يتم تحميله بواسطة خيار Modal remote في .modal-content (من v3.0.0 إلى v3.0.3، في .modal) بدلاً من .modal-body. هذا يسمح لك أيضًا بتغيير رأس وتذييل Modal بسهولة، ليس فقط نص Modal.
  • تستخدم ميزات الخانة والراديو في إضافة button.js الآن كلاهما data-toggle="buttons" بدلاً من data-toggle="buttons-checkbox" أو data-toggle="buttons-radio" في بنيتها.
  • تكون أحداث JavaScript مساحة اسم. على سبيل المثال، للتعامل مع حدث "show" Modal، استخدم 'show.bs.modal'. للعناوين "shown" استخدم 'shown.bs.tab'، إلخ.

للحصول على المزيد من المعلومات حول الترقية إلى v3.0، و сниппات الكود من المجتمع، راجع Bootply.