پیژندنه

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

چټک پیل

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

سی ایس ایس

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

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

JS

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

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

بنډل

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

<script src="https://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

جلا

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

<script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

اجزا

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

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

د ګوښه کولو لپاره خبرتیاوې
د ټګلینګ حالتونو او چیک باکس/راډیو فعالیت لپاره تڼۍ
د ټولو سلایډ چلندونو، کنټرولونو، او شاخصونو لپاره کاروسیل
د مینځپانګې لید لید بدلولو لپاره سقوط وکړئ
د ښودلو او موقعیت ورکولو لپاره ډراپ ډاون (د 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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 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://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 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 هم تعقیب کړئ.