کۆچکردن لە 2.x بۆ 3.0

Bootstrap 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-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 .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).
  • تایپ هێد لابراوە، لە بەرژەوەندی بەکارهێنانی تویتەر تایپ هێد .
  • مۆداڵی مارکاپ گۆڕانکارییەکی بەرچاوی بەسەردا هاتووە. ئێستا بەشەکانی .modal-header, .modal-body, و پێچراون و بۆ باشتر ستایل و هەڵسوکەوتی مۆبایل. هەروەها، نابێت چیتر داواکاری پێشکەش بکەیت بۆ لە مارکاپەکەتدا..modal-footer.modal-content.modal-dialog.hide.modal
  • لە v3.1.0 ەوە، ئەو HTMLەی کە لەلایەن هەڵبژاردەی مۆداڵیەوە بارکراوە ئێستا لەبری ئەوەی بچێتە ناو (لە v3.0.0 بۆ v3.0.3، بۆ ناو ) remoteدەرزی لێدەدرێت . ئەمەش ڕێگەت پێدەدات بە ئاسانی سەر و ژێرەوەی مۆداڵەکە بگۆڕیت، نەک تەنها جەستەی مۆداڵی..modal-content.modal.modal-body
  • ئێستا بۆکسی هەڵبژاردن و تایبەتمەندییە ڕادیۆییەکانی پێوەکراوەکەی button.js هەردووکیان data-toggle="buttons"لەبری data-toggle="buttons-checkbox"یان data-toggle="buttons-radio"لە مارکاپەکەیاندا بەکاریدەهێنن.
  • ڕووداوەکانی جاڤاسکڕێپت ناویان بۆ دانراوە. بۆ نموونە، بۆ مامەڵەکردن لەگەڵ ڕووداوی مۆداڵی "نیشاندان"، بەکاربهێنە 'show.bs.modal'. بۆ تابەکان "نیشاندراوە" بەکاربهێنە 'shown.bs.tab', هتد.

بۆ زانیاری زیاتر لەسەر بەرزکردنەوە بۆ v3.0، و پارچە کۆدەکان لە کۆمەڵگەوە، سەیری Bootply بکە .