Source

v4 میں منتقلی

بوٹسٹریپ 4 پورے پروجیکٹ کی ایک بڑی تحریر ہے۔ سب سے زیادہ قابل ذکر تبدیلیوں کا خلاصہ ذیل میں دیا گیا ہے، اس کے بعد متعلقہ اجزاء میں مزید مخصوص تبدیلیاں کی گئی ہیں۔

مستحکم تبدیلیاں

بیٹا 3 سے ہمارے مستحکم v4.0 ریلیز میں منتقل ہونے سے، کوئی توڑ تبدیلیاں نہیں ہیں، لیکن کچھ قابل ذکر تبدیلیاں ہیں۔

پرنٹنگ

  • فکسڈ ٹوٹا ہوا پرنٹ افادیت. پہلے، .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 ریلیز میں حل کرنے کی ضرورت ہے۔ یہ تبدیلیاں لاگو ہوتی ہیں اگر آپ Beta 2 سے Beta 3 یا Bootstrap کے کسی پرانے ورژن کو اپ ڈیٹ کر رہے ہیں۔

متفرق

  • $thumbnail-transitionغیر استعمال شدہ متغیر کو ہٹا دیا ۔ ہم کچھ بھی منتقل نہیں کر رہے تھے، لہذا یہ صرف اضافی کوڈ تھا۔
  • npm پیکیج میں اب ہمارے سورس اور ڈسٹ فائلوں کے علاوہ کوئی فائل شامل نہیں ہے۔ اگر آپ ان پر بھروسہ کرتے ہیں اور node_modulesفولڈر کے ذریعے ہماری اسکرپٹس چلا رہے ہیں، تو آپ کو اپنے ورک فلو کو اپنانا چاہیے۔

فارمز

  • حسب ضرورت اور ڈیفالٹ دونوں چیک باکسز اور ریڈیوز کو دوبارہ لکھیں۔ اب، دونوں کا HTML ڈھانچہ مماثل ہے ( <div>sibling <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-textSass متغیر میں تبدیلی موصول ہوئی۔ اب یہ نیسٹڈ ساس کا نقشہ نہیں ہے اور اب صرف ایک سٹرنگ کو طاقت دیتا ہے — Browseبٹن جیسا کہ اب ہمارے ساس سے پیدا ہونے والا واحد سیوڈو عنصر ہے۔ متن اب Choose fileسے آتا ہے .custom-file-label۔

ان پٹ گروپس

  • ان پٹ گروپ ایڈونز اب ان پٹ کی نسبت ان کی جگہ کے لیے مخصوص ہیں۔ ہم نے چھوڑ دیا ہے .input-group-addonاور .input-group-btnدو نئی کلاسوں کے لیے، .input-group-prependاور .input-group-append. ہمارے سی ایس ایس کے زیادہ تر حصے کو آسان بناتے ہوئے، آپ کو اب واضح طور پر ایک ضمیمہ یا ایک پری پینڈ استعمال کرنا چاہیے۔ ضمیمہ یا پہلے سے منسلک کے اندر، اپنے بٹن کو اس طرح رکھیں جیسے وہ کہیں اور موجود ہوں گے، لیکن متن کو میں لپیٹیں .input-group-text۔

  • توثیق کے انداز اب معاون ہیں، جیسا کہ متعدد ان پٹ ہیں (حالانکہ آپ فی گروپ صرف ایک ان پٹ کی توثیق کر سکتے ہیں)۔

  • سائز سازی کی کلاسیں والدین پر ہونی چاہئیں .input-groupنہ کہ انفرادی شکل کے عناصر پر۔

بیٹا 2 تبدیلیاں

بیٹا میں رہتے ہوئے، ہمارا مقصد ہے کہ کوئی تبدیلیاں نہ ہوں۔ تاہم، چیزیں ہمیشہ منصوبہ بندی کے مطابق نہیں ہوتیں۔ Beta 1 سے Beta 2 میں منتقل ہوتے وقت ذہن میں رکھنے والی اہم تبدیلیاں ذیل میں ہیں۔

توڑنے

  • $badge-colorمتغیر اور اس کا استعمال پر ہٹا دیا گیا .badge۔ ہم رنگ کنٹراسٹ فنکشن کا استعمال کرتے ہیں اس کی colorبنیاد پر منتخب کرنے کے لیے background-color، اس لیے متغیر غیر ضروری ہے۔
  • CSS مقامی فلٹر کے ساتھ تنازعات کو توڑنے سے بچنے کے لیے grayscale()فنکشن کا نام تبدیل کر دیا گیا۔gray()grayscale
  • دوسری جگہوں پر استعمال ہونے والی ہماری رنگ سکیموں سے مماثل .table-inverse، .thead-inverse, اور .thead-defaultto .*-darkاور کا نام تبدیل کر دیا گیا۔.*-light
  • ریسپانسیو ٹیبلز اب ہر گرڈ بریک پوائنٹ کے لیے کلاسز تیار کرتی ہیں۔ یہ بیٹا 1 سے اس لحاظ سے ٹوٹ جاتا ہے کہ .table-responsiveآپ جو استعمال کر رہے ہیں اس کی طرح .table-responsive-mdہے۔ آپ اب استعمال کر سکتے ہیں .table-responsiveیا .table-responsive-{sm,md,lg,xl}ضرورت کے مطابق۔
  • پیکیج مینیجر کے طور پر ڈراپ بوور سپورٹ کو متبادل کے لیے فرسودہ کر دیا گیا ہے (مثلاً، یارن یا این پی ایم)۔ تفصیلات کے لیے bower/bower#2298 دیکھیں۔
  • بوٹسٹریپ کو اب بھی jQuery 1.9.1 یا اس سے زیادہ کی ضرورت ہے، لیکن آپ کو مشورہ دیا جاتا ہے کہ ورژن 3.x استعمال کریں کیونکہ v3.x کے تعاون یافتہ براؤزرز وہ ہیں جو Bootstrap کو سپورٹ کرتا ہے اور 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 کے براؤزر اور WebView کے لیے آفیشل سپورٹ شامل کر دیا گیا۔ اینڈرائیڈ براؤزر اور ویب ویو کے پہلے ورژن صرف غیر سرکاری طور پر تعاون یافتہ ہیں۔

عالمی تبدیلیاں

  • Flexbox بطور ڈیفالٹ فعال ہے۔ عام طور پر اس کا مطلب ہے فلوٹس سے دور ہونا اور ہمارے تمام اجزاء سے زیادہ۔
  • ہماری سورس CSS فائلوں کے لیے Less سے Sass میں تبدیل ہوا ۔
  • ہمارے بنیادی CSS یونٹ کے طور پر سے پر سوئچ کیا pxگیا rem، حالانکہ میڈیا کے سوالات اور گرڈ رویے کے لیے پکسلز اب بھی استعمال کیے جاتے ہیں کیونکہ ڈیوائس ویو پورٹ قسم کے سائز سے متاثر نہیں ہوتے ہیں۔
  • عالمی فونٹ کا سائز بڑھ 14pxکر 16px.
  • پانچواں آپشن شامل کرنے کے لیے گرڈ ٹائرز کو نئے سرے سے بنایا گیا (چھوٹے آلات کو 576pxاور نیچے سے ایڈریس کرنا) اور -xsان کلاسز سے انفکس کو ہٹا دیا۔ مثال: .col-6.col-sm-4.col-md-3.
  • علیحدہ اختیاری تھیم کو SCSS متغیرات (مثلاً، $enable-gradients: true) کے ذریعے قابل ترتیب اختیارات کے ساتھ بدل دیا۔
  • Grunt کے بجائے npm اسکرپٹس کی ایک سیریز کو استعمال کرنے کے لیے سسٹم کی اوور ہالڈ بنائیں۔ package.jsonتمام اسکرپٹس کے لیے دیکھیں ، یا مقامی ترقی کی ضروریات کے لیے ہمارا پروجیکٹ ریڈمی۔
  • بوٹسٹریپ کا غیر جوابی استعمال مزید تعاون یافتہ نہیں ہے۔
  • مزید وسیع سیٹ اپ دستاویزات اور حسب ضرورت تعمیرات کے حق میں آن لائن کسٹمائزر کو چھوڑ دیا۔
  • عام سی ایس ایس پراپرٹی ویلیو جوڑوں اور مارجن/پیڈنگ اسپیسنگ شارٹ کٹس کے لیے درجنوں نئی ​​یوٹیلیٹی کلاسز شامل کی گئیں۔

گرڈ سسٹم

  • flexbox میں منتقل کر دیا گیا۔
    • گرڈ مکسنس اور پہلے سے طے شدہ کلاسز میں فلیکس باکس کے لیے سپورٹ شامل کر دی گئی۔
    • flexbox کے حصے کے طور پر، عمودی اور افقی صف بندی کی کلاسوں کے لیے تعاون شامل ہے۔
  • اپ ڈیٹ کردہ گرڈ کلاس کے نام اور ایک نیا گرڈ ٹائر۔
    • مزید دانے دار کنٹرول کے لیے نیچے ایک نیا smگرڈ ٹائر شامل کیا گیا۔ 768pxاب ہمارے پاس ہے xs, sm, md, lg, اور 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 آئیکن فونٹ کو گرا دیا گیا۔ اگر آپ کو شبیہیں درکار ہوں تو کچھ اختیارات یہ ہیں:
  • Affix jQuery پلگ ان کو گرا دیا۔
    • ہم position: stickyاس کے بجائے استعمال کرنے کی تجویز کرتے ہیں۔ تفصیلات اور مخصوص پولی فل کی سفارشات کے لیے HTML5 براہ کرم اندراج دیکھیں ۔ ایک تجویز یہ ہے کہ @supportsاسے نافذ کرنے کے لیے ایک اصول استعمال کیا جائے (مثال کے طور پر، @supports (position: sticky) { ... })/
    • اگر آپ اضافی، غیر positionطرزیں لگانے کے لیے Affix کا استعمال کر رہے تھے، تو ہو سکتا ہے کہ پولی فلز آپ کے استعمال کے معاملے کی حمایت نہ کریں۔ اس طرح کے استعمال کے لیے ایک آپشن تھرڈ پارٹی ScrollPos-Styler لائبریری ہے۔
  • پیجر جزو کو گرا دیا کیونکہ یہ بنیادی طور پر تھوڑا سا حسب ضرورت بٹن تھا۔
  • زیادہ سے زیادہ مخصوص بچوں کے سلیکٹرز کے بجائے زیادہ غیر نیسٹڈ کلاس سلیکٹرز استعمال کرنے کے لیے تقریباً تمام اجزاء کو ری فیکٹر کیا۔

جزو کے لحاظ سے

یہ فہرست v3.xx اور v4.0.0 کے درمیان جزو کے لحاظ سے اہم تبدیلیوں کو نمایاں کرتی ہے۔

دوبارہ شروع کریں۔

Bootstrap 4 کے لیے نیا Reboot ہے ، ایک نئی اسٹائل شیٹ جو ہمارے اپنے کسی حد تک رائے دینے والے ری سیٹ اسٹائل کے ساتھ Normalize پر بنتی ہے۔ اس فائل میں ظاہر ہونے والے سلیکٹرز صرف عناصر کا استعمال کرتے ہیں—یہاں کوئی کلاس نہیں ہے۔ یہ مزید ماڈیولر اپروچ کے لیے ہمارے ری سیٹ اسٹائلز کو ہمارے اجزاء کے انداز سے الگ کرتا ہے۔ اس میں شامل کچھ سب سے اہم ری سیٹس میں تبدیلیاں شامل ہیں ، بہت سے عناصر پر اکائیوں box-sizing: border-boxسے منتقل ہونا ، لنک کے انداز، اور بہت سے عنصر کی دوبارہ ترتیب۔emrem

نوع ٹائپ

  • .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-responsiveدائیں کو پر رکھیں <table>۔
  • مستقل مزاجی کے لیے نام تبدیل کر دیا .table-condensedگیا ۔.table-sm
  • ایک نیا .table-inverseآپشن شامل کیا گیا۔
  • ٹیبل ہیڈر میں ترمیم کرنے والے شامل کیے گئے: .thead-defaultاور .thead-inverse.
  • سیاق و سباق کی کلاسوں کا نام بدل کر ایک .table--prefix رکھنے کے لیے۔ اس لیے .active, .success, .warning, .dangerاور .infoto .table-active, .table-success, .table-warning, .table-dangerand .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-labels کے ساتھ عمودی طور پر سینٹر لیبلز میں نئی ​​کلاس شامل .form-controlکی گئی۔
    • .form-rowگرڈ کلاسز کے ساتھ کمپیکٹ فارم لے آؤٹس کے لیے نیا شامل کیا گیا (اپنے .rowکے لیے تبدیل کریں .form-rowاور جائیں)۔
  • اپنی مرضی کے مطابق فارم سپورٹ (چیک باکسز، ریڈیوز، سلیکٹس، اور فائل ان پٹس کے لیے) شامل کیا گیا۔
  • CSS اور سیوڈو کلاسز کے ذریعے 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')طریقے شامل ہیں۔ ہم اس کے بجائے تھوڑا سا حسب ضرورت JavaScript استعمال کرنے کا مشورہ دیتے ہیں، جس کا فائدہ بالکل اسی طرح سے برتا جائے گا جس طرح آپ چاہتے ہیں۔
    • نوٹ کریں کہ پلگ ان کی دیگر خصوصیات (بٹن چیک باکس، بٹن ریڈیو، سنگل ٹوگل بٹن) کو 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 کے آن کے ذریعے فراہم کیا جاتا ::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۔
  • گرڈ سسٹم اور اجزاء کے لیے فلیکس باکس یوٹیلیٹی کلاسز شامل کی گئیں۔

گروپس کی فہرست بنائیں

  • 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-color؛ اس کے بجائے وہ بنیادی طور پر صرف متاثر کرتے ہیں color۔
  • Navbars کو اب کسی قسم کے پس منظر کے اعلان کی ضرورت ہوتی ہے۔ ہماری بیک گراؤنڈ یوٹیلیٹیز ( ) میں سے انتخاب کریں یا دیوانہ حسب ضرورت کے لیے.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کیونکہ یہ تقریباً لیبلز سے مماثل تھا۔ .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۔
  • ڈیزائن اور اسٹائل کو آسان بنانے کے لیے پورے جزو کی اوور ہال کی گئی۔ ہمارے پاس آپ کو اوور رائڈ کرنے کے لیے کم اسٹائلز، نئے اشارے اور نئے آئیکنز ہیں۔
  • تمام 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، یعنی انہیں اب کسی مخصوص بیس کلاس کی ضرورت نہیں ہے۔
  • ضرورت کے مطابق تمام ریسپانسیو اسٹائلنگ کو ہٹا دیا گیا، یوٹیلیٹیز کو موخر کر دیا گیا (مثلاً کچھ ویو پورٹ پر کیپشن دکھانا) اور حسب ضرورت انداز۔
  • افادیت کو موخر کرتے ہوئے، carousel آئٹمز میں تصاویر کے لیے ہٹائی گئی تصویر اوور رائیڈز۔
  • نئے مارک اپ اور سٹائلز کو شامل کرنے کے لیے Carousel مثال کو موافق بنایا۔

میزیں

  • اسٹائلڈ نیسٹڈ ٹیبلز کے لیے سپورٹ کو ہٹا دیا گیا۔ تمام ٹیبل اسٹائل اب آسان سلیکٹرز کے لیے 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}گئے۔
  • صف بندی اور وقفہ کاری:
  • پرانے براؤزر ورژن کے لیے سپورٹ چھوڑنے کے لیے کلیئر فکس کو اپ ڈیٹ کیا گیا۔

وینڈر پریفکس مکسنس

بوٹسٹریپ 3 کے وینڈر پریفکس مکسینز، جو v3.2.0 میں فرسودہ تھے، بوٹسٹریپ 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اس کا ایک ایسا ہی حسب ضرورت کانٹا ہے، لیکن ہمارے خصوصی دستاویزات کال آؤٹس کے لیے ڈیزائن کیا گیا ہے۔
    • markdown-block.rbٹیبل جیسے ایچ ٹی ایم ایل عناصر کے اندر مارک ڈاؤن کے ٹکڑوں کو رینڈر کرنے کے لیے استعمال کیا جاتا ہے۔
    • jekyll-toc ہمارے مشمولات کے جدول کو بنانے کے لیے استعمال کیا جاتا ہے۔
  • آسان ترمیم کے لیے تمام دستاویزات کے مواد کو مارک ڈاؤن (HTML کی بجائے) میں دوبارہ لکھا گیا ہے۔
  • صفحات کو آسان مواد اور زیادہ قابل رسائی درجہ بندی کے لیے دوبارہ ترتیب دیا گیا ہے۔
  • ہم بوٹسٹریپ کے متغیرات، مکسنس وغیرہ سے بھرپور فائدہ اٹھانے کے لیے باقاعدہ CSS سے SCSS میں چلے گئے۔

ذمہ دار افادیت

@screen-v4.0.0 میں تمام متغیرات کو ہٹا دیا گیا ہے۔ اس کے بجائے media-breakpoint-up(), media-breakpoint-down(), یا media-breakpoint-only()Sass مکسنس یا $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 استعمال کرنے کی ضرورت ہوگی۔