شروعات ڪرڻ · بوٽ اسٽريپ سنڌي ۾

بوٽ اسٽريپ (في الحال v3.4.1) کي تڪڙو شروع ڪرڻ لاءِ ڪجھ آسان طريقا آھن، ھر ھڪ کي مختلف مهارت جي سطح ۽ استعمال جي صورت ۾ اپيل آھي. پڙهو ته ڏسو ته ڇا توهان جي خاص ضرورتن کي پورو ڪري ٿو.

بوٽ اسٽريپ

سي ايس ايس، جاوا اسڪرپٽ، ۽ فونٽس کي مرتب ۽ گھٽ ڪيو ويو. ڪابه دستاويز يا اصل ماخذ فائلون شامل نه آهن.

ڊائون لوڊ ڪريو Bootstrap

سورس ڪوڊ

ماخذ گهٽ، جاوا اسڪرپٽ، ۽ فونٽ فائلون، اسان جي دستاويزن سان گڏ. گھٽ مرتب ڪندڙ ۽ ڪجھ سيٽ اپ جي ضرورت آھي.

ڊائون لوڊ جو ذريعو

ساس

ريل، ڪمپاس، يا صرف ساس منصوبن ۾ آسان شموليت لاءِ بوٽ اسٽريپ گھٽ کان ساس تائين پورٽ ڪيو ويو .

ڊائون لوڊ ڪريو ساس

jsDelivr

jsDelivr تي ماڻهو مهربانيءَ سان بوٽ اسٽريپ جي سي ايس ايس ۽ جاوا اسڪرپٽ لاءِ 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 استعمال ڪندي بوٽ اسٽراپ پڻ انسٽال ڪري سگھو ٿا :

npm install bootstrap@3

require('bootstrap')بوٽ اسٽريپ جي سڀني jQuery پلگ ان کي jQuery اعتراض تي لوڊ ڪندي. bootstrapماڊل پاڻ ڪجھ به برآمد نٿو ڪري . توھان دستي طور تي بوٽ اسٽريپ جي jQuery پلگ ان کي انفرادي طور تي لوڊ ڪري سگھو ٿا /js/*.jsفائلن کي لوڊ ڪندي پيڪيج جي مٿين سطح جي ڊاريڪٽري ۾.

Bootstrap جي package.jsonھيٺين ڪنجين ھيٺ ڪجھ اضافي ميٽا ڊيٽا تي مشتمل آھي:

less- بوٽ اسٽريپ جي مکيه گھٽ ماخذ فائل ڏانهن رستو
style- بوٽ اسٽريپ جي غير منجھيل سي ايس ايس جو رستو جيڪو ڊفالٽ سيٽنگون استعمال ڪندي اڳ ۾ ٺھيل آھي (ڪابه حسب ضرورت نه آھي)

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

توهان ڪمپوزر استعمال ڪندي بوٽ اسٽريپ جي گهٽ، سي ايس ايس، جاوا اسڪرپٽ ۽ فونٽس کي انسٽال ۽ منظم ڪري سگهو ٿا :

composer require twbs/bootstrap

گھٽ/ساس لاءِ آٽو پريفيڪسر گھربل آھي

Bootstrap استعمال ڪري ٿو Autoprefixer CSS وينڊر جي اڳڪٿين سان ڊيل ڪرڻ لاءِ . جيڪڏهن توهان Bootstrap کي ان جي Less/Sass ماخذ کان مرتب ڪري رهيا آهيو ۽ اسان جي Gruntfile استعمال نه ڪري رهيا آهيو، توهان کي پنهنجي تعمير جي عمل ۾ Autoprefixer کي ضم ڪرڻ جي ضرورت پوندي. جيڪڏهن توهان اڳ ۾ ٺهيل بوٽ اسٽريپ استعمال ڪري رهيا آهيو يا اسان جي گرنٽ فائل استعمال ڪري رهيا آهيو، توهان کي ان بابت پريشان ٿيڻ جي ضرورت ناهي ڇو ته Autoprefixer اڳ ۾ ئي اسان جي گرنٽ فائل ۾ ضم ٿيل آهي.

بوٽ اسٽريپ ٻن شڪلن ۾ ڊائون لوڊ ڪري سگھجي ٿو، جنھن ۾ توھان ھيٺيون ڊاريڪٽريون ۽ فائلون ڳوليندا، منطقي طور تي عام وسيلن کي گروپ ڪرڻ ۽ مرتب ڪيل ۽ گھٽ ۾ گھٽ متغيرات مهيا ڪرڻ.

jQuery گهربل

مهرباني ڪري نوٽ ڪريو ته سڀني جاوا اسڪرپٽ پلگ ان کي شامل ڪرڻ جي ضرورت آهي jQuery ، جيئن ڏيکاريل آهي اسٽارٽر ٽيمپليٽ . اسانbower.json سان صلاح ڪريو ته ڏسو jQuery جا ڪهڙا نسخا سپورٽ آهن.

Precompiled Bootstrap

هڪ دفعو ڊائون لوڊ ٿيڻ بعد، ڪمپريس ٿيل فولڊر کي ان زپ ڪريو (مرتب ٿيل) بوٽ اسٽريپ جي ساخت کي ڏسڻ لاءِ. توھان ڪجھھ ھن وانگر ڏسندا:

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.*، گڏوگڏ مرتب ڪيل ۽ گھٽ ڪيل CSS ۽ JS ( bootstrap.min.*). CSS ماخذ نقشا ( bootstrap.*.map) خاص برائوزرن جي ڊولپر اوزارن سان استعمال لاءِ موجود آھن. Glyphicons مان فانٽ شامل آهن، جيئن اختياري بوٽ اسٽريپ موضوع آهي.

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

بوٽ اسٽريپ سورس ڪوڊ ڊائون لوڊ ۾ اڳ ۾ ٺهيل سي ايس ايس، جاوا اسڪرپٽ، ۽ فونٽ اثاثا، ماخذ گهٽ، جاوا اسڪرپٽ، ۽ دستاويزن سان گڏ شامل آهن. خاص طور تي، ان ۾ ھيٺيون ۽ وڌيڪ شامل آھن:

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

اسان جي 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 حڪم

`grunt dist`(صرف سي ايس ايس ۽ جاوا اسڪرپٽ گڏ ڪريو)

ڊاريڪٽري /dist/کي مرتب ڪيل ۽ گھٽ ۾ گھٽ CSS ۽ JavaScript فائلن سان گڏ ڪري ٿو. بوٽ اسٽراپ صارف جي طور تي، اهو عام طور تي حڪم آهي جيڪو توهان چاهيو ٿا.

`grunt watch`(ڏس)

گھٽ ماخذ فائلن کي ڏسي ٿو ۽ پاڻمرادو انھن کي سي ايس ايس ۾ ٻيهر ٺاھي ٿو جڏھن توھان ڪا تبديلي محفوظ ڪريو.

`grunt test`(ٽيسٽ هلائڻ)

JSHint هلائي ٿو ۽ حقيقي برائوزرن ۾ QUnit ٽيسٽ هلائي ٿو ڪرما جي مهرباني .

`grunt docs`(ڊاڪس اثاثن جي تعمير ۽ جانچ ڪريو)

CSS، JavaScript، ۽ ٻيا اثاثا ٺاهي ۽ ٽيسٽ ڪري ٿو جيڪي استعمال ڪيا ويندا آهن جڏهن دستاويزن کي مقامي طور تي هلائڻ دوران bundle exec jekyll serve.

`grunt`(بلڪل هر شي ٺاهيو ۽ ٽيسٽ هلائي)

CSS ۽ JavaScript کي گڏ ڪري ٿو ۽ گھٽائي ٿو، دستاويزن جي ويب سائيٽ ٺاهي ٿو، HTML5 جي تصديق ڪندڙ کي دستاويزن جي خلاف هلائي ٿو، ڪسٽمائيزر اثاثن کي ٻيهر ٺاهي ٿو، ۽ وڌيڪ. Jekyll جي ضرورت آهي . عام طور تي صرف ضروري آهي جيڪڏهن توهان بوٽ اسٽراپ تي هيڪنگ ڪري رهيا آهيو.

مشڪلاتون

ڇا توهان کي انحصار کي نصب ڪرڻ يا Grunt حڪمن کي هلائڻ ۾ مشڪلاتن سان منهن ڏيڻ گهرجي، پهرين /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/ڊاريڪٽري ۾ مثال ڳولي سگهجن ٿا .

فريم ورڪ استعمال ڪندي

شروعاتي ٽيمپليٽ

ڪجھ به نه پر بنياديات: مرتب ڪيل CSS ۽ جاوا اسڪرپٽ سان گڏ ڪنٽينر.

بوٽ اسٽريپ موضوع

بصري طور تي بهتر تجربي لاءِ اختياري بوٽ اسٽريپ موضوع لوڊ ڪريو.

گرڊس

گھڻن مثالن جا گرڊ لي آئوٽ سڀني چئن درجن سان گڏ، nesting، ۽ وڌيڪ.

جمبوترون

نيوبار ۽ ڪجهه بنيادي گرڊ ڪالمن سان جمبوٽرون جي چوڌاري ٺاهيو.

تنگ جمبوترون

ڊفالٽ ڪنٽينر ۽ جمبوٽرون کي تنگ ڪندي وڌيڪ ڪسٽم پيج ٺاهيو.

��مل ۾ Navbars

نوبار

سپر بنيادي ٽيمپليٽ جنهن ۾ نيوبار شامل آهي ڪجهه اضافي مواد سان گڏ.

جامد مٿين نيوبار

سپر بنيادي ٽيمپليٽ جامد مٿين نيوبار سان گڏ ڪجهه اضافي مواد سان.

مقرر ٿيل نيوبار

سپر بنيادي ٽيمپليٽ هڪ مقرر مٿين نيوبار سان گڏ ڪجهه اضافي مواد سان گڏ.

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

ڍڪڻ

سادو ۽ خوبصورت گهر صفحا ٺاهڻ لاءِ هڪ صفحو سانچو.

ڪارونجهر

نيوبار ۽ ڪارسيل کي ترتيب ڏيو، پوء ڪجھ نوان حصا شامل ڪريو.

بلاگ

سادي ٻن ڪالمن واري بلاگ ترتيب سان ڪسٽم نيويگيشن، هيڊر، ۽ قسم.

ڊيش بورڊ

مقرر ٿيل سائڊبار ۽ نيوبار سان گڏ منتظم ڊيش بورڊ لاءِ بنيادي جوڙجڪ.

سائن ان صفحو

هڪ سادي سائن ان فارم لاءِ حسب ضرورت فارم جي ترتيب ۽ ڊيزائن.

جواز ٿيل نيوي

ٺاھو ٺاھيو ھڪ حسب ضرورت نيوبار سان صحيح لنڪ سان. اٿو! نه تمام سفاري دوستانه.

لچڪدار فوٽر

وييو پورٽ جي تري ۾ فوٽر ڳنڍيو جڏهن مواد ان کان ننڍو هجي.

نيوبار سان گڏ چپپڻ وارو فوٽر

ويوپورٽ جي تري ۾ فوٽر سان ڳنڍيو مٿي تي مقرر ڪيل نيوبار سان.

تجربا

غير جوابي بوٽ اسٽراپ

اسان جي دستاويزن جي مطابق Bootstrap جي ردعمل کي آساني سان بند ڪريو .

آف ڪنوس

بوٽ اسٽريپ سان استعمال ڪرڻ لاءِ ٽوگليبل آف-ڪينوس نيويگيشن مينيو ٺاهيو.

بوٽ لِنٽ

Bootlint سرڪاري Bootstrap HTML linter اوزار آهي. اهو خودڪار طريقي سان چيڪ ڪري ٿو ڪيترن ئي عام HTML غلطين لاءِ ويب پيجز ۾ جيڪي بوٽ اسٽريپ استعمال ڪري رهيا آهن بلڪل "وينلا" طريقي سان. Vanilla Bootstrap جي اجزاء/ويجيٽس کي DOM جي انهن حصن جي ضرورت هوندي آهي ته جيئن ڪجهه ساختن جي مطابق هجي. Bootlint چيڪ ڪري ٿو ته بوٽ اسٽريپ اجزاء جا مثال صحيح ترتيب ڏنل HTML آهن. Bootlint کي پنھنجي بوٽ اسٽريپ ويب ڊولپمينٽ ٽول چين ۾ شامل ڪرڻ تي غور ڪريو ته جيئن عام غلطين مان ڪو به توھان جي پروجيڪٽ جي ترقي کي سست نه ڪري.

Bootstrap جي ترقي تي تازه ترين رهو ۽ انهن مددگار وسيلن سان ڪميونٽي تائين پهچ.

پڙهو ۽ رڪنيت حاصل ڪريو سرڪاري بوٽ اسٽريپ بلاگ .
##bootstrap چينلirc.freenode.net ۾، سرور ۾ IRC استعمال ڪندي ساٿي بوٽ اسٽريپرز سان چيٽ ڪريو .
Bootstrap استعمال ڪرڻ ۾ مدد لاءِ ، ٽيگ استعمال ڪندي StackOverflowtwitter-bootstrap-3 تي پڇو .
ڊولپرز کي پيڪيجز تي لفظ استعمال ڪرڻ گهرجي bootstrapجيڪي بوٽ اسٽريپ جي ڪارڪردگي ۾ ترميم يا شامل ڪن ٿا جڏهن npm ذريعي ورهائي رهيا آهن يا وڌ ۾ وڌ دريافت ڪرڻ لاءِ ساڳي ترسيل ميڪانيزم.
بوٽ اسٽريپ ايڪسپو ۾ بوٽ اسٽريپ سان تعمير ڪندڙ ماڻهن جا متاثر ڪندڙ مثال ڳوليو .

توهان به فالو ڪري سگهو ٿا @getbootstrap Twitter تي جديد گپ شپ ۽ بهترين ميوزڪ ويڊيوز لاءِ.

بوٽ اسٽريپ خودڪار طريقي سان توهان جي صفحن کي مختلف اسڪرين جي سائزن لاءِ ترتيب ڏئي ٿو. ھتي آھي ھن خصوصيت کي ڪيئن غير فعال ڪجي تنھنڪري توھان جو صفحو ھن غير جوابي مثال وانگر ڪم ڪري .

صفحي جي ردعمل کي غير فعال ڪرڻ لاء قدم

CSS دستاويزن<meta> ۾ ذڪر ڪيل viewport کي ختم ڪريو
اوور رائڊ widthتي .containerهر گرڊ ٽائر لاءِ ھڪڙي ويڪر سان، مثال طور width: 970px !important;پڪ ڪريو ته اھو اچي ٿو ڊفالٽ بوٽ اسٽريپ CSS کان پوءِ. توھان اختياري طور کان پاسو ڪري سگھو ٿا !importantميڊيا جي سوالن سان يا ڪجھ سليڪٽر-فو سان.
جيڪڏهن نيوبار استعمال ڪريو، سڀ نيوبار ختم ڪرڻ ۽ وڌائڻ واري رويي کي ختم ڪريو.
گرڊ ترتيبن لاءِ .col-xs-*، وچولي/وڏين جي اضافي ۾، يا ان جي جاءِ تي ڪلاس استعمال ڪريو. پريشان نه ڪريو، اضافي-ننڍو ڊوائيس گرڊ سڀني قراردادن تي اسڪيل.

توهان کي اڃا به IE8 لاءِ Respond.js جي ضرورت پوندي (جيئن ته اسان جا ميڊيا سوال اڃا تائين موجود آهن ۽ پروسيس ٿيڻ جي ضرورت آهي). هي بوٽ اسٽراپ جي "موبائيل سائيٽ" جي حصن کي غير فعال ڪري ٿو.

جواب ڏيڻ سان بوٽ اسٽريپ ٽيمپليٽ غير فعال

اسان انهن قدمن کي هڪ مثال تي لاڳو ڪيو آهي. پڙهو ان جو سورس ڪوڊ ڏسڻ لاءِ مخصوص تبديليون لاڳو ٿيل آهن.

غير جوابي مثال ڏسو

v2.x کان v3.x ڏانهن لڏپلاڻ

جي هڪ پراڻي نسخو کان لڏپلاڻ ڪري رهيا آهيو Bootstrap v3.x ? اسان جي لڏپلاڻ جي گائيڊ چيڪ ڪريو .

بوٽ اسٽريپ جديد ڊيسڪ ٽاپ ۽ موبائل برائوزرن ۾ بھترين ڪم ڪرڻ لاءِ ٺاھيو ويو آھي، مطلب ته پراڻا برائوزر شايد مختلف انداز سان ڏيکاري سگھن ٿا، جيتوڻيڪ مڪمل طور تي فعال، خاص حصن جي رينڊرنگ.

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

خاص طور تي، اسان هيٺين برائوزرن ۽ پليٽ فارمن جي جديد ورزن جي حمايت ڪندا آهيون.

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

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

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

	ڪروم	فائر فاڪس	سفاري
Android	حمايت ڪئي	حمايت ڪئي	N/A
iOS	حمايت ڪئي	حمايت ڪئي	حمايت ڪئي

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

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

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

ونڊوز تي، اسان سپورٽ ڪريون ٿا Internet Explorer 8-11 .

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

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

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

انٽرنيٽ ايڪسپلورر 8 ۽ 9

انٽرنيٽ ايڪسپلورر 8 ۽ 9 پڻ سپورٽ ٿيل آهن، جڏهن ته، مهرباني ڪري آگاهه رهو ته ڪجهه CSS3 پراپرٽيز ۽ HTML5 عناصر انهن برائوزرن سان مڪمل طور تي سهڪار نه ڪندا آهن. ان کان علاوه، انٽرنيٽ ايڪسپلورر 8 کي ميڊيا سوالن جي مدد کي فعال ڪرڻ لاءِ Respond.js جي استعمال جي ضرورت آهي.

خاصيت	انٽرنيٽ ايڪسپلورر 8	انٽرنيٽ ايڪسپلورر 9
`border-radius`	سپورٽ ناهي	حمايت ڪئي
`box-shadow`	سپورٽ ناهي	حمايت ڪئي
`transform`	سپورٽ ناهي	حمايت ٿيل، `-ms`اڳڀرائي سان
`transition`	سپورٽ ناهي
`placeholder`	سپورٽ ناهي

دورو ڪريو ڇا مان استعمال ڪري سگھان ٿو... CSS3 ۽ HTML5 خاصيتن جي برائوزر سپورٽ تي تفصيل لاءِ.

انٽرنيٽ ايڪسپلورر 8 ۽ Respond.js

انٽرنيٽ ايڪسپلورر 8 لاءِ پنهنجي ڊولپمينٽ ۽ پيداواري ماحول ۾ Respond.js استعمال ڪرڻ وقت هيٺين خبردارين کان بچو.

Respond.js ۽ ڪراس ڊومين CSS

استعمال ڪندي Respond.js سان CSS جي ميزباني هڪ مختلف (ذيلي) ڊومين تي (مثال طور، هڪ CDN تي) ڪجهه اضافي سيٽ اپ جي ضرورت آهي. تفصيل لاءِ Respond.js دستاويز ڏسو.

جواب ڏيو.js ۽`file://`

برائوزر سيڪيورٽي ضابطن جي ڪري، Respond.js file://پروٽوڪول ذريعي ڏٺل صفحن سان ڪم نٿو ڪري (جهڙوڪ جڏهن مقامي HTML فائل کولڻ وقت). IE8 ۾ جوابي خصوصيتن کي جانچڻ لاءِ، پنهنجا صفحا HTTP(S) تي ڏسو. تفصيل لاءِ Respond.js دستاويز ڏسو.

جواب ڏيو.js ۽`@import`

Respond.js CSS سان ڪم نٿو ڪري جنهن جي ذريعي حوالو ڏنو ويو آهي @import. خاص طور تي، ڪجھ ڊروپل ترتيبون استعمال ڪرڻ لاء سڃاتل آھن @import. تفصيل لاءِ Respond.js دستاويز ڏسو.

انٽرنيٽ ايڪسپلورر 8 ۽ باڪس-سائيزنگ

IE8 مڪمل طور تي سپورٽ نٿو ڪري box-sizing: border-box;جڏهن min-width, max-width, min-height, or max-height. max-widthانهي سبب لاء، v3.0.1 جي طور تي ، اسان وڌيڪ استعمال نٿا ڪريون .containers.

انٽرنيٽ ايڪسپلورر 8 ۽ @font-face

IE8 سان گڏ ڪجهه مسئلا آهن @font-faceجڏهن سان گڏ :before. بوٽ اسٽريپ ان ميلاپ کي استعمال ڪري ٿو ان جي گليفيڪن سان. جيڪڏهن ڪو صفحو ڪيش ٿيل آهي، ۽ ونڊو مٿان ماؤس کان سواءِ لوڊ ڪيو ويو آهي (يعني ريفريش بٽڻ کي دٻايو يا iframe ۾ ڪا شيءِ لوڊ ڪريو) ته پوءِ صفحو فونٽ لوڊ ٿيڻ کان اڳ رينجر ٿي ويندو. صفحي (جسم) تي هور ڪرڻ سان ڪجھ آئڪن ڏيکاريا ويندا ۽ باقي آئڪن تي ھور ڪرڻ سان اھي ڏيکاريا ويندا. تفصيل لاءِ ڏسو شمارو نمبر 13863 .

IE مطابقت جا طريقا

بوٽ اسٽراپ پراڻي انٽرنيٽ ايڪسپلورر مطابقت واري طريقن ۾ سپورٽ نه آهي. پڪ ڪرڻ لاءِ ته توهان IE لاءِ جديد رينڊرنگ موڊ استعمال ڪري رهيا آهيو، <meta>پنهنجي صفحن ۾ مناسب ٽيگ شامل ڪرڻ تي غور ڪريو:

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

ڊيبگنگ ٽولز کي کولڻ سان دستاويز جي موڊ جي تصديق ڪريو: پريس F12ڪريو ۽ چيڪ ڪريو "دستاويز موڊ".

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

وڌيڪ معلومات لاءِ هي StackOverflow سوال ڏسو .

انٽرنيٽ ايڪسپلورر 10 ونڊوز 8 ۽ ونڊوز فون 8 ۾

انٽرنيٽ ايڪسپلورر 10 ڊيوائس جي چوٽي کي viewport width کان فرق نٿو ڪري ، ۽ اھڙي طرح Bootstrap جي CSS ۾ ميڊيا جي سوالن کي صحيح طور تي لاڳو نٿو ڪري. عام طور تي توهان صرف هن کي درست ڪرڻ لاءِ CSS جو هڪ تڪڙو ٽڪرو شامل ڪندا:

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

بهرحال، هي ونڊوز فون 8 ورزن تي هلندڙ ڊوائيسز لاءِ ڪم نٿو ڪري، جيڪي Update 3 (اڪا GDR3) کان پراڻن آهن ، ڇاڪاڻ ته اهو اهڙن ڊوائيسز کي تنگ "فون" ڏسڻ جي بدران اڪثر ڊيسڪ ٽاپ ڏيک ڏيکاري ٿو. ھن کي حل ڪرڻ لاءِ، توھان کي ھيٺ ڏنل 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 لاءِ سفاري کي اسان جي .col-*-1گرڊ ڪلاسن ۾ استعمال ٿيندڙ ڏهاڪن جي جڳهن جي تعداد سان ڪجهه پريشاني هئي. تنهن ڪري جيڪڏهن توهان وٽ 12 انفرادي گرڊ ڪالمن هئا، توهان کي خبر پوندي ته اهي ڪالمن جي ٻين قطارن جي مقابلي ۾ ننڍا آهن. سفاري/iOS کي اپڊيٽ ڪرڻ کان علاوه، توهان وٽ ڪم ڪار جي لاءِ ڪجهه آپشن آهن:

پنهنجي آخري گرڊ ڪالمن ۾ شامل ڪريو .pull-rightسخت-ساڄي ترتيب حاصل ڪرڻ لاءِ
سفاري لاءِ مڪمل گول حاصل ڪرڻ لاءِ دستي طور تي پنھنجي فيصد کي ٽوڪ ڪريو (پهريون اختيار کان وڌيڪ ڏکيو)

ماڊلز، نيوبارز، ۽ ورچوئل ڪيبورڊ

اوور فلو ۽ ڇڪڻ

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

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

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

مجازي ڪيبورڊ

انهي سان گڏ، نوٽ ڪريو ته جيڪڏهن توهان هڪ مقرر ڪيل نيوبار استعمال ڪري رهيا آهيو يا ماڊل اندر ان پٽ استعمال ڪري رهيا آهيو، iOS وٽ هڪ رينڊرنگ بگ آهي جيڪو مقرر ٿيل عناصر جي پوزيشن کي اپڊيٽ نه ڪندو آهي جڏهن مجازي ڪيبورڊ شروع ٿئي ٿي. ان لاءِ ڪجھ ڪم ڪارون شامل آھن توھان جي عناصر کي تبديل ڪرڻ position: absoluteيا ھڪڙي ٽائمر کي فوڪس ڪرڻ لاءِ دستي طور تي پوزيشن کي درست ڪرڻ جي ڪوشش ڪرڻ لاءِ. هي بوٽ اسٽريپ طرفان هٿ نه ڪيو ويو آهي، تنهن ڪري اهو توهان تي منحصر آهي ته توهان جي ايپليڪيشن لاء ڪهڙو حل بهترين آهي.

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

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

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

چپچپا `:hover`/ `:focus`موبائل تي

جيتوڻيڪ حقيقي هورنگ اڪثر ٽچ اسڪرين تي ممڪن ناهي، اڪثر موبائل برائوزر هورنگ سپورٽ کي نقل ڪن ٿا ۽ :hover”چپچپا“ بڻجن ٿا. ٻين لفظن ۾، :hoverاسٽائلس هڪ عنصر کي ٽيپ ڪرڻ کان پوء لاڳو ٿيڻ شروع ڪن ٿا ۽ صرف لاڳو ٿيڻ کان پوء بند ڪريو جڏهن صارف ڪنهن ٻئي عنصر کي ٽيپ ڪري ٿو. هي بوٽ اسٽراپ جي :hoverرياستن کي اهڙين برائوزرن تي ناپسنديده طور تي "پڪڙيل" ٿيڻ جو سبب بڻجي سگهي ٿو. ڪجھ موبائيل برائوزر پڻ :focusساڳي طرح چپچپا ٺاهيندا آھن. ھنن مسئلن لاءِ في الحال ڪوبه سادو حل نه آھي، سواءِ ھنن طرزن کي مڪمل طور ختم ڪرڻ کانسواءِ.

ڇپائي

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

خاص طور تي، Chrome v32 جي طور تي ۽ مارجن سيٽنگن جي پرواهه ڪرڻ کان سواء، Chrome هڪ ويب پيج کي پرنٽ ڪرڻ دوران ميڊيا جي سوالن کي حل ڪرڻ وقت فزيڪل پيپر جي سائيز کان خاص طور تي تنگ ڏسڻ واري ويڪر کي استعمال ڪري ٿو. اهو نتيجو ٿي سگهي ٿو بوٽ اسٽراپ جي اضافي-ننڍي گرڊ کي غير متوقع طور تي چالو ڪيو وڃي جڏهن ڇپائي. ڏسو مسئلو #12078 ۽ ڪروم بگ #273306 ڪجھ تفصيل لاءِ. تجويز ڪيل حل:

اضافي-ننڍي گرڊ کي ڇڪيو ۽ پڪ ڪريو ته توھان جو صفحو ان جي ھيٺان قابل قبول نظر اچي ٿو.
گھٽ متغيرن جي قدرن کي ترتيب @screen-*ڏيو ته جيئن توھان جو پرنٽر پيپر ننڍي کان وڏو سمجھيو وڃي.
صرف پرنٽ ميڊيا لاءِ گرڊ سائيز بريڪ پوائنٽس کي تبديل ڪرڻ لاءِ ڪسٽم ميڊيا جا سوال شامل ڪريو.

انهي سان گڏ، سفاري v8.0 جي طور تي، مقرر ٿيل چوٽي .containers سبب ڪري سگھي ٿو سفاري کي پرنٽ ڪرڻ دوران غير معمولي طور تي ننڍڙي فونٽ سائيز استعمال ڪرڻ لاء. وڌيڪ تفصيل لاءِ ڏسو #14868 ۽ WebKit بگ #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 تصديق جي ڊيڄاريندڙن جي ڪري آھي اسان جي ھڪڙي خاص فائر فاڪس بگ لاءِ ھڪڙو حل شامل ڪرڻ جي ڪري .

جڏهن ته اسان سرڪاري طور تي ڪنهن به ٽئين پارٽي پلگ ان يا اضافو جي حمايت نٿا ڪريون، اسان توهان جي منصوبن ۾ امڪاني مسئلن کان بچڻ ۾ مدد لاءِ ڪجهه مفيد صلاحون پيش ڪندا آهيون.

دٻي جي ماپ

ڪجھ ٽئين پارٽي سافٽ ويئر، بشمول گوگل ميپس ۽ گوگل ڪسٽم سرچ انجڻ، بوٽ اسٽريپ سان ٽڪراءَ جي ڪري * { box-sizing: border-box; }، هڪ قاعدو جيڪو ان ڪري ٿو ته اهو paddingعنصر جي آخري ڪمپيوٽي ويڊٿ کي متاثر نٿو ڪري. CSS Tricks تي باڪس ماڊل ۽ سائيز جي باري ۾ وڌيڪ سکو .

حوالن تي مدار رکندي، توھان کي ضرورت مطابق ختم ڪري سگھو ٿا (آپشن 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ڪلاس يقيني بڻائيندو ته لنڪ هڪ ڀيرو مرڪوز ٿيڻ تي نظر اچي ٿي (ڏسندڙ ڪي بورڊ استعمال ڪندڙن لاءِ).

ڪروم ۾ ڊگھي عرصي کان موجود خامين/ بگز جي ڪري (ڏسو مسئلو 262171 ڪروميم بگ ٽريڪر ۾ ) ۽ انٽرنيٽ ايڪسپلورر (ڏسو ھي مضمون ان-پيج لنڪس ۽ فوڪس آرڊر تي )، توھان کي پڪ ڪرڻي پوندي ته توھان جي اسڪپ لنڪ جو ٽارگيٽ شامل ڪرڻ سان گهٽ ۾ گهٽ پروگرام جي لحاظ کان ڌيان ڏيڻ جي قابل آهي tabindex="-1".

ان کان علاوه، توھان چاھيو ٿا واضح طور تي ھدف تي نظر ايندڙ فوڪس اشاري کي دٻائڻ لاءِ (خاص طور تي جيئن ته ڪروم في الحال عنصرن تي فوڪس پڻ سيٽ ڪندو آھي tabindex="-1"جڏھن اھي ماؤس سان ڪلڪ ڪندا آھن) سان #content:focus { outline: none; }.

ياد رهي ته هي بگ به متاثر ڪندو ڪنهن ٻئي صفحي جي لنڪس جيڪي توهان جي سائيٽ استعمال ڪري رهيا هوندا، انهن کي ڪي بورڊ استعمال ڪندڙن لاءِ بيڪار بڻائي ڇڏيندو. توھان غور ڪري سگھو ٿا ھڪڙو ساڳيو اسٽاپ-گيپ فيڪس شامل ڪرڻ لاءِ ٻين سڀني نالي ٿيل اينڪرز / فريگمينٽ سڃاڻپ ڪندڙ جيڪي لنڪ ٽارگيٽ طور ڪم ڪن ٿا.

<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 headings ( <h1>- <h6>)، توهان جي بنيادي دستاويز جي هيڊر هجڻ گهرجي هڪ <h1>. بعد ۾ عنوانن کي منطقي استعمال ڪرڻ گهرجي <h2>- <h6>جيئن ته اسڪرين پڙهندڙ توهان جي صفحن لاءِ مواد جي جدول ٺاهي سگهن.

وڌيڪ سکو HTML CodeSniffer ۽ Penn State's AccessAbility تي .

رنگ برعڪس

في الحال، بوٽ اسٽريپ ۾ موجود ڪجهه ڊفالٽ رنگن جو مجموعو (جهڙوڪ مختلف اسٽائل ٿيل بٽڻ ڪلاس، ڪجهه ڪوڊ نمايان رنگ جيڪي بنيادي ڪوڊ بلاڪ لاءِ استعمال ڪيا ويندا آهن ، .bg-primary لاڳاپيل پس منظر مددگار طبقو، ۽ ڊفالٽ لنڪ رنگ جڏهن اڇي پس منظر تي استعمال ٿيندو آهي) گھٽ برعڪس تناسب آھي ( 4.5:1 جي تجويز ڪيل تناسب ھيٺ ). اهو مسئلو ٿي سگهي ٿو صارفين کي گهٽ بصارت سان يا جيڪي رنگ انڌا آهن. انهن ڊفالٽ رنگن کي شايد انهن جي برعڪس ۽ جائزيت کي وڌائڻ لاءِ تبديل ڪرڻ جي ضرورت پوندي.

اضافي وسيلن

Bootstrap MIT لائسنس تحت جاري ڪيو ويو آهي ۽ ڪاپي رائيٽ 2019 Twitter آهي. ننڍي ٽڪرن تائين ابل، ان کي هيٺين شرطن سان بيان ڪري سگهجي ٿو.

اهو توهان کي گهربل آهي:

بوٽ اسٽريپ جي CSS ۽ JavaScript فائلن ۾ لائسنس ۽ ڪاپي رائيٽ نوٽيس شامل رکو جڏھن توھان انھن کي پنھنجي ڪم ۾ استعمال ڪريو

اهو توهان کي اجازت ڏئي ٿو:

آزاد طور تي ڊائون لوڊ ۽ استعمال ڪريو بوٽ اسٽريپ، مڪمل يا جزوي طور، ذاتي، نجي، ڪمپني جي اندروني، يا تجارتي مقصدن لاء
بوٽ اسٽراپ استعمال ڪريو پيڪيجز ۾ يا تقسيم جيڪي توهان ٺاهيندا آهيو
ذريعو ڪوڊ تبديل ڪريو
بوٽ اسٽريپ کي تبديل ڪرڻ ۽ ورهائڻ لاءِ ذيلي لائسنس ڏيو ٽئين پارٽين کي جيڪي لائسنس ۾ شامل نه آهن

اهو توهان کي منع ڪري ٿو:

ليکڪن ۽ لائسنس جي مالڪن کي رکو نقصان جي لاءِ ذميوار جيئن بوٽ اسٽريپ بغير وارنٽي جي فراهم ڪئي وڃي
Bootstrap جي ٺاهيندڙن يا ڪاپي رائيٽ هولڊرز کي ذميوار رکو
Bootstrap جي ڪنهن به ٽڪري کي بغير مناسب انتساب جي ٻيهر ورهايو
Twitter جي مالڪ جي ڪنهن به نشاني کي استعمال ڪريو ڪنهن به طريقي سان جيڪو بيان ڪري سگھي ٿو يا ظاهر ڪري ٿو ته Twitter توهان جي تقسيم جي تصديق ڪري ٿي
Twitter جي ملڪيت وارا نشان استعمال ڪريو ڪنھن به طريقي سان جيڪو بيان ڪري سگھي ٿو يا ان جو مطلب آھي ته توھان سوال ۾ Twitter سافٽ ويئر ٺاھيو آھي

اهو توهان کي گهربل ناهي:

پاڻ بوٽ اسٽريپ جو ماخذ شامل ڪريو، يا ڪنهن به ترميمن جو جيڪو توهان ان ۾ ڪيو هجي، ڪنهن به ٻيهر ورهائڻ ۾ توهان گڏ ڪري سگهو ٿا جنهن ۾ اهو شامل آهي
داخل ڪريو تبديليون جيڪي توھان ٺاھيو آھي بوٽ اسٽريپ ڏانھن واپس بوٽ اسٽريپ پروجيڪٽ ڏانھن (جيتوڻيڪ اھڙي راءِ جي حوصلا افزائي ڪئي ويندي آھي)

وڌيڪ معلومات لاءِ مڪمل بوٽ اسٽريپ لائسنس پروجيڪٽ جي مخزن ۾ واقع آهي .

ڪميونٽي جي ميمبرن Bootstrap جي دستاويزن کي مختلف ٻولين ۾ ترجمو ڪيو آهي. ڪو به سرڪاري طور تي سهڪار نه ڪيو ويو آهي ۽ اهي شايد هميشه تازه ڪاري نه هجن.

اسان ترجمن کي منظم ڪرڻ يا ميزباني ڪرڻ ۾ مدد نه ڪندا آهيون، اسان صرف انهن سان ڳنڍيون ٿا.

نئون يا بهتر ترجمو ختم ڪيو؟ ان کي اسان جي لسٽ ۾ شامل ڪرڻ لاءِ ڇڪڻ جي درخواست کوليو.

شروع ٿيڻ

ڊائون لوڊ ڪريو