Source

v4 ڏانهن لڏپلاڻ

Bootstrap 4 سڄي منصوبي جو هڪ وڏو ٻيهر لکندڙ آهي. سڀ کان وڌيڪ قابل ذڪر تبديلين جو اختصار هيٺ ڪيو ويو آهي، بعد ۾ لاڳاپيل حصن ۾ وڌيڪ مخصوص تبديليون.

مستحڪم تبديليون

بيٽا 3 کان اسان جي مستحڪم v4.0 رليز تي منتقل ٿيڻ، اتي ڪابه تبديليون نه آھن، پر ڪجھ قابل ذڪر تبديليون آھن.

ڇپائي

  • مقرر ٿيل ٽوٽل پرنٽ افاديت. اڳي، هڪ .d-print-*طبقي کي استعمال ڪندي غير متوقع طور تي ڪنهن ٻئي .d-*طبقي کي ختم ڪري ڇڏيندو. هاڻي، اهي اسان جي ٻين ڊسپلي افاديت سان ملن ٿا ۽ صرف ان ميڊيا تي لاڳو ٿين ٿا ( @media print).

  • وڌايل دستياب پرنٽ ڊسپلي يوٽيلٽيز کي ٻين يوٽيلٽيز سان ملائڻ لاءِ. بيٽا 3 ۽ پراڻا صرف هئا block, inline-block, inline, and none. مستحڪم v4 شامل ڪيو ويو flex, inline-flex, table, table-row, and table-cell.

  • فڪسڊ پرنٽ پريو رينڊرنگ سڀني برائوزرن ۾ نئين پرنٽ اسلوب سان جيڪي بيان ڪن ٿا @page size.

بيٽا 3 تبديليون

جڏهن ته بيٽا 2 بيٽا مرحلن دوران اسان جي ٽوڙڻ واري تبديلين جو وڏو حصو ڏٺو، پر اسان وٽ اڃا تائين ڪجھه آهن جن کي بيٽا 3 رليز ۾ خطاب ڪرڻ جي ضرورت آهي. اهي تبديليون لاڳو ٿين ٿيون جيڪڏهن توهان اپڊيٽ ڪري رهيا آهيو بيٽا 3 مان بيٽا 2 يا بوٽ اسٽريپ جي ڪنهن پراڻي ورزن ۾.

متفرق

  • $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ڪسٽم فائل انپٽس انهن جي ساس متغير ۾ تبديلي حاصل ڪئي . اھو ھاڻي نسٽڊ ساس نقشو نه رھيو آھي ۽ ھاڻي صرف ھڪڙي اسٽرنگ کي طاقت ڏئي ٿو- Browseاھو بٽڻ جيئن ته ھاڻي اسان جي ساس مان پيدا ڪيل واحد pseudo-عنصر آھي. Choose fileمتن هاڻي مان اچي .custom-file-labelٿو .

ان پٽ گروپ

  • انپٽ گروپ ايڊونز ھاڻي انھن جي مقرري لاءِ مخصوص آھن ان پٽ جي نسبت سان. اسان ڇڏي ڏنو آهي .input-group-addon۽ .input-group-btnٻن نون ڪلاسن لاءِ، .input-group-prepend۽ .input-group-append. توھان کي ھاڻي ظاھر ڪرڻ گھرجي ھڪڙو ضميمو يا اڳڀرو ھاڻي، اسان جي سي ايس ايس کي آسان بڻائي. ضميمي يا اڳياڙيءَ ۾، پنهنجا بٽڻ رکي جيئن اهي ٻئي ڪنهن به هنڌ موجود هجن، پر متن کي لپي ۾ لڪايو .input-group-text.

  • تصديق جي اندازن کي ھاڻي سپورٽ ڪيو ويو آھي، جيئن گھڻا ان پٽ آھن (جيتوڻيڪ توھان صرف ھڪڙي ان پٽ کي في گروپ جي تصديق ڪري سگھو ٿا).

  • سيزنگ ڪلاس لازمي طور تي والدين تي هجن .input-group۽ نه انفرادي فارم عناصر تي.

بيٽا 2 تبديليون

جڏهن ته بيٽا ۾، اسان جو مقصد آهي ته ڪا به ٽوڙڻ واري تبديلي نه آهي. تنهن هوندي، شيون هميشه رٿابندي وانگر نه ٿيون وڃن. بيٽا 1 کان بيٽا 2 تائين منتقل ٿيڻ وقت ذهن ۾ رکڻ لاءِ هيٺيون ٽوڪنگ تبديليون آهن.

ڀڃڻ

  • هٽايو ويو $badge-colorمتغير ۽ ان جي استعمال تي .badge. اسان رنگ جي برعڪس فنڪشن کي استعمال ڪندا آهيون هڪ جي colorبنياد تي چونڊڻ لاء background-color، تنهنڪري متغير غير ضروري آهي.
  • CSS اصلي فلٽر سان ٽڪراءَ کي ٽوڙڻ کان بچڻ لاءِ grayscale()فنڪشن جو نالو مٽايو.gray()grayscale
  • نالو تبديل ڪيو ويو .table-inverse, .thead-inverse, and .thead-defaultto .*-darkand .*-light, اسان جي رنگن جي اسڪيمن سان ملندڙ ٻين هنڌن تي استعمال ٿيل.
  • جوابي جدول هاڻي هر گرڊ بريڪ پوائنٽ لاءِ ڪلاس ٺاهي ٿو. هي بيٽا 1 کان وقفو آهي جنهن ۾ .table-responsiveتوهان استعمال ڪري رهيا آهيو وڌيڪ پسند آهي .table-responsive-md. توھان ھاڻي استعمال ڪري سگھوٿا .table-responsiveيا .table-responsive-{sm,md,lg,xl}ضرورت مطابق.
  • ڊراپ ٿيل بوور سپورٽ پيڪيج مئنيجر جي طور تي متبادل لاءِ رد ڪيو ويو آهي (مثال طور، يارن يا اين پي ايم). تفصيل لاءِ ڏسو ڪَنَر/قنع #2298 .
  • بوٽ اسٽريپ کي اڃا تائين jQuery 1.9.1 يا ان کان وڌيڪ جي ضرورت آهي، پر توهان کي صلاح ڏني وئي آهي ته ورجن 3.x استعمال ڪريو ڇو ته v3.x جا سپورٽ ٿيل برائوزر اهي آهن جن کي Bootstrap سپورٽ ڪري ٿو ۽ v3.x ۾ ڪجهه حفاظتي حل آهن.
  • .form-control-labelغير استعمال ٿيل ڪلاس کي هٽايو . جيڪڏهن توهان هن ڪلاس جو استعمال ڪيو آهي، اهو طبقن جو نقل هو .col-form-labelجيڪو عمودي طور تي مرڪز <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.
  • Android v5.0 Lollipop جي برائوزر ۽ WebView لاءِ سرڪاري سپورٽ شامل ڪئي وئي. Android برائوزر ۽ WebView جا پراڻا ورجن صرف غير رسمي طور تي سپورٽ ٿيل رھندا آھن.

عالمي تبديليون

  • Flexbox ڊفالٽ طور تي فعال آهي. عام طور تي هن جو مطلب آهي فلوٽس کان پري وڃڻ ۽ اسان جي اجزاء ۾ وڌيڪ.
  • اسان جي ماخذ CSS فائلن لاءِ گھٽ کان Sass ڏانھن تبديل ڪيو ويو.
  • اسان جي بنيادي CSS يونٽ جي طور تي تبديل ڪيو pxويو rem، جيتوڻيڪ پکسلز اڃا تائين ميڊيا جي سوالن ۽ گرڊ جي رويي لاء استعمال ڪيا ويا آهن جيئن ڊوائيس جي ڏيک بندرگاهن قسم جي سائيز کان متاثر نه ٿيندا آهن.
  • گلوبل فونٽ جي سائيز کان وڌي 14pxوئي 16px.
  • پنجون آپشن شامل ڪرڻ لاءِ گرڊ ٽائرن کي سڌاريو ويو (ننڍن ڊوائيسز کي ايڊريس ڪندي 576px۽ ھيٺ) ۽ -xsانھن ڪلاسن مان انفڪس کي هٽايو. مثال: .col-6.col-sm-4.col-md-3.
  • SCSS متغيرن ذريعي ترتيب ڏيڻ واري اختيارن سان الڳ اختياري موضوع کي تبديل ڪيو ويو (مثال طور، $enable-gradients: true).
  • Grunt جي بدران npm اسڪرپٽس جي هڪ سيريز کي استعمال ڪرڻ لاءِ سسٽم کي ختم ڪيو ويو. سڀني لکتن لاءِ ڏسو package.json، يا مقامي ترقي جي ضرورتن لاءِ اسان جو پروجيڪٽ پڙهو.
  • بوٽ اسٽريپ جو غير جوابي استعمال هاڻي سپورٽ نه آهي.
  • آن لائين ڪسٽمائيزر کي وڌيڪ وسيع سيٽ اپ دستاويزن ۽ ڪسٽمائيز تعميرات جي حق ۾ ڇڏيو.
  • عام CSS پراپرٽي-ويليو جوڑوں ۽ مارجن/پيڊنگ اسپيسنگ شارٽڪٽس لاءِ درجنوں نوان يوٽيلٽي ڪلاس شامل ڪيا ويا.

گرڊ سسٽم

  • flexbox ڏانهن منتقل ڪيو ويو.
    • شامل ڪيل سپورٽ فلڪس باڪس لاءِ گرڊ ميڪسينس ۽ اڳواٽ بيان ڪيل طبقن ۾.
    • flexbox جي حصي جي طور تي، عمودي ۽ افقي قطار جي طبقن لاء سپورٽ شامل آھن.
  • اپڊيٽ ٿيل گرڊ ڪلاس جا نالا ۽ نئون گرڊ ٽائر.
    • وڌيڪ گرينولر ڪنٽرول لاءِ ھيٺ ڏنل نئون smگرڊ ٽائر شامل ڪيو ويو. 768pxاسان وٽ ھاڻي آھي xs, sm, md, lg, and xl. هن جو مطلب اهو آهي ته هر سطح کي هڪ سطح تي ڌڪايو ويو آهي (تنهنڪري .col-md-6v3 ۾ هاڻي .col-lg-6v4 ۾ آهي).
    • xsگرڊ طبقن کي تبديل ڪيو ويو آهي انفڪس جي ضرورت نه آهي وڌيڪ صحيح طور تي نمائندگي ڪرڻ لاءِ ته اهي اسٽائل لاڳو ڪرڻ شروع ڪن ٿا min-width: 0۽ نه هڪ مقرر ڪيل پکسل ويليو. ان جي بدران .col-xs-6، اهو هاڻي .col-6آهي. ٻيا سڀئي گرڊ ٽائر انفڪس جي ضرورت هونديون آهن (مثال طور، sm).
  • اپڊيٽ ٿيل گرڊ سائيز، ميڪسين، ۽ متغير.
    • گرڊ گٽرن وٽ ھاڻي ھڪڙو ساس نقشو آھي تنھنڪري توھان ھر وقفي پوائنٽ تي مخصوص گٽر جي چوٽي بيان ڪري سگھو ٿا.
    • اپ ڊيٽ ٿيل گرڊ ميڪسينس استعمال ڪرڻ لاءِ make-col-readyپريپ ميڪسين ۽ الف make-colکي سيٽ ڪرڻ لاءِ flex۽ max-widthانفرادي ڪالمن جي سائزنگ لاءِ.
    • تبديل ٿيل گرڊ سسٽم ميڊيا سوال بريڪ پوائنٽس ۽ ڪنٽينر جي چوٽي کي نئين گرڊ ٽائر جي حساب سان ۽ پڪ ڪريو ته ڪالمن برابر طور تي ورهائي سگهجن ٿيون 12انهن جي وڌ ۾ وڌ ويڪر تي.
    • گرڊ بريڪ پوائنٽس ۽ ڪنٽينر جي چوٽي ھاڻي ھٿ ھلائي وئي آھي ساس نقشن ( $grid-breakpoints۽ $container-max-widths) جي بدران ھٿن ڌار ڌار متغيرن جي. اهي @screen-*متغيرن کي مڪمل طور تي تبديل ڪن ٿا ۽ توهان کي گرڊ جي درجي کي مڪمل طور تي ڪسٽمائي ڪرڻ جي اجازت ڏين ٿا.
    • ميڊيا جا سوال به بدلجي ويا آهن. اسان جي ميڊيا سوالن جي بيانن کي هر دفعي ساڳئي قدر سان ورجائڻ بدران، اسان وٽ هاڻي آهي @include media-breakpoint-up/down/only. هاڻي، لکڻ جي بدران @media (min-width: @screen-sm-min) { ... }، توهان لکي سگهو ٿا @include media-breakpoint-up(sm) { ... }.

اجزاء

  • ڦٽي ويا پينل، ٿمبنيلز، ۽ ويلز لاءِ هڪ نئون سڀ شامل ڪندڙ جزو، ڪارڊ .
  • Glyphicons icon فونٽ ڪڍي ڇڏيو. جيڪڏھن توھان کي آئڪن جي ضرورت آھي، ڪجھ اختيار آھن:
  • Affix jQuery پلگ ان ڪڍيو.
    • اسان ان جي بدران استعمال ڪرڻ جي صلاح ڏيو ٿا position: sticky. ڏسو HTML5 تفصيل ۽ مخصوص پولفيل سفارشن لاءِ مھرباني ڪري داخل ڪريو. ھڪڙي تجويز آھي @supportsان کي لاڳو ڪرڻ لاءِ ھڪڙو قاعدو استعمال ڪريو (مثال طور، @supports (position: sticky) { ... })/
    • جيڪڏهن توهان اضافي، غير positionاسٽائل لاڳو ڪرڻ لاءِ Affix استعمال ڪري رهيا آهيو، ته شايد پولي فلز توهان جي استعمال جي صورت ۾ سهڪار نه ڪن. اهڙن استعمالن لاءِ هڪ آپشن آهي ٽئين پارٽي ScrollPos-Styler لائبريري.
  • پيجر جو حصو ڪڍيو ويو جيئن ته اهو بنيادي طور تي ٿورڙو ڪسٽمائيز بٽڻ هو.
  • اوور-مخصوص ٻارن جي چونڊ ڪندڙن جي بدران وڌيڪ غير اينسٽڊ ڪلاس سليڪٽرز کي استعمال ڪرڻ لاءِ تقريبن سڀني حصن کي ريفيڪٽر ڪيو.

جزو طرفان

هي فهرست اهم تبديلين کي نمايان ڪري ٿو جزو جي وچ ۾ v3.xx ۽ v4.0.0.

ريبوٽ

Bootstrap 4 لاءِ نئون آهي ريبوٽ ، هڪ نئين اسٽائل شيٽ جيڪا اسان جي پنهنجي ڪجهه راءِ رکندڙ ري سيٽ اسلوب سان 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

ٽيبل

  • چونڊيندڙ جا لڳ ڀڳ سڀئي مثال >ختم ڪيا ويا آهن، مطلب ته nested ٽيبل هاڻي خودڪار طريقي سان انهن جي والدين کان انداز ورثي ۾ ملندا. هي اسان جي چونڊ ڪندڙن ۽ امڪاني ڪسٽمائيزيشن کي تمام گهڻو آسان بڻائي ٿو.
  • مستقل مزاجي .table-condensedلاءِ تبديل ڪيو ويو .table-sm.
  • نئون .table-inverseاختيار شامل ڪيو ويو.
  • شامل ڪيل ٽيبل هيڊر موڊيفائر: .thead-default۽ .thead-inverse.
  • نالي سان لاڳاپيل طبقن کي .table--prefix رکڻ لاءِ. تنهن ڪري .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هاڻي mixin ذريعي انداز لاڳو نٿو ٿئي .row، تنهنڪري .rowهاڻي افقي گرڊ ترتيبن لاءِ گهربل آهي (مثال طور، <div class="form-group row">).
    • شامل ڪيو ويو نئون .col-form-labelڪلاس عمودي مرڪز ليبلن ۾ .form-controls سان.
    • .form-rowگرڊ ڪلاسن سان گڏ ڪمپيڪٽ فارم جي ترتيبن لاءِ نئون شامل ڪيو ويو (توهان .rowجي لاءِ هڪ .form-row۽ وڃو).
  • شامل ڪيل ڪسٽم فارم سپورٽ (چڪ بڪس، ريڊيوز، چونڊ، ۽ فائل ان پٽ لاء).
  • تبديل ٿيل .has-error, .has-warning, ۽ .has-successڪلاس HTML5 فارم جي تصديق سان CSS جي :invalid۽ :validpseudo-ڪلاسن ذريعي.
  • جو نالو تبديل .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 ۾ بگي آهن .

بٽڻ گروپ

  • flexbox سان حصو ٻيهر لکو.
  • هٽايو ويو .btn-group-justified. متبادل جي طور تي توھان استعمال <div class="btn-group d-flex" role="group"></div>ڪري سگھوٿا لفافي طور تي عناصر جي چوڌاري .w-100.
  • ڪلاس .btn-group-xsکي مڪمل طور تي ختم ڪري .btn-xsڇڏيو.
  • بٽڻ ٽول بار ۾ بٽڻ گروپن جي وچ ۾ واضح فاصلو هٽايو ويو؛ ھاڻي مارجن يوٽيلٽيز استعمال ڪريو.
  • ٻين حصن سان استعمال ڪرڻ لاء بهتر دستاويز.
  • مٽايو ويو والدين چونڊيندڙن کان واحد طبقن لاءِ سڀني حصن لاءِ، تبديل ڪندڙ، وغيره.
  • ڊراپ ڊائون مينيو سان جڙيل مٿي يا هيٺئين طرف منهن واري تيرن سان هاڻي نه موڪلڻ لاءِ آسان ٿيل ڊراپ ڊائون اسلوب.
  • <div>ڊراپ ڊائونز هاڻي s يا s سان ٺاهي سگھجن ٿيون <ul>.
  • ٻيهر تعمير ٿيل ڊراپ ڊائون اسلوب ۽ مارڪ اپ آسان مهيا ڪرڻ لاءِ، بلٽ ان سپورٽ لاءِ <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}
  • نون flexbox-powered 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-مخصوص چونڊ ڪندڙن جي بدران ، اسان s، s، ۽ s .nav > li > aلاءِ الڳ ڪلاس استعمال ڪندا آهيون . اهو توهان جي HTML کي وڌيڪ لچڪدار بڻائيندو آهي جڏهن ته وڌايل وڌاءُ سان گڏ..nav.nav-item.nav-link

نيوبار مڪمل طور تي فلڪس باڪس ۾ ٻيهر لکيو ويو آهي ترتيب ڏيڻ، جواب ڏيڻ، ۽ ڪسٽمائيزيشن لاءِ بهتر مدد سان.

  • .navbarجوابي نيوبار جي رويي کي ھاڻي ڪلاس تي لاڳو ڪيو ويو آھي گھربل .navbar-expand-{breakpoint} ذريعي جتي توھان چونڊيو ٿا جتي نيوبار کي ختم ڪرڻ لاءِ. اڳي هي هڪ گهٽ متغير ترميمي هو ۽ گهربل ٻيهر ترتيب ڏيڻ.
  • .navbar-defaultهاڻي آهي .navbar-light، جيتوڻيڪ .navbar-darkساڳيو رهي ٿو. انهن مان هڪ هر نيوبار تي گهربل آهي. تنهن هوندي به، اهي طبقا هاڻي مقرر نه آهن background-colors؛ ان جي بدران اهي بنيادي طور تي صرف متاثر ڪن ٿا color.
  • نيوبارز کي هاڻي ڪنهن قسم جي پس منظر جي اعلان جي ضرورت آهي. اسان جي پس منظر جي يوٽيلٽيز مان چونڊيو ( ) يا چريو حسب ضرورت لاءِ.bg-* مٿي ڏنل روشني/انورس ڪلاسن سان پنهنجو پاڻ کي سيٽ ڪريو .
  • ڏنو ويو flexbox طرز، navbars هاڻي استعمال ڪري سگهن ٿا flexbox افاديت آسان ترتيب ڏيڻ جي اختيارن لاءِ.
  • .navbar-toggleهاڻي آهي .navbar-toggler۽ مختلف اسلوب ۽ اندروني مارڪ اپ آهي (وڌيڪ ٽي نه <span>).
  • .navbar-formڪلاس مڪمل طور ختم ڪري ڇڏيو . اهو هاڻي ضروري ناهي؛ بجاءِ، صرف .form-inlineضرورت مطابق مارجن يوٽيلٽيز استعمال ڪريو ۽ لاڳو ڪريو.
  • Navbars هاڻي شامل نه آهن margin-bottomيا border-radiusڊفالٽ طور. ضروري طور تي افاديت استعمال ڪريو.
  • نيوبارز جي خصوصيت وارا سڀئي مثال نئين مارڪ اپ شامل ڪرڻ لاءِ اپڊيٽ ڪيا ويا آهن.

صفحو

  • flexbox سان حصو ٻيهر لکو.
  • واضح طبقو ( .page-item، .page-link) هاڻي .paginations جي اولاد تي گهربل آهي
  • جزو کي مڪمل طور تي اڇلائي ڇڏيو .pagerجيئن اهو ڪسٽمائيز آئوٽ لائن بٽڻ کان ٿورو وڌيڪ هو.
  • هڪ واضح طبقو، .breadcrumb-itemهاڻي .breadcrumbs جي اولاد تي گهربل آهي

ليبل ۽ بيج

  • گڏيل .label۽ عنصر .badgeکان ڌار ڪرڻ <label>۽ لاڳاپيل اجزاء کي آسان ڪرڻ.
  • .badge-pillگول ”پِل“ نظر لاءِ ترميمي طور شامل ڪيو ويو.
  • بيج هاڻي خودڪار طور تي لسٽ گروپن ۽ ٻين حصن ۾ نه آهن. ان لاءِ هاڻي يوٽيلٽي ڪلاس گهربل آهن.
  • .badge-defaultختم ڪيو ويو آهي ۽ .badge-secondaryملاپ ۾ شامل ڪيو ويو جزو تبديل ڪندڙ طبقن جي ٻين هنڌن تي استعمال ٿيل.

پينل، ٺٺوليون، ۽ کوهه

نئين ڪارڊ جزو لاء مڪمل طور تي ڇڏيا ويا.

پينل

  • .panelڏانهن .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

ترقي

  • يوٽيلٽيز سان لاڳاپيل .progress-bar-*طبقن کي تبديل ڪيو ويو .bg-*. مثال طور، class="progress-bar progress-bar-danger"ٿئي ٿو class="progress-bar bg-danger".
  • .activeسان گڏ متحرڪ ترقي واري بارن لاءِ تبديل ڪيو ويو .progress-bar-animated.
  • ڊزائن ۽ اسٽائل کي آسان ڪرڻ لاء سڄي جزو کي ختم ڪيو. اسان وٽ توھان لاءِ گھٽ اسلوب آھن جن کي اوور رائڊ ڪيو وڃي، نوان اشارا، ۽ نوان آئڪن.
  • سڀني سي ايس ايس کي غير-نسٽڊ ڪيو ويو آهي ۽ ان جو نالو تبديل ڪيو ويو آهي، انهي کي يقيني بڻائي ته هر ڪلاس سان اڳياڙي آهي .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، مطلب ته انھن کي ھاڻي ڪنھن مخصوص بيس ڪلاس جي ضرورت ناھي.
  • سڀني جوابي اسٽائل کي هٽايو، افاديت ڏانهن ڦيرايو (مثال طور، ڪيپشن ڏيکاريندي ڪجهه ڏيک بندرگاهن تي) ۽ گهربل انداز مطابق.
  • هٽايو ويو تصويرن لاءِ ڪارسيل آئٽمز ۾ تصويرن لاءِ ، افاديت ڏانهن ملتوي ڪرڻ.
  • نئين مارڪ اپ ۽ اسلوب شامل ڪرڻ لاءِ Carousel مثال کي ٽوڪيو.

ٽيبل

  • اسٽائل ٿيل نسٽڊ ٽيبلز لاءِ سپورٽ ختم ڪئي وئي. سڀ ٽيبل اسلوب ھاڻي وراثت ۾ ورثي ۾ آھن v4 آسان چونڊ ڪندڙن لاءِ.
  • شامل ٿيل inverse جدول variant.

افاديت

  • ڏيکاريو، لڪايو، ۽ وڌيڪ:
    • ڊسپلي يوٽيلٽيز کي جوابي بڻايو (مثال طور، .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

دستاويزي

اسان جي دستاويزن کي پڻ بورڊ ۾ هڪ اپڊيٽ ملي ٿي. هتي هيٺيون گهٽيون آهن:

  • اسان اڃا تائين استعمال ڪري رهيا آهيون Jekyll، پر اسان وٽ ميلاپ ۾ پلگ ان آهن:
    • bugify.rbاسان جي برائوزر جي بگ پيج تي داخلائن کي موثر انداز ۾ لسٽ ڪرڻ لاءِ استعمال ڪيو ويندو آهي .
    • example.rbڊفالٽ پلگ ان جو هڪ ڪسٽم فورڪ آهي، highlight.rbآسان مثال-ڪوڊ سنڀالڻ جي اجازت ڏئي ٿو.
    • callout.rbانهي جو هڪ جهڙو ڪسٽم فورڪ آهي، پر اسان جي خاص دستاويزن ڪال آئوٽ لاءِ ٺهيل آهي.
    • jekyll-toc اسان جي مواد جي جدول ٺاهڻ لاءِ استعمال ڪيو ويندو آهي.
  • سڀني دستاويزن جي مواد کي مارڪ ڊائون ۾ ٻيهر لکيو ويو آهي (HTML جي بدران) آسان ترميم لاءِ.
  • صفحا آسان مواد ۽ وڌيڪ قابل رسا درجي بندي لاءِ ترتيب ڏنل آهن.
  • اسان باقاعدي CSS کان SCSS ڏانھن منتقل ڪيو آھي بوٽ اسٽريپ جي متغيرن، ميڪسينز ۽ وڌيڪ مان پورو فائدو وٺڻ لاءِ.

جوابي افاديت

v4.0.0 ۾ سڀئي @screen-متغير ختم ڪيا ويا آهن. استعمال ڪريو media-breakpoint-up(), media-breakpoint-down(), or media-breakpoint-only()Sass mixins or the$grid-breakpoints Sass map بدران.

اسان جي جوابي افاديت طبقن کي گهڻو ڪري ختم ڪيو ويو آهي واضح 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 استعمال ڪرڻ جي ضرورت پوندي.