Source

پیژندنه

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

چټک پیل

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

سی ایس ایس

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

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

JS

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

موږ د jQuery پتلی جوړښت کاروو ، مګر بشپړ نسخه هم ملاتړ کیږي.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

زموږ bootstrap.bundle.jsاو پوپرbootstrap.bundle.min.js شامل دي ، مګر jQuery نه . د دې په اړه د نورو معلوماتو لپاره چې په Bootstrap کې څه شامل دي، مهرباني وکړئ زموږ د منځپانګې برخه وګورئ.

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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 عناصرو ته یو څه ډیر نظر لرونکي ریسیټ چمتو کوو.

ټولنه

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

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

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