2.x سے 3.0 تک منتقلی

بوٹسٹریپ 3 v2.x کے ساتھ پیچھے کی طرف مطابقت نہیں رکھتا ہے۔ اس سیکشن کو v2.x سے v3.0 میں اپ گریڈ کرنے کے لیے عام گائیڈ کے طور پر استعمال کریں۔ ایک وسیع تر جائزہ کے لیے، دیکھیں کہ v3.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 متن .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

کیا ہٹا دیا گیا ہے۔

v3.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 عمودی تقسیم کرنے والے .navbar .divider-vertical N / A
ڈراپ ڈاؤن ذیلی مینیو .dropdown-submenu N / A
ٹیب کی صف بندی .tabs-left .tabs-right .tabs-below N / A
گولی پر مبنی ٹیبل ایریا .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بجائے استعمال کریں ۔

اضافی نوٹس

v3.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
  • v3.1.0 تک، remoteموڈل آپشن کے ذریعے بھری ہوئی ایچ ٹی ایم ایل کو اب میں کے بجائے .modal-content(v3.0.0 سے v3.0.3 تک، میں .modal) داخل کیا جاتا ہے .modal-body۔ یہ آپ کو آسانی سے موڈل کے ہیڈر اور فوٹر کو تبدیل کرنے کی اجازت دیتا ہے، نہ صرف موڈل باڈی میں۔
  • بٹن.js پلگ ان کے چیک باکس اور ریڈیو فیچرز اب اپنے مارک اپ data-toggle="buttons"کے بجائے data-toggle="buttons-checkbox"یا ان میں استعمال ہوتے ہیں۔data-toggle="buttons-radio"
  • جاوا اسکرپٹ کے واقعات نام کی جگہ پر ہیں۔ مثال کے طور پر، موڈل "شو" ایونٹ کو ہینڈل کرنے کے لیے، استعمال کریں 'show.bs.modal'۔ ٹیبز کے لیے "دکھایا گیا" استعمال کریں 'shown.bs.tab'، وغیرہ۔

v3.0 میں اپ گریڈ کرنے اور کمیونٹی سے کوڈ کے ٹکڑوں کے بارے میں مزید معلومات کے لیے، Bootply دیکھیں ۔