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

لا يتوافق Bootstrap 3 مع الإصدارات السابقة مع الإصدار 2.x. استخدم هذا القسم كدليل عام للترقية من v2.x إلى v3.0. للحصول على نظرة عامة أوسع ، راجع الجديد في إعلان إصدار v3.0.

تغييرات كبيرة في الطبقة

يوضح هذا الجدول تغييرات النمط بين v2.x و v3.0.

Bootstrap 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
شبكة صغيرة جدًا (<768 بكسل) .col-xs-*
شبكة صغيرة (768 بكسل) .col-sm-*
شبكة متوسطة (992 بكسل) .col-md-*
شبكة كبيرة (≥ 1200 بكسل) .col-lg-*
فئات المرافق المستجيبة (≥ 1200 بكسل) .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 .navbar-text
رأس Navbar .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 غير متاح
نموذج بحث .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-inner غير متاح
فواصل نافبار العمودية .navbar .divider-vertical غير متاح
القائمة المنسدلة الفرعية .dropdown-submenu غير متاح
محاذاة الجدولة .tabs-left .tabs-right .tabs-below غير متاح
منطقة جدولة قائمة على حبوب منع الحمل .pill-content .tab-content
جزء منطقة جدول قائم على حبوب منع الحمل .pill-pane .tab-pane
قوائم التنقل .nav-list .nav-header لا يوجد مكافئ مباشر ، لكن مجموعات القوائم وقوائمها متشابهة .panel-group.
تعليمات مضمنة لعناصر تحكم النموذج .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 ، لصالح استخدام Twitter Typeahead .
  • تم تغيير ترميز الوسائط بشكل ملحوظ. يتم الآن التفاف المقاطع .modal-headerو .modal-bodyو و لتحسين تصميم وسلوك الأجهزة المحمولة. أيضًا ، لا يجب عليك التقدم بطلب إلى الترميز الخاص بك..modal-footer.modal-content.modal-dialog.hide.modal
  • اعتبارًا من الإصدار 3.1.0 ، يتم الآن إدخال HTML الذي تم تحميله بواسطة remoteالخيار الشرطي في .modal-content(من الإصدار 3.0.0 إلى الإصدار 3.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 .