Source

v4 ته مهاجرت

بوټسټریپ 4 د ټولې پروژې لوی بیا لیکل دی. تر ټولو د پام وړ بدلونونه لاندې لنډیز شوي، وروسته د اړونده برخو لپاره نور ځانګړي بدلونونه.

باثباته بدلونونه

د بیټا 3 څخه زموږ مستحکم v4.x خوشې کیدو ته حرکت کول ، هیڅ ماتونکي بدلونونه شتون نلري ، مګر ځینې د پام وړ بدلونونه شتون لري.

چاپول

  • ثابت مات شوي چاپ اسانتیاوې. پخوا، د .d-print-*ټولګي کارول به په غیر متوقع ډول کوم بل .d-*ټولګي له منځه یوسي. اوس، دوی زموږ د نورو ښودنې اسانتیاو سره سمون لري او یوازې په دې رسنیو کې پلي کیږي ( @media print).

  • د نورو اسانتیاوو سره سمون لپاره د شته چاپ ښودنې اسانتیاوې پراخې شوې. بیټا 3 او زاړه یوازې block, inline-block, inline, او درلودل none. مستحکم v4 اضافه شوی flex, inline-flex, table, table-row, and table-cell.

  • د نوي چاپ سټایلونو سره چې مشخص شوي په براوزرونو کې ثابت چاپ مخکتنه وړاندې کوي @page size.

بیټا 3 بدلونونه

پداسې حال کې چې بیټا 2 د بیټا مرحلې په جریان کې زموږ ډیری ماتونکي بدلونونه ولیدل ، مګر موږ لاهم یو څه لرو چې د بیټا 3 خوشې کولو کې ورته اړتیا لیدل کیږي. دا بدلونونه پلي کیږي که تاسو د بیټا 2 څخه بیټا 3 یا د بوټسټریپ کومې پخوانۍ نسخې ته تازه کوئ.

متفرقه

  • نه کارول شوي $thumbnail-transitionتغیرات لرې کړل. موږ هیڅ شی نه لیږدوو، نو دا یوازې اضافي کوډ و.
  • د npm کڅوړه نور زموږ د سرچینې او لرې فایلونو پرته نور فایلونه نه لري؛ که تاسو په دوی تکیه کوئ او زموږ سکریپټونه د node_modulesفولډر له لارې پرمخ وړئ، تاسو باید خپل کاري جریان تطابق کړئ.

فورمې

  • دواړه دودیز او ډیفالټ چیک باکسونه او راډیوګانې بیا لیکل. اوس، دواړه د HTML جوړښت سره سمون لري ( <div>د ورور سره بهرنی <input>او <label>) او ورته ترتیب سټایلونه (د ډیفالټ سټیک شوي، د ترمیم کونکي ټولګي سره انلاین). دا موږ ته اجازه راکوي چې د ان پټ حالت پراساس لیبل سټایل کړو، د disabledځانګړتیا لپاره مالتړ ساده کول (پخوا د والدینو ټولګي ته اړتیا وه) او زموږ د فورمې اعتبار ښه ملاتړ کوي.

    د دې یوې برخې په توګه، موږ background-imageد ګمرکي فورمو چک بکسونو او راډیوګانو کې د ډیری s اداره کولو لپاره CSS بدل کړی دی. پخوا، اوس لیرې شوي .custom-control-indicatorعنصر د شالید رنګ، تدریجي، او SVG عکس درلود. د شالید تدریجي تنظیم کول پدې معنی دي چې هرکله چې تاسو اړتیا لرئ یوازې یو بدل کړئ د دې ټولو ځای په ځای کول. اوس، موږ .custom-control-label::beforeد ډکولو او تدریجي لپاره لرو او .custom-control-label::afterآئیکن اداره کوو.

    د دودیز چیک انلاین کولو لپاره ، اضافه کړئ .custom-control-inline.

  • د ان پټ پراساس بټن ګروپونو لپاره تازه شوی انتخاب کونکی. [data-toggle="buttons"] { }د سټایل او چلند پرځای ، موږ یوازې د JS چلندونو لپاره صفت کاروو او د سټایل کولو لپاره په نوي ټولګي dataتکیه کوو..btn-group-toggle

  • .col-form-legendد یو څه ښه شوي په ګټه لرې شوی .col-form-label. دا لاره .col-form-label-smاو په اسانۍ سره په عناصرو کې .col-form-label-lgکارول کیدی شي .<legend>

  • $custom-file-textد ګمرک فایل داخلونو د دوی Sass متغیر کې بدلون ترلاسه کړ . دا نور د ځړول شوي Sass نقشه نه ده او اوس یوازې یو تار ته ځواک ورکوي — هغه Browseتڼۍ چې اوس زموږ د ساس څخه رامینځته شوی یوازینی سیډو عنصر دی. Choose fileمتن اوس له .custom-file-label.

د ننوتلو ګروپونه

  • د ان پټ ګروپ اډون اوس د ان پټ سره اړوند د دوی ځای پرځای کولو لپاره ځانګړي دي. موږ پریښودل شوي .input-group-addonاو .input-group-btnد دوه نوي ټولګیو لپاره، .input-group-prependاو .input-group-append. تاسو باید اوس په ښکاره ډول ضمیمه یا پریپینډ وکاروئ، زموږ د CSS ډیری برخه ساده کول. د ضمیمه یا مخکینۍ دننه، خپل بټنونه ځای په ځای کړئ لکه څنګه چې دوی به په بل ځای کې شتون ولري، مګر په متن کې وتړئ .input-group-text.

  • د اعتبار کولو سټایلونه اوس ملاتړ کیږي، لکه څنګه چې ډیری آخذې دي (که څه هم تاسو کولی شئ په هر ګروپ کې یوازې یو ان پټ تایید کړئ).

  • د اندازه کولو ټولګي باید په مور .input-groupاو پلار وي نه د انفرادي شکل عناصر.

بیټا 2 بدلونونه

پداسې حال کې چې په بیټا کې، موږ موخه لرو چې هیڅ ماتونکي بدلونونه ونه لرو. په هرصورت، شیان تل د پلان په توګه نه ځي. لاندې د بیټا 1 څخه بیټا 2 ته حرکت کولو پرمهال په ذهن کې ساتلو لپاره ماتونکي بدلونونه دي.

ماتول

  • لرې $badge-colorشوی متغیر او د هغې کارول په .badge. موږ د رنګ برعکس فعالیت کاروو ترڅو د colorپراساس یو غوره کړو background-color، نو متغیر غیر ضروري دی.
  • د سی ایس ایس اصلي فلټر سره د شخړو د مخنیوي لپاره د grayscale()فعالیت نوم بدل کړ.gray()grayscale
  • زموږ د رنګ سکیمونو سره سمون خوري چې په بل ځای کې کارول کیږي،،، .table-inverseاو .thead-inverseته .thead-defaultاو .*-darkنوم بدل شوی ..*-light
  • ځواب ورکوونکي میزونه اوس د هرې شبکې وقفې لپاره ټولګي جوړوي. دا د بیټا 1 څخه ماتیږي پدې کې چې .table-responsiveتاسو یې کاروئ ډیر ورته دی .table-responsive-md. تاسو کولی شئ اوس وکاروئ .table-responsiveیا .table-responsive-{sm,md,lg,xl}د اړتیا په توګه.
  • ډراپ شوي بوور ملاتړ د بسته بندۍ مدیر په توګه د بدیلونو لپاره له مینځه وړل شوی (د بیلګې په توګه، یارن یا npm). د جزیاتو لپاره 2298 کنج وګورئ.
  • بوټسټریپ لاهم jQuery 1.9.1 یا لوړ ته اړتیا لري ، مګر تاسو ته مشوره درکول کیږي چې 3.x نسخه وکاروئ ځکه چې د v3.x ملاتړ شوي براوزرونه هغه دي چې د بوټسټریپ ملاتړ کوي او v3.x ځینې امنیتي اصلاحات لري.
  • نه کارول شوي .form-control-labelټولګي لرې کړل. که تاسو د دې ټولګي څخه کار اخیستی وي، دا د هغه .col-form-labelټولګي نقل و چې په عمودی توګه د <label>افقی شکل ترتیبونو کې د دې تړلې ان پټ سره په مرکز کې و.
  • color-yiqد مکسین څخه بدل شوی چې 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 وکاروئ.
  • د Android v5.0 Lollipop براوزر او ویب ویو لپاره رسمي ملاتړ اضافه شوی. د Android براوزر او ویب ویو پخوانۍ نسخې یوازې په غیر رسمي ډول ملاتړ کیږي.

نړیوال بدلونونه

  • Flexbox د ډیفالټ لخوا فعال شوی. په عموم کې د دې معنی دا ده چې زموږ د برخو په اوږدو کې له فلوټس څخه لیرې او نور ډیر څه.
  • زموږ د سرچینې CSS فایلونو لپاره له لږ څخه ساس ته بدل شوی.
  • pxزموږ د لومړني CSS واحد په توګه بدل شوی rem، که څه هم پکسلز لاهم د میډیا پوښتنو او د ګریډ چلند لپاره کارول کیږي ځکه چې د وسیلې لید پورټونه د ډول اندازې لخوا اغیزمن ندي.
  • د نړیوال فونټ اندازه 14pxله 16px.
  • د پنځم اختیار اضافه کولو لپاره د ګریډ ټایرونه نوي کړل (په 576pxلاندې او لاندې کوچني وسیلو ته خطاب کول) او له -xsدې ټولګیو څخه انفکس لرې کړل. بېلګه: .col-6.col-sm-4.col-md-3.
  • جلا اختیاري موضوع د SCSS متغیرونو له لارې د ترتیب وړ انتخابونو سره بدله کړه (د بیلګې په توګه، $enable-gradients: true).
  • د Grunt پرځای د npm سکریپټونو لړۍ کارولو لپاره د سیسټم بیارغونه جوړه کړئ. package.jsonد ټولو سکریپټونو لپاره وګورئ ، یا د محلي پراختیا اړتیاو لپاره زموږ د پروژې لوستل.
  • د بوټسټریپ غیر ځواب ویونکي کارول نور ملاتړ نه کوي.
  • آنلاین Customizer د ډیرو پراخو سیټ اپ اسنادو او دودیز جوړونو په ګټه واخیست.
  • د عام CSS ملکیت ارزښت جوړو او حاشیو / پیډینګ فاصلو شارټ کټونو لپاره لسګونه نوي یوټیلټي ټولګي اضافه کړل.

گرډ سیسټم

  • فلیکس باکس ته لیږدول شوی.
    • په ګریډ مکسینونو او مخکینۍ تعریف شوي ټولګیو کې د فلیکس باکس لپاره ملاتړ اضافه شوی.
    • د فلیکس بکس د یوې برخې په توګه، د عمودی او افقی سمون ټولګیو لپاره ملاتړ شامل دی.
  • د گرډ ټولګي نومونه او د نوي گرډ ټایر تازه شوي.
    • د نور دانه کنټرول لپاره لاندې د نوي smگرډ ټایر اضافه کړ. 768pxموږ اوس لرو xs, sm, md, lg, and xl. د دې معنی دا هم ده چې هر ټایر په یوه کچه ټوپ شوی دی (نو .col-md-6په v3 کې اوس .col-lg-6په v4 کې دی).
    • xsد ګریډ ټولګي تعدیل شوي ترڅو انفکس ته اړتیا ونلري ترڅو په دقیق ډول نمایش وکړي چې دوی د سټایلونو پلي کول پیل کوي min-width: 0نه د ټاکل شوي پکسل ارزښت. پرځای یې .col-xs-6، دا اوس .col-6دی. نور ټول گرډ ټایرونه انفکس ته اړتیا لري (د بیلګې په توګه، sm).
  • د گرډ اندازې، مکسین، او تغیرات تازه شوي.
    • د ګریډ ګټرونه اوس د ساس نقشه لري نو تاسو کولی شئ په هره وقفه کې د ګټر ځانګړي عرضونه مشخص کړئ.
    • د ګریډ مکسین تازه شوي ترڅو د make-col-readyپریپ مکسین او الف څخه کار واخلي او د انفرادي کالم اندازه کولو لپاره make-colتنظیم کړي .flexmax-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) { ... }.

اجزا

  • غورځول شوي تختې، تمبیلونه، او څاګانې د نوي ټول شامل شوي برخې لپاره، کارتونه .
  • د ګلیفیکون آیکون فونټ غورځول شوی. که تاسو شبیانو ته اړتیا لرئ، ځینې اختیارونه دي:
  • د Affix jQuery پلگ ان غورځول شوی.
    • موږ د پرځای کارولو وړاندیز کوو position: sticky. HTML5 وګورئ مهرباني وکړئ د توضیحاتو او ځانګړي پولیفیل وړاندیزونو لپاره ننوتل. یو وړاندیز دا دی چې @supportsد پلي کولو لپاره یو قاعده وکاروئ (د بیلګې په توګه، @supports (position: sticky) { ... })/
    • که تاسو د اضافي ، غیر positionسټایلونو پلي کولو لپاره Affix کاروئ ، نو پولیفیل ممکن ستاسو د کارونې قضیې ملاتړ ونه کړي. د دې ډول کارولو لپاره یو اختیار د دریمې ډلې ScrollPos-Styler کتابتون دی.
  • د پیجر اجزا غورځول ځکه چې دا په لازمي ډول یو څه دودیز بټنونه وو.
  • نږدې ټولې برخې یې بیاکتلې ترڅو د ماشومانو د ځانګړي انتخاب کونکو پر ځای نور غیر نیست شوي ټولګي انتخاب کونکي وکاروي.

د اجزاو په واسطه

دا لیست د v3.xx او v4.0.0 ترمنځ د اجزا لخوا کلیدي بدلونونه روښانه کوي.

ریبوټ

د بوټسټریپ 4 لپاره نوی ریبوټ دی ، یو نوی سټایل شیټ چې زموږ د خپل یو څه نظر لرونکي ری سیٹ سټایلونو سره نورمالیز باندې رامینځته کوي. په دې فایل کې ټاکونکي یوازې عناصر کاروي — دلته ټولګي نشته. دا زموږ د بیا تنظیم کولو سټایلونه زموږ د اجزاو سټایلونو څخه د ډیر ماډلر چلند لپاره جلا کوي. ځینې ​​خورا مهم ریسیټونه پدې کې شامل دي 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نور د .rowمکسین له لارې سټایلونه نه پلي کوي ، نو .rowاوس د افقی گرډ ترتیبونو لپاره اړین دی (د مثال په توګه ، <div class="form-group row">).
    • .col-form-labelد s سره عمودی مرکز لیبلونو ته نوی ټولګی اضافه شوی .form-control.
    • .form-rowد گرډ ټولګیو سره د کمپیکٹ فارم ترتیبونو لپاره نوي اضافه شوي ( .rowد یو .form-rowاو تګ لپاره خپل بدل کړئ).
  • د دودیز فارمونو ملاتړ اضافه شوی (د چک بکسونو ، راډیوګانو ، انتخابونو ، او فایل داخلونو لپاره).
  • د CSS او pseudo- ټولګیو له لارې د HTML5 فورمې اعتبار سره بدل شوی .has-error، .has-warningاو ټولګي..has-success:invalid:valid
  • په نوم بدل .form-control-staticشو .form-control-plaintext.

تڼۍ

  • په نوم بدل .btn-defaultشو .btn-secondary.
  • .btn-xsټولګي په بشپړه توګه غورځول شوي لکه څنګه .btn-smچې په متناسب ډول د v3 په پرتله خورا کوچنی دی.
  • د jQuery پلگ ان د دولتي تڼۍ ځانګړتیا له button.jsمینځه وړل شوې. پدې کې میتودونه $().button(string)او $().button('reset')میتودونه شامل دي. موږ مشوره ورکوو چې د دې پرځای د دودیز جاوا سکریپټ لږ څه وکاروئ ، کوم چې به د هغه ډول چلند کولو ګټه ولري چې تاسو یې غواړئ.
    • په یاد ولرئ چې د پلگ ان نورې ځانګړتیاوې (د تڼۍ چک بکسونه، د تڼۍ راډیوګانې، د واحد ټګل بټن) په v4 کې ساتل شوي.
  • تڼۍ بدل کړئ [disabled]لکه :disabledڅنګه چې IE9 + ملاتړ کوي :disabled. په هرصورت fieldset[disabled]لاهم اړین دی ځکه چې اصلي معیوب شوي ساحې لاهم په IE11 کې بګی دي .

د تڼۍ ډله

  • د فلیکس باکس سره اجزا بیا لیکل.
  • لرې .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 له لارې چمتو ::afterکیږي .dropdown-toggle.

گرډ سیسټم

  • د نوي 576pxگرډ بریک پوائنټ په توګه اضافه شوی sm، پدې معنی چې اوس ټول پنځه درجې شتون لري ( xs, sm, md, lg, and 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.
  • د گرډ سیسټم او اجزاوو لپاره د فلیکس باکس یوټیلټي ټولګي اضافه شوي.

ګروپونه لیست کړئ

  • د فلیکس باکس سره اجزا بیا لیکل.
  • a.list-group-itemد یو واضح ټولګي سره بدل شوی .list-group-item-action، د سټایل کولو لینک او د لیست ګروپ توکو د تڼۍ نسخو لپاره.
  • .list-group-flushد کارتونو سره د کارولو لپاره ټولګي اضافه شوي.
  • د فلیکس باکس سره اجزا بیا لیکل.
  • فلیکس باکس ته د حرکت په پام کې نیولو سره، په سرلیک کې د برطرف شوي آئیکونونو سمون ممکن مات شوی وي ځکه چې موږ نور فلوټس نه کاروو. تیر شوي مینځپانګه لومړی راځي ، مګر د فلیکس باکس سره چې نور قضیه نده. خپل د ګوښه کولو عکسونه تازه کړئ ترڅو د موډل سرلیکونو وروسته د سمولو لپاره راشي.
  • اختیار (کوم چې په remoteموډل کې د بهرني مینځپانګې په اتوماتيک ډول بار کولو او انجیکشن کولو لپاره کارول کیدی شي) او اړونده loaded.bs.modalپیښه لرې شوې. موږ د دې پرځای وړاندیز کوو چې د پیرودونکي اړخ ټیمپلینګ یا د ډیټا پابند کولو چوکاټ وکاروئ ، یا پخپله jQuery.load زنګ ووهئ .
  • د فلیکس باکس سره اجزا بیا لیکل.
  • د ساده سټایل کولو لپاره نږدې ټول >انتخاب کونکي د غیر منظم ټولګیو له لارې پریښودل.
  • د HTML ځانګړي انتخاب کونکو پرځای ، موږ د s ، s ، او s .nav > li > aلپاره جلا ټولګي کاروو . دا ستاسو HTML ډیر انعطاف وړ کوي پداسې حال کې چې د توسعې زیاتوالي سره راوړي..nav.nav-item.nav-link

نوبار په بشپړ ډول په فلیکس باکس کې د سمون، غبرګون، او دودیز کولو لپاره د ښه ملاتړ سره بیا لیکل شوی.

  • ځواب ویونکي نوبار چلند اوس په .navbarټولګي کې د اړتیا .navbar-expand-{breakpoint} له لارې پلي کیږي چیرې چې تاسو غوره کوئ چیرې چې د نوبار سقوط کول. پخوا دا یو لږ متغیر تعدیل و او د بیا تنظیم کولو اړتیا وه.
  • .navbar-defaultاوس دی .navbar-light، که څه .navbar-darkهم ورته پاتې دی. یو له دې څخه په هر نوبار کې اړین دی. په هرصورت، دا ټولګي نور نه ټاکل background-colorکیږي؛ پرځای یې دوی په اصل کې یوازې اغیزه کوي color.
  • نوبارز اوس د یو ډول شالید اعلان ته اړتیا لري. زموږ د شالید اسانتیاو څخه غوره کړئ ( ) یا خپل ځان د لیونۍ تخصیص لپاره.bg-* پورته د رڼا / برعکس ټولګیو سره تنظیم کړئ .
  • د فلیکس باکس سټایلونو په پام کې نیولو سره، نوبارز اوس کولی شي د اسانه سمون انتخابونو لپاره د فلیکس باکس اسانتیاوې وکاروي.
  • .navbar-toggleاوس دی .navbar-togglerاو مختلف سټایلونه او داخلي مارک اپ لري (نور درې <span>s نه).
  • .navbar-formټولګي په بشپړه توګه پریښودل . نور اړتیا نشته؛ پرځای یې، یوازې .form-inlineد اړتیا په صورت کې د حاشیې اسانتیاوې وکاروئ او پلي کړئ.
  • Navbars نور شامل نه دي margin-bottomیا border-radiusپه ډیفالټ. د اړتیا په صورت کې اسانتیاوې وکاروئ.
  • ټولې نمونې چې د نیوبارونو ځانګړتیاوې لري د نوي مارک اپ شاملولو لپاره تازه شوي.

پاڼه کول

  • د فلیکس باکس سره اجزا بیا لیکل.
  • واضح ټولګي ( .page-item, .page-link) اوس د .paginations په اولادونو کې اړین دي
  • اجزا په بشپړ ډول غورځول .pagerشوي ځکه چې دا د دودیز شوي خاکه بټونو څخه ډیر لږ و.
  • یوه ښکاره طبقه، .breadcrumb-itemاوس د .breadcrumbs په اولادونو کې اړینه ده

لیبلونه او بیجونه

  • یوځای کول .labelاو .badgeد <label>عنصر څخه جلا کول او اړوند اجزا ساده کول.
  • .badge-pillد ګردي "ګولۍ" لید لپاره د ترمیم کونکي په توګه اضافه شوی.
  • بیجونه نور په اوتومات ډول د لیست ګروپونو او نورو برخو کې نه تیریږي. د دې لپاره اوس د کارموندنې ټولګي اړین دي.
  • .badge-defaultغورځول شوی او .badge-secondaryد اجزاو ترمیم کونکي ټولګیو کې اضافه شوی چې په بل ځای کې کارول کیږي.

پینلونه، تختې، او څاګانې

د نوي کارت برخې لپاره په بشپړ ډول غورځول شوی.

پینلونه

  • .panelته .card، اوس د فلیکس بکس سره جوړ شوی.
  • .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, او زموږ د Sass نقشې څخه رامینځته شوي , , او اسانتیاو .panel-dangerلپاره غورځول شوي دي ..bg-.text-.border$theme-colors

پرمختګ

  • د شرایطو .progress-bar-*ټولګي د .bg-*اسانتیاوو سره بدل کړل. د مثال په توګه، class="progress-bar progress-bar-danger"کیږي class="progress-bar bg-danger".
  • .activeسره د متحرک پرمختګ بارونو لپاره بدل شوی .progress-bar-animated.
  • د ډیزاین او سټایل ساده کولو لپاره ټوله برخه ترمیم کړه. موږ ستاسو لپاره لږ سټایلونه لرو، نوي شاخصونه، او نوي عکسونه.
  • ټول CSS بې ځړول شوي او نوم یې بدل شوی، ډاډ ترلاسه کوي چې هر ټولګي د مخ سره مخ شوی .carousel-.
    • د carousel توکو لپاره، .next, .prev, .left, او .rightاوس دي .carousel-item-next, .carousel-item-prev, .carousel-item-left, and .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 تازه شوی ترڅو د زړو براوزر نسخو لپاره ملاتړ پریږدي.

د پلورونکي مخکینۍ مکسونه

د 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-function, transition-transform, translate,translate3duser-select

اسناد

زموږ اسنادو هم په بورډ کې یو پرمختګ ترلاسه کړ. دلته ټیټ ټیټ دی:

  • موږ لاهم جیکیل کاروو، مګر موږ په مخلوط کې فلګونه لرو:
    • bugify.rbزموږ د براوزر بګ پاڼې کې د ننوتلو په مؤثره توګه لیست کولو لپاره کارول کیږي.
    • example.rbد ډیفالټ highlight.rbپلگ ان دودیز فورک دی ، د اسانه مثال کوډ اداره کولو ته اجازه ورکوي.
    • callout.rbد دې ورته ورته دودیز فورک دی، مګر زموږ د ځانګړو اسنادو کال آوټ لپاره ډیزاین شوی.
    • jekyll-toc زموږ د مینځپانګو جدول رامینځته کولو لپاره کارول کیږي.
  • د ټولو اسنادو مینځپانګه په مارک ډاون کې (د HTML پرځای) د اسانه ترمیم لپاره بیا لیکل شوي.
  • مخونه د ساده محتوياتو او د لاسرسي وړ درجه بندي لپاره بیا تنظیم شوي.
  • موږ له منظم CSS څخه SCSS ته حرکت وکړ ترڅو د بوټسټریپ متغیرونو ، مکسینونو او نورو څخه پوره ګټه واخلو.

ځواب ورکوونکي اسانتیاوې

ټول @screen-متغیرونه په v4.0.0 کې لرې شوي. media-breakpoint-up()پر ځای د , media-breakpoint-down(), یا media-breakpoint-only()Sass mixins یا $grid-breakpointsSass نقشه وکاروئ .

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 الفا څخه لرې شوی:.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 کارولو ته اړتیا ولرئ.