in English

کۆچکردن بۆ v4

Bootstrap 4 دووبارە نووسینەوەیەکی سەرەکییە بۆ تەواوی پڕۆژەکە. دیارترین گۆڕانکارییەکان لە خوارەوە کورت دەکرێنەوە، دواتر گۆڕانکاری تایبەتتر بۆ پێکهاتە پەیوەندیدارەکان.

گۆڕانکاری جێگیر

بە گواستنەوە لە Beta 3 بۆ وەشانی v4.x ی جێگیرمان، هیچ گۆڕانکارییەکی شکاندن نییە، بەڵام هەندێک گۆڕانکاری بەرچاو هەیە.

چاپکردن

  • چاککردنی سوودمەندی چاپی شکاو. پێشتر بەکارهێنانی .d-print-*پۆلێک بە شێوەیەکی چاوەڕواننەکراو هەر .d-*پۆلێکی تر ڕەتدەکاتەوە. ئێستا، ئەوان لەگەڵ سوودمەندییەکانی تری پیشاندانی ئێمەدا دەگونجێن و تەنها بۆ ئەو میدیایە ( @media print).

  • فراوانکردنی سوودمەندیەکانی پیشاندانی چاپی بەردەست بۆ ئەوەی لەگەڵ سوودمەندیەکانی تردا بگونجێت. بێتا 3 و سەرووتر تەنها block, inline-block, inline, و none. جێگیر v4 زیادکرا flex, inline-flex, table, table-row, و table-cell.

  • جێگیرکردنی پێشبینی چاپکردن لە سەرانسەری وێبگەڕەکاندا بە شێوازی چاپی نوێ کە دیاری دەکات @page size.

گۆڕانکارییەکانی بێتا ٣

لە کاتێکدا Beta 2 بەشێکی زۆری گۆڕانکارییەکانی شکاندنی ئێمەی لە قۆناغی بێتادا بینی، بەڵام هێشتا چەند گۆڕانکارییەکمان هەیە کە پێویستیان بە چارەسەرکردن بوو لە بڵاوکردنەوەی Beta 3. ئەم گۆڕانکاریانە ئەگەر لە Beta 2 یان هەر وەشانی کۆنتری Bootstrap نوێ دەکەیتەوە بۆ Beta 3 جێبەجێ دەکرێن.

هەمەجۆر

  • $thumbnail-transitionگۆڕاوە بەکارنەهێنراوەکەی لابرد . ئێمە هیچ شتێکمان نەدەگواستەوە، بۆیە تەنها کۆدی زیادە بوو.
  • پاکێجی npm چیتر هیچ فایلێکی تر لەخۆناگرێت جگە لە فایلە سەرچاوە و distەکانمان؛ ئەگەر پشتت بەوان بەستبوو و لە ڕێگەی node_modulesفۆڵدەرەکەوە سکریپتەکانمان بەڕێوە دەبرد، پێویستە کاری خۆت بگونجێنی.

فۆڕمەکان

  • دووبارە نووسینەوەی هەردوو سندوقی هەڵبژاردن و ڕادیۆی تایبەت و پێشوەختە. ئێستا، هەردووکیان پێکهاتەی HTML ی هاوتایان هەیە (دەرەوە <div>لەگەڵ خوشک و برا <input>و <label>) و هەمان شێوازی نەخشە (بەپێی پێشوەختەی کۆکراوە، لە هێڵ لەگەڵ پۆلی دەستکاریکەر). ئەمە ڕێگەمان پێدەدات کە ناوەکە ستایل بکەین بە پشتبەستن بە دۆخی زانیارییەکانی ناوەوە، پشتگیریکردن بۆ disabledتایبەتمەندییەکە ئاسانتر بکات (پێشتر پێویستی بە پۆلێکی باوک هەبوو) و باشتر پشتگیری لە چەسپاندنی فۆڕمەکەمان بکەین.

    وەک بەشێک لەم کارە، ئێمە CSSمان گۆڕیوە بۆ بەڕێوەبردنی چەندین background-images لەسەر سندوقی هەڵبژاردن و ڕادیۆکانی فۆڕمی تایبەتمەند. پێشتر ئەو .custom-control-indicatorتوخمەی ئێستا لابرا ڕەنگی پاشبنەما و گرادێنت و ئایکۆنی SVG ی هەبوو. خۆکارکردنی گرادێنتەکەی پاشبنەما بە واتای گۆڕینی هەموو ئەوانە بوو هەر جارێک کە پێویستت بە گۆڕینی تەنها یەکێکیان بوو. ئێستا، ئێمە هەمانە .custom-control-label::beforeبۆ پڕکردنەوە و گرادێنت و .custom-control-label::afterمامەڵە لەگەڵ ئایکۆنەکە دەکات.

    بۆ ئەنجامدانی پشکنینی تایبەتمەند لە هێڵدا، زیاد بکە .custom-control-inline.

  • هەڵبژێرەری نوێکراوە بۆ گروپەکانی دوگمەی بنەمادار بە چوونەژوورەوە. لەبری ئەوەی [data-toggle="buttons"] { }بۆ ستایل و ڕەفتار بەکاربهێنین، ئێمە dataتایبەتمەندییەکە تەنها بۆ ڕەفتارەکانی JS بەکاردەهێنین و پشت بە .btn-group-toggleپۆلێکی نوێ دەبەستین بۆ ستایلکردن.

  • لابرا .col-form-legendلە بەرژەوەندی کەمێک باشتر .col-form-label. بەم شێوەیە .col-form-label-smو .col-form-label-lgدەتوانرێت <legend>بە ئاسانی لەسەر توخمەکان بەکاربهێنرێت.

  • زانیارییەکانی ناوەوەی پەڕگەی تایبەت گۆڕانکارییان لە $custom-file-textگۆڕاوەی Sass یان وەرگرت. چیتر نەخشەیەکی هێلانەکراوی ساس نییە و ئێستا تەنها یەک ڕستە بەهێز دەکات- Browseدوگمەکە وەک ئەوەی ئێستا تاکە توخمە ساختەیە کە لە ساسەکەمانەوە دروستکراوە. ئێستا Choose fileدەقەکە لە .custom-file-label.

گروپەکانی هاتنە ژوورەوە

  • ئێستا زیادکراوەکانی گروپی هاتنەژوورەوە تایبەتن بە جێگیرکردنیان بە بەراورد بە هاتنەژوورەوەیەک. ئێمە وازمان هێناوە .input-group-addonو .input-group-btnبۆ دوو پۆلی نوێ، .input-group-prependو .input-group-append. پێویستە ئێستا بە ڕوونی append یان prepend بەکاربهێنیت، ئەمەش زۆربەی CSS ی ئێمە ئاسان دەکات. لەناو append یان prepend دا، دوگمەکانت بەو شێوەیە دابنێ کە لە هەر شوێنێکی تردا هەبن، بەڵام دەقەکە لە .input-group-text.

  • ئێستا شێوازەکانی ڕەچاوکردن پشتگیری دەکرێن، هەروەها چەندین زانیاری (هەرچەندە دەتوانیت تەنها یەک هاتنەژوورەوە بۆ هەر گروپێک پشتڕاست بکەیتەوە).

  • پۆلەکانی قەبارەدانان دەبێت لەسەر دایک .input-groupو باوک بێت نەک توخمەکانی فۆڕمی تاکەکەسی.

گۆڕانکارییەکانی بێتا ٢

لە کاتێکدا لە تاقیکاریداین، ئامانجمان ئەوەیە هیچ گۆڕانکارییەکی شکاومان نەبێت. بەڵام هەمیشە شتەکان بەو شێوەیە ناڕۆن کە پلانی بۆ دانراوە. لە خوارەوە ئەو گۆڕانکارییە شکاوانە دەخەینەڕوو کە دەبێت لەبەرچاو بگیرێن لەکاتی گواستنەوە لە Beta 1 بۆ Beta 2.

شکاندن

  • گۆڕاو $badge-colorو بەکارهێنانی لەسەر .badge. ئێمە فەنکشنی کۆنتراستی ڕەنگ بەکاردەهێنین بۆ هەڵبژاردنی بە colorپشتبەستن بە background-color، بۆیە گۆڕاوەکە پێویست نییە.
  • grayscale()ناوی فەنکشنەکە گۆڕدراوە بۆ بۆ gray()ئەوەی ناکۆکی لەگەڵ grayscaleفلتەری سروشتی CSS نەشکێنێت.
  • ناوی گۆڕدرا .table-inverse, .thead-inverse, و .thead-defaultبۆ .*-darkو .*-light, هاوتای ڕەنگەکانی ئێمە کە لە شوێنەکانی تر بەکارهێنراون.
  • ئێستا خشتەکانی وەڵامدەرەوە پۆلەکان بۆ هەر خاڵێکی شکاندنی تۆڕ دروست دەکەن. ئەمەش لە Beta 1 دەشکێتەوە بەو پێیەی ئەو شتەی .table-responsiveکە بەکاری دەهێنیت زیاتر لە .table-responsive-md. دەتوانیت ئێستا بەکاری بهێنیت .table-responsiveیان .table-responsive-{sm,md,lg,xl}بەپێی پێویست.
  • پشتگیری Bower وەلا هێنا وەک بەڕێوەبەری پاکێج بۆ بەدیلەکان (بۆ نموونە، Yarn یان npm) بەکارنەهێنراوە. بۆ زانیاری زیاتر سەیری bower/bower#2298 بکە.
  • هێشتا Bootstrap پێویستی بە jQuery 1.9.1 یان بەرزتر هەیە، بەڵام ئامۆژگاریت دەکرێت کە وەشانی 3.x بەکاربهێنیت چونکە وێبگەڕەکانی پشتگیریکراوی v3.x ئەوانەن کە Bootstrap پشتگیری دەکات لەگەڵ v3.x هەندێک چاکسازی ئاسایشی هەیە.
  • .form-control-labelپۆلی بەکارنەهێنراوی لابرد . ئەگەر تۆ سوودت لەم پۆلە وەرگرت، ئەوە دووبارەی ئەو .col-form-labelپۆلە بوو کە بە شێوەیەکی ڕاست ناوەندی a <label>لەگەڵ هاتنەژوورەوەی پەیوەندیدار لە نەخشەی فۆڕمی ئاسۆیی.
  • گۆڕی color-yiqلە mixin کە colorتایبەتمەندیەکەی لەخۆگرتبوو بۆ فەنکشنێک کە بەهایەک دەگەڕێنێتەوە، ڕێگەت پێدەدات بۆ هەر تایبەتمەندییەکی CSS بەکاری بهێنیت. بۆ نموونە لەبری color-yiq(#000), دەنووسیت color: color-yiq(#000);.

گرینگترین شتەکان

  • بەکارهێنانی نوێی pointer-eventsلەسەر مۆداڵەکان ناساند. دەرەوە .modal-dialogبە ڕووداوەکاندا تێدەپەڕێت لەگەڵ pointer-events: noneبۆ مامەڵەکردن لەگەڵ کلیکەکانی تایبەت (کە وا دەکات بتوانیت تەنها گوێبگریت لەسەر .modal-backdropبۆ هەر کلیکێک)، و پاشان بەرپەرچی دەداتەوە بۆ ڕاستەقینە .modal-contentلەگەڵ pointer-events: auto.

پوختە

لێرەدا ئەو شتە گەورانەی بلیت دەخەینەڕوو کە دەتەوێت ئاگاداریان بیت لەکاتی گواستنەوە لە v3 بۆ v4.

پشتگیری وێبگەڕ

  • پشتگیری IE8 و IE9 و iOS 6 ی دابەزاند. v4 ئێستا تەنها IE10+ و iOS 7+ ە. بۆ ئەو سایتانەی کە پێویستیان بە هەریەکێک لەوانە هەیە، v3 بەکاربهێنە.
  • زیادکردنی پشتگیری فەرمی بۆ وێبگەڕ و وێبڤیۆی ئەندرۆید v5.0 Lollipop. وەشانی پێشووی وێبگەڕی ئەندرۆید و وێبڤیۆ تەنها بە شێوەیەکی نافەرمی پشتگیری دەکرێن.

گۆڕانکارییە جیهانییەکان

  • Flexbox بە شێوازی پێشوەختە چالاک کراوە. بەگشتی ئەمە بە واتای دوورکەوتنەوە لە فلۆتەکان و زیاتر لە سەرانسەری پێکهاتەکانماندا دێت.
  • لە Less گۆڕدرا بۆ Sass بۆ فایلە سەرچاوەی CSS ەکانمان.
  • لە pxبۆ remوەک یەکەی سەرەکی CSS ی ئێمە گۆڕدرا، هەرچەندە هێشتا پێکسڵەکان بۆ پرسیارەکانی میدیا و هەڵسوکەوتی تۆڕ بەکاردەهێنرێن چونکە دەروازەی بینینی ئامێرەکان بەهۆی قەبارەی جۆرەکانەوە کاریگەرییان لەسەر نییە.
  • قەبارەی فۆنتەکانی جیهانی لە 14pxبۆ 16px.
  • نوێکردنەوەی قاتەکانی تۆڕ بۆ زیادکردنی بژاردەی پێنجەم (ناونیشانکردنی ئامێرە بچووکەکان لە 576pxو خوارەوە) و لابردنی -xsئینفیکس لەو پۆلانە. نموونە: .col-6.col-sm-4.col-md-3.
  • تەوەرەی هەڵبژاردەی جیاوازی گۆڕی بە هەڵبژاردەی ڕێکخراو لە ڕێگەی گۆڕاوەکانی SCSS (بۆ نموونە، $enable-gradients: true).
  • سیستەمی دروستکردن چاککراوەتەوە بۆ بەکارهێنانی زنجیرەیەک سکریپتی npm لەبری Grunt. بۆ هەموو سکریپتەکان سەیری بکە package.json، یان پڕۆژەکەمان readme بۆ پێداویستیەکانی گەشەپێدانی ناوخۆیی.
  • بەکارهێنانی بێ وەڵامدانەوەی Bootstrap چیتر پشتگیری ناکرێت.
  • Customizer ی ئۆنلاین وەلا هێنا لە بەرژەوەندی بەڵگەنامەی ڕێکخستنی فراوانتر و دروستکردنی تایبەتمەند.
  • دەیان پۆلی سوودمەندی نوێ زیادکرا بۆ جووتەکانی بەهای تایبەتمەندی باوی CSS و کورتە ڕێگاکانی دووری پەراوێز/پادکردن.

سیستەمی تۆڕ

  • گواسترایەوە بۆ flexbox.
    • پشتگیری زیادکرا بۆ flexbox لە می��سینەکانی تۆڕ و پۆلە پێشوەختە پێناسەکراوەکان.
    • وەک بەشێک لە flexbox، پشتگیری بۆ پۆلەکانی ڕێکخستنی ڕاست و ئاسۆیی لەخۆگرتبوو.
  • ناوی پۆلەکانی تۆڕ نوێکرایەوە و قاتێکی نوێی تۆڕ.
    • smلە خوارەوە قاتێکی تۆڕی نوێ 768pxزیاد کراوە بۆ کۆنترۆڵی دانەوێڵەیی زیاتر. ئێمە ئێستا xs, sm, md, lg, و xl. ئەمەش بەو مانایەیە کە هەموو قاتێک ئاستێک بەرزکراوەتەوە (بۆیە .col-md-6لە v3 ئێستا .col-lg-6لە v4دایە).
    • xsپۆلەکانی تۆڕ دەستکاری کراون بۆ ئەوەی پێویست نەکات ئینفیکسەکە بە وردی نوێنەرایەتی بکات کە دەست دەکەن بە جێبەجێکردنی ستایلەکان لە min-width: 0بەهای پێکسڵی دانراو نەک نەک. لەبری .col-xs-6ئەوەی , ئێستا .col-6. هەموو قاتەکانی تری تۆڕ پێویستیان بە ئینفیکس هەیە (بۆ نموونە، sm).
  • قەبارەی تۆڕ و میکسین و گۆڕاوەکان نوێکراونەتەوە.
    • ئێستا کانیاوەکانی تۆڕ نەخشەی ساسیان هەیە بۆیە دەتوانیت پانایی کانیاوەکانی تایبەت لە هەر خاڵێکی شکاندندا دیاری بکەیت.
    • میکسینەکانی تۆڕ نوێکراونەتەوە بۆ بەکارهێنانی make-col-readyمیکسینێکی ئامادەکاری و a make-colبۆ ڕێکخستنی flexو max-widthبۆ قەبارەدانانی ستوونی تاکەکەسی.
    • گۆڕینی خاڵەکانی شکاندنی پرسیاری میدیای سیستەمی تۆڕ و پاناییەکانی دەفرەکان بۆ حسابکردن بۆ قاتەکانی تۆڕی نوێ و دڵنیابوون لە دابەشکردنی ستوونەکان بە یەکسانی بەسەریاندا 12لە پانایی زۆرترینیاندا.
    • ئێستا خاڵەکانی شکاندنی تۆڕ و پانایی کۆنتێنەرەکان لە ڕێگەی نەخشەکانی Sass ( $grid-breakpointsو $container-max-widths) مامەڵەیان لەگەڵ دەکرێت لەبری مشتێک گۆڕاوە جیاوازەکان. ئەمانە بە @screen-*تەواوی جێگەی گۆڕاوەکان دەگرنەوە و ڕێگەت پێدەدەن بە تەواوی قاتەکانی تۆڕەکە خۆکارانە دابنێیت.
    • هەروەها پرسیارەکانی میدیا گۆڕانکاری بەسەردا هاتووە. لەبری ئەوەی هەر جارێک بەیاننامەکانی پرسیاری میدیاییمان بە هەمان بەها دووبارە بکەینەوە، ئێستا @include media-breakpoint-up/down/only. ئێستا لەبری نووسین @media (min-width: @screen-sm-min) { ... }, دەتوانیت بنووسیت @include media-breakpoint-up(sm) { ... }.

پێکهاتەکان

  • پانێڵەکان، وێنە بچووکەکان و بیرەکان بۆ پێکهاتەیەکی نوێ کە هەموو شتێک دەگرێتەوە، کارتەکان .
  • فۆنتەکەی ئایکۆنی Glyphicons ی دابەزاند. ئەگەر پێویستت بە ئایکۆن هەیە، هەندێک بژاردە بریتین لە:
  • پێوەکراوەکەی Affix jQuery ی وەلا هێنا.
    • پێشنیار دەکەین position: stickyلەبری ئەوە بەکاری بهێنین. بۆ زانیاری زیاتر و پێشنیارەکانی تایبەتی پۆلیفیل سەیری HTML5 بکە تکایە نووسینەکە بکە. پێشنیارێک ئەوەیە کە @supportsیاسایەک بەکاربهێنرێت بۆ جێبەجێکردنی (بۆ نموونە، @supports (position: sticky) { ... })
    • ئەگەر تۆ Affix بەکاردەهێنیت بۆ جێبەجێکردنی زیادە، نا- positionستایلەکان، لەوانەیە پۆلیفیلەکان پشتگیری لە کەیسی بەکارهێنانەکەت نەکەن. یەکێک لە بژاردەکان بۆ ئەم جۆرە بەکارهێنانانە کتێبخانەی ScrollPos-Styler ی لایەنی سێیەمە .
  • پێکهاتەی پەیجەرەکەی دابەزاند چونکە لە بنەڕەتدا دوگمەی کەمێک تایبەتمەند بوو.
  • نزیکەی هەموو پێکهاتەکان دووبارە فاکتەری کردەوە بۆ بەکارهێنانی هەڵبژێرەری پۆلی زیاتری بێ هێلانە لەبری هەڵبژێرەری منداڵانی زۆر تایبەت.

بەپێی پێکهاتە

ئەم لیستە گۆڕانکارییە سەرەکییەکان بەپێی پێکهاتەکان لە نێوان v3.xx و v4.0.0 تیشک دەخاتە سەر.

دووبارە بوت بکەرەوە

نوێ لە Bootstrap 4 Reboot ە , ستایلشیتێکی نوێیە کە لەسەر Normalize بنیات دەنرێت بە ستایلەکانی ڕێستکردنی تا ڕادەیەک بۆچوونەکانی خۆمان. ئەو هەڵبژێرەرانەی لەم پەڕگەیەدا دەردەکەون تەنها توخمەکان بەکاردەهێنن- لێرەدا هیچ پۆلێک نییە. ئەمەش شێوازەکانی ڕێستکردنمان لە ستایلە پێکهاتەکانمان جیا دەکاتەوە بۆ نزیکبوونەوەی مۆدیۆلارتر. هەندێک لە گرنگترین ڕێستەکان کە ئەمە لەخۆدەگرێت بریتین لە box-sizing: border-boxگۆڕانکاری، گواستنەوە لە emیەکەکانەوە remلەسەر زۆرێک لە توخمەکان، شێوازەکانی بەستەر، و زۆرێک لە ڕێستکردنی توخمەکانی فۆڕم.

تایپۆگرافی

  • هەموو .text-سوودمەندیەکانی گواستەوە بۆ _utilities.scssفایلەکە.
  • وازی لێهێنراوە .page-headerوەک چۆن دەتوانرێت ستایلەکانی لە ڕێگەی سوودمەندییەکانەوە جێبەجێ بکرێت.
  • .dl-horizontalلابراوە. لەبری ئەوە، .rowلەسەر <dl>بەکاربهێنە و پۆلەکانی ستوونی تۆڕ (یان میکسین) لەسەر ئەو <dt>و <dd>منداڵەکان بەکاربهێنە.
  • دیزاینکردنەوەی بلۆککۆتەکان، گواستنەوەی ستایلەکانیان لە <blockquote>توخمەکەوە بۆ یەک پۆل، .blockquote. دەستکاریکەرەکە .blockquote-reverseبۆ سوودمەندییەکانی دەق لادرا.
  • .list-inline.list-inline-itemئێستا داوا دەکات کە منداڵەکانی لە لیستی ئەو شتانەدا بن کە پۆلی نوێیان بۆ جێبەجێ کردبێت.

وێنەکان

  • ناوی گۆڕدراوە .img-responsiveبۆ .img-fluid.
  • ناوی گۆڕدراوە .img-roundedبۆ.rounded
  • ناوی گۆڕدراوە .img-circleبۆ.rounded-circle

خشتەکان

  • نزیکەی هەموو نموونەکانی >هەڵبژێرەرەکە لابراون، واتە ئێستا خشتەکانی هێلانەکراو بە شێوەیەکی ئۆتۆماتیکی ستایلەکان لە دایک و باوکیان بە میرات دەگرن. ئەمەش هەڵبژێرەرەکانمان و خۆکارکردنە ئەگەرییەکانمان زۆر ئاسان دەکات.
  • ناوی گۆڕدراوە .table-condensedبۆ .table-smبۆ یەکدەنگی.
  • .table-inverseبژاردەیەکی نوێی زیاد کرد .
  • دەستکاریکەرەکانی سەردێڕی خشتەکان زیادکرا: .thead-defaultو .thead-inverse.
  • ناوی پۆلە کۆنتێکستەکان گۆڕدرا بۆ ئەوەی .table--پێشگریان هەبێت. لێرەوە .active, .success, .warning, .dangerو .infoبۆ .table-active, .table-success, .table-warning, .table-dangerو .table-info.

فۆڕمەکان

  • توخمە گواستراوەکە دەگەڕێتەوە بۆ _reboot.scssفایلەکە.
  • ناوی گۆڕدراوە .control-labelبۆ .col-form-label.
  • ناوی گۆڕاوە .input-lgو .input-smبە رێککەوت بۆ .form-control-lgو ..form-control-sm
  • .form-group-*لە پێناو سادەییدا وانەکانی وازیان هێنا. .form-control-*ئێستا لەبری ئەوە پۆلەکان بەکاربهێنە .
  • دابەزاند .help-blockو جێگەی گرتەوە بە .form-textبۆ دەقی یارمەتی ئاستی بلۆک. بۆ دەقی یارمەتی ناو هێڵ و هەڵبژاردە نەرمەکانی تر، پۆلەکانی سوودبەخش وەک .text-muted.
  • کەوتە خوارەوە .radio-inlineو .checkbox-inline.
  • چەسپاو .checkboxو .radioلەناو و چینە .form-checkجیاوازەکان ..form-check-*
  • فۆرمەکانی ئاسۆیی چاکسازییان لەسەر کراوە:
    • .form-horizontalمەرجی پۆلەکەی وەلا هێنا .
    • .form-groupچیتر ستایلەکان لە .rowvia mixin جێبەجێ ناکات، بۆیە .rowئێستا پێویستە بۆ نەخشەی تۆڕی ئاسۆیی (بۆ نموونە، <div class="form-group row">).
    • پۆلێکی نوێ زیادکرا .col-form-labelبۆ ناوەکانی ناوەڕاستی ڕاست بە .form-controls.
    • نوێ زیادکرا .form-rowبۆ نەخشەی فۆڕمی کۆمپاکت لەگەڵ پۆلەکانی تۆڕ (گۆڕینی خۆت .rowبۆ a .form-rowو بڕۆ).
  • پشتگیری فۆڕمی تایبەتمەند زیادکرا (بۆ بۆکسەکانی هەڵبژاردن، ڕادیۆ، هەڵبژاردنەکان، و چوونەژوورەوەی پەڕگە).
  • .has-error, .has-warning, و پۆلەکان .has-successگۆڕدرا بە چەسپاندنی فۆڕمی HTML5 لە ڕێگەی CSS's :invalidو :validpseudo-classes.
  • ناوی گۆڕدراوە .form-control-staticبۆ .form-control-plaintext.

دوگمەکان

  • ناوی گۆڕدراوە .btn-defaultبۆ .btn-secondary.
  • .btn-xsپۆلەکەی بە تەواوی وەلا ناوە وەک ڕێژەیی .btn-smزۆر بچووکترە لە v3's.
  • تایبەتمەندی دوگمەی دۆخدار لە button.jsپێوەکراوەکەی jQuery لابراوە. ئەمەش شێوازەکانی $().button(string)و دەگرێتەوە. $().button('reset')ئێمە ئامۆژگاری دەکەین لەبری ئەوە بڕێکی بچووک لە جاڤاسکڕێپتی تایبەت بەکاربهێنیت، کە سوودی دەبێت کە بە تەواوی بەو شێوەیە ڕەفتار بکەیت کە تۆ دەتەوێت.
    • تێبینی بکە کە تایبەتمەندییەکانی تری پێوەکراوەکە (بۆکسەکانی هەڵبژاردنی دوگمە، ڕادیۆی دوگمە، دوگمەی تاک-تۆگڵ) لە v4دا پارێزراون.
  • دوگمەکان بگۆڕە [disabled]بۆ :disabledوەک پشتگیری IE9+ :disabled. بەڵام fieldset[disabled]هێشتا پێویستە چونکە مەیدانی لەکارخراوە ڕەسەنەکان هێشتا هەڵەن لە IE11 .

گروپی دوگمە

  • دووبارە نووسینەوەی پێکهاتەکە بە flexbox.
  • لابرا .btn-group-justified. وەک جێگرەوەیەک دەتوانیت <div class="btn-group d-flex" role="group"></div>وەک پێچێک لە دەوری توخمەکان بەکاری بهێنیت کە .w-100.
  • پۆلەکەی بە تەواوی وەلا هێنا .btn-group-xsلابردنی .btn-xs.
  • دووری ڕوون لە نێوان گروپەکانی دوگمەکان لە ئامرازەکانی دوگمەکاندا لابرا؛ ئێستا سوودمەندییەکانی پەراوێز بەکاربهێنە.
  • باشترکردنی بەڵگەنامەکان بۆ بەکارهێنان لەگەڵ پێکهاتەکانی تر.
  • لە هەڵبژێرەری باوکەوە گۆڕدرا بۆ پۆلی تاک بۆ هەموو پێکهاتەکان، دەستکاریکەرەکان و هتد.
  • شێوازەکانی دابەزینی ئاسانکراو بۆ ئەوەی چیتر نانێردرێت بە تیری بەرەو سەرەوە یان خوارەوە کە بە مینیوی دابەزینەوە بەستراوەتەوە.
  • ئێستا دەتوانرێت درۆپداونەکان بە <div>s یان <ul>s دروست بکرێت.
  • دووبارە دروستکردنەوەی شێوازەکانی دابەزین و مارکاپ بۆ پێشکەشکردنی پشتگیری ئاسان و بنیات نراو بۆ بابەتە دابەزینەکان <a>و لەسەر بنەمای.<button>
  • ناوی گۆڕدراوە .dividerبۆ .dropdown-divider.
  • ئێستا شتە دابەزینەکان پێویستیان بە .dropdown-item.
  • وەرچەرخانەکانی دابەزین چیتر پێویستیان بە ڕوون نییە <span class="caret"></span>; ئێستا ئەمە بە شێوەیەکی ئۆتۆماتیکی لە ڕێگەی CSS's ::afteron دابین دەکرێت .dropdown-toggle.

سیستەمی تۆڕ

  • خاڵێکی نوێی 576pxشکاندنی تۆڕ زیادکرا وەک sm, واتە ئێستا پێنج کۆی قات هەیە ( xs, sm, md, lg, و xl).
  • ناوی پۆلەکانی گۆڕینی تۆڕی وەڵامدەرەوە گۆڕدرا لە .col-{breakpoint}-{modifier}-{size}بۆ .{modifier}-{breakpoint}-{size}بۆ پۆلەکانی تۆڕی سادەتر.
  • پۆلەکانی گۆڕینی پاڵدان و ڕاکێشان بۆ پۆلە نوێیەکانی بەهێزکراوی فلیکسبۆکس وەستاند order. بۆ نموونە لەبری .col-8.push-4و ، و .col-4.pull-8بەکاردەهێنیت ..col-8.order-2.col-4.order-1
  • پۆلەکانی سوودمەندی flexbox زیادکرا بۆ سیستەمی تۆڕ و پێکهاتەکان.

گروپەکان بنووسە

  • دووبارە نووسینەوەی پێکهاتەکە بە flexbox.
  • بە پۆلێکی a.list-group-itemڕوون گۆڕدراوە، .list-group-item-action, بۆ ستایلکردنی بەستەر و وەشانی دوگمەی شتەکانی گروپی لیست.
  • پۆل زیادکراوە .list-group-flushبۆ بەکارهێنان لەگەڵ کارتەکان.
  • دووبارە نووسینەوەی پێکهاتەکە بە flexbox.
  • بە سەرنجدان بە گواستنەوە بۆ فلێکس بۆکس، ڕێکخستنی ئایکۆنەکانی ڕەتکردنەوە لە سەردێڕەکەدا ئەگەری زۆرە بشکێت چونکە ئێمە چیتر فلۆتەکان بەکارناهێنین. ناوەڕۆکی هەڵدەفڕێت لە پێش هەموو شتێکەوەیە، بەڵام لەگەڵ فلیکس بۆکس ئەوە ئیتر وا نییە. ئایکۆنەکانی دەرکردنت نوێ بکەرەوە بۆ ئەوەی دوای ناونیشانی مۆداڵەکان بێنە بۆ چاککردنەوە.
  • بژاردەکە ( remoteکە دەتوانرێت بەکاربهێنرێت بۆ بارکردن و دەرزی لێدانی ناوەڕۆکی دەرەکی بە شێوەیەکی ئۆتۆماتیکی بۆ ناو مۆداڵێک) و loaded.bs.modalڕووداوی هاوبەش لابران. ئێمە پێشنیار دەکەین لەبری ئەوە قاڵبسازی لایەنی مشتەری یان چوارچێوەی بەستنەوەی داتا بەکاربهێنیت، یان خۆت بانگی jQuery.load بکەیت.
  • دووبارە نووسینەوەی پێکهاتەکە بە flexbox.
  • نزیکەی هەموو >هەڵبژێرەرەکانی بۆ ستایلکردنی سادەتر لە ڕێگەی پۆلەکانی بێ هێلانە وەلا ناو.
  • لەبری هەڵبژێرەری تایبەت بە HTML وەک .nav > li > a, ئێمە پۆلی جیاواز بۆ .navs و .nav-items و .nav-links بەکاردەهێنین. ئەمەش وا دەکات HTML ـەکەت نەرمتر بێت لە هەمان کاتدا فراوانبوونی زیاتر لەگەڵ خۆیدا دەهێنێت.

navbar بە تەواوی لە flexbox نووسراوەتەوە لەگەڵ پشتگیری باشتر بۆ ڕێکخستن و وەڵامدانەوە و خۆکارکردن.

  • ئێستا ڕەفتارەکانی ناوباری وەڵامدەرەوە لە .navbarڕێگەی ئەو شوێنەی کە هەڵدەبژێریت بۆ ئەوەی ناوبارەکە لە کوێ داڕمێنیت ، بۆ پۆلەکە جێبەجێ دەکرێن. .navbar-expand-{breakpoint}پێشتر ئەمە گۆڕانکارییەکی کەمتر گۆڕاو بوو و پێویستی بە دووبارە کۆکردنەوە هەبوو.
  • .navbar-defaultis now .navbar-light, هەرچەندە .navbar-darkوەک خۆی دەمێنێتەوە. یەکێک لەمانە لەسەر هەر ناوبارێک پێویستە. بەڵام ئەم چینانە چیتر background-colors دانانێن؛ لەبری ئەوە لە بنەڕەتدا تەنها کاریگەرییان لەسەر color.
  • ئێستا ناوبارەکان پێویستیان بە ڕاگەیاندنی پاشخان هەیە بە جۆرێک. لە سوودمەندییەکانی پاشبنەمامان هەڵبژێرە ( .bg-*) یان خۆت دابنێ لەگەڵ پۆلەکانی ڕووناکی/پێچەوانە لە سەرەوە بۆ خۆکارکردنی شێت .
  • بە پێدانی ستایلەکانی flexbox، ئێستا navbars دەتوانن سوودمەندییەکانی flexbox بەکاربهێنن بۆ هەڵبژاردەی ڕێکخستنی ئاسان.
  • .navbar-toggleئێستایە .navbar-togglerو ستایل و مارکاپی ناوەوەی جیاوازی هەیە (سێ <span>s زیاتر نییە).
  • .navbar-formپۆلەکەی بە تەواوی وەلا هێنا . چیتر پێویست نییە؛ لەبری ئەوە، تەنها .form-inlineبەپێی پێویست سوودمەندییەکانی پەراوێز بەکاربهێنە و جێبەجێی بکە.
  • ناوبارەکان چیتر لەخۆناگرن margin-bottomیان border-radiusبە شێوازی پێشوەختە. بەپێی پێویست خزمەتگوزارییەکان بەکاربهێنە.
  • هەموو ئەو نموونانەی کە تایبەتمەندی navbar یان هەیە نوێکراونەتەوە بۆ ئەوەی مارکاپی نوێیان تێدا بێت.

لاپەڕەسازی

  • دووبارە نووسینەوەی پێکهاتەکە بە flexbox.
  • ئێستا پۆلی ڕوون ( .page-item, .page-link) لەسەر نەوەکانی .paginations پێویستە
  • پێکهاتەکەی بە تەواوی دابەزاند .pagerچونکە کەمێک زیاتر بوو لە دوگمەکانی هێڵکاری تایبەتمەند.
  • پۆلێکی ڕوون، .breadcrumb-item, ئێستا پێویستە لەسەر نەوەکانی .breadcrumbs

لیبێڵ و نیشانە

  • چەسپاندن .labelو .badgeبۆ لابردنی دووفاقی لە <label>توخمەکە و ئاسانکردنی پێکهاتە پەیوەندیدارەکان.
  • .badge-pillوەک دەستکاریکەر بۆ دیمەنی “حەب”ی گوڵاو زیادکراوە .
  • نیشانەکان چیتر بە شێوەیەکی ئۆتۆماتیکی لە گروپەکانی لیست و پێکهاتەکانی تردا ناسوڕێنەوە. ئێستا پۆلی سوودمەندی بۆ ئەوە پێویستە.
  • .badge-defaultلابراوە و .badge-secondaryزیاد کراوە بۆ ئەوەی لەگەڵ پۆلەکانی دەستکاریکەری پێکهاتەکان بگونجێت کە لە شوێنەکانی تردا بەکاردەهێنرێن.

پانێڵ و وێنەی بچووک و بیرەکان

بە تەواوی بۆ پێکهاتەی کارتی نوێ کەوتە خوارەوە.

پانێڵەکان

  • .panelto .card, ئێستا بە flexbox دروست کراوە.
  • .panel-defaultلابراوە و هیچ جێگرەوەیەکی نییە.
  • .panel-groupلابراوە و هیچ جێگرەوەیەکی نییە. .card-groupجێگرەوە نییە، جیاوازە.
  • .panel-headingبۆ.card-header
  • .panel-titleبۆ .card-title. بەپێی دیمەنی دڵخواز، ڕەنگە بتەوێت توخمەکانی سەردێڕ یان پۆلەکان (بۆ نموونە <h3>, .h3) یان توخمەکان یان پۆلەکانی قەڵەم (بۆ نموونە <strong>, <b>, .font-weight-bold) بەکاربهێنیت. سەرنج بدە کە .card-title, لە کاتێکدا بە هەمان شێوە ناوی لێنراوە، دیمەنێکی جیاواز لە .panel-title.
  • .panel-bodyبۆ.card-body
  • .panel-footerبۆ.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, و .panel-dangerبۆ .bg-, .text-, و ئەو .borderسوودمەندیانەی کە لە $theme-colorsنەخشەی Sass ـمانەوە دروستکراون، لابراون.

بەرەو پێش چوون

  • .progress-bar-*پۆلەکانی کۆنتێکست گۆڕی بە .bg-*سوودمەندیەکان. بۆ نموونە class="progress-bar progress-bar-danger"دەبێتە class="progress-bar bg-danger".
  • بۆ پەڕە .activeپێشکەوتنە ئەنیمەیشنەکان بە .progress-bar-animated.
  • چاککردنەوەی تەواوی پێکهاتەکەی بۆ ئاسانکردنی دیزاین و ستایل. ئێمە ستایلێکی کەمترمان هەیە بۆ ئەوەی تۆ سەرپێچی بکەیت، نیشاندەری نوێ، و ئایکۆنی نوێ.
  • هەموو CSS یەک هێلانە نەکراوە و ناویان گۆڕاوە، دڵنیای دەدات کە هەر پۆلێک پێشگرەکەی بە .carousel-.
    • بۆ شتەکانی کارۆسێل، .next, .prev, .left, و .rightئێستا .carousel-item-next, .carousel-item-prev, .carousel-item-left, و .carousel-item-right.
    • .itemهەروەها ئێستا .carousel-item.
    • بۆ کۆنتڕۆڵەکانی پێشوو/دواتر، .carousel-control.rightو .carousel-control.leftئێستا .carousel-control-nextو .carousel-control-prev، واتە چیتر پێویستیان بە پۆلێکی بنەڕەتی تایبەت نییە.
  • هەموو ستایلەکانی وەڵامدەرەوە لابرا، دواخستنی بۆ سوودمەندیەکان (بۆ نموونە، پیشاندانی کەپشنەکان لەسەر هەندێک ڤیوپۆرت) و ستایلە تایبەتمەندەکان بەپێی پێویست.
  • لابردنی سەرپێچی وێنە بۆ وێنەکان لە بابەتە کارۆسێلەکاندا، دواخستنی بۆ سوودمەندیەکان.
  • نموونەی کارۆسێلی تویک کرد بۆ ئەوەی مارکاپ و ستایلە نوێیەکانی تێدا بێت.

خشتەکان

  • پشتگیری بۆ خشتەکانی هێلانەکراوی ستایل لابرا. ئێستا هەموو ستایلەکانی خشتەکان لە v4 بۆ هەڵبژێرەری سادەتر بە میرات دەگیرێن.
  • جۆری خشتەی پێچەوانە زیاد کراوە.

خزمەتگوزارییەکان

  • نمایش و شاراوە و زۆر شتی تر:
    • سوودمەندییەکانی پیشاندانی وەڵامدەرەوەی کرد (بۆ نموونە، .d-noneو d-{sm,md,lg,xl}-none).
    • بەشێکی زۆری .hidden-*سوودمەندیەکان بۆ سوودمەندییە نوێیەکانی پیشاندانی دابەزاند . بۆ نموونە لەبری .hidden-sm-up، بەکاربهێنە .d-sm-none. ناوی .hidden-printسوودمەندیەکان گۆڕی بۆ بەکارهێنانی پلانی ناونانی سوودمەندی پیشاندانی. زانیاری زیاتر لە ژێر بەشی خزمەتگوزارییە وەڵامدەرەوەکانی ئەم لاپەڕەیە.
    • پۆلەکان زیادکرا .float-{sm,md,lg,xl}-{left,right,none}بۆ فلۆتی وەڵامدەرەوە و لابرا .pull-leftو .pull-rightلەبەر ئەوەی ئەوان زیادەن بۆ .float-leftو .float-right.
  • جۆر:
    • زیادکردنی گۆڕانکاری وەڵامدەرەوە بۆ پۆلەکانی ڕێکخستنی دەقەکانمان .text-{sm,md,lg,xl}-{left,center,right}.
  • ڕێکخستن و دووری:
  • Clearfix نوێکرایەوە بۆ وەستاندنی پشتگیری بۆ وەشانی کۆنتری وێبگەڕ.

پێشگرەکانی فرۆشیار mixins

میکسینەکانی پێشگرەکانی فرۆشیاری Bootstrap 3 کە لە v3.2.0 دا بەکارنەهاتوون، لە Bootstrap 4 لابراون. بەو پێیەی ئێمە Autoprefixer بەکاردەهێنین ، پێویستیان نەماوە.

ئەم میکسینانەی خوارەوە لابرا : animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property.transition-timing-functiontransition-transformtranslatetranslate3duser-select

بەڵگەنامەسازی

بەڵگەنامەکانمان لە سەرانسەری بۆردەکەدا بە هەمان شێوە بەرزکردنەوەیان وەرگرت. لێرەدا نزمی خوارەوەیە:

  • ئێمە هێشتا Jekyll بەکاردەهێنین، بەڵام پێوەکراوەکانمان لە میکسەکەدا هەیە:
    • bugify.rbبەکاردێت بۆ ئەوەی بە شێوەیەکی کارا لیستکردنی زانیارییەکانی سەر لاپەڕەی هەڵەکانی وێبگەڕەکەمان .
    • example.rbچنگاڵێکی تایبەتمەندە لە highlight.rbپێوەکراوەکەی پێشوەختە، ڕێگە بە مامەڵەکردنی ئاسانتر دەدات بە کۆدی نموونە.
    • callout.rbچنگاڵێکی تایبەتمەندی هاوشێوەی ئەوە، بەڵام بۆ بانگەوازەکانی دۆکیومێنتە تایبەتەکانمان دیزاین کراوە.
    • jekyll-toc بەکاردێت بۆ دروستکردنی خشتەی ناوەڕۆکمان.
  • هەموو ناوەڕۆکی docs بە شێوەی Markdown (لەبری HTML) نووسراوەتەوە بۆ ئاسانکاری دەستکاریکردن.
  • لاپەڕەکان بۆ ناوەڕۆکی سادەتر و پلەبەندییەکی نزیکتر ڕێکخراونەتەوە.
  • ئێمە لە CSS ئاساییەوە گواستمانەوە بۆ SCSS بۆ ئەوەی سوودی تەواو لە گۆڕاوەکانی Bootstrap و میکسینەکان و زۆر شتی تر وەربگرین.

خزمەتگوزارییە وەڵامدەرەوەکان

هەموو @screen-گۆڕاوەکان لە v4.0.0 لابراون. لەبری ئەوە میکسینەکانی media-breakpoint-up(), media-breakpoint-down(), یان media-breakpoint-only()Sass یان $grid-breakpointsنەخشەی Sass بەکاربهێنە.

پۆلەکانی سوودمەندی وەڵامدەرەوەمان تا ڕادەیەکی زۆر لە بەرژەوەندی سوودمەندییە ڕوونەکان لابراون display.

  • پۆلەکانی .hiddenو .showلابراون چونکە لەگەڵ jQuery $(...).hide()و $(...).show()شێوازەکانی ناکۆک بوون. لەبری ئەوە هەوڵبدە [hidden]تایبەتمەندییەکە بگۆڕیت یان شێوازەکانی ناو هێڵ وەک style="display: none;"و بەکاربهێنە style="display: block;".
  • هەموو .hidden-پۆلەکان لابراون، جگە لە سوودمەندیەکانی چاپکردن کە ناویان گۆڕاوە.
    • لە v3 لابرا:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
    • لە v4 alphas لابرا:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • سوودمەندیەکانی چاپکردن چیتر بە .hidden-یان دەست پێ ناکەن .visible-، بەڵکو بە .d-print-.
    • ناوە کۆنەکان: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • پۆلە نوێیەکان: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

لەبری ئەوەی .visible-*پۆلە ڕوونەکان بەکاربهێنیت، توخمێک دەکەیت بە دیار بە سادەیی بە نەشاردنەوەی بەو قەبارەی شاشەیە. دەتوانیت یەک .d-*-noneپۆل لەگەڵ یەک .d-*-blockپۆل تێکەڵ بکەیت بۆ ئەوەی توخمێک تەنها لەسەر ماوەیەکی دیاریکراو لە قەبارەی شاشەکان .d-none.d-md-block.d-xl-noneپیشان بدەیت (بۆ نموونە توخمەکە تەنها لەسەر ئامێرە مامناوەند و گەورەکان پیشان دەدات).

سەرنج بدە کە گۆڕانکارییەکان لە خاڵەکانی شکاندنی تۆڕ لە v4 بەو مانایەیە کە پێویستە یەک خاڵی شکاندن گەورەتر بچیت بۆ بەدەستهێنانی هەمان ئەنجام. پۆلە نوێیەکانی سوودمەندی وەڵامدەرەوە هەوڵ نادەن ئەو حاڵەتە کەمتر باوانە لەخۆ بگرن کە بینینی توخمێک ناتوانرێت وەک یەک مەودای بەردەوامی قەبارەی دەرچەی بینین دەرببڕدرێت؛ لەبری ئەوە پێویستت بە بەکارهێنانی CSSی تایبەت دەبێت لەم جۆرە حاڵەتانەدا.