ڈاؤن لوڈ کریں

بوٹسٹریپ (فی الحال v3.4.1) میں تیزی سے شروع کرنے کے چند آسان طریقے ہیں، ہر ایک مختلف مہارت کی سطح اور استعمال کے معاملے میں اپیل کرتا ہے۔ یہ دیکھنے کے لیے پڑھیں کہ آپ کی مخصوص ضروریات کے مطابق کیا ہے۔

بوٹسٹریپ

سی ایس ایس، جاوا اسکرپٹ، اور فونٹس کو مرتب اور کم کیا گیا۔ کوئی دستاویزات یا اصل سورس فائلیں شامل نہیں ہیں۔

بوٹسٹریپ ڈاؤن لوڈ کریں۔

سورس کوڈ

ماخذ کم، جاوا اسکرپٹ، اور فونٹ فائلیں، ہماری دستاویزات کے ساتھ۔ ایک کم کمپائلر اور کچھ سیٹ اپ کی ضرورت ہے۔

ماخذ ڈاؤن لوڈ کریں۔

سس

ریل، کمپاس، یا صرف ساس پروجیکٹس میں آسانی سے شامل کرنے کے لیے بوٹسٹریپ کو کم سے ساس تک پورٹ کیا گیا ہے۔

ساس ڈاؤن لوڈ کریں۔

jsDelivr

jsDelivr پر موجود لوگ بوٹسٹریپ کے CSS اور JavaScript کے لیے CDN تعاون فراہم کرتے ہیں۔ بس یہ jsDelivr لنکس استعمال کریں۔

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

بوور کے ساتھ انسٹال کریں۔

آپ Bower کا استعمال کرتے ہوئے Bootstrap's Less، CSS، JavaScript، اور فونٹس کو انسٹال اور ان کا نظم بھی کر سکتے ہیں ۔

bower install bootstrap

این پی ایم کے ساتھ انسٹال کریں۔

آپ npm کا استعمال کرتے ہوئے بوٹسٹریپ بھی انسٹال کر سکتے ہیں :

npm install bootstrap@3

require('bootstrap')بوٹسٹریپ کے تمام jQuery پلگ انز کو jQuery آبجیکٹ پر لوڈ کر دے گا۔ ماڈیول خود کچھ bootstrapبھی برآمد نہیں کرتا ہے۔ /js/*.jsآپ پیکیج کی ٹاپ لیول ڈائرکٹری کے نیچے فائلوں کو لوڈ کر کے بوٹسٹریپ کے jQuery پلگ ان کو دستی طور پر لوڈ کر سکتے ہیں ۔

Bootstrap's package.jsonمندرجہ ذیل کلیدوں کے تحت کچھ اضافی میٹا ڈیٹا پر مشتمل ہے:

  • less- بوٹسٹریپ کی مرکزی کم سورس فائل کا راستہ
  • style- بوٹسٹریپ کے غیر منقطع سی ایس ایس کا راستہ جو پہلے سے طے شدہ ترتیبات کا استعمال کرتے ہوئے پہلے سے مرتب کیا گیا ہے (کوئی تخصیص نہیں)

کمپوزر کے ساتھ انسٹال کریں۔

آپ Composer کا استعمال کرتے ہوئے Bootstrap's Less، CSS، JavaScript اور فونٹس کو انسٹال اور ان کا نظم بھی کر سکتے ہیں ۔

composer require twbs/bootstrap

کم/ساس کے لیے آٹوپریفکسر درکار ہے۔

بوٹسٹریپ CSS وینڈر کے سابقوں سے نمٹنے کے لیے Autoprefixer کا استعمال کرتا ہے۔ اگر آپ Bootstrap کو اس کے Less/Sass ماخذ سے مرتب کر رہے ہیں اور ہماری Gruntfile استعمال نہیں کر رہے ہیں، تو آپ کو Autoprefixer کو اپنے تعمیراتی عمل میں خود ضم کرنے کی ضرورت ہوگی۔ اگر آپ پہلے سے مرتب شدہ بوٹسٹریپ استعمال کر رہے ہیں یا ہماری گرنٹ فائل استعمال کر رہے ہیں، تو آپ کو اس کے بارے میں فکر کرنے کی ضرورت نہیں ہے کیونکہ Autoprefixer پہلے سے ہی ہماری Gruntfile میں ضم ہے۔

کیا شامل ہے۔

بوٹسٹریپ دو شکلوں میں ڈاؤن لوڈ کے قابل ہے، جس کے اندر آپ کو درج ذیل ڈائریکٹریز اور فائلیں ملیں گی، منطقی طور پر مشترکہ وسائل کی گروپ بندی کرتے ہوئے اور مرتب شدہ اور چھوٹے دونوں قسموں کو فراہم کرتے ہیں۔

jQuery کی ضرورت ہے۔

براہ کرم نوٹ کریں کہ تمام JavaScript پلگ انز کے لیے jQuery کو شامل کرنے کی ضرورت ہوتی ہے ، جیسا کہ سٹارٹر ٹیمپلیٹ میں دکھایا گیا ہے ۔ یہ دیکھنے کے لیے کہ jQuery کے کون سے ورژن سپورٹ ہیں ہمارے سے مشورہ کریں ۔bower.json

پہلے سے مرتب شدہ بوٹسٹریپ

ایک بار ڈاؤن لوڈ ہونے کے بعد، (مرتب کردہ) بوٹسٹریپ کی ساخت دیکھنے کے لیے کمپریسڈ فولڈر کو ان زپ کریں۔ آپ کو کچھ اس طرح نظر آئے گا:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

یہ بوٹسٹریپ کی سب سے بنیادی شکل ہے: تقریبا کسی بھی ویب پروجیکٹ میں فوری ڈراپ ان استعمال کے لیے پہلے سے مرتب شدہ فائلیں۔ ہم مرتب کردہ CSS اور JS ( bootstrap.*) کے ساتھ ساتھ مرتب شدہ اور minified CSS اور JS ( bootstrap.min.*) فراہم کرتے ہیں۔ CSS سورس میپس ( bootstrap.*.map) مخصوص براؤزرز کے ڈویلپر ٹولز کے ساتھ استعمال کے لیے دستیاب ہیں۔ Glyphicons کے فونٹس شامل ہیں، جیسا کہ اختیاری بوٹسٹریپ تھیم ہے۔

بوٹسٹریپ سورس کوڈ

بوٹسٹریپ سورس کوڈ ڈاؤن لوڈ میں پہلے سے مرتب کردہ سی ایس ایس، جاوا اسکرپٹ، اور فونٹ کے اثاثوں کے ساتھ سورس لیس، جاوا اسکرپٹ، اور دستاویزات شامل ہیں۔ مزید خاص طور پر، اس میں درج ذیل اور مزید شامل ہیں:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/, اور ہمارے CSS، JS، js/اور fonts/آئیکن فونٹس (بالترتیب) کے لیے سورس کوڈ ہیں۔ فولڈر میں ہر وہ dist/چیز شامل ہے جو اوپر پہلے سے مرتب شدہ ڈاؤن لوڈ سیکشن میں درج ہے۔ docs/فولڈر میں ہماری دستاویزات اور بوٹسٹریپ کے استعمال کا سورس کوڈ شامل ہے examples/۔ اس کے علاوہ، کوئی بھی دوسری شامل فائل پیکجز، لائسنس کی معلومات، اور ترقی کے لیے معاونت فراہم کرتی ہے۔

سی ایس ایس اور جاوا اسکرپٹ کو مرتب کرنا

بوٹسٹریپ فریم ورک کے ساتھ کام کرنے کے آسان طریقوں کے ساتھ اپنے بلڈ سسٹم کے لیے گرنٹ کا استعمال کرتا ہے۔ اس طرح ہم اپنا کوڈ مرتب کرتے ہیں، ٹیسٹ چلاتے ہیں، اور بہت کچھ۔

گرنٹ انسٹال کرنا

گرنٹ انسٹال کرنے کے لیے، آپ کو پہلے node.js (جس میں npm بھی شامل ہے) ڈاؤن لوڈ اور انسٹال کرنا ہوگا۔ npm کا مطلب نوڈ پیکڈ ماڈیولز ہے اور یہ node.js کے ذریعے ترقیاتی انحصار کو منظم کرنے کا ایک طریقہ ہے۔

پھر، کمانڈ لائن سے:
  1. grunt-cliکے ساتھ عالمی سطح پر انسٹال کریں npm install -g grunt-cli۔
  2. روٹ /bootstrap/ڈائرکٹری پر جائیں، پھر چلائیں npm install۔ npm package.jsonفائل کو دیکھے گا اور وہاں درج ضروری مقامی انحصار کو خود بخود انسٹال کرے گا۔

مکمل ہونے پر، آپ کمانڈ لائن سے فراہم کردہ مختلف گرنٹ کمانڈز کو چلانے کے قابل ہو جائیں گے۔

دستیاب گرنٹ کمانڈز

grunt dist(صرف سی ایس ایس اور جاوا اسکرپٹ کو مرتب کریں)

/dist/ڈائرکٹری کو مرتب شدہ اور minified CSS اور JavaScript فائلوں کے ساتھ دوبارہ تخلیق کرتا ہے۔ بوٹسٹریپ صارف کے طور پر، یہ عام طور پر وہی کمانڈ ہے جو آپ چاہتے ہیں۔

grunt watch(دیکھو)

کم سورس فائلوں کو دیکھتا ہے اور جب بھی آپ کوئی تبدیلی محفوظ کرتے ہیں تو انہیں خود بخود CSS میں دوبارہ مرتب کر دیتا ہے۔

grunt test(ٹیسٹ چلائیں)

JSHint چلاتا ہے اور کرما کی بدولت اصلی براؤزر میں QUnit ٹیسٹ چلاتا ہے ۔

grunt docs(دستاویزات کے اثاثوں کی تعمیر اور جانچ کریں)

CSS، JavaScript، اور دیگر اثاثوں کو بناتا اور جانچتا ہے جو مقامی طور پر کے ذریعے دستاویزات کو چلاتے وقت استعمال ہوتے ہیں bundle exec jekyll serve۔

grunt(بالکل سب کچھ بنائیں اور ٹیسٹ چلائیں)

CSS اور JavaScript کو مرتب اور کم کرتا ہے، دستاویزات کی ویب سائٹ بناتا ہے، دستاویزات کے خلاف HTML5 توثیق کار چلاتا ہے، Customizer کے اثاثوں کو دوبارہ تخلیق کرتا ہے، اور بہت کچھ۔ Jekyll کی ضرورت ہے ۔ عام طور پر صرف اس صورت میں ضروری ہے جب آپ خود بوٹسٹریپ پر ہیک کر رہے ہوں۔

خرابیوں کا سراغ لگانا

اگر آپ کو انحصار کو انسٹال کرنے یا گرنٹ کمانڈ چلانے میں دشواری کا سامنا کرنا پڑتا ہے، تو پہلے /node_modules/npm کے ذریعے تیار کردہ ڈائریکٹری کو حذف کریں۔ پھر، دوبارہ چلائیں npm install.

بنیادی ٹیمپلیٹ

اس بنیادی HTML ٹیمپلیٹ سے شروع کریں، یا ان مثالوں میں ترمیم کریں ۔ ہمیں امید ہے کہ آپ ہماری ٹیمپلیٹس اور مثالوں کو اپنی ضرورت کے مطابق ڈھالتے ہوئے اپنی مرضی کے مطابق بنائیں گے۔

کم سے کم بوٹسٹریپ دستاویز کے ساتھ کام شروع کرنے کے لیے نیچے دیے گئے HTML کو کاپی کریں۔

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

مثالیں

بوٹسٹریپ کے بہت سے اجزاء کے ساتھ اوپر کی بنیادی ٹیمپلیٹ پر بنائیں۔ ہم آپ کی حوصلہ افزائی کرتے ہیں کہ آپ بوٹسٹریپ کو آپ کے انفرادی پروجیکٹ کی ضروریات کے مطابق بنائیں۔

بوٹسٹریپ ریپوزٹری کو ڈاؤن لوڈ کرکے نیچے دی گئی ہر مثال کے لیے سورس کوڈ حاصل کریں ۔ docs/examples/ڈائرکٹری میں مثالیں مل سکتی ہیں ۔

فریم ورک کا استعمال کرتے ہوئے

اسٹارٹر ٹیمپلیٹ کی مثال

سٹارٹر ٹیمپلیٹ

بنیادی باتوں کے علاوہ کچھ نہیں: ایک کنٹینر کے ساتھ سی ایس ایس اور جاوا اسکرپٹ مرتب کیا گیا۔

بوٹسٹریپ تھیم کی مثال

بوٹسٹریپ تھیم

بصری طور پر بہتر تجربہ کے لیے اختیاری بوٹسٹریپ تھیم لوڈ کریں۔

متعدد گرڈز کی مثال

گرڈز

چاروں درجات، نیسٹنگ اور مزید کے ساتھ گرڈ لے آؤٹ کی متعدد مثالیں۔

جمبوٹرون کی مثال

جمبوٹرون

نیوبار اور کچھ بنیادی گرڈ کالموں کے ساتھ جمبوٹرون کے ارد گرد بنائیں۔

تنگ جمبوٹرون مثال

تنگ جمبوٹرون

پہلے سے طے شدہ کنٹینر اور جمبوٹرون کو تنگ کرکے مزید حسب ضرورت صفحہ بنائیں۔

ایکشن میں Navbars

نوبار کی مثال

نوبار

انتہائی بنیادی ٹیمپلیٹ جس میں کچھ اضافی مواد کے ساتھ navbar بھی شامل ہے۔

جامد ٹاپ نوبار کی مثال

جامد ٹاپ نیوبار

کچھ اضافی مواد کے ساتھ ایک مستحکم ٹاپ نیوبار کے ساتھ انتہائی بنیادی ٹیمپلیٹ۔

فکسڈ navbar مثال

فکسڈ نیوبار

کچھ اضافی مواد کے ساتھ ایک فکسڈ ٹاپ نیوبار کے ساتھ انتہائی بنیادی ٹیمپلیٹ۔

حسب ضرورت اجزاء

ایک صفحے کے ٹیمپلیٹ کی مثال

ڈھانپنا

سادہ اور خوبصورت ہوم پیجز بنانے کے لیے ایک صفحے کا ٹیمپلیٹ۔

Carousel کی مثال

Carousel

navbar اور carousel کو حسب ضرورت بنائیں، پھر کچھ نئے اجزاء شامل کریں۔

بلاگ لے آؤٹ کی مثال

بلاگ

حسب ضرورت نیویگیشن، ہیڈر اور قسم کے ساتھ سادہ دو کالم بلاگ لے آؤٹ۔

ڈیش بورڈ کی مثال

ڈیش بورڈ

فکسڈ سائڈبار اور نیوبار کے ساتھ ایڈمن ڈیش بورڈ کے لیے بنیادی ڈھانچہ۔

سائن ان صفحہ کی مثال

سائن ان صفحہ

سادہ سائن ان فارم کے لیے حسب ضرورت فارم لے آؤٹ اور ڈیزائن۔

جائز NAV مثال

جائز nav

جائز لنکس کے ساتھ ایک حسب ضرورت navbar بنائیں۔ سنو! زیادہ سفاری دوستانہ نہیں۔

چسپاں فوٹر کی مثال

چسپاں فوٹر

جب مواد اس سے چھوٹا ہو تو ویو پورٹ کے نیچے فوٹر منسلک کریں۔

نوبار مثال کے ساتھ چسپاں فوٹر

navbar کے ساتھ چسپاں فوٹر

سب سے اوپر ایک فکسڈ نیوبار کے ساتھ ویو پورٹ کے نیچے ایک فوٹر منسلک کریں۔

تجربات

غیر جوابی مثال

غیر ذمہ دار بوٹسٹریپ

ہمارے دستاویزات کے مطابق بوٹسٹریپ کی ردعمل کو آسانی سے غیر فعال کریں ۔

آف کینوس نیویگیشن کی مثال

آف کینوس

بوٹسٹریپ کے ساتھ استعمال کے لیے ٹوگل ایبل آف کینوس نیویگیشن مینو بنائیں۔

اوزار

بوٹ لِنٹ

بوٹ لِنٹ باضابطہ بوٹسٹریپ ایچ ٹی ایم ایل لنٹر ٹول ہے۔ یہ خود بخود ویب صفحات میں متعدد عام HTML غلطیوں کی جانچ پڑتال کرتا ہے جو بوٹسٹریپ کو کافی "ونیلا" طریقے سے استعمال کر رہے ہیں۔ ونیلا بوٹسٹریپ کے اجزاء/ویجیٹس کو DOM کے اپنے حصوں کو مخصوص ڈھانچے کے مطابق کرنے کی ضرورت ہوتی ہے۔ بوٹ لِنٹ چیک کرتا ہے کہ بوٹسٹریپ اجزاء کی مثالوں میں ایچ ٹی ایم ایل کو درست طریقے سے تشکیل دیا گیا ہے۔ اپنے بوٹسٹریپ ویب ڈویلپمنٹ ٹول چین میں بوٹلنٹ شامل کرنے پر غور کریں تاکہ کوئی بھی عام غلطی آپ کے پروجیکٹ کی ترقی کو سست نہ کرے۔

برادری

بوٹسٹریپ کی ترقی پر تازہ ترین رہیں اور ان مددگار وسائل کے ساتھ کمیونٹی تک پہنچیں۔

  • آفیشل بوٹسٹریپ بلاگ کو پڑھیں اور سبسکرائب کریں ۔
  • ##بوٹسٹریپ چینلirc.freenode.net میں سرور میں IRC کا استعمال کرتے ہوئے ساتھی بوٹسٹریپرز کے ساتھ چیٹ کریں ۔
  • بوٹسٹریپ استعمال کرنے میں مدد کے لیے، ٹیگ کا استعمال کرتے ہوئے StackOverflowtwitter-bootstrap-3 پر پوچھیں ۔
  • ڈویلپرز کو پیکیجز پر کلیدی لفظ استعمال کرنا چاہیے جو زیادہ سے زیادہ دریافت کے لیے npmbootstrap یا اسی طرح کے ڈیلیوری میکانزم کے ذریعے تقسیم کرتے وقت بوٹسٹریپ کی فعالیت میں ترمیم یا اضافہ کرتے ہیں ۔
  • بوٹسٹریپ ایکسپو میں بوٹسٹریپ کے ساتھ تعمیر کرنے والے لوگوں کی متاثر کن مثالیں تلاش کریں ۔

آپ تازہ ترین گپ شپ اور زبردست میوزک ویڈیوز کے لیے ٹویٹر پر @getbootstrap کو بھی فالو کر سکتے ہیں ۔

ردعمل کو غیر فعال کرنا

بوٹسٹریپ آپ کے صفحات کو مختلف اسکرین سائزز کے لیے خود بخود ڈھال لیتا ہے۔ اس خصوصیت کو غیر فعال کرنے کا طریقہ یہاں ہے تاکہ آپ کا صفحہ اس غیر جوابی مثال کی طرح کام کرے ۔

صفحہ کی ردعمل کو غیر فعال کرنے کے اقدامات

  1. CSS دستاویزات<meta> میں مذکور ویو پورٹ کو چھوڑ دیں۔
  2. ایک واحد چوڑائی کے ساتھ ہر گرڈ ٹائر کے لیے آن کو اوور رائیڈ کریں، مثال کے طور پر widthیقینی بنائیں کہ یہ ڈیفالٹ بوٹسٹریپ CSS کے بعد آتا ہے۔ آپ اختیاری طور پر میڈیا کے سوالات یا کچھ سلیکٹر فو سے بچ سکتے ہیں۔.containerwidth: 970px !important;!important
  3. اگر navbars استعمال کر رہے ہیں تو، تمام navbar کے ٹوٹنے اور پھیلنے والے رویے کو ہٹا دیں۔
  4. گرڈ لے آؤٹ .col-xs-*کے لیے، درمیانے/بڑے کے علاوہ، یا اس کی جگہ کلاسز کا استعمال کریں۔ پریشان ہونے کی کوئی بات نہیں، اضافی چھوٹے ڈیوائس کا گرڈ تمام ریزولوشنز کے مطابق ہوتا ہے۔

آپ کو اب بھی IE8 کے لیے Respond.js کی ضرورت ہوگی (چونکہ ہمارے میڈیا کے سوالات اب بھی موجود ہیں اور اس پر کارروائی کی ضرورت ہے)۔ یہ بوٹسٹریپ کے "موبائل سائٹ" کے پہلوؤں کو غیر فعال کر دیتا ہے۔

ردعمل کے ساتھ بوٹسٹریپ ٹیمپلیٹ غیر فعال ہے۔

ہم نے ان اقدامات کو ایک مثال پر لاگو کیا ہے۔ لاگو کی گئی مخصوص تبدیلیوں کو دیکھنے کے لیے اس کا سورس کوڈ پڑھیں۔

غیر جوابی مثال دیکھیں

v2.x سے v3.x پر منتقلی

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

انٹرنیٹ ایکسپلورر 8 اور 9 بھی تعاون یافتہ ہیں، تاہم، براہ کرم آگاہ رہیں کہ کچھ CSS3 خصوصیات اور HTML5 عناصر ان براؤزرز کے ذریعے مکمل طور پر تعاون یافتہ نہیں ہیں۔ اس کے علاوہ، انٹرنیٹ ایکسپلورر 8 کو میڈیا استفسار کی حمایت کو فعال کرنے کے لیے Respond.js کے استعمال کی ضرورت ہے۔

فیچر انٹرنیٹ ایکسپلورر 8 انٹرنیٹ ایکسپلورر 9
border-radius سہولت مہیا نہیں حمایت یافتہ
box-shadow سہولت مہیا نہیں حمایت یافتہ
transform سہولت مہیا نہیں تائید شدہ، -msسابقہ ​​کے ساتھ
transition سہولت مہیا نہیں
placeholder سہولت مہیا نہیں

CSS3 اور HTML5 خصوصیات کے براؤزر سپورٹ کے بارے میں تفصیلات کے لیے کیا میں استعمال کر سکتا ہوں... ملاحظہ کریں ۔

Internet Explorer 8 اور Respond.js

Internet Explorer 8 کے لیے اپنی ترقی اور پیداوار کے ماحول میں Respond.js استعمال کرتے وقت درج ذیل انتباہات سے ہوشیار رہیں۔

Respond.js اور کراس ڈومین CSS

ایک مختلف (ذیلی) ڈومین (مثال کے طور پر، CDN پر) پر میزبان CSS کے ساتھ Respond.js استعمال کرنے کے لیے کچھ اضافی سیٹ اپ کی ضرورت ہوتی ہے۔ تفصیلات کے لیے Respond.js دستاویزات دیکھیں۔

Respond.js اورfile://

براؤزر کے حفاظتی اصولوں کی وجہ سے، Respond.js پروٹوکول کے ذریعے دیکھے گئے صفحات کے ساتھ کام نہیں کرتا file://ہے (جیسے مقامی HTML فائل کھولتے وقت)۔ IE8 میں جوابی خصوصیات کو جانچنے کے لیے، HTTP(S) پر اپنے صفحات دیکھیں۔ تفصیلات کے لیے Respond.js دستاویزات دیکھیں۔

Respond.js اور@import

Respond.js CSS کے ساتھ کام نہیں کرتا جس کا حوالہ بذریعہ @importہے۔ خاص طور پر، کچھ ڈروپل کنفیگریشنز کو استعمال کرنے کے لیے جانا جاتا ہے @import۔ تفصیلات کے لیے Respond.js دستاویزات دیکھیں۔

انٹرنیٹ ایکسپلورر 8 اور باکس سائزنگ

IE8 کو , , , یا box-sizing: border-box;کے ساتھ ملا کر مکمل طور پر تعاون نہیں کرتا ۔ اس وجہ سے، v3.0.1 کے مطابق، ہم اب s پر استعمال نہیں کرتے ہیں۔min-widthmax-widthmin-heightmax-heightmax-width.container

انٹرنیٹ ایکسپلورر 8 اور @font-face

@font-faceIE8 کے ساتھ جوڑنے پر کچھ مسائل ہیں :before۔ بوٹسٹریپ اس امتزاج کو اپنے Glyphicons کے ساتھ استعمال کرتا ہے۔ اگر صفحہ کو کیش کیا جاتا ہے، اور ونڈو پر ماؤس کے بغیر لوڈ کیا جاتا ہے (یعنی ریفریش بٹن کو دبائیں یا کسی iframe میں کچھ لوڈ کریں) تو صفحہ فونٹ لوڈ ہونے سے پہلے رینڈر ہو جاتا ہے۔ صفحہ (باڈی) پر منڈلانے سے کچھ شبیہیں نظر آئیں گی اور باقی آئیکنز پر منڈلانے سے وہ بھی دکھائی دیں گے۔ تفصیل کے لیے شمارہ نمبر 13863 دیکھیں۔

IE مطابقت کے طریقوں

بوٹسٹریپ پرانے انٹرنیٹ ایکسپلورر مطابقت کے طریقوں میں تعاون یافتہ نہیں ہے۔ یہ یقینی بنانے کے لیے کہ آپ IE کے لیے جدید ترین رینڈرنگ موڈ استعمال کر رہے ہیں، اپنے صفحات میں مناسب <meta>ٹیگ شامل کرنے پر غور کریں:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

ڈیبگنگ ٹولز کھول کر دستاویز موڈ کی تصدیق کریں: F12"دستاویز موڈ" کو دبائیں اور چیک کریں۔

یہ ٹیگ بوٹسٹریپ کی تمام دستاویزات اور مثالوں میں شامل ہے تاکہ انٹرنیٹ ایکسپلورر کے ہر معاون ورژن میں بہترین رینڈرنگ کو یقینی بنایا جا سکے۔

مزید معلومات کے لیے یہ StackOverflow سوال دیکھیں ۔

ونڈوز 8 اور ونڈوز فون 8 میں انٹرنیٹ ایکسپلورر 10

انٹرنیٹ ایکسپلورر 10 ڈیوائس کی چوڑائی کو ویو پورٹ کی چوڑائی سے الگ نہیں کرتا ہے، اور اس طرح بوٹسٹریپ کے سی ایس ایس میں میڈیا کے سوالات کو مناسب طریقے سے لاگو نہیں کرتا ہے۔ عام طور پر آپ اسے ٹھیک کرنے کے لیے CSS کا ایک فوری ٹکڑا شامل کریں گے:

@-ms-viewport       { width: device-width; }

تاہم، یہ اپ ڈیٹ 3 (عرف GDR3) سے پرانے ونڈوز فون 8 ورژن چلانے والے آلات کے لیے کام نہیں کرتا ہے ، کیونکہ اس کی وجہ سے ایسے آلات تنگ "فون" منظر کے بجائے زیادہ تر ڈیسک ٹاپ ویو دکھاتے ہیں۔ اس سے نمٹنے کے لیے، آپ کو بگ کے ارد گرد کام کرنے کے لیے درج ذیل CSS اور JavaScript کو شامل کرنے کی ضرورت ہوگی ۔

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

مزید معلومات اور استعمال کے رہنما خطوط کے لیے، 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 ۔

iOS ٹیکسٹ فیلڈز اور سکرولنگ

<input>iOS 9.3 کے مطابق، جب ایک موڈل کھلا ہے، اگر اسکرول کے اشارے کا ابتدائی ٹچ ٹیکسٹول یا a کی حدود میں ہے <textarea>، <body>تو موڈل کے نیچے موجود مواد کو موڈل کے بجائے اسکرول کیا جائے گا۔ WebKit بگ #153856 دیکھیں ۔

ورچوئل کی بورڈز

اس کے علاوہ، نوٹ کریں کہ اگر آپ فکسڈ نیوبار استعمال کر رہے ہیں یا موڈل میں ان پٹ استعمال کر رہے ہیں، تو iOS میں ایک رینڈرنگ بگ ہے جو ورچوئل کی بورڈ کے متحرک ہونے پر فکسڈ عناصر کی پوزیشن کو اپ ڈیٹ نہیں کرتا ہے۔ اس کے لیے چند کاموں میں اپنے عناصر کو تبدیل کرنا position: absoluteیا دستی طور پر پوزیشننگ کو درست کرنے کی کوشش کرنے کے لیے فوکس پر ٹائمر لگانا شامل ہے۔ یہ بوٹسٹریپ کے ذریعے نہیں سنبھالا جاتا ہے، لہذا یہ آپ پر منحصر ہے کہ آپ کی درخواست کے لیے کون سا حل بہترین ہے۔

.dropdown-backdropz-انڈیکسنگ کی پیچیدگی کی وجہ سے عنصر کو nav میں iOS پر استعمال نہیں کیا جاتا ہے ۔ اس طرح، navbars میں ڈراپ ڈاؤن کو بند کرنے کے لیے، آپ کو براہ راست ڈراپ ڈاؤن عنصر پر کلک کرنا ہوگا (یا کوئی دوسرا عنصر جو iOS میں کلک ایونٹ کو فائر کرے گا

براؤزر زومنگ

صفحہ زوم کرنا ناگزیر طور پر بوٹسٹریپ اور باقی ویب دونوں میں، کچھ اجزاء میں پیش کرنے والے نمونے پیش کرتا ہے۔ مسئلے پر منحصر ہے، ہم اسے ٹھیک کرنے کے قابل ہو سکتے ہیں (پہلے تلاش کریں اور پھر ضرورت پڑنے پر مسئلہ کھولیں)۔ تاہم، ہم ان کو نظر انداز کرتے ہیں کیونکہ ان کے پاس اکثر ہیکی ورک آراؤنڈز کے علاوہ کوئی براہ راست حل نہیں ہوتا ہے۔

چپچپا :hover/ :focusموبائل پر

اگرچہ زیادہ تر ٹچ اسکرینوں پر حقیقی منڈلانا ممکن نہیں ہے، زیادہ تر موبائل براؤزرز ہوورنگ سپورٹ کی تقلید کرتے ہیں اور :hover"چپچپا" بناتے ہیں۔ دوسرے لفظوں میں، :hoverاسٹائل کسی عنصر کو ٹیپ کرنے کے بعد لاگو ہونا شروع کردیتے ہیں اور صارف کسی دوسرے عنصر کو ٹیپ کرنے کے بعد ہی درخواست دینا بند کردیتا ہے۔ یہ بوٹسٹریپ کی :hoverریاستوں کو ایسے براؤزرز پر ناپسندیدہ طور پر "پھنس" جانے کا سبب بن سکتا ہے۔ کچھ موبائل براؤزر بھی :focusاسی طرح چپچپا بناتے ہیں۔ ان مسائل کے لیے فی الحال اس طرح کے انداز کو مکمل طور پر ہٹانے کے علاوہ کوئی آسان حل نہیں ہے۔

پرنٹنگ

یہاں تک کہ کچھ جدید براؤزرز میں بھی پرنٹنگ نرالی ہو سکتی ہے۔

خاص طور پر، Chrome v32 کے مطابق اور مارجن کی ترتیبات سے قطع نظر، کروم ویب صفحہ پرنٹ کرتے وقت میڈیا کے سوالات کو حل کرتے وقت فزیکل پیپر سائز سے نمایاں طور پر تنگ ویو پورٹ کی چوڑائی کا استعمال کرتا ہے۔ اس کے نتیجے میں بوٹسٹریپ کی اضافی چھوٹی گرڈ پرنٹنگ کے وقت غیر متوقع طور پر فعال ہو سکتی ہے۔ کچھ تفصیلات کے لیے شمارہ #12078 اور کروم بگ #273306 دیکھیں۔ تجویز کردہ حل:

  • اضافی چھوٹے گرڈ کو گلے لگائیں اور یقینی بنائیں کہ آپ کا صفحہ اس کے نیچے قابل قبول نظر آتا ہے۔
  • کم متغیرات کی قدروں کو حسب ضرورت بنائیں @screen-*تاکہ آپ کا پرنٹر پیپر اضافی چھوٹے سے بڑا سمجھا جائے۔
  • صرف پرنٹ میڈیا کے لیے گرڈ سائز بریک پوائنٹس کو تبدیل کرنے کے لیے حسب ضرورت میڈیا سوالات شامل کریں۔

نیز، Safari v8.0 کے مطابق، فکسڈ چوڑائی .containers سفاری کو پرنٹنگ کے وقت غیر معمولی طور پر چھوٹے فونٹ سائز استعمال کرنے کا سبب بن سکتی ہے۔ مزید تفصیلات کے لیے دیکھیں #14868 اور WebKit بگ #138192 ۔ اس کے لیے ایک ممکنہ حل درج ذیل سی ایس ایس کو شامل کرنا ہے۔

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

اینڈرائیڈ اسٹاک براؤزر

باکس سے باہر، Android 4.1 (اور یہاں تک کہ بظاہر کچھ نئی ریلیزز بھی) براؤزر ایپ کے ساتھ بطور ڈیفالٹ ویب براؤزر (کروم کے برخلاف) بھیجتا ہے۔ بدقسمتی سے، براؤزر ایپ میں عام طور پر CSS کے ساتھ بہت سارے کیڑے اور تضادات ہیں۔

مینو منتخب کریں۔

عناصر پر ، اگر کوئی اور/یا اطلاق ہوتا <select>ہے تو Android اسٹاک براؤزر سائیڈ کنٹرولز کو ظاہر نہیں کرے گا ۔ ( تفصیلات کے لیے یہ StackOverflow سوال دیکھیں۔) گستاخانہ CSS کو ہٹانے کے لیے نیچے کوڈ کا ٹکڑا استعمال کریں اور اسے اینڈرائیڈ اسٹاک براؤزر پر غیر اسٹائل شدہ عنصر کے طور پر پیش کریں۔ صارف ایجنٹ سونگھنا کروم، سفاری، اور موزیلا براؤزرز کے ساتھ مداخلت سے گریز کرتا ہے۔border-radiusborder<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>

ایک مثال دیکھنا چاہتے ہیں؟ یہ جے ایس بن ڈیمو چیک کریں۔

تصدیق کرنے والے

پرانے اور چھوٹی چھوٹی براؤزرز کو بہترین ممکنہ تجربہ فراہم کرنے کے لیے، بوٹسٹریپ کئی جگہوں پر سی ایس ایس براؤزر ہیکس کا استعمال کرتا ہے تاکہ مخصوص سی ایس ایس کو مخصوص براؤزر ورژنز کو نشانہ بنایا جا سکے تاکہ براؤزرز میں موجود کیڑے کو دور کیا جا سکے۔ یہ ہیکس سی ایس ایس کی توثیق کرنے والوں کو یہ شکایت کرنے کا سبب بنتے ہیں کہ وہ غلط ہیں۔ ایک دو جگہوں پر، ہم بلیڈنگ ایج سی ایس ایس کی خصوصیات بھی استعمال کرتے ہیں جو ابھی تک مکمل طور پر معیاری نہیں ہیں، لیکن ان کا استعمال خالصتاً ترقی پسندانہ اضافہ کے لیے کیا جاتا ہے۔

توثیق کے ان انتباہات سے عملی طور پر کوئی فرق نہیں پڑتا ہے کیونکہ ہمارے سی ایس ایس کا غیر ہیکی حصہ پوری طرح سے توثیق کرتا ہے اور ہیکی حصے غیر ہیکی والے حصے کے مناسب کام میں مداخلت نہیں کرتے ہیں، اس لیے ہم جان بوجھ کر ان مخصوص انتباہات کو کیوں نظر انداز کرتے ہیں۔

اسی طرح ہمارے HTML دستاویزات میں کچھ معمولی اور غیر ضروری HTML توثیق کے انتباہات ہیں جس کی وجہ سے ایک مخصوص فائر فاکس بگ کے لیے ہمارے حل کو شامل کیا گیا ہے ۔

تھرڈ پارٹی سپورٹ

اگرچہ ہم باضابطہ طور پر کسی تھرڈ پارٹی پلگ ان یا ایڈ آنز کی حمایت نہیں کرتے ہیں، لیکن ہم آپ کے پروجیکٹس میں ممکنہ مسائل سے بچنے میں مدد کے لیے کچھ مفید مشورے پیش کرتے ہیں۔

باکس سائزنگ

کچھ فریق ثالث سافٹ ویئر، بشمول Google Maps اور Google Custom Search Engine، بوٹسٹریپ کے ساتھ تصادم کی وجہ سے * { box-sizing: border-box; }، ایک اصول جس کی وجہ سے یہ paddingکسی عنصر کی حتمی کمپیوٹیڈ چوڑائی کو متاثر نہیں کرتا ہے۔ سی ایس ایس ٹرکس پر باکس ماڈل اور سائزنگ کے بارے میں مزید جانیں ۔

سیاق و سباق پر منحصر ہے، آپ حسب ضرورت (آپشن 1) کو اوور رائڈ کر سکتے ہیں یا پورے خطوں کے لیے باکس کے سائز کو دوبارہ ترتیب دے سکتے ہیں (آپشن 2)۔

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

رسائی

بوٹسٹریپ عام ویب معیارات کی پیروی کرتا ہے اور — کم سے کم اضافی کوشش کے ساتھ — ایسی سائٹس بنانے کے لیے استعمال کیا جا سکتا ہے جو AT استعمال کرنے والوں کے لیے قابل رسائی ہوں ۔

نیویگیشن کو چھوڑیں۔

اگر آپ کی نیویگیشن بہت سے لنکس پر مشتمل ہے اور DOM میں مرکزی مواد سے پہلے آتی ہے، Skip to main contentتو نیویگیشن سے پہلے ایک لنک شامل کریں (ایک آسان وضاحت کے لیے، نیویگیشن لنکس کو چھوڑنے پر یہ A11Y پروجیکٹ مضمون دیکھیں )۔ کلاس کا استعمال کرنے .sr-onlyسے اسکیپ لنک کو بصری طور پر چھپ جائے گا، اور .sr-only-focusableکلاس اس بات کو یقینی بنائے گی کہ لنک ایک بار فوکس کرنے کے بعد نظر آئے گا (دیکھنے والے کی بورڈ صارفین کے لیے)۔

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

نیسٹڈ ہیڈنگز

جب nesting عنوانات ( <h1>- <h6>)، تو آپ کا بنیادی دستاویز کا ہیڈر ہونا چاہیے <h1>۔ اس کے بعد کی سرخیوں کو منطقی استعمال کرنا چاہیے <h2>- <h6>اس طرح کہ اسکرین ریڈرز آپ کے صفحات کے لیے مواد کا ایک جدول بنا سکیں۔

HTML CodeSniffer اور Penn State's AccessAbility پر مزید جانیں ۔

رنگ کے برعکس

فی الحال، بوٹسٹریپ میں دستیاب کچھ ڈیفالٹ رنگوں کے مجموعے (جیسے مختلف اسٹائلڈ بٹن کلاسز، بنیادی کوڈ بلاکس کے لیے استعمال ہونے والے کوڈ کو نمایاں کرنے والے کچھ رنگ ، سیاق و .bg-primary سباق کے پس منظر میں مددگار کلاس، اور سفید پس منظر پر استعمال ہونے پر پہلے سے طے شدہ لنک کا رنگ) کنٹراسٹ کا تناسب کم ہے ( 4.5:1 کے تجویز کردہ تناسب سے نیچے )۔ اس سے کم بینائی والے یا رنگین اندھے صارفین کے لیے مسائل پیدا ہو سکتے ہیں۔ ان پہلے سے طے شدہ رنگوں کو ان کے تضاد اور قابل قبولیت کو بڑھانے کے لیے تبدیل کرنے کی ضرورت پڑ سکتی ہے۔

اضافی وسائل

لائسنس کے اکثر پوچھے گئے سوالات

بوٹسٹریپ MIT لائسنس کے تحت جاری کیا گیا ہے اور کاپی رائٹ 2019 ٹویٹر ہے۔ چھوٹے ٹکڑوں میں ابال کر اسے درج ذیل شرائط کے ساتھ بیان کیا جا سکتا ہے۔

یہ آپ سے تقاضا کرتا ہے کہ:

  • Bootstrap کی CSS اور JavaScript فائلوں کو اپنے کاموں میں استعمال کرتے وقت لائسنس اور کاپی رائٹ نوٹس کو شامل رکھیں

یہ آپ کو اجازت دیتا ہے:

  • بوٹسٹریپ کو مکمل یا جزوی طور پر ذاتی، نجی، کمپنی کے اندرونی، یا تجارتی مقاصد کے لیے آزادانہ طور پر ڈاؤن لوڈ اور استعمال کریں۔
  • بوٹسٹریپ ان پیکجوں یا تقسیم میں استعمال کریں جو آپ بناتے ہیں۔
  • سورس کوڈ میں ترمیم کریں۔
  • بوٹسٹریپ میں ترمیم اور تقسیم کرنے کے لیے ایک ذیلی لائسنس فراہم کریں جو لائسنس میں شامل نہیں ہے۔

یہ آپ کو منع کرتا ہے:

  • مصنفین اور لائسنس کے مالکان کو ہرجانے کا ذمہ دار ٹھہرائیں کیونکہ بوٹسٹریپ بغیر وارنٹی کے فراہم کیا جاتا ہے۔
  • بوٹسٹریپ کے تخلیق کاروں یا کاپی رائٹ ہولڈرز کو ذمہ دار ٹھہرائیں۔
  • بوٹسٹریپ کے کسی بھی ٹکڑے کو مناسب انتساب کے بغیر دوبارہ تقسیم کریں۔
  • ٹویٹر کی ملکیت والے کسی بھی نشان کو کسی بھی طریقے سے استعمال کریں جس سے یہ بیان ہو یا اس کا مطلب ہو کہ ٹویٹر آپ کی تقسیم کی توثیق کرتا ہے۔
  • ٹویٹر کی ملکیت والے کسی بھی نشان کو کسی بھی طرح سے استعمال کریں جس سے یہ بیان ہو یا اس کا مطلب ہو کہ آپ نے ٹویٹر سافٹ ویئر کو زیر بحث بنایا ہے۔

اس کی آپ کو ضرورت نہیں ہے:

  • خود بوٹسٹریپ کا ماخذ شامل کریں، یا کسی بھی ترمیم کو جو آپ نے اس میں کی ہو، کسی بھی دوبارہ تقسیم میں جو آپ جمع کر سکتے ہیں جس میں یہ شامل ہو
  • جو تبدیلیاں آپ بوٹسٹریپ میں کرتے ہیں انہیں بوٹسٹریپ پروجیکٹ میں واپس بھیجیں (حالانکہ اس طرح کے تاثرات کی حوصلہ افزائی کی جاتی ہے)

مکمل بوٹسٹریپ لائسنس مزید معلومات کے لیے پروجیکٹ کے ذخیرے میں موجود ہے ۔

ترجمے

کمیونٹی کے اراکین نے بوٹسٹریپ کی دستاویزات کا مختلف زبانوں میں ترجمہ کیا ہے۔ کوئی بھی سرکاری طور پر تعاون یافتہ نہیں ہے اور ہوسکتا ہے کہ وہ ہمیشہ اپ ٹو ڈیٹ نہ ہوں۔

ہم ترجمے کو ترتیب دینے یا میزبانی کرنے میں مدد نہیں کرتے، ہم صرف ان سے لنک کرتے ہیں۔

نیا یا بہتر ترجمہ مکمل کیا؟ اسے ہماری فہرست میں شامل کرنے کے لیے پل کی درخواست کھولیں۔