پێشەکی

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

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

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

CSS

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

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

ج.س

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

ئێمە jQuery's slim build بەکاردەهێنین , بەڵام وەشانی تەواو پشتگیری دەکرێت.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

بزانە کام پێکهاتە بە ڕوونی پێویستی بە jQuery و JS ی ئێمە و Popper.js هەیە؟ لە خوارەوە کلیک لە بەستەری show components بکە. ئەگەر بەهیچ شێوەیەک دڵنیا نیت لە پێکهاتەی گشتی لاپەڕەکە، بەردەوام بە لە خوێندنەوە بۆ نموونە قاڵبی لاپەڕە.

ئەو پێکهاتانە پیشان بدە کە پێویستیان بە جاڤاسکڕێپت هەیە

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

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

دڵنیابە کە لاپەڕەکانت بە نوێترین ستانداردی دیزاین و پەرەپێدان ڕێکخراوە. ئەمەش واتە بەکارهێنانی 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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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 دابین دەکەین.

کۆمەڵگە

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

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

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