v3.x ڏانهن لڏپلاڻ
Bootstrap v2.x کان v3.x تائين ڪيئن اپ گريڊ ڪرڻ جي هدايت، وڏين تبديلين تي زور ڏيڻ سان، ڇا نئون آهي، ۽ ڇا هٽايو ويو آهي.
Bootstrap v2.x کان v3.x تائين ڪيئن اپ گريڊ ڪرڻ جي هدايت، وڏين تبديلين تي زور ڏيڻ سان، ڇا نئون آهي، ۽ ڇا هٽايو ويو آهي.
بوٽ اسٽريپ 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
)..modal-header
, .modal-body
, ۽ .modal-footer
سيڪشن هاڻي ان ۾ ويڙهيل آهن .modal-content
۽ .modal-dialog
بهتر موبائل اسٽائل ۽ رويي لاءِ. انهي سان گڏ، توهان کي هاڻي توهان جي مارڪ اپ ۾ لاڳو نه ٿيڻ .hide
گهرجي .modal
.remote
هاڻي ان ۾ داخل ڪيو ويو آهي .modal-content
(v3.0.0 کان v3.0.3 تائين، ۾ .modal
) بدران .modal-body
. هي توهان کي آساني سان ماڊل جي هيڊر ۽ فوٽر کي مختلف ڪرڻ جي اجازت ڏئي ٿو، نه صرف ماڊل جسم.data-toggle="buttons"
بدران data-toggle="buttons-checkbox"
يا data-toggle="buttons-radio"
انهن جي مارڪ اپ ۾.'show.bs.modal'
. ٽيب لاءِ "ڏسو" استعمال ڪريو 'shown.bs.tab'
، وغيره.وڌيڪ معلومات لاءِ v3.0 تي اپڊيٽ ڪرڻ، ۽ ڪميونٽي مان ڪوڊ اسپيٽس، ڏسو Bootply .