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د grid ټولګي تعدیل شوي ترڅو انفکس ته اړتیا ونلري ترڅو په دقیق ډول نمایش وکړي چې دوی د سټایلونو پلي کول پیل کوي min-width: 0نه د ټاکل شوي پکسل ارزښت. پرځای یې .col-xs-6، دا اوس .col-6دی. نور ټول گرډ ټایرونه انفکس ته اړتیا لري (د بیلګې په توګه، sm).
  • د گرډ اندازې، مکسین، او تغیرات تازه شوي.
    • د ګریډ ګټرونه اوس د Sass نقشه لري نو تاسو کولی شئ په هره وقفه کې د ګټر ځانګړي عرضونه مشخص کړئ.
    • د ګریډ مکسین تازه شوي ترڅو د 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, and .rightare now .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, translate3d,user-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 کارولو ته اړتیا ولرئ.