د بوټسټریپ سره پیل وکړئ

بوټسټریپ یو پیاوړی، د فیچر څخه ډک فرنټ اینډ وسیلې کټ دی. هر څه جوړ کړئ - له پروټوټایپ څخه تولید ته - په دقیقو کې.

په دې پاڼه کې

چټک پیل

د بوټسټریپ د تولید لپاره چمتو CSS او جاواسکریپټ د CDN له لارې پرته له کوم جوړ ګامونو ته اړتیا سره پیل کړئ. دا د دې بوټسټریپ کوډپین ډیمو سره په عمل کې وګورئ .

ستاسو د پروژې په روټ کې یو نوی index.htmlفایل جوړ کړئ. په ګرځنده وسیلو کې د مناسب ځواب ویونکي چلند<meta name="viewport"> لپاره ټګ هم شامل کړئ .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

د Bootstrap CSS او JS شامل کړئ. د بندیدو دمخه زموږ د CSS لپاره ، او زموږ د جاواسکریپټ بنډل لپاره <link>ټاګ (د پوپر په شمول د ډراپ ډاونونو ، پاپرز ، او اوزار ټایپونو لپاره) کې ځای ونیسئ . زموږ د CDN لینکونو په اړه نور معلومات ترلاسه کړئ .<head><script></body>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

تاسو کولی شئ په جلا توګه پوپر او زموږ JS هم شامل کړئ. که تاسو پلان نه لرئ چې د ډراپ ډاونونو، پاپورونو، یا وسیلو ټایپونو څخه کار واخلئ، د پوپر په شمول د یو څه کیلوبایټ څخه خوندي کړئ.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

سلام نړی! د خپلې خوښې په براوزر کې پاڼه پرانیزئ ترڅو خپل بوټسټراپ شوي پاڼه وګورئ. اوس تاسو کولی شئ د خپل ترتیب په جوړولو ، د لسګونو برخو اضافه کولو، او زموږ د رسمي مثالونو په کارولو سره د بوټسټریپ سره جوړول پیل کړئ .

د CDN لینکونه

د حوالې په توګه، دلته زموږ لومړني CDN لینکونه دي.

تفصیل	URL
سی ایس ایس	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

تاسو کولی شئ د منځپانګې په پاڼه کې لیست شوي زموږ د اضافي جوړښتونو د راوړلو لپاره CDN هم وکاروئ .

راتلونکی ګامونه

د ځینې مهم نړیوال چاپیریال ترتیباتو په اړه یو څه نور ولولئ چې بوټسټریپ یې کاروي.
د هغه څه په اړه ولولئ چې په بوټسټریپ کې زموږ د مینځپانګې برخه کې شامل دي او د اجزاو لیست چې لاندې جاواسکریپټ ته اړتیا لري .
یو څه نور ځواک ته اړتیا لرئ؟ د بسته بندۍ مدیر له لارې د سرچینې فایلونو په شمول د بوټسټریپ سره د جوړولو په اړه فکر وکړئ .
د ماډل په توګه د بوټسټریپ کارولو په لټه کې یاست <script type="module">؟ مهرباني وکړئ د ماډل برخې په توګه زموږ د بوټسټریپ کارولو ته مراجعه وکړئ.

د JS برخې

لیواله یاست چې کومې برخې په واضح ډول زموږ جاواسکریپټ او پاپر ته اړتیا لري؟ لاندې د ښودلو اجزاو لینک باندې کلیک وکړئ. که تاسو د عمومي پاڼې جوړښت په اړه ډاډه نه یاست، د مثال پاڼې نمونې لوستلو ته دوام ورکړئ.

هغه برخې وښایاست چې جاواسکریپټ ته اړتیا لري

د ګوښه کولو لپاره خبرتیاوې
د ټګلینګ حالتونو او چیک باکس/راډیو فعالیت لپاره تڼۍ
د ټولو سلایډ چلندونو، کنټرولونو، او شاخصونو لپاره کاروسیل
د مینځپانګې لید لید بدلولو لپاره سقوط وکړئ
د ښودلو او موقعیت ورکولو لپاره ډراپ ډاون ( پوپر ته هم اړتیا لري )
د ښودلو، موقعیت، او سکرول چلند لپاره موډلونه
نوبار د ځواب ویونکي چلند پلي کولو لپاره زموږ د کولپس او آف کینوس پلگ انونو غزولو لپاره
د مینځپانګې پینونو ته د توګل کولو لپاره د ټب پلگ ان سره نیوس
د ښودلو، موقعیت ورکولو، او سکرول چلند لپاره بند کینوسونه
د سکرول چلند او نیویګیشن تازه معلوماتو لپاره Scrollspy
د ښودلو او ګوښه کولو لپاره ټیسټونه
د ښودلو او موقعیت لپاره وسیلې او پاپورونه ( پوپر ته هم اړتیا لري )

مهم نړیوال

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

HTML5 doctype

بوټسټریپ د HTML5 doctype کارولو ته اړتیا لري. پرته له دې، تاسو به یو څه خوندور او نامکمل سټایل وګورئ.

<!doctype html>
<html lang="en">
  ...
</html>

د ځواب ویونکي میټا ټګ

بوټسټریپ ګرځنده لومړی رامینځته شوی ، یوه ستراتیژي په کوم کې چې موږ لومړی د ګرځنده وسیلو لپاره کوډ غوره کوو او بیا د CSS میډیا پوښتنو په کارولو سره د اړتیا سره سم برخې اندازه کوو. د ټولو وسیلو لپاره مناسب رینډینګ او ټچ زوم کولو ډاډ ترلاسه کولو لپاره ، د ځواب ویونکي لید پورټ میټا ټګ خپل <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

تاسو کولی شئ په چټک پیل کې په عمل کې د دې مثال وګورئ .

د بکس اندازه کول

په CSS کې د لا ساده اندازې لپاره، موږ نړیوال box-sizingارزښت content-boxله border-box. دا ډاډ ورکوي paddingچې د عنصر وروستي محاسبه شوي چوکۍ اغیزه نه کوي، مګر دا کولی شي د ځینې دریمې ډلې سافټویر لکه د ګوګل نقشې او د ګوګل ګمرک لټون انجن سره ستونزې رامینځته کړي.

په نادره مواردو کې تاسو اړتیا لرئ دا له پامه غورځوئ، د لاندې په څیر یو څه وکاروئ:

.selector-for-some-widget {
  box-sizing: content-box;
}

د پورتنۍ ټوټې سره، ځړول شوي عناصر — په شمول د تولید شوي مینځپانګې له لارې ::beforeاو ::after— ټول به د دې لپاره مشخص شوي میراث box-sizingترلاسه کړي .selector-for-some-widget.

د بکس ماډل او اندازه کولو په اړه نور معلومات په CSS Tricks کې زده کړئ .

ریبوټ

د ښه کراس براوزر رینډرینګ لپاره، موږ په براوزرونو او وسیلو کې د تضادونو سمولو لپاره ریبوټ کاروو پداسې حال کې چې عام HTML عناصرو ته یو څه ډیر نظر لرونکي ریسیټ چمتو کوو.

ټولنه

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

د رسمي بوټسټراپ بلاګ ولولئ او ګډون وکړئ .
زموږ د GitHub بحثونه وپوښتئ او وپلټئ .
په IRC کې د ملګرو بوټسټریپرانو سره خبرې وکړئ. په irc.libera.chatسرور کې، په #bootstrapچینل کې.
Implementation help may be found at Stack Overflow (tagged bootstrap-5).
Developers should use the keyword bootstrap on packages that modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.