in English

پیژندنه

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

چټک پیل

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

سی ایس ایس

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

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

JS

زموږ ډیری برخې د کار کولو لپاره جاواسکریپټ کارولو ته اړتیا لري. په ځانګړې توګه، دوی jQuery ، Popper ، او زموږ خپل جاواسکریپټ پلگ ان ته اړتیا لري. موږ د jQuery پتلی جوړښت کاروو ، مګر بشپړ نسخه هم ملاتړ کیږي.

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

بنډل

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

جلا

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

اجزا

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

هغه برخې وښایاست چې جاواسکریپټ ته اړتیا لري
  • د ګوښه کولو لپاره خبرتیاوې
  • د ټګلینګ حالتونو او چیک باکس/راډیو فعالیت لپاره تڼۍ
  • د ټولو سلایډ چلندونو، کنټرولونو، او شاخصونو لپاره کاروسیل
  • د مینځپانګې لید لید بدلولو لپاره سقوط وکړئ
  • د ښودلو او موقعیت ورکولو لپاره ډراپ ډاون ( پوپر ته هم اړتیا لري )
  • د ښودلو، موقعیت، او سکرول چلند لپاره موډلونه
  • نوبار د ځواب ویونکي چلند پلي کولو لپاره زموږ د کولپس پلگ ان غزولو لپاره
  • د سکرول چلند او نیویګیشن تازه معلوماتو لپاره 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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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, shrink-to-fit=no">

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

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

په 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-4) کې وموندل شي.
  • پرمخ وړونکي باید bootstrapپه پیکجونو کې کلیدي کلمه وکاروي کوم چې د بوټسټریپ فعالیت کې بدلون یا اضافه کوي کله چې د اعظمي کشف لپاره د npm یا ورته تحویلي میکانیزمونو له لارې توزیع کیږي.

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

CSPs او سرایت شوي SVGs

د بوټسټریپ ډیری اجزاوو کې زموږ په CSS کې ځای پرځای شوي SVGs شامل دي ترڅو د براوزرونو او وسیلو په اوږدو کې په دوامداره او اسانۍ سره اجزاو سټایل کولو لپاره. د هغو سازمانونو لپاره چې ډیر سخت CSP تشکیلات لري ، موږ د خپلو ایمبیډ شوي SVGs ټول مثالونه مستند کړي دي (چې ټول یې له لارې پلي کیږي )background-image نو تاسو کولی شئ خپل اختیارونه په ښه توګه وڅیړئ.

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