دابەزاندن

بووتستراپ (لە ئێستادا v3.4.1) چەند ڕێگەیەکی ئاسانی هەیە بۆ دەستپێکردنی خێرا، هەریەکەیان ئاستێکی جیاوازی لێهاتوویی و کەیسی بەکارهێنانی سەرنجڕاکێشە. بخوێنەوە بۆ ئەوەی بزانیت چی لەگەڵ پێداویستییە تایبەتەکانتدا دەگونجێت.

jsDelivr

خەڵک لە jsDelivr بە میهرەبانیەوە پشتگیری CDN بۆ CSS و JavaScript ی Bootstrap دابین دەکەن. تەنها ئەم بەستەرانەی 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 : Less و CSS و JavaScript و فۆنتەکانی Bootstrap دابمەزرێنیت و بەڕێوەی بەریت :

bower install bootstrap

بە npm دامەزرێنە

هەروەها دەتوانیت Bootstrap دابمەزرێنیت بە بەکارهێنانی npm :

npm install bootstrap@3

require('bootstrap')هەموو پێوەکراوەکانی jQuery ی Bootstrap لەسەر ئۆبجێکتی jQuery بار دەکات. مۆدیولەکە bootstrapخۆی هیچ شتێک هەناردە ناکات. دەتوانیت بە دەستی پێوەکراوەکانی jQuery ی Bootstrap بە تاک بە تاک بار بکەیت بە بارکردنی /js/*.jsفایلەکان لە ژێر بەڕێوەبەرایەتی ئاستی سەرەوەی پاکێجەکەدا.

Bootstrap's package.jsonهەندێک میتاداتای زیادەی تێدایە لە ژێر ئەم کلیلانەی خوارەوە:

• less- ڕێڕەوی فایلە سەرچاوەی سەرەکی Less ی Bootstrap
• style- ڕێڕەوی CSS ی بچووک نەکراوی Bootstrap کە پێشوەختە بە بەکارهێنانی ڕێکخستنە پێشوەختەکان کۆکراوەتەوە (بێ خۆکارکردن)

بە Composer دامەزرێنە

هەروەها دەتوانیت بە بەکارهێنانی Composer فۆنتەکانی Less و CSS و JavaScript و فۆنتەکانی Bootstrap دابمەزرێنیت و بەڕێوەی بەریت :

composer require twbs/bootstrap

پێشگرێکی خۆکار پێویستە بۆ Less/Sass

بووتستراپ Autoprefixer بەکاردەهێنێت بۆ مامەڵەکردن لەگەڵ پێشگرەکانی فرۆشیاری CSS . ئەگەر تۆ Bootstrap لە سەرچاوەی Less/Sass یەوە کۆپی دەکەیت و Gruntfile ی ئێمە بەکارناهێنیت، پێویستە خۆت Autoprefixer لە پرۆسەی دروستکردنەکەتدا یەکبخەیت. ئەگەر تۆ Bootstrap پێش کۆمپایڵکراو بەکاردەهێنیت یان Gruntfile ی ئێمە بەکاردەهێنیت، پێویست ناکات نیگەران بیت لەم بارەیەوە چونکە Autoprefixer پێشتر لە Gruntfile ی ئێمەدا یەکخراوە.

ئەوەی لەخۆدەگرێت

بووتستراپ بە دوو شێوە دەتوانرێت دابەزێنرێت، لەناو ئەودا ئەم بەڕێوەبەرایەتی و فایلانەی خوارەوە دەبینیتەوە، بە شێوەیەکی لۆژیکی سەرچاوە باوەکان گرووپ دەکەن و هەردوو جۆری کۆکراوە و بچووککراو دابین دەکەن.

پێش کۆکردنەوە Bootstrap

کاتێک دابەزێنیت، فۆڵدەری پاڵپێوەنراوەکە بکەرەوە بۆ بینینی پێکهاتەی (کۆمپایلکراو) 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

ئەمە بنەڕەتیترین شێوەی Bootstrap ە: فایلە پێشوەختە کۆکراوەکان بۆ بەکارهێنانی خێرا لە نزیکەی هەر پرۆژەیەکی وێبدا. ئێمە CSS و JS ( bootstrap.*)ی کۆکراوە دابین دەکەین، هەروەها CSS و JS ( )ی کۆکراوە و بچووککراو bootstrap.min.*. نەخشەی سەرچاوەی CSS ( bootstrap.*.map) بەردەستە بۆ بەکارهێنان لەگەڵ ئامرازەکانی گەشەپێدەری هەندێک وێبگەڕ. فۆنتەکانی Glyphicons لەخۆدەگرێت، هەروەها تەوەرەی Bootstrap ی ئیختیاری.

کۆدی سەرچاوەی بووتستراپ

دابەزاندنی کۆدی سەرچاوەی Bootstrap سەروەت و سامانی CSS و جاڤاسکڕێپت و فۆنتەکانی پێشوەختە کۆکراوە لەخۆدەگرێت، لەگەڵ سەرچاوەی Less، JavaScript و بەڵگەنامەکان. بە تایبەتیتر ئەمانەی خوارەوە و زۆر شتی تر لەخۆدەگرێت:

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

, less/, js/و fonts/کۆدی سەرچاوەی فۆنتەکانی CSS و JS و ئایکۆنەکانمانن (بە رێککەوت). فۆڵدەرەکە هەموو ئەو dist/شتانەی تێدایە کە لە بەشی دابەزاندنی پێشوەختەی سەرەوەدا هاتووە. فۆڵدەرەکە کۆدی docs/سەرچاوەی بۆ بەڵگەنامەکانمان، و examples/بەکارهێنانی Bootstrap لەخۆدەگرێت. لەوەش زیاتر، هەر فایلێکی تری لەگەڵدا بێت پشتگیری بۆ پاکێجەکان، زانیاری مۆڵەت و پەرەپێدان دابین دەکات.

کۆکردنەوەی CSS و JavaScript

Bootstrap بۆ سیستەمی دروستکردنی Grunt بەکاردەهێنێت، لەگەڵ شێوازی گونجاو بۆ کارکردن لەگەڵ چوارچێوەکە. ئەوە چۆن کۆدەکانمان کۆ دەکەینەوە و تاقیکردنەوەکان ئەنجام دەدەین و زۆر شتی تر.

دامەزراندنی Grunt

بۆ دامەزراندنی Grunt سەرەتا دەبێت node.js (کە npm لەخۆدەگرێت) دابەزێنیت و دایبمەزرێنیت. npm کورتکراوەی مۆدیولەکانی node packaged و ڕێگایەکە بۆ بەڕێوەبردنی وابەستەییەکانی گەشەپێدان لە ڕێگەی node.js.

1. بە شێوەیەکی grunt-cliجیهانی بە npm install -g grunt-cli.
2. بچۆ بۆ /bootstrap/ناوەڕۆکی ڕەگ، پاشان جێبەجێ بکە npm install. npm سەیری package.jsonپەڕگەکە دەکات و بە شێوەیەکی ئۆتۆماتیکی وابەستە ناوخۆییە پێویستەکان دادەمەزرێنێت کە لەوێدا ئاماژەیان پێکراوە.

کاتێک تەواو بوویت، دەتوانیت فەرمانە جیاوازەکانی Grunt جێبەجێ بکەیت کە لە هێڵی فەرمانەوە دابینکراون.

فەرمانەکانی Grunt بەردەستە

grunt dist(تەنها CSS و JavaScript کۆبکەرەوە)

/dist/بەڕێوەبەرایەتییەکە بە فایلە کۆکراوەکان و بچووککراوەکانی CSS و JavaScript دووبارە دروست دەکاتەوە. وەک بەکارهێنەری Bootstrap بە شێوەیەکی ئاسایی ئەمە ئەو فرمانەیە کە تۆ دەتەوێت.

grunt watch(سەیرکردن)

سەیری فایلە سەرچاوەییەکانی Less دەکات و هەرکاتێک گۆڕانکارییەک هەڵبگریت بە شێوەیەکی ئۆتۆماتیکی کۆیان دەکاتەوە بۆ CSS.

grunt test(تاقیکردنەوەکان ئەنجام بدە)

JSHint جێبەجێ دەکات و تاقیکردنەوەکانی QUnit لە وێبگەڕە ڕاستەقینەکاندا بەڕێوە دەبات بەهۆی کارما .

grunt docs(دروستکردن و تاقیکردنەوەی سەروەت و سامانی docs)

CSS، JavaScript و سەروەت و سامانەکانی تر دروست دەکات و تاقییان دەکاتەوە کە بەکاردەهێنرێن لەکاتی بەڕێوەبردنی بەڵگەنامەکان بە شێوەیەکی ناوخۆیی لە ڕێگەی bundle exec jekyll serve.

grunt(بە تەواوی هەموو شتێک دروست بکە و تاقیکردنەوەکان ئەنجام بدە)

CSS و JavaScript کۆدەکاتەوە و بچووکی دەکاتەوە، ماڵپەڕی بەڵگەنامەکان دروست دەکات، HTML5 validator لە بەرامبەر docs بەڕێوەدەبات، سەروەت و سامانی Customizer دووبارە دروست دەکاتەوە و زۆر شتی تر. پێویستی بە Jekyll هەیە . بەگشتی تەنها پێویستە ئەگەر لەسەر خودی Bootstrap هاک بکەیت.

به‌ده‌رخستنی هه‌ڵه‌و چاككردنه‌وه‌ی

ئەگەر تووشی کێشە بوویت لە دامەزراندنی وابەستەییەکان یان جێبەجێکردنی فرمانەکانی Grunt، سەرەتا ئەو /node_modules/بەڕێوەبەرایەتییە بسڕەوە کە لەلایەن npm دروستکراوە. پاشان، دووبارە جێبەجێکردنەوە npm install.

قاڵبی بنەڕەتی

بەم قاڵبە بنەڕەتییەی HTML دەست پێ بکە، یان ئەم نموونانە دەستکاری بکە . هیوادارین قاڵب و نموونەکانمان بە خواستی خۆت دروست بکەیت، بە گونجاندنی لەگەڵ پێداویستییەکانتان.

HTML ی خوارەوە کۆپی بکە بۆ دەستپێکردنی کارکردن بە کەمترین بەڵگەنامەی Bootstrap.

<!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>

نموونە

لەسەر ئەو قاڵبە بنەڕەتییەی سەرەوە دروست بکە بە پێکهاتە زۆرەکانی Bootstrap. ئێمە هانتان دەدەین کە Bootstrap بە خواستی خۆت دابنێن و بیگونجێنن کە لەگەڵ پێداویستییەکانی تاکەکەسی پڕۆژەکەتان بگونجێت.

کۆدی سەرچاوە بۆ هەموو نموونەیەکی خوارەوە بەدەستبهێنە بە دابەزاندنی کۆگای Bootstrap . دەتوانرێت نموونە لە docs/examples/ناوەڕۆکەکەدا بدۆزرێتەوە.

بەکارهێنانی چوارچێوەکە

قاڵبی دەستپێک

هیچ جگە لە بنەماکان: کۆکردنەوەی CSS و JavaScript لەگەڵ کۆنتێنەرێک.

تەوەرەی بووتستراپ

تەوەرەی Bootstrap ی ئیختیاری بار بکە بۆ ئەزموونێکی بینراوی بەرزتر.

تۆڕەکان

چەندین نموونەی نەخشەی تۆڕ بە هەر چوار قاتەکە، هێلانەکردن و زۆر شتی تر.

جامبۆترۆن

لە دەوری جامبۆترۆنەکە دروست بکە بە ناوبار و هەندێک ستوونی تۆڕی بنەڕەتی.

جامبۆترۆنی تەسک

لاپەڕەیەکی تایبەتتر دروست بکە بە تەسککردنەوەی کۆنتێنەری پێشوەختە و جامبۆترۆن.

ناوبارەکان لە کرداردا

ناوبەر

قاڵبی سوپەر بنەڕەتی کە navbar لەخۆدەگرێت لەگەڵ هەندێک ناوەڕۆکی زیادە.

ناوباری سەرەوەی ئیستاتیک

قاڵبی سوپەر بنەڕەتی بە ناوباری سەرەوەی ئیستاتیک لەگەڵ هەندێک ناوەڕۆکی زیادە.

جێگیرکردنی navbar

قاڵبی سوپەر بنەڕەتی بە ناوبارێکی سەرەوەی جێگیر لەگەڵ هەندێک ناوەڕۆکی زیادە.

پێکهاتە تایبەتەکان

ڕووپۆش

قاڵبێکی یەک لاپەڕەیی بۆ دروستکردنی لاپەڕەی سەرەکی سادە و جوان.

کارۆسێل

navbar و carousel بە خواستی خۆت دروست بکە، پاشان چەند پێکهاتەیەکی نوێ زیاد بکە.

بلۆگ

شێوازی سادەی بلۆگی دوو ستوونی بە گەشتکردن و سەردێڕ و جۆری تایبەت.

داشبۆرد

پێکهاتەی بنەڕەتی بۆ داشبۆردێکی بەڕێوەبەر بە لایەنی جێگیر و ناوبار.

لاپەڕەی چوونەژوورەوە

شێواز و دیزاینی فۆڕمی تایبەت بەخۆت بۆ واژۆیەکی سادە لە فۆڕمدا.

ڕەوایە nav

دروستکردنی ناوبارێکی تایبەت بە بەستەری ڕەوا. سەرەکان بەرز دەکەنەوە! زۆر دۆستانەی سەفاری نییە.

پێی چەسپاو

کاتێک ناوەڕۆکەکە لە کورتترە، لاپەڕەیەک بە بنی دەرچەی بینینەکەوە ببەستە.

پێی چەسپاو بە navbar

ژێرەوەیەک بە بنی دەرچەی بینینەکەوە ببەستە بە ناوبارێکی جێگیر لە سەرەوە.

تاقیکردنەوەکان

Bootstrap وەڵامدەرەوە نییە

بە ئاسانی وەڵامدانەوەی Bootstrap بەپێی دۆکیومێنتەکانمان لەکاربخە .

لە دەرەوەی کانڤاس

مینیوی گەشتکردن لە دەرەوەی کانڤاس کە دەتوانرێت بگۆڕدرێت بۆ بەکارهێنان لەگەڵ Bootstrap دروست بکە.

ئامرازەکان

بووتلینت

Bootlint ئامرازی فەرمی Bootstrap HTML لینتەرە . بە شێوەیەکی ئۆتۆماتیکی چەند هەڵەیەکی HTML باو لە وێبپەڕەکاندا دەپشکنێت کە Bootstrap بەکاردەهێنن بە شێوەیەکی تا ڕادەیەک "ڤانێلا". پێکهاتەکان/ویجتەکانی ڤانێلا بووتستراپ پێویستیان بە بەشەکانی DOM هەیە کە لەگەڵ هەندێک پێکهاتەدا بگونجێت. بووتلینت پشکنین دەکات کە نموونەکانی پێکهاتەکانی بووتستراپ HTML یان بە دروستی پێکهاتووە. بیر لەوە بکەرەوە کە Bootlint زیاد بکەیت بۆ زنجیرە ئامرازەکانی پەرەپێدانی وێبی Bootstrap ـەکەت بۆ ئەوەی هیچ کام لە هەڵە باوەکان گەشەپێدانی پڕۆژەکەت خاو نەکەنەوە.

کۆمەڵگە

ئاگاداری پەرەپێدانی بووتستراپ بن و بەم سەرچاوە یارمەتیدەرانە دەستت بگاتە کۆمەڵگا.

• بلۆگی فەرمی بووتستراپ بخوێنەرەوە و سەبسکرایب بکە .
• لەگەڵ هاوڕێ Bootstrapperەکانت چات بکە بە بەکارهێنانی IRC لە irc.freenode.netسێرڤەرەکەدا، لە کەناڵی ##bootstrap .
• بۆ یارمەتی لە بەکارهێنانی Bootstrap، پرسیار بکە لەسەر StackOverflow بە بەکارهێنانی تاگtwitter-bootstrap-3 .
• گەشەپێدەران پێویستە وشەی سەرەکی bootstrapلەسەر ئەو پاکێجانە بەکاربهێنن کە دەستکاری یان زیاد دەکەن بۆ کارایی Bootstrap لەکاتی دابەشکردن لە ڕێگەی npm یان میکانیزمەکانی گەیاندنی هاوشێوە بۆ زۆرترین دۆزینەوە.
• نموونەی ئیلهامبەخشی ئەو کەسانەی کە بە Bootstrap دروست دەکەن لە پێشانگای Bootstrap بدۆزەرەوە .

هەروەها دەتوانن لە تویتەر فۆڵۆوی @getbootstrap بکەن بۆ زانینی نوێترین قسە و باس و ڤیدیۆ کلیپە سەرسوڕهێنەرەکان.

لەکارخستنی وەڵامدانەوە

Bootstrap بە شێوەیەکی ئۆتۆماتیکی لاپەڕەکانت بۆ قەبارەی شاشە جیاوازەکان دەگونجێنێت. لێرەدا چۆنێتی لەکارخستنی ئەم تایبەتمەندییە دەخەینەڕوو بۆ ئەوەی لاپەڕەکەت وەک ئەم نموونە وەڵامدەرەوەیە کار بکات .

هەنگاوەکان بۆ لەکارخستنی وەڵامدانەوەی لاپەڕەکان

1. ئەو viewport ە بهێڵەرەوە کە لە دۆکیومێنتەکانی CSS<meta> باسکراوە
2. سەرپێچی لە widthلەسەر .containerبۆ هەر قاتێکی تۆڕ بە یەک پانایی بکە، بۆ نموونە width: 970px !important;دڵنیابە کە ئەمە دوای پێشوەختەی Bootstrap CSS دێت. دەتوانیت بە ئیختیاری خۆت لە !importantپرسیارەکانی میدیا یان هەندێک هەڵبژێرەر-fu بەدوور بگرێت.
3. ئەگەر navbars بەکاردەهێنیت، هەموو هەڵسوکەوتەکانی داڕمان و فراوانکردنی navbar لابەرە.
4. بۆ نەخشەی تۆڕەکان، .col-xs-*پۆلەکان بەکاربهێنە جگە لە، یان لە جیاتی، پۆلەکانی مامناوەند/گەورە. نیگەران مەبە، تۆڕی ئامێرە بچووکە زیادەکان بە هەموو ڕوونییەکان دەگۆڕێت.

هێشتا پێویستت بە Respond.js دەبێت بۆ IE8 (بەو پێیەی پرسیارە میدیاییەکانمان هێشتا هەن و پێویستە پرۆسێس بکرێن). ئەمەش لایەنەکانی "ماڵپەڕی مۆبایل"ی Bootstrap لەکاردەخات.

قاڵبی بووتستراپ بە وەڵامدانەوە لەکارخراوە

ئێمە ئەم هەنگاوانەمان بۆ نموونەیەک بەکارهێناوە. کۆدی سەرچاوەییەکەی بخوێنەرەوە بۆ بینینی گۆڕانکارییە تایبەتەکانی جێبەجێکراو.

نموونەی وەڵامنەدەرەوە ببینە

پشتگیری وێبگەڕ و ئامێر

بووتستراپ بۆ ئەوە دروستکراوە کە لە نوێترین وێبگەڕەکانی سەر مێز و مۆبایلدا باشترین کار بکات، واتە وێبگەڕە کۆنەکان ڕەنگە بە شێوازێکی جیاواز پیشان بدەن، هەرچەندە بە تەواوی کارا بن، ڕەندەری هەندێک پێکهاتە.

وێبگەڕە پشتگیریکراوەکان

بە تایبەتی پشتگیری لە نوێترین وەشانی ئەم وێبگەڕ و پلاتفۆرمانە دەکەین.

ئەو وێبگەڕە جێگرەوەیانەی کە نوێترین وەشانی WebKit، Blink، یان Gecko بەکاردەهێنن، جا ڕاستەوخۆ بێت یان لە ڕێگەی API ی بینینی وێبی پلاتفۆرمەکەوە، بە ڕوونی پشتگیری ناکرێت. بەڵام پێویستە Bootstrap (لە زۆربەی حاڵەتەکاندا) لەم وێبگەڕانەشدا بە دروستی پیشان بدات و کار بکات. زانیاری پشتگیری تایبەتتر لە خوارەوە هاتووە.

ئامێرە مۆبایلەکان

بەگشتی، Bootstrap پشتگیری لە نوێترین وەشانی وێبگەڕە پێشوەختەکانی هەر پلاتفۆرمی سەرەکی دەکات. تێبینی بکە کە وێبگەڕەکانی پرۆکسی (وەک Opera Mini، دۆخی Turbo ی Opera Mobile، UC Browser Mini، Amazon Silk) پشتگیری ناکرێت.

وێبگەڕی سەر مێز

بە هەمان شێوە نوێترین وەشانی زۆربەی وێبگەڕەکانی سەر مێز پشتگیری دەکرێن.

لە ویندۆزدا پشتگیری لە ئینتەرنێت ئێکسپلۆرەر 8-11 دەکەین .

بۆ فایەرفۆکس، جگە لە نوێترین وەشانی ئاسایی جێگیر، ئێمە پشتگیری لە نوێترین وەشانی وەشانی پشتگیری درێژکراوە (ESR) ی فایەرفۆکس دەکەین.

بە شێوەیەکی نافەرمی، Bootstrap دەبێت بە باشی دەربکەوێت و ڕەفتار بکات لە کرۆم و کرۆم بۆ لینوکس، فایەرفۆکس بۆ لینوکس و ئینتەرنێت ئێکسپلۆرەر ٧، هەروەها مایکرۆسۆفت ئێج، هەرچەندە بە فەرمی پشتگیری ناکرێت.

بۆ لیستی هەندێک لەو هەڵانەی وێبگەڕ کە Bootstrap دەبێت لەگەڵیاندا ڕووبەڕووی ببێتەوە، سەیری دیواری هەڵەکانی وێبگەڕەکەمان بکە .

ئینتەرنێت ئێکسپلۆرەر ٨ و ٩

هەروەها ئینتەرنێت ئێکسپلۆرەر ٨ و ٩ پشتگیری دەکرێن، بەڵام تکایە ئاگاداربن کە هەندێک لە تایبەتمەندییەکانی CSS3 و توخمەکانی HTML5 بە تەواوی لەلایەن ئەم وێبگەڕانەوە پشتگیری ناکرێت. جگە لەوەش، ئینتەرنێت ئێکسپلۆرەر ٨ پێویستی بە بەکارهێنانی Respond.js هەیە بۆ چالاککردنی پشتگیری پرسیاری میدیا.

سەردانی Can I use... بکە بۆ زانیاری زیاتر لەسەر پشتگیری وێبگەڕی تایبەتمەندییەکانی CSS3 و HTML5.

ئینتەرنێت ئێکسپلۆرەر ٨ و Respond.js

ئاگاداری ئەم ئاگادارکردنەوانەی خوارەوە بە لەکاتی بەکارهێنانی Respond.js لە ژینگەکانی پەرەپێدان و بەرهەمهێنانت بۆ ئینتەرنێت ئێکسپلۆرەر ٨.

Respond.js و CSS ی cross-domain

بەکارهێنانی Respond.js لەگەڵ CSS کە لەسەر دۆمەینێکی جیاواز (لاوەکی) میوانداری کراوە (بۆ نموونە، لەسەر CDN) پێویستی بە هەندێک ڕێکخستنی زیادە هەیە. بۆ زانیاری زیاتر سەیری دۆکیومێنتەکانی Respond.js بکە.

Respond.js و...file://

بەهۆی یاساکانی ئاسایشی وێبگەڕەوە، Respond.js لەگەڵ ئەو لاپەڕانەدا کارناکات کە لە ڕێگەی file://پرۆتۆکۆڵەکەوە سەیر دەکرێن (وەک لە کاتی کردنەوەی فایلێکی HTML ناوخۆیی). بۆ تاقیکردنەوەی تایبەتمەندییە وەڵامدەرەوەکان لە IE8، سەیری لاپەڕەکانت بکە لە ڕێگەی HTTP(S). بۆ زانیاری زیاتر سەیری دۆکیومێنتەکانی Respond.js بکە.

Respond.js و...@import

Respond.js لەگەڵ CSS کار ناکات کە لە ڕێگەی @import. بە تایبەتی، هەندێک لە ڕێکخستنەکانی Drupal ناسراون بە بەکارهێنانی @import. بۆ زانیاری زیاتر سەیری دۆکیومێنتەکانی Respond.js بکە.

ئینتەرنێت ئێکسپلۆرەر ٨ و قەبارەی بۆکس

IE8 پشتگیری تەواو ناکات box-sizing: border-box;کاتێک لەگەڵ min-width, max-width, min-height, یان max-height. هەر لەبەر ئەو هۆکارە، لە v3.0.1، ئێمە چیتر max-widthلەسەر .containers بەکارناهێنین.

ئینتەرنێت ئێکسپلۆرەر ٨ و @font-face

IE8 هەندێک کێشەی هەیە لەگەڵ @font-faceکاتێک لەگەڵ :before. بووتستراپ ئەو تێکەڵەیە لەگەڵ گلیفیکۆنەکانیدا بەکاردەهێنێت. ئەگەر لاپەڕەیەک لە کاشدا بێت، و بەبێ ماوس لەسەر پەنجەرەکە بارکرابێت (واتە دوگمەی نوێکردنەوە لێبدە یان شتێک لە iframe باربکە) ئەوا لاپەڕەکە پێش بارکردنی فۆنتەکە ڕەندەر دەکرێت. ماوسکردن لەسەر لاپەڕەکە (جەستە) هەندێک لە ئایکۆنەکان پیشان دەدات و ماوسکردن بەسەر ئایکۆنەکانی ماوەتەوە ئەوانیش پیشان دەدات. بۆ زانیاری زیاتر سەیری ژمارە #13863 بکە.

شێوازەکانی گونجانی IE

لە دۆخە کۆنەکانی گونجاوی ئینتەرنێت ئێکسپلۆرەردا پشتگیری لە بووتستراپ ناکرێت. بۆ ئەوەی دڵنیا بیت کە نوێترین دۆخی ڕەندەرکردن بۆ IE بەکاردەهێنیت، بیر لەوە بکەرەوە کە <meta>تاگی گونجاو لە لاپەڕەکانتدا دابنێیت:

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

دۆخی بەڵگەنامەکە پشتڕاست بکەرەوە بە کردنەوەی ئامرازەکانی هەڵەکردن: F12"دۆخی بەڵگەنامە" داگرە و پشکنین بکە.

ئەم تاگە لە هەموو بەڵگەنامە و نموونەکانی Bootstrap دا هاتووە بۆ دڵنیابوون لە باشترین ڕەندەرکردن کە دەتوانرێت لە هەر وەشانی پشتگیریکراوی ئینتەرنێت ئێکسپلۆرەردا.

بۆ زانیاری زیاتر سەیری ئەم پرسیارەی StackOverflow بکە.

ئینتەرنێت ئێکسپلۆرەر ١٠ لە ویندۆز ٨ و ویندۆز فۆن ٨

ئینتەرنێت ئێکسپلۆرەر ١٠ پانایی ئامێر لە پانایی دەرگای بینین جیا ناکاتەوە، و بەم شێوەیە پرسیارەکانی میدیا بە باشی لە CSS ی بووتستراپدا جێبەجێ ناکات. بە شێوەیەکی ئاسایی تەنها پارچەیەکی خێرا لە CSS زیاد دەکەیت بۆ چارەسەرکردنی ئەمە:

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

بەڵام ئەمە بۆ ئەو ئامێرانە کارناکات کە وەشانی ویندۆز فۆن ٨ کۆنتر لە نوێکردنەوەی ٣ (بە ناوی GDR3) بەکاردەهێنن ، چونکە دەبێتە هۆی ئەوەی ئەم جۆرە ئامێرانە دیمەنێکی زیاتری سەر مێز پیشان بدەن لەبری دیمەنێکی تەسکی "فۆن". بۆ چارەسەرکردنی ئەمە، پێویستە ئەم CSS و جاڤاسکڕێپانەی خوارەوە لەخۆبگریت بۆ چارەسەرکردنی هەڵەکە .

@-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)
}

بۆ زانیاری زیاتر و ڕێنماییەکانی بەکارهێنان، ویندۆز فۆن ٨ و Device-Width بخوێنەرەوە .

وەکو هێدس ئەپ، ئێمە ئەمە لە هەموو بەڵگەنامە و نموونەکانی Bootstrap وەک نمایشێکدا دەخەینە ناوەوە.

سەفاری لەسەدا وردکردنەوە

بزوێنەری ڕەندەری وەشانی سەفاری پێش v7.1 بۆ OS X و سەفاری بۆ iOS v8.0 هەندێک کێشەی هەبوو لە ژمارەی شوێنی دەهەمی کە لە .col-*-1پۆلەکانی تۆڕەکەماندا بەکاردەهێنران. کەواتە ئەگەر 12 ستوونی تۆڕی تاکەکەسیت هەبووایە، تێبینی ئەوە دەکەیت کە بە بەراورد بە ڕیزەکانی تری ستوونەکان کورت بوون. جگە لە بەرزکردنەوەی سەفاری/ئای ئۆ ئێس، هەندێک بژاردەت هەیە بۆ چارەسەرکردن:

• زیاد بکە .pull-rightبۆ دوا ستوونی تۆڕەکەت بۆ بەدەستهێنانی ڕێکخستنی ڕەق-ڕاست
• ڕێژەکانت بە دەست تویک بکە بۆ ئەوەی وردکردنەوەیەکی تەواو بۆ سەفاری بەدەست بهێنیت (زەحمەتتر لە بژاردەی یەکەم)

مۆداڵ و ناوبار و کیبۆردەکانی مەجازی

ڕژان و سکڕۆڵکردن

پشتگیری بۆ overflow: hiddenلەسەر <body>توخمەکە لە ئای ئۆ ئێس و ئەندرۆیددا تەواو سنووردارە. بۆ ئەو مەبەستە کاتێک بە سەرەوە یان خوارەوەی مۆداڵێک لە هەریەکێک لە وێبگەڕەکانی ئەو ئامێرانەدا تێدەپەڕیت، <body>ناوەڕۆکەکە دەست دەکات بە ڕۆشتن. سەیری هەڵەی Chrome #175502 بکە (لە Chrome v40 چارەسەر کراوە) و هەڵەی WebKit #153852 بکە .

بواری دەقی iOS و سکڕۆڵکردن

لە iOS 9.3 ەوە، لە کاتێکدا مۆداڵێک کراوە دەبێت، ئەگەر دەست لێدانی سەرەتایی ئاماژەیەکی سکڕۆڵ لە سنووری دەقێک <input>یان a بێت <textarea>، <body>ناوەڕۆکی ژێر مۆداڵەکە لەبری خودی مۆداڵەکە سکڕۆڵ دەکرێت. سەیری هەڵەی وێبکیت #153856 بکە .

کیبۆردەکانی مەجازی

هەروەها تێبینی ئەوە بکە کە ئەگەر ناوبارێکی جێگیر بەکاردەهێنیت یان زانیارییەکانی ناو مۆداڵێک بەکاردەهێنیت، iOS هەڵەیەکی ڕەندەرکردنی هەیە کە شوێنی توخمە جێگیرەکان نوێ ناکاتەوە کاتێک کیبۆردێکی مەجازی دەستپێدەکات. چەند چارەسەرێک بۆ ئەمە بریتین لە گۆڕینی توخمەکانت بۆ position: absoluteیان بانگهێشتکردنی تایمەرێک لەسەر فۆکەس بۆ هەوڵدان بۆ ڕاستکردنەوەی شوێنەکە بە دەست. ئەمە لەلایەن Bootstrap ەوە مامەڵەی لەگەڵ ناکرێت، بۆیە ئەوە ئێوەن کە بڕیار بدەن کام چارەسەر باشترینە بۆ بەرنامەکەتان.

ناوبار درۆپداونەکان

توخمەکە لە .dropdown-backdropiOS لە nav بەکارناهێنرێت بەهۆی ئاڵۆزی z-indexing. بەم شێوەیە، بۆ داخستنی درۆپداونەکان لە navbars، پێویستە ڕاستەوخۆ کلیک لەسەر توخمە درۆپداونەکە بکەیت (یان هەر توخمێکی تر کە ڕووداوێکی کلیککردن لە iOSدا تەقێنێت ).

زوومکردنی وێبگەڕ

زوومکردنی لاپەڕە بە ناچاری شوێنەوارەکانی ڕەندەرکردن لە هەندێک پێکهاتەدا دەخاتە ڕوو، چ لە Bootstrap و چ لە باقی وێبەکەدا. بەپێی کێشەکە، ڕەنگە بتوانین چارەسەری بکەین (سەرەتا بگەڕێین و دواتر ئەگەر پێویست بوو کێشەیەک بکەینەوە). بەڵام ئێمە مەیلی ئەوەمان هەیە ئەمانە پشتگوێ بخەین چونکە زۆرجار هیچ چارەسەرێکی ڕاستەوخۆیان نییە جگە لە چارەسەرە هاکیەکان.

چەسپاو :hover/ :focusلەسەر مۆبایل

هەرچەندە هێڵکاری ڕاستەقینە لە زۆربەی شاشەکانی تاچدا ناتوانرێت، بەڵام زۆربەی وێبگەڕەکانی مۆبایل پشتگیری هێڵکاری دەکەن و :hover"چەسپاو" دەکەن. بە واتایەکی تر، :hoverستایلەکان دوای لێدانی توخمێک دەست دەکەن بە جێبەجێکردن و تەنها دوای ئەوەی بەکارهێنەر لێدان لە هەندێک توخمێکی تر دەکات، جێبەجێکردن ڕادەگرن. ئەمەش دەتوانێت ببێتە هۆی ئەوەی کە دۆخەکانی Bootstrap :hoverبە شێوەیەکی نەخوازراو "گیر" بن لەسەر ئەم جۆرە وێبگەڕانە. هەروەها هەندێک لە وێبگەڕەکانی مۆبایل بە :focusهەمان شێوە چەسپاو دروست دەکەن. لە ئێستادا هیچ چارەسەرێکی سادە بۆ ئەم کێشانە نییە جگە لە لابردنی ئەم جۆرە ستایلانە بە تەواوی.

چاپکردن

تەنانەت لە هەندێک لە وێبگەڕی مۆدێرنیشدا، چاپکردن دەتوانێت شتێکی نامۆ بێت.

بە تایبەتی، لە کرۆم v32 و بەبێ گوێدانە ڕێکخستنەکانی پەراوێز، کرۆم پانایی دەرچەی بینین بەکاردەهێنێت کە بە شێوەیەکی بەرچاو تەسکترە لە قەبارەی کاغەزی فیزیکی لە کاتی چارەسەرکردنی پرسیارەکانی میدیا لەکاتی چاپکردنی وێبپەڕێکدا. ئەمەش دەتوانێت ببێتە هۆی ئەوەی تۆڕی بچووکی زیادەی Bootstrap لە کاتی چاپکردندا بە شێوەیەکی چاوەڕواننەکراو چالاک بێت. بۆ هەندێک وردەکاری سەیری ژمارە #12078 و هەڵەی کرۆم #273306 بکە. چارەسەرە پێشنیار کراوەکان:

• تۆڕی بچووکی زیادە لە باوەش بگرە و دڵنیابە لە ژێرەوەی لاپەڕەکەت قبوڵکراو دەردەکەوێت.
• بەهاکانی @screen-*گۆڕاوە کەمترەکان خۆکارانە بکە بەجۆرێک کە کاغەزی چاپکەرەکەت بە گەورەتر لە بچووکی زیادە هەژمار بکرێت.
• پرسیارەکانی میدیای تایبەت زیاد بکە بۆ گۆڕینی خاڵەکانی شکاندنی قەبارەی تۆڕ تەنها بۆ میدیای چاپکردن.

هەروەها، لە سەفاری v8.0، fixed-width.container s ی پانایی جێگیر دەتوانێت ببێتە هۆی ئەوەی سەفاری قەبارەیەکی فۆنتێکی بچووکی نائاسایی بەکاربهێنێت لە کاتی چاپکردندا. بۆ زانیاری زیاتر سەیری #14868 و هەڵەی WebKit #138192 بکە. یەکێک لە چارەسەرە ئەگەرییەکان بۆ ئەمە زیادکردنی ئەم CSS یەی خوارەوەیە:

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

وێبگەڕی ستۆکی ئەندرۆید

لە دەرەوەی سندوقەکە، ئەندرۆید ٤.١ (و تەنانەت هەندێک وەشانی نوێتر بە ڕواڵەت) لەگەڵ ئەپی Browser وەک وێبگەڕی پێشوەختەی هەڵبژاردن دەنێردرێت (بە پێچەوانەی Chrome). بەداخەوە ئەپی Browser هەڵەیەکی زۆری هەیە و ناتەبایی لەگەڵ CSS بەگشتی هەیە.

مینیوەکان هەڵبژێرە

لەسەر <select>توخمەکان، وێبگەڕی ستۆکی ئەندرۆید کۆنتڕۆڵە لایەنەکان پیشان نادات ئەگەر هەبێت 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 Bin بکەن.

ڕەچاوکەرەکان

بۆ ئەوەی باشترین ئەزموون بۆ وێبگەڕی کۆن و هەڵە دابین بکات، Bootstrap هاکی وێبگەڕی CSS بەکاردەهێنێت لە چەند شوێنێک بەکاردەهێنێت بۆ ئامانجکردنی CSS تایبەت بۆ هەندێک وەشانی وێبگەڕ بە مەبەستی کارکردن لە دەوری هەڵە لە خودی وێبگەڕەکاندا. ئەم هاکانە بە شێوەیەکی تێگەیشتوو دەبنە هۆی ئەوەی کە چەسپێنەرانی CSS گلەیی بکەن کە نادروستن. لە یەک دوو شوێن، ئێمە تایبەتمەندی CSSی لێواری خوێناویش بەکاردەهێنین کە هێشتا بە تەواوی ستاندارد نەکراون، بەڵام ئەمانە تەنها بۆ بەرزکردنەوەی پێشکەوتوو بەکاردەهێنرێن.

ئەم هۆشدارانە ڕەچاوکردنانە لە پراکتیکدا گرنگ نین لەبەرئەوەی بەشی ناهاکی CSS ی ئێمە بە تەواوی ڕەچاو دەکات و بەشە هاکییەکان دەستوەردان لە کارکردنی دروستی بەشی ناهاکی ناکەن، هەربۆیە بۆچی ئێمە بە ئەنقەست ئەم هۆشدارییە تایبەتانە پشتگوێ دەخەین.

بە هەمان شێوە دۆکیومێنتەکانی HTML ی ئێمە هەندێک ئاگادارکردنەوەی چەسپاندنی HTML ی بێ بایەخ و بێ ئەنجامیان هەیە بەهۆی خستنەڕووی چارەسەرێکمان بۆ هەڵەیەکی دیاریکراوی فایەرفۆکس .

پشتگیری لایەنی سێیەم

لە کاتێکدا ئێمە بە فەرمی پشتگیری لە هیچ پێوەکراوێک یان زیادکراوێکی لایەنی سێیەم ناکەین، ئێمە هەندێک ئامۆژگاری بەسوود پێشکەش دەکەین بۆ یارمەتیدان لە دوورکەوتنەوە لە کێشە ئەگەرییەکان لە پڕۆژەکانتدا.

قەبارەی سندوق

هەندێک لە نەرمەکاڵاکانی لایەنی سێیەم، لەوانە نەخشەکانی گووگڵ و بزوێنەری گەڕانی تایبەت بە گووگڵ، لەگەڵ Bootstrap ناکۆکن بەهۆی * { box-sizing: border-box; }, یاسایەک کە وا paddingدەکات کاریگەری لەسەر پانایی کۆتایی حیسابکراوی توخمێک نییە. زیاتر بزانە دەربارەی مۆدێلی بۆکس و قەبارەدانان لە CSS Tricks .

بەپێی کۆنتێکستەکە، دەتوانیت بەپێی پێویست سەرپێچی بکەیت (بژاردەی یەکەم) یان قەبارەی سندوقەکە بۆ تەواوی ناوچەکان ڕێست بکەیتەوە (بژاردەی ٢).

/* 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پۆلەکە بە شێوەیەکی بینراو بەستەری skip دەشارێتەوە، و .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>

سەردێڕی هێلانەکراو

لە کاتی هێلانەکردنی سەردێڕەکان ( <h1>- <h6>)، سەردێڕی بەڵگەنامەی سەرەکیت دەبێت <h1>. سەردێڕەکانی دواتر دەبێ بە شێوەیەکی لۆژیکی سوود لە <h2>- وەربگرن <h6>بەجۆرێک کە خوێنەرانی شاشە بتوانن خشتەی ناوەڕۆک بۆ لاپەڕەکانتان دروست بکەن.

زیاتر بزانە لە HTML CodeSniffer و AccessAbility ی Penn State .

کۆنتراستی ڕەنگەکان

لە ئێستادا، هەندێک لە پێکەوەگرتنی ڕەنگی پێشوەختە کە لە Bootstrap بەردەستە (وەک پۆلە جیاوازەکانی دوگمەی ستایلدار ، هەندێک لە ڕەنگەکانی تیشک خستنە سەر کۆدەکان کە بۆ بلۆکی کۆدی بنەڕەتی بەکاردەهێنرێن , پۆلی یارمەتیدەری .bg-primary پاشبنەمای کۆنتێکست ، و ڕەنگی بەستەری پێشوەختە کاتێک لەسەر پاشبنەمای سپی بەکاردەهێنرێت) ڕێژەی کۆنتراستی نزمیان هەیە (لە خوار ڕێژەی پێشنیارکراوی 4.5:1 ). ئەمەش دەبێتە هۆی دروستبوونی کێشە بۆ ئەو بەکارهێنەرانەی کە بینایی کەمیان هەیە یاخود ڕەنگ کوێرن. ئەم ڕەنگە پێشوەختانە لەوانەیە پێویستیان بە دەستکاریکردن بێت بۆ زیادکردنی کۆنتراست و خوێندنەوەیان.

سەرچاوەی زیادە

• ئاماژەیەکی "HTML Codesniffer" بۆ دیاریکردنی کێشەکانی دەستڕاگەیشتن
• درێژکراوەی ئامرازەکانی گەشەپێدەری دەستڕاگەیشتن بە کرۆم
• شیکارکەری کۆنتراستی ڕەنگەکان
• پڕۆژەی A11Y
• بەڵگەنامەکانی دەستڕاگەیشتن بە MDN

پرسیارە بەردەوامەکانی مۆڵەت

Bootstrap بە مۆڵەتی MIT بڵاوکراوەتەوە و مافی چاپکردنی 2019 Twitter ـە. بە کوڵاوی بۆ پارچە بچووکتر، دەتوانرێت بەم مەرجانەی خوارەوە وەسف بکرێت.

پێویستی بەوەیە کە:

• مۆڵەت و ئاگاداری مافی چاپکردن لە فایلەکانی CSS و JavaScript ی Bootstrap دا بهێڵەرەوە کاتێک لە کارەکانتدا بەکاریان دەهێنیت

ڕێگەت پێدەدات کە:

• بە ئازادی Bootstrap دابەزێنە و بەکاری بهێنە، بە تەواوی یان بەشێکی، بۆ مەبەستی کەسی، تایبەت، ناوخۆیی کۆمپانیا، یان بازرگانی
• لە پاکێج یان دابەشکردنەکاندا کە دروستی دەکەیت Bootstrap بەکاربهێنە
• دەستکاری کۆدی سەرچاوە بکە
• مۆڵەتی لاوەکی بدە بۆ دەستکاریکردن و دابەشکردنی Bootstrap بە لایەنی سێیەم کە لە مۆڵەتەکەدا نەهاتووە

قەدەغە دەکات کە:

• نووسەران و خاوەن مۆڵەتەکان بەرپرسیار بن لە زیانەکان چونکە Bootstrap بەبێ گەرەنتی دابین کراوە
• دروستکەران یان خاوەن مافی چاپکردنی Bootstrap بەرپرسیار بکەرەوە
• هەر پارچەیەک لە Bootstrap بەبێ ئیسباتکردنی دروست دابەشی بکەرەوە
• هەر نیشانەیەک کە خاوەندارێتی تویتەر دەکات بە هەر شێوەیەک بەکاربهێنە کە ڕەنگە بڵێت یان ئاماژە بەوە بکات کە تویتەر پشتگیری لە دابەشکردنەکەت دەکات
• هەر نیشانەیەک کە خاوەندارێتی تویتەر دەکات بە هەر شێوەیەک بەکاربهێنە کە ڕەنگە بڵێت یان ئاماژە بەوە بکات کە تۆ نەرمەکاڵای تویتەرەکەت دروست کردووە کە پرسیاری لەسەرە

پێویست ناکات تۆ:

• سەرچاوەی خودی Bootstrap، یان هەر گۆڕانکارییەک کە لەوانەیە لێی کردبێت، لە هەر دابەشکردنەوەیەکدا کە لەوانەیە کۆی بکەیتەوە کە ئەویش لەخۆدەگرێت، بخەرە ناوەوە
• ئەو گۆڕانکاریانەی کە بۆ بووتستراپ ئەنجامی دەدەیت بنێرەوە بۆ پڕۆژەی بووتستراپ (هەرچەندە هاندەری ئەو جۆرە فیدباکەیە)

مۆڵەتی تەواوی Bootstrap لە کۆگای پڕۆژەکەدایە بۆ زانیاری زیاتر.

وەرگێڕانەکان

ئەندامانی کۆمەڵگا بەڵگەنامەکانی Bootstrap یان وەرگێڕاوە بۆ زمانە جیاوازەکان. هیچیان بە فەرمی پشتگیری ناکرێت و لەوانەیە هەمیشە لە نوێدا نەبن.

• 中文文档 (چینی)
• Bootstrap på Dansk (دانیمارکی)
• Bootstrap en Français (فەرەنسی)
• Bootstrap auf Deutsch (ئەڵمانی)
• بۆتستراپ بە زمانی ئیتاڵینۆ (ئیتاڵی)
• 한국어 (کۆری)
• Bootstrap em Português do Brasil (بەڕازیلی پورتوگالی)
• بۆتستراپ по-русски (ڕووسی)
• Bootstrap en Español (ئیسپانی)
• Türkçe بۆتستراپ (تورکی)
• بۆتستراپ українською (ئۆکرانی)
• بۆتستراپ bằng tiếng Việt (ڤێتنامیی)

ئێمە یارمەتی ڕێکخستن یان میوانداریکردنی وەرگێڕانەکان نادەین، تەنها لینکیان بۆ دەکەین.

وەرگێڕانێکی نوێ یان باشترت تەواو کردووە؟ داواکاری ڕاکێشان بکەرەوە بۆ زیادکردنی بۆ لیستەکەمان.