Source

برائوزر ۽ ڊوائيسز

انهن برائوزرن ۽ ڊوائيسز جي باري ۾ سکو، جديد کان پراڻي تائين، جيڪي بوٽ اسٽريپ جي مدد سان آهن، جن ۾ هر هڪ لاءِ ڄاڻايل نرالا ۽ بگ شامل آهن.

سپورٽ ٿيل برائوزر

بوٽ اسٽراپ سڀني وڏن برائوزرن ۽ پليٽ فارمن جي جديد، مستحڪم رليز کي سپورٽ ڪري ٿو. ونڊوز تي، اسان سپورٽ ڪريون ٿا Internet Explorer 10-11 / Microsoft Edge .

متبادل برائوزر جيڪي WebKit، Blink، يا Gecko جو جديد نسخو استعمال ڪن ٿا، ڇا سڌو يا پليٽ فارم جي ويب ڏيک API ذريعي، واضح طور تي سپورٽ نه آهن. جڏهن ته، بوٽ اسٽريپ (اڪثر ڪيسن ۾) انهن برائوزرن ۾ صحيح نموني ڏيکاري ۽ ڪم ڪرڻ گهرجي. وڌيڪ مخصوص سپورٽ معلومات هيٺ ڏنل آهي.

توھان ڳولي سگھوٿا اسان جي سپورٽ ٿيل رينج جي برائوزرن ۽ انھن جا ورجن اسان جيpackage.json :

"browserslist": [
  "last 1 major version",
  ">= 1%",
  "Chrome >= 45",
  "Firefox >= 38",
  "Edge >= 12",
  "Explorer >= 10",
  "iOS >= 9",
  "Safari >= 9",
  "Android >= 4.4",
  "Opera >= 30"
]

اسان استعمال ڪريون ٿا Autoprefixer مقصدي براؤزر سپورٽ کي سنڀالڻ لاءِ CSS اڳڪٿين ذريعي، جيڪو استعمال ڪري ٿو Browserslist انهن برائوزر ورزن کي منظم ڪرڻ لاءِ. انهن اوزارن کي توهان جي منصوبن ۾ ڪيئن ضم ڪرڻ لاءِ انهن جي دستاويزن سان صلاح ڪريو.

موبائل ڊوائيسز

عام طور تي ڳالهائڻ، بوٽ اسٽراپ هر وڏي پليٽ فارم جي ڊفالٽ برائوزرن جي جديد نسخن کي سپورٽ ڪري ٿو. نوٽ ڪريو ته پراکسي برائوزر (جهڙوڪ اوپيرا ميني، اوپيرا موبائل جو ٽربو موڊ، يو سي برائوزر ميني، ايمازون سلڪ) سپورٽ نه ڪندا آھن.

ڪروم فائر فاڪس سفاري Android برائوزر ۽ WebView Microsoft Edge
Android حمايت ڪئي حمايت ڪئي N/A Android v5.0+ سپورٽ حمايت ڪئي
iOS حمايت ڪئي حمايت ڪئي حمايت ڪئي N/A حمايت ڪئي
ونڊوز 10 موبائل N/A N/A N/A N/A حمايت ڪئي

ڊيسڪ ٽاپ برائوزر

اهڙي طرح، اڪثر ڊيسڪ ٽاپ برائوزرن جا جديد ورجن سپورٽ ڪيا ويا آهن.

ڪروم فائر فاڪس انٽرنيٽ ايڪسپلورر Microsoft Edge اوپيرا سفاري
ميڪ حمايت ڪئي حمايت ڪئي N/A N/A حمايت ڪئي حمايت ڪئي
ونڊوز حمايت ڪئي حمايت ڪئي سپورٽ، IE10+ حمايت ڪئي حمايت ڪئي سپورٽ ناهي

Firefox لاءِ، جديد عام مستحڪم رليز کان علاوه، اسان فائر فاڪس جي جديد توسيع ٿيل سپورٽ رليز (ESR) ورجن کي پڻ سپورٽ ڪريون ٿا.

غير رسمي طور تي، بوٽ اسٽريپ کي ڏسڻ گهرجي ۽ سٺو عمل ڪرڻ گهرجي Chromium ۽ Chrome لاءِ لينڪس، Firefox for Linux، ۽ Internet Explorer 9، جيتوڻيڪ اهي سرڪاري طور تي سهڪار نه ڪيا ويا آهن.

ڪجھ برائوزر جي بگن جي لسٽ لاءِ جن کي بوٽ اسٽريپ سان مقابلو ڪرڻو پوندو، ڏسو اسان جي وال آف برائوزر بگز .

انٽرنيٽ ايڪسپلورر

انٽرنيٽ ايڪسپلورر 10+ سپورٽ آهي؛ IE9 ۽ هيٺ نه آهي. مهرباني ڪري آگاهه رهو ته ڪجهه CSS3 ملڪيتون ۽ HTML5 عناصر IE10 ۾ مڪمل طور تي سهڪار نه ڪيا ويا آهن، يا مڪمل ڪارڪردگي لاءِ اڳي مقرر ٿيل ملڪيتن جي ضرورت آهي. دورو ڪريو ڇا مان استعمال ڪري سگھان ٿو... CSS3 ۽ HTML5 خاصيتن جي برائوزر سپورٽ تي تفصيل لاءِ.

جيڪڏهن توهان کي IE8-9 سپورٽ جي ضرورت آهي، Bootstrap 3 استعمال ڪريو. اهو اسان جي ڪوڊ جو تمام مستحڪم نسخو آهي ۽ اڃا به اسان جي ٽيم پاران نازڪ بگ فڪسس ۽ دستاويزي تبديلين لاءِ سهڪار ڪيو ويندو آهي. تنهن هوندي، ان ۾ ڪا به نئين خاصيت شامل نه ڪئي ويندي.

موبائيل تي ماڊل ۽ ڊراپ ڊائونز

اوور فلو ۽ ڇڪڻ

overflow: hidden;عنصر تي سپورٽ <body>iOS ۽ Android ۾ ڪافي محدود آهي. انهي جي پڇاڙيء ۾، جڏهن توهان انهن مان ڪنهن به ڊوائيس جي برائوزرن ۾ ماڊل جي مٿين يا هيٺان ماضي کي اسڪرال ڪندا، <body>مواد اسڪرال ڪرڻ شروع ڪندو. ڏسو ڪروم بگ #175502 (ڪروم v40 ۾ مقرر ٿيل) ۽ ويب ڪيٽ بگ #153852 .

iOS ٽيڪسٽ فيلڊز ۽ اسڪرولنگ

iOS 9.2 جي مطابق، جڏهن هڪ موڊل کليل آهي، جيڪڏهن اسڪرول جي اشاري جو شروعاتي ٽچ متن جي حد جي اندر <input>هجي يا a <textarea>، <body>ته ماڊل جي هيٺان مواد کي ماڊل جي بدران اسڪرول ڪيو ويندو. ڏسو WebKit بگ #153856 .

.dropdown-backdropz-indexing جي پيچيدگي جي ڪري عنصر نيوي ۾ iOS تي استعمال نه ڪيو ويو آهي . اهڙيءَ طرح، نيوبارز ۾ ڊراپ ڊائونز کي بند ڪرڻ لاءِ، توهان کي لازمي طور تي ڊراپ ڊائون عنصر تي ڪلڪ ڪرڻ گهرجي (يا ڪو ٻيو عنصر جيڪو iOS ۾ ڪلڪ واري واقعي کي فائر ڪندو ).

برائوزر زومنگ

صفحو زومنگ ناگزير طور تي پيش ڪري ٿو رينڊرنگ نمونن کي ڪجھ حصن ۾، ٻئي بوٽ اسٽراپ ۽ باقي ويب ۾. مسئلي تي مدار رکندي، اسان ان کي درست ڪرڻ جي قابل ٿي سگھون ٿا (پهريون ڳولھيو ۽ پوء جيڪڏھن ضرورت ھجي ته مسئلو کوليو). تنهن هوندي، اسان انهن کي نظر انداز ڪندا آهيون ڇو ته انهن وٽ اڪثر ڪري هيڪي ڪم ڪارائونڊ کان سواء ٻيو ڪو سڌو حل ناهي.

اسٽيڪ :hover/ :focusiOS تي

جڏهن ته :hoverسڀ کان وڌيڪ ٽچ ڊوائيسز تي ممڪن ناهي، iOS هن رويي کي نقل ڪري ٿو، جنهن جي نتيجي ۾ "چپچپا" هور انداز جيڪي هڪ عنصر کي ٽيپ ڪرڻ کان پوء جاري آهن. اهي هور انداز صرف هٽايا ويندا آهن جڏهن صارف ٻئي عنصر کي ٽيپ ڪندا آهن. اهو رويو گهڻو ڪري ناپسنديده سمجهيو ويندو آهي ۽ ظاهر ٿئي ٿو ته Android يا ونڊوز ڊوائيسز تي ڪو مسئلو ناهي.

اسان جي v4 الفا ۽ بيٽا رليزز جي دوران، اسان ميڊيا سوال شيم کي چونڊڻ لاءِ نامڪمل ۽ تبصرو ڪيو ڪوڊ شامل ڪيو جيڪو ٽچ ڊيوائس برائوزرن ۾ هوور اسٽائل کي غير فعال ڪري ڇڏيندو جيڪي هورنگ کي نقل ڪن ٿا. اهو ڪم مڪمل طور تي مڪمل يا فعال نه ڪيو ويو هو، پر مڪمل ڀڃڪڙي کان بچڻ لاء، اسان هن شيم کي ختم ڪرڻ جو انتخاب ڪيو آهي ۽ مڪسين کي pseudo-ڪلاسز لاء شارٽ ڪٽ طور رکيو آهي.

ڇپائي

جيتوڻيڪ ڪجھ جديد برائوزرن ۾، ڇپائي نرالي ٿي سگھي ٿي.

سفاري v8.0 جي طور تي، مقرر ٿيل چوٽي .containerڪلاس جو استعمال سفاري کي پرنٽ ڪرڻ وقت غير معمولي طور تي ننڍي فونٽ جي سائيز کي استعمال ڪرڻ جي ڪري سگھي ٿو. وڌيڪ تفصيل لاءِ ڏسو مسئلو #14868 ۽ ويب ڪِٽ بگ #138192 . ھڪڙو امڪاني حل ھيٺ ڏنل CSS آھي:

@media print {
  .container {
    width: auto;
  }
}

Android اسٽاڪ برائوزر

دٻي مان ٻاهر، Android 4.1 (۽ اڃا به ڪجهه نوان رليز ظاهري طور تي) برائوزر ايپ سان گڏ چونڊ جي ڊفالٽ ويب برائوزر جي طور تي (جيئن ته ڪروم جي مخالفت). بدقسمتي سان، برائوزر ايپ ۾ عام طور تي CSS سان تمام گهڻا ڪيڙا ۽ تضاد آهن.

مينيو چونڊيو

عناصر تي <select>، Android اسٽاڪ برائوزر پاسي واري ڪنٽرول کي ڊسپلي نه ڪندو جيڪڏهن ڪو border-radius۽ / يا borderلاڳو ڪيو ويو آهي. ( تفصيلن لاءِ هي StackOverflow سوال ڏسو.) هيٺ ڏنل ڪوڊ جو ٽڪڙو استعمال ڪريو نااهل CSS کي هٽائڻ لاءِ ۽ ان کي <select>ائنڊرائيڊ اسٽاڪ برائوزر تي اڻ اسٽائل ٿيل عنصر طور پيش ڪريو. صارف ايجنٽ سنفنگ ڪروم، سفاري، ۽ موزيلا برائوزرن سان مداخلت کان پاسو ڪري ٿو.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

ھڪڙو مثال ڏسڻ چاھيو ٿا؟ هي JS بن ڊيمو چيڪ ڪريو.

تصديق ڪندڙ

پراڻن ۽ بگي برائوزرن کي بهترين ممڪن تجربو مهيا ڪرڻ لاءِ، بوٽ اسٽريپ ڪيترن ئي هنڌن تي سي ايس ايس برائوزر هيڪس استعمال ڪري ٿو خاص سي ايس ايس کي خاص برائوزر ورزن کي نشانو بڻائڻ لاءِ ته جيئن برائوزرن ۾ بگ جي چوڌاري ڪم ڪري سگهجي. اهي هيڪس سمجھڻ سان CSS جي تصديق ڪندڙن کي شڪايت ڪن ٿا ته اهي غلط آهن. ڪجھه جڳهن ۾، اسان پڻ استعمال ڪريون ٿا bleeding-edge CSS خاصيتون جيڪي اڃا تائين مڪمل طور تي معياري نه آهن، پر اهي خالص طور تي ترقي پسند وڌائڻ لاء استعمال ڪيا ويا آهن.

اهي تصديق واري ڊيڄاريندڙ عملي طور تي ڪا به اهميت نه رکندا آهن ڇو ته اسان جي CSS جو غير هيڪي حصو مڪمل طور تي تصديق ڪري ٿو ۽ هيڪي حصا غير هيڪي حصي جي مناسب ڪم ۾ مداخلت نٿا ڪن، ان ڪري ڇو اسان ڄاڻي واڻي انهن خاص وارننگن کي نظرانداز ڪريون ٿا.

اسان جي HTML دستاويزن ۾ پڻ ڪجھ معمولي ۽ غير ضروري HTML تصديق جي ڊيڄاريندڙن جي ڪري آھي اسان جي ھڪڙي خاص فائر فاڪس بگ لاءِ ھڪڙو حل شامل ڪرڻ جي ڪري .