شروع ٿيڻ
بوٽ اسٽريپ جو هڪ جائزو، ڪيئن ڊائون لوڊ ۽ استعمال ڪجي، بنيادي ٽيمپليٽس ۽ مثال، ۽ وڌيڪ.
بوٽ اسٽريپ جو هڪ جائزو، ڪيئن ڊائون لوڊ ۽ استعمال ڪجي، بنيادي ٽيمپليٽس ۽ مثال، ۽ وڌيڪ.
بوٽ اسٽريپ (في الحال v3.3.7) کي تڪڙو شروع ڪرڻ لاءِ ڪجھ آسان طريقا آھن، ھر ھڪ کي مختلف مهارت جي سطح ۽ استعمال جي صورت ۾ اپيل آھي. پڙهو ته ڏسو ته ڇا توهان جي خاص ضرورتن کي پورو ڪري ٿو.
سي ايس ايس، جاوا اسڪرپٽ، ۽ فونٽس کي مرتب ۽ گھٽ ڪيو ويو. ڪابه دستاويز يا اصل ماخذ فائلون شامل نه آهن.
ماخذ گهٽ، جاوا اسڪرپٽ، ۽ فونٽ فائلون، اسان جي دستاويزن سان گڏ. گھٽ مرتب ڪندڙ ۽ ڪجھ سيٽ اپ جي ضرورت آھي.
ريل، ڪمپاس، يا صرف ساس منصوبن ۾ آسان شموليت لاءِ بوٽ اسٽريپ گھٽ کان ساس تائين پورٽ ڪيو ويو .
jsDelivr تي ماڻهو مهربانيءَ سان بوٽ اسٽريپ جي سي ايس ايس ۽ جاوا اسڪرپٽ لاءِ CDN مدد فراهم ڪن ٿا. بس ھي استعمال ڪريو Bootstrap CDN لنڪ.
توهان Bower استعمال ڪندي Bootstrap's Less، CSS، JavaScript ۽ فونٽس پڻ انسٽال ۽ منظم ڪري سگهو ٿا :
توھان npm استعمال ڪندي بوٽ اسٽراپ پڻ انسٽال ڪري سگھو ٿا :
require('bootstrap')
بوٽ اسٽريپ جي سڀني jQuery پلگ ان کي jQuery اعتراض تي لوڊ ڪندي. bootstrap
ماڊل پاڻ ڪجھ به برآمد نٿو ڪري . توھان دستي طور تي بوٽ اسٽريپ جي jQuery پلگ ان کي انفرادي طور تي لوڊ ڪري سگھو ٿا /js/*.js
فائلن کي لوڊ ڪندي پيڪيج جي مٿين سطح جي ڊاريڪٽري ۾.
Bootstrap جي package.json
ھيٺين ڪنجين ھيٺ ڪجھ اضافي ميٽا ڊيٽا تي مشتمل آھي:
less
- بوٽ اسٽريپ جي مکيه ڏانهن رستو- بوٽ اسٽريپ جي مکيه گھٽ ماخذ فائلstyle
- بوٽ اسٽريپ جي غير منجھيل سي ايس ايس جو رستو جيڪو ڊفالٽ سيٽنگون استعمال ڪندي اڳ ۾ ٺھيل آھي (ڪابه حسب ضرورت نه آھي)توهان ڪمپوزر استعمال ڪندي بوٽ اسٽريپ جي گهٽ، سي ايس ايس، جاوا اسڪرپٽ ۽ فونٽس کي انسٽال ۽ منظم ڪري سگهو ٿا :
Bootstrap استعمال ڪري ٿو Autoprefixer CSS وينڊر جي اڳڪٿين سان ڊيل ڪرڻ لاءِ . جيڪڏهن توهان Bootstrap کي ان جي Less/Sass ماخذ کان مرتب ڪري رهيا آهيو ۽ اسان جي Gruntfile استعمال نه ڪري رهيا آهيو، توهان کي پنهنجي تعمير جي عمل ۾ Autoprefixer کي ضم ڪرڻ جي ضرورت پوندي. جيڪڏهن توهان اڳ ۾ ٺهيل بوٽ اسٽريپ استعمال ڪري رهيا آهيو يا اسان جي گرنٽ فائل استعمال ڪري رهيا آهيو، توهان کي ان بابت پريشان ٿيڻ جي ضرورت ناهي ڇو ته Autoprefixer اڳ ۾ ئي اسان جي گرنٽ فائل ۾ ضم ٿيل آهي.
بوٽ اسٽريپ ٻن شڪلن ۾ ڊائون لوڊ ڪري سگھجي ٿو، جنھن ۾ توھان ھيٺ ڏنل ڊاريڪٽريون ۽ فائلون ڳوليندا، منطقي طور تي عام وسيلن کي گروپ ڪرڻ ۽ مرتب ڪيل ۽ گھٽ ۾ گھٽ متغيرات مهيا ڪرڻ.
مهرباني ڪري نوٽ ڪريو ته سڀني جاوا اسڪرپٽ پلگ ان کي شامل ڪرڻ جي ضرورت آهي jQuery ، جيئن ڏيکاريل آهي اسٽارٽر ٽيمپليٽ . اسانbower.json
سان صلاح ڪريو ته ڏسو jQuery جا ڪهڙا نسخا سپورٽ آهن.
هڪ دفعو ڊائون لوڊ ٿيڻ بعد، ڪمپريس ٿيل فولڊر کي ان زپ ڪريو (مرتب ٿيل) بوٽ اسٽريپ جي ساخت کي ڏسڻ لاءِ. توھان ڪجھھ ھن وانگر ڏسندا:
هي بوٽ اسٽريپ جو سڀ کان بنيادي روپ آهي: تقريبن ڪنهن به ويب پروجيڪٽ ۾ تڪڙي ڊراپ-ان استعمال لاءِ اڳ ۾ ٺهيل فائلون. اسان مرتب ڪيل CSS ۽ JS ( ) مهيا ڪندا آهيون bootstrap.*
، گڏوگڏ مرتب ڪيل ۽ گھٽ ڪيل CSS ۽ JS ( bootstrap.min.*
). سي ايس ايس ماخذ نقشا (bootstrap.*.map
) خاص برائوزرن جي ڊولپر اوزارن سان استعمال لاءِ موجود آھن. Glyphicons مان فانٽ شامل آهن، جيئن اختياري بوٽ اسٽريپ موضوع آهي.
بوٽ اسٽريپ سورس ڪوڊ ڊائون لوڊ ۾ اڳ ۾ ٺهيل سي ايس ايس، جاوا اسڪرپٽ، ۽ فونٽ اثاثا، ماخذ گهٽ، جاوا اسڪرپٽ، ۽ دستاويزن سان گڏ شامل آهن. خاص طور تي، ان ۾ ھيٺيون ۽ وڌيڪ شامل آھن:
اسان جي CSS، JS، ۽ آئڪن فونٽس لاءِ less/
, js/
, ۽ سورس ڪوڊ آهن (ترتيب سان). فولڊر ۾ مٿي ڏنل ڊائون لوڊ سيڪشن ۾ ڏنل هر شي شامل آهي fonts/
. dist/
فولڊر ۾ اسان جي دستاويزن جو docs/
سورس ڪوڊ، ۽ examples/
بوٽ اسٽريپ جي استعمال جو شامل آھي. ان کان سواء، ڪنهن ٻئي شامل فائل پيڪيجز، لائسنس جي معلومات، ۽ ترقي لاء مدد فراهم ڪري ٿي.
بوٽ اسٽراپ استعمال ڪري ٿو گرنٽ ان جي تعميراتي نظام لاءِ، فريم ورڪ سان ڪم ڪرڻ لاءِ آسان طريقن سان. اهو ڪيئن اسان پنهنجو ڪوڊ گڏ ڪريون ٿا، ٽيسٽ هلائيون، ۽ وڌيڪ.
Grunt انسٽال ڪرڻ لاءِ، توهان کي پهريان ڊائون لوڊ ۽ انسٽال ڪرڻ گهرجي node.js (جنهن ۾ شامل آهي npm). npm نوڊ پيڪيج ٿيل ماڊلز لاءِ بيٺل آهي ۽ node.js ذريعي ترقي جي انحصار کي منظم ڪرڻ جو هڪ طريقو آهي.
پوء، حڪم لائن مان:grunt-cli
سان عالمي سطح تي انسٽال ڪريو npm install -g grunt-cli
./bootstrap/
روٽ ڊاريڪٽري ڏانھن وڃو ، پوء ھلايو npm install
. npm package.json
فائل کي ڏسندو ۽ خودڪار طور تي اتي درج ٿيل ضروري مقامي انحصار کي انسٽال ڪندو.مڪمل ٿيڻ تي، توهان ڪمانڊ لائن مان مهيا ڪيل مختلف گرنٽ حڪمن کي هلائڻ جي قابل هوندا.
grunt dist
(صرف سي ايس ايس ۽ جاوا اسڪرپٽ گڏ ڪريو)ڊاريڪٽري /dist/
کي مرتب ڪيل ۽ گھٽ ۾ گھٽ CSS ۽ JavaScript فائلن سان گڏ ڪري ٿو. بوٽ اسٽراپ صارف جي طور تي، اهو عام طور تي حڪم آهي جيڪو توهان چاهيو ٿا.
grunt watch
(ڏس)گھٽ ماخذ فائلن کي ڏسي ٿو ۽ پاڻمرادو انھن کي سي ايس ايس ۾ ٻيهر ٺاھي ٿو جڏھن توھان ڪا تبديلي محفوظ ڪريو.
grunt test
(ٽيسٽ هلائڻ)JSHint هلائي ٿو ۽ QUnit ٽيسٽ کي بغير بغير PhantomJS ۾ هلائي ٿو .
grunt docs
(ڊاڪس اثاثن جي تعمير ۽ جانچ ڪريو)CSS، JavaScript، ۽ ٻيون اثاثا ٺاهي ۽ ٽيسٽ ڪري ٿو جيڪي استعمال ڪيا ويندا آهن جڏهن دستاويزن کي مقامي طور تي هلائڻ دوران bundle exec jekyll serve
.
grunt
(بلڪل هر شي ٺاهيو ۽ ٽيسٽ هلائڻ)CSS ۽ JavaScript کي گڏ ڪري ٿو ۽ گھٽائي ٿو، دستاويزن جي ويب سائيٽ ٺاهي ٿو، HTML5 جي تصديق ڪندڙ کي دستاويزن جي خلاف هلائي ٿو، ڪسٽمائيزر اثاثن کي ٻيهر ٺاهي ٿو، ۽ وڌيڪ. Jekyll جي ضرورت آهي . عام طور تي صرف ضروري آهي جيڪڏهن توهان بوٽ اسٽراپ تي هيڪنگ ڪري رهيا آهيو.
ڇا توهان کي انحصار کي نصب ڪرڻ يا Grunt حڪمن کي هلائڻ ۾ مشڪلاتن سان منهن ڏيڻ گهرجي، پهرين /node_modules/
ڊاريڪٽري کي حذف ڪريو npm پاران ٺاهيل. پوء، وري هلايو npm install
.
ھن بنيادي HTML ٽيمپليٽ سان شروع ڪريو، يا انھن مثالن کي تبديل ڪريو . اسان کي اميد آهي ته توهان اسان جي ٽيمپليٽس ۽ مثالن کي ترتيب ڏيو، انهن کي توهان جي ضرورتن مطابق ترتيب ڏيو.
گھٽ ۾ گھٽ بوٽ اسٽريپ دستاويز سان ڪم ڪرڻ شروع ڪرڻ لاءِ ھيٺ ڏنل HTML کي نقل ڪريو.
بوٽ اسٽراپ جي ڪيترن ئي حصن سان مٿي ڏنل بنيادي ٽيمپليٽ تي ٺاهيو. اسان توهان کي حوصلا افزائي ڪريون ٿا ته توهان جي انفرادي پروجيڪٽ جي ضرورتن کي پورو ڪرڻ لاءِ بوٽ اسٽريپ کي ترتيب ۽ ترتيب ڏيو.
هيٺ ڏنل هر مثال لاءِ سورس ڪوڊ حاصل ڪريو بوٽ اسٽريپ ريپوزٽري ڊائون لوڊ ڪندي . docs/examples/
ڊاريڪٽري ۾ مثال ڳولي سگهجن ٿا .
Bootlint سرڪاري Bootstrap HTML linter اوزار آهي. اهو خودڪار طريقي سان چيڪ ڪري ٿو ڪيترن ئي عام HTML غلطين جي ويب پيجز ۾ جيڪي بوٽ اسٽريپ استعمال ڪري رهيا آهن بلڪل "وينلا" طريقي سان. Vanilla Bootstrap جي اجزاء/ويجيٽس کي DOM جي انهن حصن جي ضرورت هوندي آهي ته جيئن ڪجهه ساختن جي مطابق هجي. Bootlint چيڪ ڪري ٿو ته بوٽ اسٽريپ اجزاء جا مثال صحيح ترتيب ڏنل HTML آهن. پنھنجي بوٽ اسٽريپ ويب ڊولپمينٽ ٽول چين ۾ Bootlint شامل ڪرڻ تي غور ڪريو ته جيئن ڪا به عام غلطي توھان جي پروجيڪٽ جي ترقي کي سست نه ڪري.
Bootstrap جي ترقي تي تازه ڪاري رهو ۽ انهن مددگار وسيلن سان ڪميونٽي تائين پهچ.
irc.freenode.net
۾ سرور ۾ IRC استعمال ڪندي ساٿي بوٽ اسٽريپرز سان چيٽ ڪريو ڪريو .twitter-bootstrap-3
تي پڇو .bootstrap
ذريعي ورهائڻ دوران بوٽ اسٽريپ جي ڪارڪردگي ۾ ترميم يا شامل ڪن ذريعي ورهائي رهيا آهن يا وڌ ۾ وڌ دريافت ڪرڻ لاءِ ساڳي ترسيل ميڪانيزم.توهان به فالو ڪري سگهو ٿا @getbootstrap Twitter تي جديد گپ شپ ۽ بهترين ميوزڪ ويڊيوز لاءِ.
بوٽ اسٽريپ خودڪار طريقي سان توهان جي صفحن کي مختلف اسڪرين جي سائزن لاءِ ترتيب ڏئي ٿو. ھتي آھي ھن خصوصيت کي ڪيئن غير فعال ڪجي تنھنڪري توھان جو صفحو ھن غير جوابي مثال وانگر ڪم ڪري .
<meta>
۾ ذڪر ڪيل viewport کي ختم ڪريوwidth
تي .container
هر گرڊ ٽائر لاءِ ھڪڙي ويڪر سان، مثال طور width: 970px !important;
پڪ ڪريو ته اھو اچي ٿو ڊفالٽ بوٽ اسٽريپ CSS کان پوءِ. توھان اختياري طور کان پاسو ڪري سگھو ٿا !important
ميڊيا جي سوالن سان يا ڪجھ سليڪٽر-فو سان..col-xs-*
، وچولي/وڏين جي اضافي ۾، يا ان جي جاءِ تي ڪلاس استعمال ڪريو. پريشان نه ڪريو، اضافي-ننڍو ڊوائيس گرڊ سڀني قراردادن تي اسڪيل.توهان کي اڃا به IE8 لاءِ Respond.js جي ضرورت پوندي (جيئن ته اسان جا ميڊيا سوال اڃا تائين موجود آهن ۽ پروسيس ٿيڻ جي ضرورت آهي). هي بوٽ اسٽراپ جي "موبائيل سائيٽ" جي حصن کي غير فعال ڪري ٿو.
اسان انهن قدمن کي هڪ مثال تي لاڳو ڪيو آهي. پڙهو ان جو سورس ڪوڊ ڏسڻ لاءِ مخصوص تبديليون لاڳو ٿيل آهن.
جي هڪ پراڻي نسخو کان لڏپلاڻ ڪري رهيا آهيو Bootstrap v3.x ? اسان جي لڏپلاڻ ھدايت چيڪ ڪريو .
Bootstrap جديد ڊيسڪ ٽاپ ۽ موبائل برائوزرن ۾ بھترين ڪم ڪرڻ لاءِ ٺاھيو ويو آھي، مطلب ته پراڻا برائوزر شايد مختلف انداز سان ڏيکاري سگھن ٿا، جيتوڻيڪ مڪمل طور تي فعال، خاص حصن جي رينڊرنگ.
خاص طور تي، اسان هيٺين برائوزرن ۽ پليٽ فارمن جي جديد ورزن جي حمايت ڪندا آهيون.
متبادل برائوزر جيڪي WebKit، Blink، يا Gecko جو جديد نسخو استعمال ڪن ٿا، ڇا سڌو يا پليٽ فارم جي ويب ڏيک API ذريعي، واضح طور تي سپورٽ نه آهن. جڏهن ته، بوٽ اسٽريپ (اڪثر ڪيسن ۾) انهن برائوزرن ۾ صحيح نموني ڏيکاري ۽ ڪم ڪرڻ گهرجي. وڌيڪ مخصوص سپورٽ معلومات هيٺ ڏنل آهي.
عام طور تي ڳالهائڻ، بوٽ اسٽراپ هر وڏي پليٽ فارم جي ڊفالٽ برائوزرن جي جديد نسخن کي سپورٽ ڪري ٿو. نوٽ ڪريو ته پراکسي برائوزر (جهڙوڪ اوپيرا ميني، اوپيرا موبائل جو ٽربو موڊ، يو سي برائوزر ميني، ايمازون سلڪ) سپورٽ نه ڪندا آھن.
ڪروم | فائر فاڪس | سفاري | |
---|---|---|---|
Android | حمايت ڪئي | حمايت ڪئي | N/A |
iOS | حمايت ڪئي | حمايت ڪئي | حمايت ڪئي |
اهڙي طرح، اڪثر ڊيسڪ ٽاپ برائوزرن جا جديد ورجن سپورٽ ڪيا ويا آهن.
ڪروم | فائر فاڪس | انٽرنيٽ ايڪسپلورر | اوپيرا | سفاري | |
---|---|---|---|---|---|
ميڪ | حمايت ڪئي | حمايت ڪئي | N/A | حمايت ڪئي | حمايت ڪئي |
ونڊوز | حمايت ڪئي | حمايت ڪئي | حمايت ڪئي | حمايت ڪئي | سپورٽ ناهي |
ونڊوز تي، اسان سپورٽ ڪريون ٿا Internet Explorer 8-11 .
فائر فاکس لاءِ، جديد عام مستحڪم رليز کان علاوه، اسان جديد توسيع ٿيل سپورٽ رليز (ESR) کي پڻ سپورٽ ڪريون ٿا. ورجن کي پڻ سپورٽ ڪريون ٿا.
غير رسمي طور تي، بوٽ اسٽريپ کي ڏسڻ گهرجي ۽ چڱي طرح عمل ڪرڻ گهرجي Chromium ۽ Chrome لاءِ لينڪس، Firefox for Linux، ۽ Internet Explorer 7، انهي سان گڏ Microsoft Edge، جيتوڻيڪ اهي سرڪاري طور تي سهڪار نه ڪيا ويا آهن.
ڪجھ برائوزر جي بگن جي لسٽ لاءِ جن کي بوٽ اسٽريپ سان مقابلو ڪرڻو پوندو، ڏسو اسان جي وال آف برائوزر بگز .
انٽرنيٽ ايڪسپلورر 8 ۽ 9 پڻ سپورٽ ٿيل آهن، جڏهن ته، مهرباني ڪري آگاهه رهو ته ڪجهه CSS3 پراپرٽيز ۽ HTML5 عناصر انهن برائوزرن سان مڪمل طور تي سهڪار نه ڪندا آهن. ان کان علاوه، انٽرنيٽ ايڪسپلورر 8 کي ميڊيا سوالن جي مدد کي فعال ڪرڻ لاءِ Respond.js جي استعمال جي ضرورت آهي.
خاصيت | انٽرنيٽ ايڪسپلورر 8 | انٽرنيٽ ايڪسپلورر 9 |
---|---|---|
border-radius |
سپورٽ ناهي | حمايت ڪئي |
box-shadow |
سپورٽ ناهي | حمايت ڪئي |
transform |
سپورٽ ناهي | حمايت ٿيل، -ms اڳڀرائي سان |
transition |
سپورٽ ناهي | |
placeholder |
سپورٽ ناهي |
دورو ڪريو ڇا مان استعمال ڪري سگھان ٿو... CSS3 ۽ HTML5 خاصيتن جي برائوزر سپورٽ تي تفصيل لاءِ.
انٽرنيٽ ايڪسپلورر 8 لاءِ پنهنجي ڊولپمينٽ ۽ پيداواري ماحول ۾ Respond.js استعمال ڪرڻ وقت هيٺين خبردارين کان بچو.
استعمال ڪندي Respond.js سان CSS جي ميزباني هڪ مختلف (ذيلي) ڊومين تي (مثال طور، هڪ CDN تي) ڪجهه اضافي سيٽ اپ جي ضرورت آهي. تفصيل لاءِ Respond.js دستاويز ڏسو.
file://
برائوزر سيڪيورٽي ضابطن جي ڪري، Respond.js file://
پروٽوڪول ذريعي ڏٺل صفحن سان ڪم نٿو ڪري (جهڙوڪ مقامي HTML فائل کولڻ وقت). IE8 ۾ جوابي خصوصيتن کي جانچڻ لاءِ، پنهنجا صفحا HTTP(S) تي ڏسو. تفصيل لاءِ Respond.js دستاويز ڏسو.
@import
Respond.js CSS سان ڪم نٿو ڪري جنهن جي ذريعي حوالو ڏنو ويو آهي @import
. خاص طور تي، ڪجهه ڊروپل ترتيبون استعمال ڪرڻ لاء سڃاتل آهن @import
. تفصيل لاءِ Respond.js دستاويز ڏسو.
IE8 مڪمل طور تي سپورٽ نٿو ڪري box-sizing: border-box;
جڏهن min-width
, max-width
, min-height
, or max-height
. max-width
انهي سبب لاء، v3.0.1 جي طور تي ، اسان هاڻي استعمال نه ڪندا آهيون .container
s.
IE8 سان گڏ ڪجهه مسئلا آهن @font-face
جڏهن سان گڏ :before
. بوٽ اسٽريپ ان ميلاپ کي استعمال ڪري ٿو ان جي گليفيڪن سان. جيڪڏهن ڪو صفحو ڪيش ٿيل آهي، ۽ ونڊو مٿان ماؤس کان سواءِ لوڊ ڪيو ويو آهي (يعني ريفريش بٽڻ کي دٻايو يا iframe ۾ ڪا شيءِ لوڊ ڪريو) ته پوءِ صفحو فونٽ لوڊ ٿيڻ کان اڳ رينجر ٿي ويندو. صفحي (جسم) تي هور ڪرڻ سان ڪجھ آئڪن ڏيکاريا ويندا ۽ باقي آئڪن تي ھور ڪرڻ سان اھي ڏيکاريندا. تفصيل لاءِ ڏسو شمارو نمبر 13863 .
بوٽ اسٽراپ پراڻي انٽرنيٽ ايڪسپلورر مطابقت واري طريقن ۾ سپورٽ نه آهي. پڪ ڪرڻ لاءِ ته توهان IE لاءِ جديد رينڊرنگ موڊ استعمال ڪري رهيا آهيو، <meta>
پنهنجي صفحن ۾ مناسب ٽيگ شامل ڪرڻ تي غور ڪريو:
ڊيبگنگ ٽولز کي کولڻ سان دستاويز جي موڊ جي تصديق ڪريو: F12"دستاويز موڊ" کي دٻايو ۽ چيڪ ڪريو.
هي ٽيگ بوٽ اسٽريپ جي سڀني دستاويزن ۽ مثالن ۾ شامل ڪيو ويو آهي انهي کي يقيني بڻائڻ لاءِ ته انٽرنيٽ ايڪسپلورر جي هر سپورٽ ٿيل ورزن ۾ بهترين رينڊرنگ ممڪن ٿي سگهي.
وڌيڪ معلومات لاءِ هي StackOverflow سوال ڏسو .
انٽرنيٽ ايڪسپلورر 10 ڊيوائس جي چوٽي کي viewport width کان فرق نٿو ڪري ، ۽ اھڙي طرح Bootstrap جي CSS ۾ ميڊيا جي سوالن کي صحيح طور تي لاڳو نٿو ڪري. عام طور تي توهان صرف هن کي درست ڪرڻ لاءِ CSS جو هڪ تڪڙو ٽڪرو شامل ڪندا:
بهرحال، هي ونڊوز فون 8 ورزن تي هلندڙ ڊوائيسز لاءِ ڪم نٿو ڪري، جيڪي Update 3 (اڪا GDR3) کان پراڻن آهن ، ڇاڪاڻ ته اهو اهڙن ڊوائيسز کي تنگ "فون" ڏسڻ جي بدران اڪثر ڊيسڪ ٽاپ ڏيک ڏيکاري ٿو. ھن کي حل ڪرڻ لاءِ، توھان کي ھيٺ ڏنل CSS ۽ JavaScript شامل ڪرڻ جي ضرورت پوندي بگ جي چوڌاري ڪم ڪرڻ لاءِ .
وڌيڪ معلومات ۽ استعمال جي رهنمائي لاءِ، پڙهو Windows Phone 8 ۽ Device-Width .
هڪ سر اپ جي طور تي، اسان هن کي شامل ڪيو بوٽ اسٽراپ جي سڀني دستاويزن ۽ مثالن ۾ مثال طور.
OS X لاءِ v7.1 کان اڳ واري سفاري جي ورجن جي رينڊرنگ انجڻ ۽ iOS v8.0 لاءِ سفاري کي اسان جي .col-*-1
گرڊ ڪلاسن ۾ استعمال ٿيندڙ ڏهاڪن جي جڳهن جي تعداد سان ڪجهه پريشاني هئي. تنهن ڪري جيڪڏهن توهان وٽ 12 انفرادي گرڊ ڪالمن هئا، توهان کي خبر پوندي ته اهي ڪالمن جي ٻين قطارن جي مقابلي ۾ ننڍا آهن. سفاري/iOS کي اپڊيٽ ڪرڻ کان علاوه، توهان وٽ ڪم ڪار جي لاءِ ڪجهه آپشن آهن:
.pull-right
سخت-ساڄي ترتيب حاصل ڪرڻ لاءِoverflow: hidden
عنصر تي سپورٽ <body>
iOS ۽ Android ۾ ڪافي محدود آهي. انهي جي پڇاڙيء ۾، جڏهن توهان انهن مان ڪنهن به ڊوائيس جي برائوزرن ۾ ماڊل جي مٿين يا هيٺان ماضي کي اسڪرال ڪندا، <body>
مواد اسڪرال ڪرڻ شروع ڪندو. ڏسو ڪروم بگ #175502 (ڪروم v40 ۾ مقرر ٿيل) ۽ ويب ڪيٽ بگ #153852 .
iOS 9.3 جي مطابق، جڏهن هڪ موڊل کليل آهي، جيڪڏهن اسڪرول جي اشاري جو شروعاتي ٽچ متن جي حد جي اندر <input>
هجي يا a <textarea>
، <body>
ماڊل جي هيٺان مواد کي ماڊل جي بدران اسڪرول ڪيو ويندو. ڏسو WebKit بگ #153856 .
اهو پڻ، نوٽ ڪريو ته جيڪڏهن توهان هڪ مقرر ٿيل نيوبار استعمال ڪري رهيا آهيو يا هڪ ماڊل اندر ان پٽ استعمال ڪري رهيا آهيو، iOS وٽ هڪ رينڊرنگ بگ آهي جيڪو مقرر ٿيل عناصر جي پوزيشن کي اپڊيٽ نه ڪندو آهي جڏهن مجازي ڪيبورڊ شروع ٿئي ٿي. ان لاءِ ڪجھ ڪم ڪارون شامل آھن توھان جي عناصر کي تبديل ڪرڻ position: absolute
يا ھڪڙي ٽائمر کي فوڪس ڪرڻ لاءِ دستي طور تي پوزيشن کي درست ڪرڻ جي ڪوشش ڪرڻ لاءِ. هي بوٽ اسٽريپ طرفان هٿ نه ڪيو ويو آهي، تنهن ڪري اهو توهان تي منحصر آهي ته توهان جي ايپليڪيشن لاء ڪهڙو حل بهترين آهي.
.dropdown-backdrop
z-indexing جي پيچيدگي جي ڪري عنصر نيوي ۾ iOS تي استعمال نه ڪيو ويو آهي . اهڙيءَ طرح، نيوبارز ۾ ڊراپ ڊائونز کي بند ڪرڻ لاءِ، توهان کي لازمي طور تي ڊراپ ڊائون عنصر تي ڪلڪ ڪرڻ گهرجي (يا ڪو ٻيو عنصر جيڪو iOS ۾ ڪلڪ واري واقعي کي فائر ڪندو ).
صفحو زومنگ ناگزير طور تي پيش ڪري ٿو رينڊرنگ نمونن کي ڪجھ حصن ۾، ٻئي بوٽ اسٽراپ ۽ باقي ويب ۾. مسئلي تي مدار رکندي، اسان ان کي درست ڪرڻ جي قابل ٿي سگھون ٿا (پهريون ڳولھيو ۽ پوء جيڪڏھن ضرورت ھجي ته مسئلو کوليو). تنهن هوندي، اسان انهن کي نظر انداز ڪندا آهيون ڇو ته اهي اڪثر ڪري هيڪي ڪم ڪارائونڊ کان سواء ٻيو ڪو سڌو حل ناهي.
:hover
/ :focus
موبائل تيجيتوڻيڪ حقيقي هورنگ اڪثر ٽچ اسڪرين تي ممڪن نه آهي، اڪثر موبائل برائوزر هورنگ سپورٽ کي نقل ڪندا آهن ۽ ٺاهيندا آهن:hover
”چپچپا“ بڻجن ٿا. ٻين لفظن ۾، :hover
اسٽائلس هڪ عنصر کي ٽيپ ڪرڻ کان پوء لاڳو ٿيڻ شروع ڪن ٿا ۽ صرف لاڳو ٿيڻ کان پوء بند ڪريو جڏهن صارف ڪنهن ٻئي عنصر کي ٽيپ ڪري ٿو. هي بوٽ اسٽراپ جي :hover
رياستن کي اهڙين برائوزرن تي ناپسنديده طور تي "پڪڙيل" ٿيڻ جو سبب بڻجي سگهي ٿو. ڪجھ موبائيل برائوزر پڻ :focus
ساڳي طرح چپچپا ٺاهيندا آھن. ھنن مسئلن لاءِ في الحال ڪوبه سادو حل نه آھي، سواءِ ھنن طرزن کي مڪمل طور ختم ڪرڻ کانسواءِ.
جيتوڻيڪ ڪجھ جديد برائوزرن ۾، ڇپائي نرالي ٿي سگھي ٿي.
خاص طور تي، Chrome v32 جي طور تي ۽ مارجن سيٽنگن جي پرواهه ڪرڻ کان سواء، Chrome هڪ ويب پيج کي پرنٽ ڪرڻ دوران ميڊيا جي سوالن کي حل ڪرڻ وقت فزيڪل پيپر جي سائيز کان خاص طور تي تنگ ڏسڻ واري ويڪر کي استعمال ڪري ٿو. اهو نتيجو ٿي سگهي ٿو بوٽ اسٽراپ جي اضافي-ننڍي گرڊ کي غير متوقع طور تي چالو ڪيو وڃي جڏهن ڇپائي. ڏسو مسئلو #12078 ۽ ڪروم بگ #273306 ڪجھ تفصيل لاءِ. تجويز ڪيل حل:
@screen-*
ڏيو ته جيئن توھان جو پرنٽر پيپر ننڍي کان وڏو سمجھيو وڃي.انهي سان گڏ، سفاري v8.0 جي طور تي، مقرر ٿيل چوٽي .container
s سبب ڪري سگھي ٿو سفاري کي پرنٽ ڪرڻ دوران غير معمولي طور تي ننڍڙي فونٽ سائيز استعمال ڪرڻ لاء. وڌيڪ تفصيل لاءِ ڏسو #14868 ۽ WebKit بگ #138192 . ھن لاء ھڪڙو امڪاني حل ھيٺ ڏنل CSS شامل ڪري رھيو آھي:
دٻي مان ٻاهر، Android 4.1 (۽ اڃا به ڪجهه نوان رليز ظاهري طور تي) برائوزر ايپ سان گڏ چونڊيو ڊفالٽ ويب برائوزر جي طور تي (جيئن ته ڪروم جي مخالفت). بدقسمتي سان، برائوزر ايپ ۾ عام طور تي CSS سان تمام گهڻا ڪيڙا ۽ تضاد آهن.
عناصر تي <select>
، Android اسٽاڪ برائوزر پاسي واري ڪنٽرول کي ڊسپلي نه ڪندو جيڪڏهن ڪو border-radius
۽ / يا border
لاڳو ڪيو ويو آهي. ( تفصيلن لاءِ ھي StackOverflow سوال ڏسو.) ھيٺ ڏنل ڪوڊ جو ٽڪڙو استعمال ڪريو ناانصافي ڪندڙ CSS کي هٽائڻ لاءِ ۽ ان کي <select>
Android اسٽاڪ برائوزر تي غير اسٽائل ٿيل عنصر طور پيش ڪريو. صارف ايجنٽ سنفنگ ڪروم، سفاري، ۽ موزيلا برائوزرن سان مداخلت کان پاسو ڪري ٿو.
ھڪڙو مثال ڏسڻ چاھيو ٿا؟ هي JS بن ڊيمو چيڪ ڪريو.
پراڻي ۽ بگي برائوزرن کي بھترين ممڪن تجربو مهيا ڪرڻ لاءِ، بوٽ اسٽريپ استعمال ڪري ٿو CSS برائوزر هيڪس استعمال ڪري ٿو خاص سي ايس ايس کي خاص برائوزر ورزن کي نشانو بڻائڻ لاءِ ته جيئن برائوزرن ۾ بگ جي چوڌاري ڪم ڪري سگهجي. اهي هيڪس سمجھڻ سان CSS جي تصديق ڪندڙن کي شڪايت ڪن ٿا ته اهي غلط آهن. ڪجھه جڳهن ۾، اسان پڻ استعمال ڪريون ٿا bleeding-edge CSS خاصيتون جيڪي اڃا تائين مڪمل طور تي معياري نه آهن، پر اهي خالص طور تي ترقي پسند وڌائڻ لاء استعمال ڪيا ويا آهن.
اهي تصديق واري ڊيڄاريندڙ عملي طور تي ڪا به اهميت نه رکندا آهن ڇو ته اسان جي CSS جو غير هيڪي حصو مڪمل طور تي تصديق ڪري ٿو ۽ هيڪي حصا غير هيڪي واري حصي جي مناسب ڪم ۾ مداخلت نٿا ڪن، ان ڪري ڇو اسان ڄاڻي ٻجهي انهن خاص وارننگن کي نظرانداز ڪريون ٿا.
اسان جي HTML دستاويزن ۾ پڻ ڪجھ معمولي ۽ غير ضروري HTML تصديق جي ڊيڄاريندڙن جي ڪري اسان جي ھڪڙي خاص فائر فاڪس بگ لاءِ ھڪڙو حل شامل ڪيو ويو آھي .
جڏهن ته اسان سرڪاري طور تي ڪنهن به ٽئين پارٽي پلگ ان يا اضافو جي حمايت نٿا ڪريون، اسان توهان جي منصوبن ۾ امڪاني مسئلن کان بچڻ ۾ مدد لاءِ ڪجهه مفيد صلاحون پيش ڪندا آهيون.
ڪجھ ٽئين پارٽي سافٽ ويئر، بشمول گوگل ميپس ۽ گوگل ڪسٽم سرچ انجڻ، بوٽ اسٽريپ سان ٽڪراءُ جي ڪري * { box-sizing: border-box; }
، هڪ قاعدو جيڪو ان ڪري ٿو ته اهو padding
عنصر جي آخري ڪمپيوٽي ويڊٿ کي متاثر نٿو ڪري. CSS Tricks تي باڪس ماڊل ۽ سائيز جي باري ۾ وڌيڪ سکو .
حوالن تي مدار رکندي، توھان کي ضرورت مطابق ختم ڪري سگھو ٿا (آپشن 1) يا سڄي علائقن لاءِ باڪس جي سائز کي ري سيٽ ڪري سگھو ٿا (آپشن 2).
بوٽ اسٽريپ عام ويب معيارن تي عمل ڪري ٿو ۽- گھٽ ۾ گھٽ اضافي ڪوشش سان- استعمال ڪري سگھجن ٿيون سائيٽون ٺاهڻ لاءِ جيڪي AT استعمال ڪرڻ وارن تائين پهچن ٿيون. .
جيڪڏهن توهان جي نيويگيشن ڪيترن ئي لنڪس تي مشتمل آهي ۽ DOM ۾ مکيه مواد کان اڳ اچي ٿي Skip to main content
، نيويگيشن کان اڳ هڪ لنڪ شامل ڪريو (هڪ سادي وضاحت لاءِ، ڏسو هي A11Y پروجيڪٽ مضمون نيويگيشن لنڪس ڇڏڻ تي ). ڪلاس کي استعمال ڪرڻ .sr-only
سان اسڪپ لنڪ کي بصري طور تي لڪايو ويندو، ۽ .sr-only-focusable
ڪلاس يقيني بڻائيندو ته لنڪ هڪ ڀيرو مرڪوز ٿيڻ تي نظر اچي ٿي (ڏسندڙ ڪي بورڊ استعمال ڪندڙن لاءِ).
ڪروم ۾ ڊگھي عرصي کان موجود خامين/ بگز جي ڪري (ڏسو مسئلو 262171 ڪروم بگ ٽريڪر ۾ ) ۽ انٽرنيٽ ايڪسپلورر (ڏسو ھي آرٽيڪل ان-پيج لنڪس ۽ فوڪس آرڊر تي )، توھان کي پڪ ڪرڻي پوندي ته توھان جي اسڪپ لنڪ جو ٽارگيٽ شامل ڪرڻ سان گهٽ ۾ گهٽ پروگرام جي لحاظ کان ڌيان ڏيڻ جي قابل آهي tabindex="-1"
.
ان کان علاوه، توھان چاھيو ٿا واضح طور تي ھدف تي نظر ايندڙ فوڪس اشاري کي دٻائڻ (خاص طور تي جيئن ته ڪروم في الحال پڻ عنصرن تي فوڪس سيٽ ڪري ٿو.tabindex="-1"
جڏھن اھي ماؤس سان ڪلڪ ڪيا وڃن) سان #content:focus { outline: none; }
.
ياد رهي ته هي بگ به متاثر ڪندو ڪنهن ٻئي صفحي جي لنڪس جيڪي توهان جي سائيٽ استعمال ڪري رهيا هوندا، انهن کي ڪي بورڊ استعمال ڪندڙن لاءِ بيڪار بڻائي ڇڏيندو. توھان غور ڪري سگھو ٿا ھڪڙو ساڳيو اسٽاپ-گيپ فيڪس شامل ڪرڻ لاءِ ٻين سڀني نالي وارن اينڪرز / فريگمينٽ سڃاڻپ ڪندڙ جيڪي لنڪ ٽارگيٽ طور ڪم ڪن ٿا.
جڏهن nesting headings ( <h1>
- <h6>
)، توهان جي بنيادي دستاويز جي هيڊر هجڻ گهرجي هڪ <h1>
. ايندڙ عنوانن کي منطقي استعمال ڪرڻ گهرجي <h2>
-<h6>
جيئن ته اسڪرين پڙهندڙ توهان جي صفحن لاءِ مواد جي جدول ٺاهي سگهن.
وڌيڪ سکو HTML CodeSniffer ۽ Penn State جي AccessAbility تي .
في الحال، بوٽ اسٽريپ ۾ موجود ڪجهه ڊفالٽ رنگن جو مجموعو (جهڙوڪ مختلف اسٽائل ٿيل بٽڻ ڪلاس، ڪجهه ڪوڊ نمايان رنگ جيڪي بنيادي ڪوڊ بلاڪ لاءِ استعمال ڪيا ويندا آهن ، .bg-primary
لاڳاپيل پس منظر مددگار طبقو، ۽ ڊفالٽ لنڪ رنگ جڏهن اڇي پس منظر تي استعمال ٿيندو آهي) گھٽ برعڪس تناسب آھي ( 4.5:1 جي تجويز ڪيل تناسب ھيٺ ). اهو مسئلو ٿي سگهي ٿو صارفين کي گهٽ بصارت سان يا جيڪي رنگ انڌا آهن. انهن ڊفالٽ رنگن کي تبديل ڪرڻ جي ضرورت ٿي سگھي ٿي انهن جي برعڪس ۽ جائزيت کي وڌائڻ لاءِ.
Bootstrap MIT لائسنس تحت جاري ڪيو ويو آهي ۽ ڪاپي رائيٽ 2016 Twitter آهي. ننڍي ٽڪرن تائين ابل، ان کي هيٺين شرطن سان بيان ڪري سگهجي ٿو.
وڌيڪ معلومات لاءِ مڪمل بوٽ اسٽريپ لائسنس پروجيڪٽ جي مخزن ۾ واقع آهي .
ڪميونٽي جي ميمبرن Bootstrap جي دستاويزن کي مختلف ٻولين ۾ ترجمو ڪيو آهي. ڪو به سرڪاري طور تي سهڪار نه ڪيو ويو آهي ۽ اهي شايد هميشه تازه ڪاري نه هجن.
اسان ترجمن کي منظم ڪرڻ يا ميزباني ڪرڻ ۾ مدد نه ڪندا آهيون، اسان صرف انهن سان ڳنڍيون ٿا.
نئون يا بهتر ترجمو ختم ڪيو؟ ان کي اسان جي لسٽ ۾ شامل ڪرڻ لاءِ ڇڪڻ جي درخواست کوليو.