in English

پێشەکی

دەست بکە بە Bootstrap، بەناوبانگترین چوارچێوەی جیهان بۆ دروستکردنی سایتی وەڵامدەرەوە و مۆبایل-یەکەم، لەگەڵ jsDelivr و لاپەڕەی دەستپێکردنی قاڵب.

دەستپێکردنی خێرا

بەدوای زیادکردنی خێرای Bootstrap بۆ پڕۆژەکەتدا دەگەڕێیت؟ jsDelivr بەکاربهێنە، کە CDN ی سەرچاوە کراوەی بێبەرامبەرە. بەکارهێنانی بەڕێوەبەری پاکێج یان پێویستت بە دابەزاندنی فایلە سەرچاوەییەکانە؟ سەردانی لاپەڕەی دابەزاندنەکان بکە .

CSS

پێش هەموو ستایلەکانی تر ستایل شیتەکە کۆپی بکە <link>بۆ <head>ئەوەی CSS ـەکەمان بار بکەیت.

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

ج.س

زۆرێک لە پێکهاتەکانمان پێویستیان بە بەکارهێنانی جاڤاسکڕێپت هەیە بۆ ئەوەی کاربکات. بە تایبەتی، ئەوان پێویستیان بە jQuery , Popper , و پێوەکراوەکانی جاڤاسکڕێپتی تایبەت بە خۆمان هەیە. ئێمە jQuery's slim build بەکاردەهێنین , بەڵام وەشانی تەواو پشتگیری دەکرێت.

یەکێک لەم <script>sانەی خوارەوە لە نزیک کۆتایی لاپەڕەکانت دابنێ، ڕاست پێش تاگی داخستنی ، </body>بۆ ئەوەی چالاکیان بکەیت. دەبێت سەرەتا jQuery بێت، پاشان Popper، پاشان پێوەکراوەکانی جاڤاسکڕێپتەکانمان.

چەپک

هەموو پێوەکراوەکانی جاڤاسکڕێپتی Bootstrap لەگەڵ یەکێک لە دوو باندڵەکەماندا بخەرە ناوەوە. هەردووکیان bootstrap.bundle.jsو Popperbootstrap.bundle.min.js لەخۆدەگرن بۆ ئامرازەکانی ئێمە و popovers، بەڵام نەک jQuery . سەرەتا jQuery دابنێ، پاشان باندڵی جاڤاسکڕێپتی Bootstrap. بۆ زانیاری زیاتر لەسەر ئەوەی کە لە Bootstrap چی هەیە، تکایە سەیری بەشی ناوەڕۆکەکانمان بکە.

<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 و جاڤاسکڕێپتەکەمان و Popper هەیە؟ لە خوارەوە کلیک لە بەستەری show components بکە. ئەگەر دڵنیا نیت لە پێکهاتەی لاپەڕەکە، بەردەوام بە لە خوێندنەوە بۆ نموونە قاڵبی لاپەڕە.

ئەو پێکهاتانە پیشان بدە کە پێویستیان بە جاڤاسکڕێپت هەیە
  • ئاگادارکردنەوە بۆ دەرکردن
  • دوگمەکان بۆ گۆڕینی دۆخەکان و بۆکسی هەڵبژاردن/کارایی ڕادیۆ
  • کارۆسێل بۆ هەموو ڕەفتارەکانی سلاید و کۆنتڕۆڵەکان و نیشاندەرەکان
  • داڕشتن بۆ گۆڕینی بینینی ناوەڕۆک
  • درۆپداونەکان بۆ پیشاندانی و جێگیرکردن (هەروەها پێویستی بە Popper هەیە )
  • مۆداڵەکان بۆ پیشاندانی و جێگیرکردن و هەڵسوکەوتی سکڕۆڵ
  • ناوبار بۆ درێژکردنەوەی پێوەکراوەکەی Collapse ـمان بۆ جێبەجێکردنی هەڵسوکەوتی وەڵامدەرەوە
  • Scrollspy بۆ هەڵسوکەوتی سکڕۆڵ و نوێکارییەکانی گەشتکردن
  • ئامرازەکان و پۆپۆڤەرەکان بۆ نمایشکردن و شوێندانان (هەروەها پێویستی بە Popper هەیە )

قاڵبی دەستپێک

دڵنیابە کە لاپەڕەکانت بە نوێترین ستانداردی دیزاین و پەرەپێدان ڕێکخراوە. ئەمەش واتە بەکارهێنانی HTML5 doctype و بوونی مێتا تاگی viewport بۆ هەڵسوکەوتی وەڵامدانەوەی دروست. هەمووی پێکەوە دابنێ و پێویستە لاپەڕەکانت بەم شێوەیە دەربکەون:

<!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>

ئەوە تەنها شتێکە کە پێویستە بۆ پێداویستیەکانی لاپەڕەی گشتی. سەردانی دۆکیومێنتەکانی Layout یان نموونە فەرمییەکانمان بکە بۆ دەستپێکردنی داڕشتنی ناوەڕۆک و پێکهاتەکانی ماڵپەڕەکەت.

جیهانە گرنگەکان

بووتستراپ مشتێک لە ستایل و ڕێکخستنە جیهانییە گرنگەکان بەکاردەهێنێت کە پێویستە ئاگاداری بیت لەکاتی بەکارهێنانیدا، کە هەموویان نزیکەی تەنها ئاڕاستەکراون بۆ ئاساییکردنەوەی ستایلەکانی وێبگەڕی کرۆس. با خۆمان بخزێنینە ناوەوە.

جۆری دۆکیۆمێنتی HTML5

Bootstrap پێویستی بە بەکارهێنانی HTML5 doctype هەیە. بەبێ ئەو، هەندێک ستایلێکی ناتەواوی فەنکی دەبینیت، بەڵام لەوانەش نابێت ببێتە هۆی هیچ هێسکێکی بەرچاو.

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

مێتا تاگی وەڵامدەرەوە

Bootstrap is developed mobile first , ستراتیژییەک کە تێیدا ئێمە سەرەتا کۆد بۆ ئامێرە مۆبایلەکان باشتر دەکەین و دواتر پێکهاتەکان بەپێی پێویست گەورە دەکەین بە بەکارهێنانی پرسیارەکانی میدیای CSS. بۆ دڵنیابوون لە ڕەندەرکردنی دروست و زوومکردنی دەست لێدان بۆ هەموو ئامێرەکان، مێتا تاگی دەرچەی بینینی وەڵامدەرەوە زیاد بکە بۆ <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

دەتوانن نموونەیەکی ئەمە بە کردار لە قاڵبی دەستپێکەردا ببینن .

قەبارەی سندوق

box-sizingبۆ قەبارەدانانی ڕاستەوخۆتر لە CSS، ئێمە بەهای جیهانی لە دەگۆڕین content-boxبۆ border-box. ئەمەش دڵنیای دەدات paddingکە کاریگەری لەسەر پانایی کۆتایی حیسابکراوی توخمێک نییە، بەڵام دەتوانێت ببێتە هۆی کێشە لەگەڵ هەندێک نەرمەکاڵای لایەنی سێیەم وەک نەخشەی گووگڵ و بزوێنەری گەڕانی تایبەت بە گووگڵ.

لەو بۆنە دەگمەنەدا کە پێویستە سەرپێچی بکەیت، شتێکی وەک ئەمانەی خوارەوە بەکاربهێنە:

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

بە پارچەی سەرەوە، توخمە هێلانەکراوەکان- لەوانەش ناوەڕۆکی دروستکراو لە ڕێگەی ::beforeو - ::afterهەموویان میراتی ئەو شتانە دەبن کە box-sizingبۆ ئەوە دیاری کراوە .selector-for-some-widget.

زیاتر بزانە دەربارەی مۆدێلی بۆکس و قەبارەدانان لە CSS Tricks .

دووبارە بوت بکەرەوە

بۆ باشترکردنی ڕەندەری نێوان وێبگەڕەکان، ئێمە Reboot بەکاردەهێنین بۆ ڕاستکردنەوەی ناتەباییەکان لە سەرانسەری وێبگەڕەکان و ئامێرەکاندا لە هەمان کاتدا ڕێستکردنی کەمێک زیاتر بۆ توخمە باوەکانی HTML دابین دەکەین.

کۆمەڵگە

ئاگاداری پەرەپێدانی بووتستراپ بن و بەم سەرچاوە یارمەتیدەرانە دەستت بگاتە کۆمەڵگا.

  • بلۆگی فەرمی بووتستراپ بخوێنەرەوە و سەبسکرایب بکە .
  • لەگەڵ هاوڕێکانی Bootstrappers لە IRC چات بکە. لەسەر irc.libera.chatسێرڤەر، لە #bootstrapکەناڵەکەدا.
  • یارمەتی جێبەجێکردن لەوانەیە لە Stack Overflow (تاگکراو bootstrap-4) بدۆزرێتەوە.
  • گەشەپێدەران پێویستە وشەی سەرەکی bootstrapلەسەر ئەو پاکێجانە بەکاربهێنن کە دەستکاری یان زیاد دەکەن بۆ کارایی Bootstrap لەکاتی دابەشکردن لە ڕێگەی npm یان میکانیزمەکانی گەیاندنی هاوشێوە بۆ زۆرترین دۆزینەوە.

هەروەها دەتوانن لە تویتەر فۆڵۆوی @getbootstrap بکەن بۆ زانینی نوێترین قسە و باس و ڤیدیۆ کلیپە سەرسوڕهێنەرەکان.

CSP و SVG ی جێگیرکراو

چەندین پێکهاتەی Bootstrap SVG ی جێگیرکراو لە CSS ی ئێمەدا لەخۆدەگرن بۆ ستایلکردنی پێکهاتەکان بە بەردەوامی و بە ئاسانی لە سەرانسەری وێبگەڕ و ئامێرەکاندا. بۆ ئەو ڕێکخراوانەی کە ڕێکخستنەکانی CSP توندتریان هەیە، ئێمە هەموو نموونەکانی SVG ی جێگیرکراومان بەڵگەدار کردووە (کە هەموویان لە ڕێگەی background-image) جێبەجێ دەکرێن بۆ ئەوەی بتوانیت بە وردی پێداچوونەوە بە هەڵبژاردنەکانت بکەیت.

بە پشتبەستن بە گفتوگۆی کۆمەڵگە ، هەندێک بژاردە بۆ چارەسەرکردنی ئەمە لە بنکەی کۆدی خۆتدا بریتین لە گۆڕینی URLەکان بە سەروەت و سامانی میوانداری ناوخۆیی، لابردنی وێنەکان و بەکارهێنانی وێنەکانی ناو هێڵ (لە هەموو پێکهاتەکاندا ناتوانرێت)، و دەستکاریکردنی CSP ـەکەت. پێشنیاری ئێمە ئەوەیە کە بە وردی پێداچوونەوە بە سیاسەتە ئەمنییەکانی خۆتدا بکەیت و بڕیار لەسەر باشترین ڕێگا بدەیت بۆ پێشەوە، ئەگەر پێویست بوو.