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 اندروني .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-groupايس هڪجهڙا آهن.
فارم ڪنٽرول لاءِ ان لائن مدد .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).
  • ٽائيپ هيڊ ڇڏيو ويو آهي، Twitter Typeahead استعمال ڪرڻ جي حق ۾ .
  • ماڊل مارڪ اپ خاص طور تي تبديل ٿي چڪو آهي. .modal-header, .modal-body, ۽ .modal-footerسيڪشن هاڻي ان ۾ ويڙهيل آهن .modal-content۽ .modal-dialogبهتر موبائل اسٽائل ۽ رويي لاءِ. انهي سان گڏ، توهان کي هاڻي توهان جي مارڪ اپ ۾ لاڳو نه ٿيڻ .hideگهرجي .modal.
  • v3.1.0 جي طور تي، ماڊل آپشن پاران لوڊ ڪيل HTML remoteهاڻي ان ۾ داخل ڪيو ويو آهي .modal-content(v3.0.0 کان v3.0.3 تائين، ۾ .modal) بدران .modal-body. هي توهان کي آساني سان ماڊل جي هيڊر ۽ فوٽر کي مختلف ڪرڻ جي اجازت ڏئي ٿو، نه صرف ماڊل جسم.
  • بٽڻ.js پلگ ان جي چيڪ بڪس ۽ ريڊيو خاصيتون هاڻي ٻئي استعمال ڪن ٿا data-toggle="buttons"بدران data-toggle="buttons-checkbox"يا data-toggle="buttons-radio"انهن جي مارڪ اپ ۾.
  • JavaScript واقعن جا نالا رکيل آھن. مثال طور، ماڊل "شو" واقعي کي سنڀالڻ لاء، استعمال ڪريو 'show.bs.modal'. ٽيب لاءِ "ڏسو" استعمال ڪريو 'shown.bs.tab'، وغيره.

وڌيڪ معلومات لاءِ v3.0 تي اپڊيٽ ڪرڻ، ۽ ڪميونٽي مان ڪوڊ اسپيٽس، ڏسو Bootply .