اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړشئ
in English

پیژندنه

د Bootstrap سره پیل کړئ، د ځواب ورکوونکي، ګرځنده لومړی سایټونو جوړولو لپاره د نړۍ ترټولو مشهور چوکاټ، د jsDelivr او د ټیمپلیټ سټارټر پاڼې سره.

په دې پاڼه کې

چټک پیل

ستاسو په پروژه کې ژر تر ژره بوټسټریپ اضافه کولو په لټه کې یاست؟ jsDelivr وکاروئ، د وړیا خلاصې سرچینې CDN. د بسته بندۍ مدیر کارول یا د سرچینې فایلونو ډاونلوډ ته اړتیا لرئ؟ د ډاونلوډ پاڼې ته لاړشئ .

سی ایس ایس

زموږ د سی ایس ایس پورته کولو لپاره د نورو ټولو سټایل شیټونو څخه مخکې سټایل شیټ کاپي پیسټ <link>کړئ .<head>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

زموږ ډیری برخې د کار کولو لپاره جاواسکریپټ کارولو ته اړتیا لري. په ځانګړې توګه، دوی زموږ خپل جاواسکریپټ پلگ ان او پاپر ته اړتیا لري . د خپلو پاڼو پای ته نږدې، د تړلو ټګ څخه مخکې ، د دوی د فعالولو لپاره لاندې یو<script> ځای ونیسئ.</body>

بنډل

زموږ د دوه بنډلونو څخه د هر بوټسټریپ جاواسکریپټ پلگ ان او انحصار شامل کړئ. دواړه bootstrap.bundle.jsاو زموږ د وسیلو او پاپورونو لپاره پوپرbootstrap.bundle.min.js شامل دي . په بوټسټراپ کې څه شامل دي په اړه د نورو معلوماتو لپاره، مهرباني وکړئ زموږ د منځپانګې برخه وګورئ.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

جلا

که تاسو پریکړه وکړئ چې د جلا سکریپټ حل سره لاړ شئ، پاپر باید لومړی راشي (که تاسو د وسیلې ټایپ یا پاپور کاروئ)، او بیا زموږ د جاواسکریپټ پلگ ان.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

ماډلونه

که تاسو کاروئ <script type="module">، مهرباني وکړئ زموږ د ماډل برخې په توګه د بوټسټریپ کارولو ته مراجعه وکړئ.

اجزا

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

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

د سټارټر ټیمپلیټ

ډاډ ترلاسه کړئ چې خپلې پاڼې د وروستي ډیزاین او پراختیا معیارونو سره تنظیم کړئ. دا پدې مانا ده چې د HTML5 doctype کارول او د مناسب ځواب ویونکي چلند لپاره د لید میټا ټګ په شمول. دا ټول یوځای کړئ او ستاسو پاڼې باید داسې ښکاري:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

مهم نړیوال

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

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 عناصرو ته یو څه ډیر نظر لرونکي ریسیټ چمتو کوو.

ټولنه

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

  • د رسمي بوټسټراپ بلاګ ولولئ او ګډون وکړئ .
  • په IRC کې د ملګرو بوټسټریپرانو سره خبرې وکړئ. په irc.libera.chatسرور کې، په #bootstrapچینل کې.
  • د پلي کولو مرسته ممکن په Stack Overflow (tagged bootstrap-5) کې وموندل شي.
  • پرمخ وړونکي باید bootstrapپه پیکجونو کې کلیدي کلمه وکاروي چې د بوټسټریپ فعالیت کې ترمیم یا اضافه کوي کله چې د اعظمي کشف لپاره د npm یا ورته تحویلي میکانیزمونو له لارې توزیع کیږي.

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