ډاونلوډ کړئ

بوټسټریپ (اوس مهال v3.4.1) د ګړندي پیل کولو لپاره یو څو اسانه لارې لري ، هر یو د مختلف مهارت کچې ته اپیل کوي او قضیه کاروي. د دې لپاره ولولئ چې وګورئ چې ستاسو ځانګړي اړتیاوې څه دي.

jsDelivr

په jsDelivr کې خلک په مهربانۍ سره د Bootstrap 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 Less، CSS، JavaScript، او فونټونه هم نصب او اداره کړئ :

bower install bootstrap

د npm سره نصب کړئ

تاسو کولی شئ د npm په کارولو سره بوټسټریپ هم نصب کړئ :

npm install bootstrap@3

require('bootstrap')د بوټسټریپ ټول jQuery پلگ ان به په jQuery څیز کې بار کړي. ماډل پخپله bootstrapهیڅ شی نه صادروي. تاسو کولی شئ په لاسي ډول د بوټسټریپ jQuery پلگ انونه په انفرادي ډول /js/*.jsد کڅوړې د لوړې کچې لارښود لاندې فایلونو په پورته کولو سره پورته کړئ.

Bootstrap's package.jsonد لاندې کیلي لاندې ځینې اضافي میټاډاټا لري:

• less- د بوټسټریپ اصلي لږ سرچینې فایل ته لاره
• style- د بوټسټریپ غیر کم شوي CSS ته لاره چې د ډیفالټ تنظیماتو په کارولو سره دمخه جوړه شوې (هیڅ تخصیص نشته)

د کمپوزر سره نصب کړئ

تاسو کولی شئ د کمپوزر په کارولو سره د بوټسټریپ لیس ، سی ایس ایس ، جاواسکریپټ او فونټونه هم نصب او اداره کړئ :

composer require twbs/bootstrap

Autoprefixer د لږ/Sass لپاره اړین دی

بوټسټریپ د CSS پلورونکي مخکینو سره معامله کولو لپاره Autoprefixer کاروي . که تاسو بوټسټریپ د دې لږ / ساس سرچینې څخه تالیف کوئ او زموږ د ګرنټ فایل نه کاروئ ، نو تاسو به اړتیا ولرئ پخپله د جوړونې پروسې کې Autoprefixer مدغم کړئ. که تاسو مخکې له مخکې جوړ شوی بوټسټریپ کاروئ یا زموږ د ګرنټ فایل کاروئ ، تاسو اړتیا نلرئ پدې اړه اندیښنه ولرئ ځکه چې آټوپریفکسر دمخه زموږ په ګرنټ فایل کې مدغم شوی.

څه پکې شامل دي

بوټسټریپ په دوه بڼو کې د ډاونلوډ وړ دی، په کوم کې چې تاسو به لاندې لارښودونه او فایلونه ومومئ، په منطقي توګه د عامو سرچینو ګروپ کول او دواړه تالیف شوي او کوچني تغیرات چمتو کول.

مخکې جوړ شوی بوټسټریپ

یوځل ډاونلوډ کړئ ، د (کمپل شوي) بوټسټریپ جوړښت لیدلو لپاره کمپریس شوی فولډر خلاص کړئ. تاسو به د دې په څیر یو څه وګورئ:

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) د ځانګړو براوزرونو پراختیا کونکي وسیلو سره د کارولو لپاره شتون لري. د ګلیفیکون فونټونه شامل دي، لکه څنګه چې اختیاري بوټسټریپ موضوع ده.

د بوټسټریپ سرچینې کوډ

د بوټسټریپ سرچینې کوډ ډاونلوډ کې دمخه جوړ شوی CSS ، جاواسکریپټ ، او فونټ اثاثې شامل دي ، د سرچینې کم ، جاوا سکریپټ ، او اسنادو سره. په ځانګړې توګه، پدې کې لاندې او نور شامل دي:

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 حکمونه

grunt dist(یوازې CSS او جاواسکریپټ تالیف کړئ)

/dist/د تالیف شوي او کوچني شوي CSS او JavaScript فایلونو سره لارښود بیا رامینځته کوي. د بوټسټریپ کارونکي په توګه ، دا معمولا هغه قومانده ده چې تاسو یې غواړئ.

grunt watch(وګوره)

د لږې سرچینې فایلونه ګوري او کله چې تاسو بدلون خوندي کړئ په اتوماتيک ډول یې CSS ته بیا تنظیموي.

grunt test(ازموینې ترسره کول)

JSHint چلوي او د کرما څخه مننه په ریښتیني براوزرونو کې د QUnit ازموینې پرمخ وړي .

grunt docs(د اسنادو اثاثې جوړول او ازموینه کول)

CSS، JavaScript، او نورې شتمنۍ جوړوي او ازمويي کوم چې په محلي توګه د اسنادو چلولو په وخت کې کارول کیږي bundle exec jekyll serve.

grunt(په بشپړ ډول هرڅه جوړ کړئ او ازموینې پرمخ وړئ)

CSS او JavaScript تالیف او کموي، د اسنادو ویب پاڼه جوړوي، د اسنادو په وړاندې د HTML5 تایید کونکی چلوي، د Customizer شتمنۍ بیا تولیدوي، او نور ډیر څه. جیکیل ته اړتیا لري . معمولا یوازې اړین دی که تاسو پخپله په بوټسټریپ کې هیک کوئ.

د ستونزو حل کول

که تاسو د انحصارونو نصبولو یا د ګرنټ کمانډونو چلولو کې ستونزې سره مخ شئ ، لومړی /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 په عمل کې

نوبار

عالي بنسټیز ټیمپلیټ چې د ځینې اضافي مینځپانګې سره نیوبار پکې شامل دی.

جامد پورته نوبار

عالي بنسټیز ټیمپلیټ د یو جامد ټاپ نیوبار سره د ځینې اضافي مینځپانګې سره.

ثابت نوبار

عالي بنسټیز ټیمپلیټ د ځینې اضافي مینځپانګې سره د ثابت سر نیوبار سره.

دودیز اجزا

پوښ

د ساده او ښکلي کور پاڼې جوړولو لپاره د یوې پاڼې ټیمپلیټ.

کاروسل

نوبار او کیروسیل تنظیم کړئ، بیا ځینې نوي برخې اضافه کړئ.

بلاګ

د دودیز نیویګیشن ، سرلیک او ډول سره ساده دوه کالم بلاګ ترتیب.

ډشبورډ

د اډمین ډشبورډ لپاره بنسټیز جوړښت د ثابت سایډبار او نیوبار سره.

د ننوتلو پاڼه

د ساده لاسلیک فارم لپاره دودیز فارم ترتیب او ډیزاین.

توجیه شوی nav

د توجیه شوي لینکونو سره دودیز نوبار جوړ کړئ. پورته شه! ډیر سفاري دوستانه نه.

چپکشی فوټر

د لید پورټ لاندې ته فوټر ضمیمه کړئ کله چې مینځپانګه د هغې څخه لنډ وي.

د نوبار سره چپکونکی فوټر

په پورتنۍ برخه کې د ثابت نیوبار سره د لید پورټ لاندې ته فوټر ضمیمه کړئ.

تجربې

غیر ځواب ویونکی بوټسټریپ

زموږ د اسنادو له مخې د بوټسټریپ ځواب په اسانۍ سره غیر فعال کړئ .

د کینوس څخه بهر

د بوټسټریپ سره د کارولو لپاره د کینوس څخه د بدلولو وړ نیویګیشن مینو جوړ کړئ.

وسیلې

بوټلینټ

Bootlint د بوټسټریپ HTML لینټر رسميوسیله ده. دا په اوتومات ډول په ویب پاڼو کې د ډیری عام HTML غلطیو لپاره چک کوي کوم چې بوټسټریپ په مناسب ډول "ونیلا" کاروي. د وینیلا بوټسټریپ اجزا/ویجټونه د DOM برخې ته اړتیا لري ترڅو د ځانګړي جوړښتونو سره مطابقت ولري. بوټلینټ ګوري چې د بوټسټریپ اجزاو مثالونه په سمه توګه جوړ شوي HTML لري. ستاسو د بوټسټریپ ویب پرمختیا وسیلې چین ته د بوټلینټ اضافه کولو په اړه غور وکړئ ترڅو هیڅ یو عام غلطی ستاسو د پروژې پراختیا ورو نه کړي.

ټولنه

د بوټسټراپ پراختیا په اړه تازه اوسئ او د دې ګټورو سرچینو سره ټولنې ته ورسیږئ.

• د رسمي بوټسټراپ بلاګ ولولئ او ګډون وکړئ .
• irc.freenode.netپه سرور کې د IRC په کارولو سره د ملګرو بوټسټریپرانو سره خبرې وکړئ ، په ## بوټسټریپ چینل کې.
• د بوټسټریپ په کارولو کې د مرستې لپاره ، د ټاګ په کارولو سره د StackOverflow څخهtwitter-bootstrap-3 پوښتنه وکړئ .
• پرمخ وړونکي باید bootstrapپه پیکجونو کې کلیدي کلمه وکاروي کوم چې د بوټسټریپ فعالیت کې بدلون یا اضافه کوي کله چې د اعظمي کشف لپاره د npm یا ورته تحویلي میکانیزمونو له لارې توزیع کیږي.
• د بوټسټریپ ایکسپو کې د بوټسټریپ سره د خلکو رامینځته کولو الهامي مثالونه ومومئ .

تاسو کولی شئ د وروستي ګپ شپ او په زړه پوري میوزیک ویډیوګانو لپاره په ټویټر کې @getbootstrap هم تعقیب کړئ.

د ځواب ویلو مخنیوی

بوټسټریپ په اتوماتيک ډول ستاسو پاڼې د مختلف سکرین اندازو لپاره تطبیقوي. دلته د دې خصوصیت غیر فعالولو څرنګوالی دی نو ستاسو پاڼه د دې غیر ځواب ویونکي مثال په څیر کار کوي .

د پاڼې غبرګون غیر فعالولو لپاره ګامونه

1. د CSS<meta> سندونو کې ذکر شوي لید پورټ پریږدئ
2. د یو واحد پلنوالي سره د هر گرډ ټایر لپاره پر باندې باندې وګرځئ ، د مثال په widthتوګه ډاډ ترلاسه کړئ چې دا د ډیفالټ بوټسټریپ CSS وروسته راځي. تاسو کولی شئ په اختیاري توګه د میډیا پوښتنو یا ځینې انتخاب کونکي څخه مخنیوی وکړئ ..containerwidth: 970px !important;!important
3. که د نووبارونو په کارولو سره، د نووبار ټول سقوط او پراخیدونکي چلند لرې کړئ.
4. د ګریډ ترتیبونو لپاره .col-xs-*، د منځنیو/لویو په څنګ کې، یا په ځای کې ټولګي وکاروئ. اندیښنه مه کوئ ، د اضافي کوچني وسیلې گرډ ټولو حلونو ته اندازه کوي.

تاسو به لاهم د IE8 لپاره Respond.js ته اړتیا ولرئ (ځکه چې زموږ د رسنیو پوښتنې لاهم شتون لري او پروسس کولو ته اړتیا لري). دا د Bootstrap "ګرځنده سایټ" اړخونه غیر فعالوي.

د ځواب ورکولو سره د بوټسټریپ ټیمپلیټ غیر فعال شوی

موږ دا مرحلې په مثال کې پلي کړې. د دې سرچینې کوډ ولولئ ترڅو وګورئ چې ځانګړي بدلونونه پلي شوي.

غیر ځواب ویونکی مثال وګورئ

د براوزر او وسیله ملاتړ

بوټسټریپ په وروستي ډیسټاپ او ګرځنده براوزرونو کې د غوره کار کولو لپاره رامینځته شوی ، پدې معنی چې زاړه براوزرونه ممکن په مختلف سټایل شوي ، که څه هم په بشپړ ډول فعال وي ، د ځینې برخو رینډرینګ ښکاره کړي.

ملاتړ شوي براوزرونه

په ځانګړې توګه، موږ د لاندې براوزرونو او پلیټ فارمونو وروستي نسخې ملاتړ کوو.

بدیل براوزرونه چې د WebKit، Blink، یا Gecko وروستۍ نسخه کاروي، که مستقیم یا د پلیټ فارم ویب لید API له لارې وي، په ښکاره توګه ملاتړ نه کوي. په هرصورت، بوټسټریپ باید (په ډیرو مواردو کې) په دې براوزرونو کې هم په سمه توګه ښکاره او فعالیت وکړي. نور مشخص ملاتړ معلومات لاندې چمتو شوي.

ګرځنده وسایل

په عموم کې ، بوټسټراپ د هر لوی پلیټ فارم ډیفالټ براوزرونو وروستي نسخې ملاتړ کوي. په یاد ولرئ چې پراکسي براوزرونه (لکه د اوپیرا مینی، د اوپیرا موبایل ټربو موډ، UC براوزر مینی، ایمیزون سلک) ملاتړ نه کوي.

د ډیسټاپ براوزرونه

په ورته ډول، د ډیری ډیسټاپ براوزرونو وروستي نسخې ملاتړ کیږي.

په وینډوز کې، موږ د انټرنیټ اکسپلورر 8-11 ملاتړ کوو .

د فایرفوکس لپاره، د وروستي نورمال مستحکم ریلیز سربیره، موږ د فایرفاکس وروستي پراخ شوي ملاتړ ریلیز (ESR) نسخه هم ملاتړ کوو.

په غیر رسمي توګه، بوټسټریپ باید د لینکس لپاره کرومیم او کروم، د لینکس لپاره فایرفوکس، او انټرنیټ اکسپلورر 7، او همدارنګه د مایکروسافټ ایج کې ښه وګوري او چلند وکړي، که څه هم دوی په رسمي توګه نه ملاتړ کیږي.

د ځینې براوزر بګونو لیست لپاره چې بوټسټریپ ورسره لاس او ګریوان دي ، زموږ د براوزر بګ دیوال وګورئ .

انټرنیټ اکسپلورر 8 او 9

د انټرنیټ اکسپلورر 8 او 9 هم ملاتړ کیږي، په هرصورت، مهرباني وکړئ په یاد ولرئ چې ځینې CSS3 ملکیتونه او HTML5 عناصر د دې براوزرونو لخوا په بشپړ ډول نه ملاتړ کیږي. برسېره پردې، د انټرنیټ اکسپلورر 8 د رسنیو پوښتنو مالتړ فعالولو لپاره د Respond.js کارولو ته اړتیا لري.

د CSS3 او HTML5 ځانګړتیاو د براوزر مالتړ په اړه د جزیاتو لپاره ایا زه کولی شم استعمال کړم .

انټرنیټ اکسپلورر 8 او Respond.js

د انټرنیټ اکسپلورر 8 لپاره ستاسو په پراختیا او تولید چاپیریال کې د Respond.js کارولو پرمهال د لاندې احتیاطونو څخه خبر اوسئ.

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

د CSS سره د Respond.js کارول په مختلف (فرعي) ډومین کې کوربه شوي (د مثال په توګه په CDN کې) یو څه اضافي تنظیم ته اړتیا لري. د جزیاتو لپاره د 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;کله چې د min-width, max-width, min-height, یا سره یوځای شي max-height. د همدې دلیل لپاره، د v3.0.1 په توګه، موږ نور max-widthپه .containers کې کار نه کوو.

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

IE8 ځینې مسلې لري @font-faceکله چې سره یوځای شي :before. بوټسټریپ دا ترکیب د خپل ګلیفیکون سره کاروي. که یوه پاڼه کیش شوې وي، او د کړکۍ په اوږدو کې د موږک پرته پورته کیږي (د بیلګې په توګه د ریفریش تڼۍ کېکاږئ یا په iframe کې یو څه پورته کړئ) نو پاڼه مخکې له دې چې د فونټ لوډ شي وړاندې کیږي. د پاڼې (باډي) باندې ځړول به ځینې عکسونه وښیې او په پاتې شبیانو باندې ځړول به هغه هم وښیې. د جزیاتو لپاره ۱۳۸۶۳ ګڼه وګورئ.

د IE مطابقت موډل

بوټسټریپ د زاړه انټرنیټ اکسپلورر مطابقت حالتونو کې ملاتړ نه کوي. د دې لپاره چې ډاډ ترلاسه کړئ چې تاسو د IE لپاره وروستي رینډرینګ حالت کاروئ، <meta>په خپلو پاڼو کې د مناسب ټاګ په شمول په پام کې ونیسئ:

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

د ډیبګ کولو وسیلو په خلاصولو سره د سند حالت تایید کړئ: F12د "د سند حالت" فشار ورکړئ او چیک کړئ.

دا ټګ د بوټسټریپ په ټولو اسنادو او مثالونو کې شامل شوی ترڅو ډاډ ترلاسه کړي چې د انټرنیټ اکسپلورر په هر ملاتړ شوي نسخه کې غوره رینډرینګ ممکن دی.

د نورو معلوماتو لپاره دا StackOverflow پوښتنه وګورئ .

انټرنیټ اکسپلورر 10 په وینډوز 8 او وینډوز تلیفون 8 کې

د انټرنیټ اکسپلورر 10 د وسیلې پلنوالی د لید پورټ چوکۍ څخه توپیر نه کوي ، او پدې توګه د بوټسټریپ CSS کې د میډیا پوښتنې په سمه توګه نه پلي کوي. په نورمال ډول تاسو به د دې د حل کولو لپاره د CSS ګړندۍ ټوټه اضافه کړئ:

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

په هرصورت، دا د هغو وسیلو لپاره کار نه کوي چې د وینډوز تلیفون 8 نسخه د Update 3 (aka 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)
}

د لا زیاتو معلوماتو او کارونې لارښوونو لپاره، د وینډوز تلیفون 8 او د وسیلې پراخوالی ولولئ .

د سر پورته کولو په توګه، موږ دا د بوټسټراپ په ټولو اسنادو او مثالونو کې د مظاهرې په توګه شاملوو.

د سفاري فیصدي ګردي کول

د OS X لپاره د v7.1 څخه دمخه د سفاري د نسخو رینډینګ انجن او د iOS v8.0 لپاره سفاري زموږ د .col-*-1ګریډ ټولګیو کې کارول شوي د لسیزو ځایونو شمیر سره یو څه ستونزه درلوده. نو که تاسو د 12 انفرادي گرډ کالمونه درلودل، نو تاسو به وګورئ چې دوی د کالمونو د نورو قطارونو په پرتله لنډ دي. د سفاري/iOS د لوړولو سربیره، تاسو د کار کولو لپاره ځینې اختیارونه لرئ:

• خپل وروستي گرډ کالم ته اضافه کړئ .pull-rightترڅو د سخت ښي اړخ سمون ترلاسه کړئ
• د سفاري لپاره د کامل دورې ترلاسه کولو لپاره خپل سلنه په لاسي ډول تنظیم کړئ (د لومړي اختیار څخه ډیر ستونزمن)

موډلونه، نوبارونه، او مجازی کیبورډونه

اوور فلو او سکرول

overflow: hiddenد عنصر لپاره ملاتړ <body>په iOS او Android کې خورا محدود دی. دې پای ته رسیدو لپاره ، کله چې تاسو د دې وسیلو په براوزرونو کې د موډل پورتنۍ یا ښکته څخه تیر کړئ ، نو <body>مینځپانګه به سکرول پیل کړي. د کروم بګ #175502 (په کروم v40 کې فکس شوی) او د ویب کیټ بګ #153852 وګورئ .

د iOS متن ساحې او سکرول کول

<input>د iOS 9.3 په څیر، پداسې حال کې چې یو موډل خلاص وي، که چیرې د سکرول اشارې لومړنۍ لمس د متن یا a په حد کې وي <textarea>، <body>د موډل لاندې مینځپانګه به پخپله د موډل پرځای سکرول شي. د WebKit بګ # 153856 وګورئ .

مجازی کیبورډونه

همچنان ، په یاد ولرئ چې که تاسو یو ثابت نوبار کاروئ یا په موډل کې دننه معلومات وکاروئ ، iOS یو رینډرینګ بګ لري چې د ثابت عناصرو موقعیت نه تازه کوي کله چې مجازی کیبورډ پیل شي. د دې لپاره یو څو کاري حلونه ستاسو د عناصرو بدلول position: absoluteیا په تمرکز کې د ټایمر غوښتنه کول شامل دي ترڅو په لاسي ډول د موقعیت سمولو هڅه وکړي. دا د بوټسټریپ لخوا نه اداره کیږي ، نو دا تاسو پورې اړه لري چې پریکړه وکړئ کوم حل ستاسو د غوښتنلیک لپاره غوره دی.

نوبار ډراپ ډاون

عنصر د .dropdown-backdropz-indexing پیچلتیا له امله په nav کې په iOS کې نه کارول کیږي. په دې توګه، په نیوبارز کې د ډراپ ډاون بندولو لپاره، تاسو باید په مستقیم ډول د ډراپ ډاون عنصر کلیک وکړئ (یا کوم بل عنصر چې په iOS کې د کلک پیښې ډزې کوي ).

د براوزر زوم کول

د پاڼې زوم کول په ناببره توګه په ځینو برخو کې د رینډینګ آثار وړاندې کوي، دواړه په بوټسټریپ او پاتې ویب کې. د مسلې پورې اړه لري، موږ کولی شو دا حل کړو (لومړی لټون وکړئ او بیا د اړتیا په صورت کې یوه مسله پرانیزئ). په هرصورت، موږ دا له پامه غورځوو ځکه چې دوی ډیری وختونه د هیکي کاري حل پرته بل مستقیم حل نلري.

چپکشی :hover/ :focusپه موبایل کې

که څه هم په ډیری ټچ سکرینونو کې ریښتیني ځړول ممکن ندي ، ډیری ګرځنده براوزرونه د هوور کولو ملاتړ تقلید کوي او :hover"چپچکی" کوي. په بل عبارت، :hoverسټایلونه د عنصر ټایپ کولو وروسته پلي کول پیل کوي او یوازې وروسته له هغه پلي کول ودروي کله چې کارونکي یو بل عنصر ټاپ کړي. دا کولی شي د بوټسټریپ :hoverایالتونو لامل شي چې په ورته براوزرونو کې په غیر مطلوب ډول "بند" شي. ځینې ​​ګرځنده براوزرونه هم :focusورته چپکونکي جوړوي. اوس مهال د دې مسلو لپاره هیڅ ساده حل شتون نلري پرته له دې چې دا ډول سټایلونه په بشپړ ډول لرې کړي.

چاپول

حتی په ځینو عصري براوزرونو کې ، چاپ کول عجیب کیدی شي.

په ځانګړې توګه، د کروم v32 په څیر او د حاشیې ترتیباتو په پام کې نیولو پرته، کروم د ویب پاڼې د چاپ کولو په وخت کې د رسنیو پوښتنو حل کولو په وخت کې د فزیکي کاغذ اندازې په پرتله د پام وړ لنډ ویوپورټ چوکۍ کاروي. دا کیدی شي د بوټسټریپ اضافي کوچني گرډ په غیر متوقع ډول د چاپ کولو په وخت کې فعال شي. د ځینو جزیاتو لپاره مسله #12078 او د کروم بګ #273306 وګورئ. وړاندیز شوي حل لارې:

• اضافي-کوچني ګریډ ګنډل او ډاډ ترلاسه کړئ چې ستاسو پاڼه د هغې لاندې د منلو وړ ښکاري.
• د لږ متغیرونو ارزښتونه تنظیم @screen-*کړئ ترڅو ستاسو د چاپګر کاغذ د اضافي کوچني څخه لوی وګڼل شي.
• یوازې د چاپ میډیا لپاره د گرډ اندازې وقفې ځای بدلولو لپاره د دودیزو رسنیو پوښتنې اضافه کړئ.

همچنان ، د سفاري v8.0 په څیر ، د ثابت چوکۍ .containers کولی شي سفاري د دې لامل شي چې د چاپ کولو پرمهال غیر معمولي کوچني فونټ اندازه وکاروي. د نورو جزیاتو لپاره #14868 او د ویب کیټ بګ #138192 وګورئ . د دې لپاره یو احتمالي کار د لاندې CSS اضافه کول دي:

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

د Android سټاک براوزر

د بکس څخه بهر، Android 4.1 (او حتی ځینې نوي ریلیزونه په ښکاره ډول) د براوزر ایپ سره د انتخاب ډیفالټ ویب براوزر په توګه لیږل کیږي (لکه څنګه چې د کروم سره مخالف). له بده مرغه، د براوزر ایپ په عمومي توګه د CSS سره ډیری بګونه او متضادات لري.

مینو غوره کړئ

په <select>عناصرو کې ، د Android سټاک براوزر به د اړخ کنټرولونه ونه ښیې که چیرې شتون ولري border-radiusاو / یا borderپلي شي. ( د جزیاتو لپاره دا StackOverflow پوښتنه وګورئ.) د سرغړونکي CSS لرې کولو لپاره د لاندې کوډ ټوټه وکاروئ او <select>د Android سټاک براوزر کې د غیر سټایل شوي عنصر په توګه وړاندې کړئ. د کارونکي اجنټ سنیفنګ د کروم ، سفاري او موزیلا براوزرونو سره د مداخلې مخه نیسي.

<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 براوزر هیکونه کاروي ترڅو ځانګړي براوزر نسخو ته ځانګړي CSS په نښه کړي ترڅو پخپله براوزر کې د بګ شاوخوا کار وکړي. دا هیکونه په پوهیدو سره د CSS تصدیق کونکي شکایت کوي چې دوی غلط دي. په یو څو ځایونو کې، موږ د خونریزي څنډې د 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ټولګی به ډاډ ترلاسه کړي چې لینک یو ځل متمرکز شي (د لیدل شوي کیبورډ کاروونکو لپاره).

<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 وړاندیز شوي تناسب څخه ښکته ). دا کولی شي هغه کاروونکو ته ستونزې رامینځته کړي چې ټیټ لید لري یا څوک چې رنګ ړوند وي. دا ډیفالټ رنګونه ممکن د دوی برعکس او مشروعیت زیاتولو لپاره تعدیل ته اړتیا ولري.

اضافي سرچینې

• د لاسرسي مسلو پیژندلو لپاره "HTML Codesniffer" بک مارکیټ
• د کروم د لاسرسي پراختیا کونکي اوزار توسیع
• د رنګ برعکس تحلیل کونکی
• د A11Y پروژه
• د MDN لاسرسي اسناد

د جواز FAQs

بوټسټریپ د MIT جواز لاندې خپور شوی او د 2019 ټویټر کاپي حق دی. په کوچنیو برخو کې جوش شوي، دا د لاندې شرایطو سره بیان کیدی شي.

دا تاسو ته اړتیا لري:

• کله چې تاسو په خپلو کارونو کې کاروئ نو جواز او د کاپي حق خبرتیا د بوټسټریپ CSS او JavaScript فایلونو کې شامل وساتئ

دا تاسو ته اجازه درکوي:

• په وړیا توګه د شخصي، خصوصي، شرکت داخلي، یا سوداګریزو موخو لپاره، په بشپړه یا برخه کې، بوټسټراپ ډاونلوډ او وکاروئ
• بوټسټریپ په کڅوړو یا توزیع کې وکاروئ چې تاسو یې رامینځته کوئ
• د سرچینې کوډ بدل کړئ
• دریم اړخ ته د بوټسټریپ ترمیم او توزیع کولو لپاره فرعي جواز ورکړئ چې په جواز کې شامل ندي

دا تاسو منع کوي چې:

• لیکوالان او د جواز مالکین د زیانونو لپاره مسؤل وساتئ ځکه چې بوټسټریپ پرته له تضمین چمتو کیږي
• د بوټسټریپ جوړونکي یا د کاپي حق لرونکي مسؤلین ونیسئ
• د مناسب انتساب پرته د بوټسټریپ هره برخه بیا توزیع کړئ
• د ټویټر ملکیت هر هغه نښه وکاروئ چې په هره طریقه یې بیانوي یا دا معنی لري چې ټویټر ستاسو د ویش تصدیق کوي
• د ټویټر ملکیت هر هغه نښان وکاروئ چې په هره طریقه یې دا بیانوي یا دا معنی لري چې تاسو د ټویټر سافټویر په پوښتنې کې رامینځته کړی

دا تاسو ته اړتیا نلري چې:

• پخپله د بوټسټریپ سرچینه شامل کړئ، یا کوم تعدیلات چې تاسو یې په دې کې کړي وي، په هر ډول بیا توزیع کې چې تاسو یې راټول کړئ چې دا پکې شامل دي
• هغه بدلونونه چې تاسو یې په بوټسټریپ کې کوئ بیرته د بوټسټریپ پروژې ته وسپارئ (که څه هم دا ډول فیډبیک هڅول کیږي)

د بوټسټراپ بشپړ جواز د نورو معلوماتو لپاره د پروژې ذخیره کې موقعیت لري .

ژباړې

د ټولنې غړو د بوټسټریپ اسناد په مختلفو ژبو ژباړلي دي. هیڅ یو په رسمي ډول نه ملاتړ کیږي او دوی ممکن تل تازه نه وي.

• بوټسټریپ 中文文档 (چینایي)
• د ډنسک (ډنمارکي) بوټسټراپ
• بوټسټریپ en Français (فرانسوی)
• Bootstrap auf Deutsch (جرمني)
• بوټسټریپ په ایټالوی (ایټالوی) کې
• بوټسټریپ 한국어 (کورین)
• په برازیل کې د پرتګالي بوټسټپ (برازیل پرتګالي)
• بوټسټریپ по-русски (روسی)
• بوټسټریپ en Español (هسپانوي)
• د تركي بوټ سټراپ (تركي)
• بوټسټراپ українською (اوکرايني)
• ویتنام (ویتنامی)

موږ د ژباړې په تنظیم یا کوربه توب کې مرسته نه کوو، موږ یوازې له دوی سره اړیکه لرو.

نوې یا غوره ژباړه پای ته ورسیده؟ زموږ په لیست کې د اضافه کولو لپاره د پلولو غوښتنه خلاص کړئ.