شروع ہوا چاہتا ہے
بوٹسٹریپ کا ایک جائزہ، ڈاؤن لوڈ اور استعمال کرنے کا طریقہ، بنیادی ٹیمپلیٹس اور مثالیں، اور بہت کچھ۔
بوٹسٹریپ کا ایک جائزہ، ڈاؤن لوڈ اور استعمال کرنے کا طریقہ، بنیادی ٹیمپلیٹس اور مثالیں، اور بہت کچھ۔
بوٹسٹریپ (فی الحال v3.3.7) میں تیزی سے شروع کرنے کے چند آسان طریقے ہیں، ہر ایک مختلف مہارت کی سطح اور استعمال کے معاملے میں اپیل کرتا ہے۔ یہ دیکھنے کے لیے پڑھیں کہ آپ کی مخصوص ضروریات کے مطابق کیا ہے۔
سی ایس ایس، جاوا اسکرپٹ، اور فونٹس کو مرتب اور کم کیا گیا۔ کوئی دستاویزات یا اصل سورس فائلیں شامل نہیں ہیں۔
ماخذ کم، جاوا اسکرپٹ، اور فونٹ فائلیں، ہماری دستاویزات کے ساتھ۔ ایک کم کمپائلر اور کچھ سیٹ اپ کی ضرورت ہے۔
ریل، کمپاس، یا صرف ساس پروجیکٹس میں آسانی سے شامل کرنے کے لیے بوٹسٹریپ کو کم سے ساس تک پورٹ کیا گیا ہے۔
jsDelivr پر موجود لوگ بوٹسٹریپ کے CSS اور JavaScript کے لیے CDN تعاون فراہم کرتے ہیں۔ بس یہ بوٹسٹریپ CDN لنکس استعمال کریں۔
آپ Bower کا استعمال کرتے ہوئے Bootstrap's Less، CSS، JavaScript، اور فونٹس کو انسٹال اور ان کا نظم بھی کر سکتے ہیں ۔
آپ npm کا استعمال کرتے ہوئے بوٹسٹریپ بھی انسٹال کر سکتے ہیں :
require('bootstrap')
بوٹسٹریپ کے تمام jQuery پلگ انز کو jQuery آبجیکٹ پر لوڈ کر دے گا۔ ماڈیول خود کچھ bootstrap
بھی برآمد نہیں کرتا ہے۔ /js/*.js
آپ پیکیج کی ٹاپ لیول ڈائرکٹری کے نیچے فائلوں کو لوڈ کر کے بوٹسٹریپ کے jQuery پلگ ان کو دستی طور پر لوڈ کر سکتے ہیں ۔
Bootstrap's package.json
مندرجہ ذیل کلیدوں کے تحت کچھ اضافی میٹا ڈیٹا پر مشتمل ہے:
less
- بوٹسٹریپ کی مرکزی کم سورس فائل کا راستہstyle
- بوٹسٹریپ کے غیر منقطع سی ایس ایس کا راستہ جو پہلے سے طے شدہ ترتیبات کا استعمال کرتے ہوئے پہلے سے مرتب کیا گیا ہے (کوئی تخصیص نہیں)آپ Composer کا استعمال کرتے ہوئے Bootstrap's Less، CSS، JavaScript اور فونٹس کو انسٹال اور ان کا نظم بھی کر سکتے ہیں ۔
بوٹسٹریپ CSS وینڈر کے سابقوں سے نمٹنے کے لیے Autoprefixer کا استعمال کرتا ہے۔ اگر آپ Bootstrap کو اس کے Less/Sass ماخذ سے مرتب کر رہے ہیں اور ہماری Gruntfile استعمال نہیں کر رہے ہیں، تو آپ کو Autoprefixer کو اپنے تعمیراتی عمل میں خود ضم کرنے کی ضرورت ہوگی۔ اگر آپ پہلے سے مرتب شدہ بوٹسٹریپ استعمال کر رہے ہیں یا ہماری گرنٹ فائل استعمال کر رہے ہیں، تو آپ کو اس کے بارے میں فکر کرنے کی ضرورت نہیں ہے کیونکہ Autoprefixer پہلے سے ہی ہماری Gruntfile میں ضم ہے۔
بوٹسٹریپ دو شکلوں میں ڈاؤن لوڈ کے قابل ہے، جس کے اندر آپ کو درج ذیل ڈائریکٹریز اور فائلیں ملیں گی، منطقی طور پر مشترکہ وسائل کی گروپ بندی کرتے ہوئے اور مرتب شدہ اور چھوٹے دونوں قسموں کو فراہم کرتے ہیں۔
براہ کرم نوٹ کریں کہ تمام JavaScript پلگ انز کے لیے jQuery کو شامل کرنے کی ضرورت ہوتی ہے ، جیسا کہ سٹارٹر ٹیمپلیٹ میں دکھایا گیا ہے ۔ یہ دیکھنے کے لیے کہ jQuery کے کون سے ورژن سپورٹ ہیں ہمارے سے مشورہ کریں ۔bower.json
ایک بار ڈاؤن لوڈ ہونے کے بعد، (مرتب کردہ) بوٹسٹریپ کی ساخت دیکھنے کے لیے کمپریسڈ فولڈر کو ان زپ کریں۔ آپ کو کچھ اس طرح نظر آئے گا:
یہ بوٹسٹریپ کی سب سے بنیادی شکل ہے: تقریبا کسی بھی ویب پروجیکٹ میں فوری ڈراپ ان استعمال کے لیے پہلے سے مرتب شدہ فائلیں۔ ہم مرتب کردہ CSS اور JS ( bootstrap.*
) کے ساتھ ساتھ مرتب شدہ اور minified CSS اور JS ( bootstrap.min.*
) فراہم کرتے ہیں۔ CSS سورس میپس ( bootstrap.*.map
) مخصوص براؤزرز کے ڈویلپر ٹولز کے ساتھ استعمال کے لیے دستیاب ہیں۔ Glyphicons سے فونٹس شامل ہیں، جیسا کہ اختیاری بوٹسٹریپ تھیم ہے۔
بوٹسٹریپ سورس کوڈ ڈاؤن لوڈ میں پہلے سے مرتب کردہ سی ایس ایس، جاوا اسکرپٹ، اور فونٹ کے اثاثوں کے ساتھ سورس لیس، جاوا اسکرپٹ، اور دستاویزات شامل ہیں۔ مزید خاص طور پر، اس میں درج ذیل اور مزید شامل ہیں:
less/
, اور ہمارے CSS، JS، js/
اور fonts/
آئیکن فونٹس (بالترتیب) کے لیے سورس کوڈ ہیں۔ فولڈر میں ہر وہ dist/
چیز شامل ہے جو اوپر پہلے سے مرتب شدہ ڈاؤن لوڈ سیکشن میں درج ہے۔ docs/
فولڈر میں ہماری دستاویزات اور بوٹسٹریپ کے استعمال کا سورس کوڈ شامل ہے examples/
۔ اس کے علاوہ، کوئی بھی دوسری شامل فائل پیکجز، لائسنس کی معلومات، اور ترقی کے لیے معاونت فراہم کرتی ہے۔
بوٹسٹریپ فریم ورک کے ساتھ کام کرنے کے آسان طریقوں کے ساتھ اپنے بلڈ سسٹم کے لیے گرنٹ کا استعمال کرتا ہے۔ اس طرح ہم اپنا کوڈ مرتب کرتے ہیں، ٹیسٹ چلاتے ہیں، اور بہت کچھ۔
گرنٹ انسٹال کرنے کے لیے، آپ کو پہلے node.js (جس میں npm بھی شامل ہے) ڈاؤن لوڈ اور انسٹال کرنا ہوگا۔ npm کا مطلب نوڈ پیکڈ ماڈیولز ہے اور یہ node.js کے ذریعے ترقیاتی انحصار کو منظم کرنے کا ایک طریقہ ہے۔
پھر، کمانڈ لائن سے:grunt-cli
کے ساتھ عالمی سطح پر انسٹال کریں npm install -g grunt-cli
۔/bootstrap/
ڈائرکٹری پر جائیں، پھر چلائیں npm install
۔ npm package.json
فائل کو دیکھے گا اور وہاں درج ضروری مقامی انحصار کو خود بخود انسٹال کرے گا۔مکمل ہونے پر، آپ کمانڈ لائن سے فراہم کردہ مختلف گرنٹ کمانڈز کو چلانے کے قابل ہو جائیں گے۔
grunt dist
(صرف سی ایس ایس اور جاوا اسکرپٹ مرتب کریں)/dist/
ڈائرکٹری کو مرتب شدہ اور minified CSS اور JavaScript فائلوں کے ساتھ دوبارہ تخلیق کرتا ہے۔ بوٹسٹریپ صارف کے طور پر، یہ عام طور پر وہی کمانڈ ہے جو آپ چاہتے ہیں۔
grunt watch
(دیکھو)کم سورس فائلوں کو دیکھتا ہے اور جب بھی آپ کوئی تبدیلی محفوظ کرتے ہیں تو انہیں خود بخود CSS میں دوبارہ مرتب کر دیتا ہے۔
grunt test
(ٹیسٹ چلائیں)JSHint چلاتا ہے اور PhantomJS میں بغیر سر کے QUnit ٹیسٹ چلاتا ہے۔
grunt docs
(دستاویزات کے اثاثوں کی تعمیر اور جانچ کریں)CSS، JavaScript، اور دیگر اثاثوں کو بناتا اور جانچتا ہے جو مقامی طور پر کے ذریعے دستاویزات کو چلاتے وقت استعمال ہوتے ہیں bundle exec jekyll serve
۔
grunt
(بالکل سب کچھ بنائیں اور ٹیسٹ چلائیں)CSS اور JavaScript کو مرتب اور کم کرتا ہے، دستاویزات کی ویب سائٹ بناتا ہے، دستاویزات کے خلاف HTML5 توثیق کار چلاتا ہے، Customizer کے اثاثوں کو دوبارہ تخلیق کرتا ہے، اور بہت کچھ۔ Jekyll کی ضرورت ہے ۔ عام طور پر صرف اس صورت میں ضروری ہے جب آپ خود بوٹسٹریپ پر ہیک کر رہے ہوں۔
اگر آپ کو انحصار کو انسٹال کرنے یا گرنٹ کمانڈز چلانے میں دشواری کا سامنا کرنا پڑتا ہے، تو پہلے /node_modules/
npm کے ذریعہ تیار کردہ ڈائریکٹری کو حذف کریں۔ پھر، دوبارہ چلائیں npm install
.
اس بنیادی HTML ٹیمپلیٹ سے شروع کریں، یا ان مثالوں میں ترمیم کریں ۔ ہمیں امید ہے کہ آپ ہماری ٹیمپلیٹس اور مثالوں کو اپنی ضرورت کے مطابق ڈھالتے ہوئے اپنی مرضی کے مطابق بنائیں گے۔
کم سے کم بوٹسٹریپ دستاویز کے ساتھ کام شروع کرنے کے لیے نیچے دیے گئے HTML کو کاپی کریں۔
بوٹسٹریپ کے بہت سے اجزاء کے ساتھ اوپر کی بنیادی ٹیمپلیٹ پر بنائیں۔ ہم آپ کی حوصلہ افزائی کرتے ہیں کہ آپ بوٹسٹریپ کو آپ کے انفرادی پروجیکٹ کی ضروریات کے مطابق بنائیں۔
بوٹسٹریپ ریپوزٹری کو ڈاؤن لوڈ کرکے نیچے دی گئی ہر مثال کے لیے سورس کوڈ حاصل کریں ۔ docs/examples/
ڈائرکٹری میں مثالیں مل سکتی ہیں ۔
بوٹ لِنٹ باضابطہ بوٹسٹریپ ایچ ٹی ایم ایل لنٹر ٹول ہے۔ یہ خود بخود ویب صفحات میں متعدد عام HTML غلطیوں کی جانچ پڑتال کرتا ہے جو بوٹسٹریپ کو کافی "ونیلا" طریقے سے استعمال کر رہے ہیں۔ ونیلا بوٹسٹریپ کے اجزاء/ویجیٹس کو DOM کے اپنے حصوں کو مخصوص ڈھانچے کے مطابق کرنے کی ضرورت ہوتی ہے۔ بوٹ لِنٹ چیک کرتا ہے کہ بوٹسٹریپ اجزاء کی مثالوں میں ایچ ٹی ایم ایل کو درست طریقے سے تشکیل دیا گیا ہے۔ اپنے بوٹسٹریپ ویب ڈویلپمنٹ ٹول چین میں بوٹلنٹ شامل کرنے پر غور کریں تاکہ کوئی بھی عام غلطی آپ کے پروجیکٹ کی ترقی کو سست نہ کرے۔
بوٹسٹریپ کی ترقی پر تازہ ترین رہیں اور ان مددگار وسائل کے ساتھ کمیونٹی تک پہنچیں۔
irc.freenode.net
میں سرور میں IRC کا استعمال کرتے ہوئے ساتھی بوٹسٹریپرز کے ساتھ چیٹ کریں ۔twitter-bootstrap-3
پر پوچھیں ۔bootstrap
یا اسی طرح کے ڈیلیوری میکانزم کے ذریعے تقسیم کرتے وقت بوٹسٹریپ کی فعالیت میں ترمیم یا اضافہ کرتے ہیں ۔آپ تازہ ترین گپ شپ اور زبردست میوزک ویڈیوز کے لیے ٹویٹر پر @getbootstrap کو بھی فالو کر سکتے ہیں ۔
بوٹسٹریپ آپ کے صفحات کو مختلف اسکرین سائزز کے لیے خود بخود ڈھال لیتا ہے۔ اس خصوصیت کو غیر فعال کرنے کا طریقہ یہاں ہے تاکہ آپ کا صفحہ اس غیر جوابی مثال کی طرح کام کرے ۔
<meta>
میں مذکور ویو پورٹ کو چھوڑ دیں۔width
یقینی بنائیں کہ یہ ڈیفالٹ بوٹسٹریپ CSS کے بعد آتا ہے۔ آپ اختیاری طور پر میڈیا کے سوالات یا کچھ سلیکٹر فو سے بچ سکتے ہیں۔.container
width: 970px !important;
!important
.col-xs-*
کے لیے، درمیانے/بڑے کے علاوہ، یا اس کی جگہ کلاسز کا استعمال کریں۔ پریشان ہونے کی کوئی بات نہیں، اضافی چھوٹے ڈیوائس کا گرڈ تمام ریزولوشنز کے مطابق ہوتا ہے۔آپ کو اب بھی IE8 کے لیے Respond.js کی ضرورت ہوگی (چونکہ ہمارے میڈیا کے سوالات اب بھی موجود ہیں اور اس پر کارروائی کی ضرورت ہے)۔ یہ بوٹسٹریپ کے "موبائل سائٹ" کے پہلوؤں کو غیر فعال کر دیتا ہے۔
ہم نے ان اقدامات کو ایک مثال پر لاگو کیا ہے۔ لاگو کی گئی مخصوص تبدیلیوں کو دیکھنے کے لیے اس کا سورس کوڈ پڑھیں۔
Bootstrap کے پرانے ورژن سے v3.x میں منتقل کرنا چاہتے ہیں؟ ہماری مائیگریشن گائیڈ دیکھیں ۔
بوٹسٹریپ جدید ترین ڈیسک ٹاپ اور موبائل براؤزرز میں بہترین کام کرنے کے لیے بنایا گیا ہے، یعنی پرانے براؤزرز مختلف انداز میں دکھا سکتے ہیں، اگرچہ مکمل طور پر فعال، کچھ اجزاء کی رینڈرنگ۔
خاص طور پر، ہم درج ذیل براؤزرز اور پلیٹ فارمز کے تازہ ترین ورژن کی حمایت کرتے ہیں۔
متبادل براؤزرز جو WebKit، Blink، یا Gecko کا تازہ ترین ورژن استعمال کرتے ہیں، چاہے براہ راست یا پلیٹ فارم کے ویب ویو API کے ذریعے، واضح طور پر تعاون یافتہ نہیں ہیں۔ تاہم، بوٹسٹریپ کو (زیادہ تر معاملات میں) ان براؤزرز میں بھی صحیح طریقے سے ڈسپلے اور کام کرنا چاہیے۔ مزید مخصوص معاون معلومات ذیل میں فراہم کی گئی ہیں۔
عام طور پر، بوٹسٹریپ ہر بڑے پلیٹ فارم کے ڈیفالٹ براؤزرز کے تازہ ترین ورژن کو سپورٹ کرتا ہے۔ نوٹ کریں کہ پراکسی براؤزرز (جیسے Opera Mini، Opera Mobile's Turbo mode، UC Browser Mini، Amazon Silk) تعاون یافتہ نہیں ہیں۔
کروم | فائر فاکس | سفاری | |
---|---|---|---|
انڈروئد | حمایت یافتہ | حمایت یافتہ | N / A |
iOS | حمایت یافتہ | حمایت یافتہ | حمایت یافتہ |
اسی طرح، زیادہ تر ڈیسک ٹاپ براؤزرز کے تازہ ترین ورژن سپورٹ ہوتے ہیں۔
کروم | فائر فاکس | انٹرنیٹ ایکسپلورر | اوپرا | سفاری | |
---|---|---|---|---|---|
میک | حمایت یافتہ | حمایت یافتہ | N / A | حمایت یافتہ | حمایت یافتہ |
ونڈوز | حمایت یافتہ | حمایت یافتہ | حمایت یافتہ | حمایت یافتہ | سہولت مہیا نہیں |
ونڈوز پر، ہم انٹرنیٹ ایکسپلورر 8-11 کو سپورٹ کرتے ہیں۔
Firefox کے لیے، تازہ ترین عام مستحکم ریلیز کے علاوہ، ہم Firefox کے تازہ ترین ایکسٹینڈڈ سپورٹ ریلیز (ESR) ورژن کی بھی حمایت کرتے ہیں۔
غیر سرکاری طور پر، بوٹسٹریپ کو کرومیم اور کروم برائے لینکس، فائر فاکس فار لینکس، اور انٹرنیٹ ایکسپلورر 7 کے ساتھ ساتھ مائیکروسافٹ ایج میں کافی اچھا نظر آنا اور برتاؤ کرنا چاہیے، حالانکہ وہ سرکاری طور پر تعاون یافتہ نہیں ہیں۔
کچھ براؤزر بگس کی فہرست کے لیے جن کا بوٹسٹریپ کو سامنا کرنا پڑتا ہے، ہماری وال آف براؤزر بگ دیکھیں ۔
انٹرنیٹ ایکسپلورر 8 اور 9 بھی تعاون یافتہ ہیں، تاہم، براہ کرم آگاہ رہیں کہ کچھ CSS3 خصوصیات اور HTML5 عناصر ان براؤزرز کے ذریعے مکمل طور پر تعاون یافتہ نہیں ہیں۔ اس کے علاوہ، انٹرنیٹ ایکسپلورر 8 کو میڈیا استفسار کی حمایت کو فعال کرنے کے لیے Respond.js کے استعمال کی ضرورت ہے۔
فیچر | انٹرنیٹ ایکسپلورر 8 | انٹرنیٹ ایکسپلورر 9 |
---|---|---|
border-radius |
سہولت مہیا نہیں | حمایت یافتہ |
box-shadow |
سہولت مہیا نہیں | حمایت یافتہ |
transform |
سہولت مہیا نہیں | تائید شدہ، -ms سابقہ کے ساتھ |
transition |
سہولت مہیا نہیں | |
placeholder |
سہولت مہیا نہیں |
CSS3 اور HTML5 خصوصیات کے براؤزر سپورٹ کے بارے میں تفصیلات کے لیے کیا میں استعمال کر سکتا ہوں... ملاحظہ کریں ۔
Internet Explorer 8 کے لیے اپنی ترقی اور پیداوار کے ماحول میں Respond.js استعمال کرتے وقت درج ذیل انتباہات سے ہوشیار رہیں۔
ایک مختلف (ذیلی) ڈومین (مثال کے طور پر، CDN پر) پر میزبان CSS کے ساتھ Respond.js استعمال کرنے کے لیے کچھ اضافی سیٹ اپ کی ضرورت ہوتی ہے۔ تفصیلات کے لیے 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;
کے ساتھ ملا کر مکمل طور پر تعاون نہیں کرتا ۔ اس وجہ سے، v3.0.1 کے مطابق، ہم اب s پر استعمال نہیں کرتے ہیں۔min-width
max-width
min-height
max-height
max-width
.container
@font-face
IE8 کے ساتھ جوڑنے پر کچھ مسائل ہیں :before
۔ بوٹسٹریپ اس امتزاج کو اپنے Glyphicons کے ساتھ استعمال کرتا ہے۔ اگر صفحہ کو کیش کیا جاتا ہے، اور ونڈو پر ماؤس کے بغیر لوڈ کیا جاتا ہے (یعنی ریفریش بٹن کو دبائیں یا کسی iframe میں کچھ لوڈ کریں) تو صفحہ فونٹ لوڈ ہونے سے پہلے رینڈر ہو جاتا ہے۔ صفحہ (باڈی) پر منڈلانے سے کچھ شبیہیں نظر آئیں گی اور باقی آئیکنز پر منڈلانے سے وہ بھی دکھائی دیں گے۔ تفصیل کے لیے شمارہ نمبر 13863 دیکھیں۔
بوٹسٹریپ پرانے انٹرنیٹ ایکسپلورر مطابقت کے طریقوں میں تعاون یافتہ نہیں ہے۔ یہ یقینی بنانے کے لیے کہ آپ IE کے لیے جدید ترین رینڈرنگ موڈ استعمال کر رہے ہیں، اپنے صفحات میں مناسب <meta>
ٹیگ شامل کرنے پر غور کریں:
ڈیبگنگ ٹولز کھول کر دستاویز موڈ کی تصدیق کریں: F12"دستاویز موڈ" کو دبائیں اور چیک کریں۔
یہ ٹیگ بوٹسٹریپ کی تمام دستاویزات اور مثالوں میں شامل ہے تاکہ انٹرنیٹ ایکسپلورر کے ہر معاون ورژن میں بہترین رینڈرنگ کو یقینی بنایا جا سکے۔
مزید معلومات کے لیے یہ StackOverflow سوال دیکھیں ۔
انٹرنیٹ ایکسپلورر 10 ڈیوائس کی چوڑائی کو ویو پورٹ کی چوڑائی سے الگ نہیں کرتا ہے، اور اس طرح بوٹسٹریپ کے سی ایس ایس میں میڈیا کے سوالات کو مناسب طریقے سے لاگو نہیں کرتا ہے۔ عام طور پر آپ اسے ٹھیک کرنے کے لیے CSS کا ایک فوری ٹکڑا شامل کریں گے:
تاہم، یہ اپ ڈیٹ 3 (عرف GDR3) سے پرانے ونڈوز فون 8 ورژن چلانے والے آلات کے لیے کام نہیں کرتا ہے ، کیونکہ اس کی وجہ سے ایسے آلات تنگ "فون" منظر کے بجائے زیادہ تر ڈیسک ٹاپ ویو دکھاتے ہیں۔ اس سے نمٹنے کے لیے، آپ کو بگ کے ارد گرد کام کرنے کے لیے درج ذیل CSS اور JavaScript کو شامل کرنے کی ضرورت ہوگی ۔
مزید معلومات اور استعمال کے رہنما خطوط کے لیے، Windows Phone 8 اور Device-width کو پڑھیں ۔
ایک پیش رفت کے طور پر، ہم اسے بوٹسٹریپ کی تمام دستاویزات اور مثالوں میں بطور مظاہرے میں شامل کرتے ہیں۔
OS X کے لیے v7.1 سے پہلے سفاری کے ورژن اور iOS v8.0 کے لیے Safari کے ورژن کے رینڈرنگ انجن کو ہماری .col-*-1
گرڈ کلاسز میں استعمال ہونے والے اعشاریہ مقامات کی تعداد کے ساتھ کچھ پریشانی تھی۔ لہذا اگر آپ کے پاس 12 انفرادی گرڈ کالم ہیں، تو آپ دیکھیں گے کہ وہ کالموں کی دوسری قطاروں کے مقابلے میں مختصر آئے ہیں۔ سفاری/iOS کو اپ گریڈ کرنے کے علاوہ، آپ کے پاس کام کے لیے کچھ اختیارات ہیں:
.pull-right
سخت دائیں سیدھ حاصل کرنے کے لیے اپنے آخری گرڈ کالم میں شامل کریں ۔overflow: hidden
آئی او ایس اور اینڈرائیڈ میں عنصر کے لیے سپورٹ <body>
کافی محدود ہے۔ اس مقصد کے لیے، جب آپ ان آلات کے براؤزرز میں سے کسی ایک موڈل کے اوپر یا نیچے سے گزرتے ہیں، تو <body>
مواد اسکرول کرنا شروع کر دے گا۔ کروم بگ #175502 ( کروم v40 میں طے شدہ) اور ویب کٹ بگ #153852 دیکھیں ۔
<input>
iOS 9.3 کے مطابق، جب ایک موڈل کھلا ہے، اگر اسکرول کے اشارے کا ابتدائی ٹچ ٹیکسٹول یا a کی حدود میں ہے <textarea>
، <body>
تو موڈل کے نیچے موجود مواد کو موڈل کے بجائے اسکرول کیا جائے گا۔ WebKit بگ #153856 دیکھیں ۔
اس کے علاوہ، نوٹ کریں کہ اگر آپ فکسڈ نیوبار استعمال کر رہے ہیں یا موڈل میں ان پٹ استعمال کر رہے ہیں، تو iOS میں ایک رینڈرنگ بگ ہے جو ورچوئل کی بورڈ کے متحرک ہونے پر فکسڈ عناصر کی پوزیشن کو اپ ڈیٹ نہیں کرتا ہے۔ اس کے لیے چند کاموں میں اپنے عناصر کو تبدیل کرنا position: absolute
یا پوزیشننگ کو دستی طور پر درست کرنے کی کوشش کرنے کے لیے فوکس پر ٹائمر لگانا شامل ہے۔ یہ بوٹسٹریپ کے ذریعے نہیں سنبھالا جاتا ہے، لہذا یہ آپ پر منحصر ہے کہ آپ کی درخواست کے لیے کون سا حل بہترین ہے۔
.dropdown-backdrop
z-indexing کی پیچیدگی کی وجہ سے عنصر کو nav میں iOS پر استعمال نہیں کیا جاتا ہے ۔ اس طرح، navbars میں ڈراپ ڈاؤن کو بند کرنے کے لیے، آپ کو براہ راست ڈراپ ڈاؤن عنصر پر کلک کرنا ہوگا (یا کوئی دوسرا عنصر جو iOS میں کلک ایونٹ کو فائر کرے گا )۔
صفحہ زوم کرنا ناگزیر طور پر بوٹسٹریپ اور باقی ویب دونوں میں، کچھ اجزاء میں پیش کرنے والے نمونے پیش کرتا ہے۔ مسئلہ پر منحصر ہے، ہم اسے ٹھیک کرنے کے قابل ہو سکتے ہیں (پہلے تلاش کریں اور پھر ضرورت پڑنے پر مسئلہ کھولیں)۔ تاہم، ہم ان کو نظر انداز کرتے ہیں کیونکہ ان کے پاس اکثر ہیکی ورک آراؤنڈ کے علاوہ کوئی براہ راست حل نہیں ہوتا ہے۔
:hover
/ :focus
موبائل پراگرچہ زیادہ تر ٹچ اسکرینوں پر حقیقی منڈلانا ممکن نہیں ہے، زیادہ تر موبائل براؤزرز ہوورنگ سپورٹ کی تقلید کرتے ہیں اور :hover
"چپچپا" بناتے ہیں۔ دوسرے لفظوں میں، :hover
اسٹائل کسی عنصر کو ٹیپ کرنے کے بعد لاگو ہونا شروع کردیتے ہیں اور صارف کسی دوسرے عنصر کو ٹیپ کرنے کے بعد ہی درخواست دینا بند کردیتا ہے۔ یہ بوٹسٹریپ کی :hover
ریاستوں کو ایسے براؤزرز پر ناپسندیدہ طور پر "پھنس" جانے کا سبب بن سکتا ہے۔ کچھ موبائل براؤزر بھی :focus
اسی طرح چپچپا بناتے ہیں۔ ان مسائل کے لیے فی الحال اس طرح کے انداز کو مکمل طور پر ہٹانے کے علاوہ کوئی آسان حل نہیں ہے۔
یہاں تک کہ کچھ جدید براؤزرز میں بھی پرنٹنگ نرالی ہو سکتی ہے۔
خاص طور پر، Chrome v32 کے مطابق اور مارجن کی ترتیبات سے قطع نظر، کروم ویب صفحہ پرنٹ کرتے وقت میڈیا کے سوالات کو حل کرتے وقت فزیکل پیپر سائز سے نمایاں طور پر تنگ ویو پورٹ کی چوڑائی کا استعمال کرتا ہے۔ اس کے نتیجے میں بوٹسٹریپ کی اضافی چھوٹی گرڈ پرنٹنگ کے وقت غیر متوقع طور پر فعال ہو سکتی ہے۔ کچھ تفصیلات کے لیے شمارہ #12078 اور کروم بگ #273306 دیکھیں۔ تجویز کردہ حل:
@screen-*
تاکہ آپ کا پرنٹر پیپر اضافی چھوٹے سے بڑا سمجھا جائے۔نیز، Safari v8.0 کے مطابق، فکسڈ چوڑائی .container
s سفاری کو پرنٹنگ کے وقت غیر معمولی طور پر چھوٹے فونٹ سائز استعمال کرنے کا سبب بن سکتی ہے۔ مزید تفصیلات کے لیے دیکھیں #14868 اور WebKit بگ #138192 ۔ اس کے لیے ایک ممکنہ حل درج ذیل سی ایس ایس کو شامل کرنا ہے۔
باکس سے باہر، Android 4.1 (اور یہاں تک کہ بظاہر کچھ نئی ریلیزز بھی) براؤزر ایپ کے ساتھ بطور ڈیفالٹ ویب براؤزر (کروم کے برخلاف) بھیجتا ہے۔ بدقسمتی سے، براؤزر ایپ میں عام طور پر CSS کے ساتھ بہت سارے کیڑے اور تضادات ہیں۔
عناصر پر ، اگر کوئی اور/یا اطلاق ہوتا <select>
ہے تو Android اسٹاک براؤزر سائیڈ کنٹرولز کو ظاہر نہیں کرے گا ۔ ( تفصیلات کے لیے یہ StackOverflow سوال دیکھیں۔) گستاخانہ CSS کو ہٹانے کے لیے نیچے کوڈ کا ٹکڑا استعمال کریں اور اسے اینڈرائیڈ اسٹاک براؤزر پر غیر اسٹائل شدہ عنصر کے طور پر پیش کریں۔ صارف ایجنٹ سونگھنا کروم، سفاری، اور موزیلا براؤزرز کے ساتھ مداخلت سے گریز کرتا ہے۔border-radius
border
<select>
ایک مثال دیکھنا چاہتے ہیں؟ یہ جے ایس بن ڈیمو چیک کریں۔
پرانے اور چھوٹی چھوٹی براؤزرز کو بہترین ممکنہ تجربہ فراہم کرنے کے لیے، بوٹسٹریپ کئی جگہوں پر سی ایس ایس براؤزر ہیکس کا استعمال کرتا ہے تاکہ مخصوص سی ایس ایس کو مخصوص براؤزر ورژنز کو نشانہ بنایا جا سکے تاکہ براؤزرز میں موجود کیڑے کو دور کیا جا سکے۔ یہ ہیکس سی ایس ایس کی توثیق کرنے والوں کو یہ شکایت کرنے کا سبب بنتے ہیں کہ وہ غلط ہیں۔ ایک دو جگہوں پر، ہم بلیڈنگ ایج سی ایس ایس کی خصوصیات بھی استعمال کرتے ہیں جو ابھی تک مکمل طور پر معیاری نہیں ہیں، لیکن ان کا استعمال خالصتاً ترقی پسندانہ اضافہ کے لیے کیا جاتا ہے۔
توثیق کے ان انتباہات سے عملی طور پر کوئی فرق نہیں پڑتا ہے کیونکہ ہمارے سی ایس ایس کا غیر ہیکی حصہ پوری طرح سے توثیق کرتا ہے اور ہیکی حصے غیر ہیکی والے حصے کے مناسب کام میں مداخلت نہیں کرتے ہیں، اس لیے ہم جان بوجھ کر ان مخصوص انتباہات کو کیوں نظر انداز کرتے ہیں۔
اسی طرح ہمارے HTML دستاویزات میں کچھ معمولی اور غیر ضروری HTML توثیق کے انتباہات ہیں جس کی وجہ سے ایک مخصوص فائر فاکس بگ کے لیے ہمارے حل کو شامل کیا گیا ہے ۔
اگرچہ ہم باضابطہ طور پر کسی تھرڈ پارٹی پلگ ان یا ایڈ آنز کی حمایت نہیں کرتے ہیں، لیکن ہم آپ کے پروجیکٹس میں ممکنہ مسائل سے بچنے میں مدد کے لیے کچھ مفید مشورے پیش کرتے ہیں۔
کچھ فریق ثالث سافٹ ویئر، بشمول Google Maps اور Google Custom Search Engine، بوٹسٹریپ کے ساتھ تصادم کی وجہ سے * { box-sizing: border-box; }
، ایک اصول جس کی وجہ سے یہ padding
کسی عنصر کی حتمی کمپیوٹیڈ چوڑائی کو متاثر نہیں کرتا ہے۔ سی ایس ایس ٹرکس پر باکس ماڈل اور سائزنگ کے بارے میں مزید جانیں ۔
سیاق و سباق پر منحصر ہے، آپ حسب ضرورت (آپشن 1) کو اوور رائڈ کر سکتے ہیں یا پورے علاقوں کے لیے باکس کے سائز کو دوبارہ ترتیب دے سکتے ہیں (آپشن 2)۔
بوٹسٹریپ عام ویب معیارات کی پیروی کرتا ہے اور — کم سے کم اضافی کوشش کے ساتھ — ایسی سائٹس بنانے کے لیے استعمال کیا جا سکتا ہے جو AT استعمال کرنے والوں کے لیے قابل رسائی ہوں ۔
اگر آپ کی نیویگیشن بہت سے لنکس پر مشتمل ہے اور DOM میں مرکزی مواد سے پہلے آتی ہے، Skip to main content
تو نیویگیشن سے پہلے ایک لنک شامل کریں (ایک آسان وضاحت کے لیے، نیویگیشن لنکس کو چھوڑنے پر یہ A11Y پروجیکٹ مضمون دیکھیں )۔ کلاس کا استعمال کرنے .sr-only
سے اسکیپ لنک کو بصری طور پر چھپ جائے گا، اور .sr-only-focusable
کلاس اس بات کو یقینی بنائے گی کہ لنک ایک بار فوکس کرنے کے بعد نظر آئے گا (دیکھنے والے کی بورڈ صارفین کے لیے)۔
کروم میں دیرینہ کوتاہیوں/بگز کی وجہ سے ( کرومیم بگ ٹریکر میں شمارہ 262171 دیکھیں ) اور انٹرنیٹ ایکسپلورر (اس مضمون میں صفحہ کے لنکس اور فوکس آرڈر پر دیکھیں )، آپ کو یہ یقینی بنانا ہوگا کہ آپ کے اسکپ لنک کا ہدف شامل کرکے کم از کم پروگرام کے لحاظ سے توجہ مرکوز کرنے کے قابل tabindex="-1"
ہے۔
اس کے علاوہ، آپ واضح طور پر ہدف پر نظر آنے والے فوکس اشارے کو دبانا چاہتے ہیں (خاص طور پر جیسا کہ کروم فی الحال عناصر پر توجہ مرکوز کرتا ہے tabindex="-1"
جب وہ ماؤس کے ساتھ کلک کرتے ہیں) #content:focus { outline: none; }
۔
نوٹ کریں کہ یہ بگ ان پیج کے دیگر لنکس کو بھی متاثر کرے گا جو آپ کی سائٹ استعمال کر رہی ہیں، انہیں کی بورڈ استعمال کرنے والوں کے لیے بیکار کر دے گی۔ آپ دوسرے تمام نامزد اینکرز/ فریگمنٹ شناخت کنندگان کے لیے اسی طرح کے اسٹاپ گیپ فکس کو شامل کرنے پر غور کر سکتے ہیں جو لنک اہداف کے طور پر کام کرتے ہیں۔
جب nesting عنوانات ( <h1>
- <h6>
)، تو آپ کا بنیادی دستاویز کا ہیڈر ہونا چاہیے <h1>
۔ اس کے بعد کی سرخیوں کو منطقی استعمال کرنا چاہیے <h2>
- <h6>
اس طرح کہ اسکرین ریڈرز آپ کے صفحات کے لیے مواد کا ایک جدول بنا سکیں۔
HTML CodeSniffer اور Penn State's AccessAbility پر مزید جانیں ۔
فی الحال، بوٹسٹریپ میں دستیاب کچھ طے شدہ رنگوں کے مجموعے (جیسے مختلف اسٹائل والے بٹن کلاسز، بنیادی کوڈ بلاکس کے لیے استعمال ہونے والے کوڈ کو نمایاں کرنے والے کچھ رنگ ، سیاق و .bg-primary
سباق کے پس منظر میں مددگار کلاس، اور سفید پس منظر پر استعمال ہونے پر پہلے سے طے شدہ لنک کا رنگ) کنٹراسٹ کا تناسب کم ہے ( 4.5:1 کے تجویز کردہ تناسب سے نیچے )۔ اس سے کم بینائی والے یا رنگین اندھے صارفین کے لیے مسائل پیدا ہو سکتے ہیں۔ ان پہلے سے طے شدہ رنگوں کو ان کے تضاد اور قابل قبولیت کو بڑھانے کے لیے تبدیل کرنے کی ضرورت ہو سکتی ہے۔
بوٹسٹریپ MIT لائسنس کے تحت جاری کیا گیا ہے اور کاپی رائٹ 2016 Twitter ہے۔ چھوٹے ٹکڑوں میں ابال کر اسے درج ذیل شرائط کے ساتھ بیان کیا جا سکتا ہے۔
مکمل بوٹسٹریپ لائسنس مزید معلومات کے لیے پروجیکٹ کے ذخیرے میں موجود ہے ۔
کمیونٹی کے اراکین نے بوٹسٹریپ کی دستاویزات کا مختلف زبانوں میں ترجمہ کیا ہے۔ کوئی بھی سرکاری طور پر تعاون یافتہ نہیں ہے اور ہوسکتا ہے کہ وہ ہمیشہ اپ ٹو ڈیٹ نہ ہوں۔
ہم ترجمے کو ترتیب دینے یا میزبانی کرنے میں مدد نہیں کرتے، ہم صرف ان سے لنک کرتے ہیں۔
نیا یا بہتر ترجمہ مکمل کیا؟ اسے ہماری فہرست میں شامل کرنے کے لیے پل کی درخواست کھولیں۔