دەست بکە بە Bootstrap

Bootstrap ئامرازێکی بەهێزە و پڕ لە تایبەتمەندییەکانی پێشەوەیە. هەر شتێک- لە نموونە سەرەتاییەوە تا بەرهەمهێنان- لە چەند خولەکێکدا دروست بکە.

لەم پەیجەدا

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

دەست پێ بکە بە خستنەڕووی CSS و JavaScript ی ئامادە بۆ بەرهەمهێنانی Bootstrap لە ڕێگەی CDN بەبێ ئەوەی پێویستت بە هیچ هەنگاوێکی دروستکردن هەبێت. بە کردەوە سەیری بکە لەگەڵ ئەم دیمۆیەی Bootstrap CodePen .

فایلێکی نوێ index.htmlلە ڕەگی پڕۆژەکەتدا دروست بکە. هەروەها تاگەکەش دابنێ <meta name="viewport">بۆ هەڵسوکەوتی وەڵامدانەوەی دروست لە ئامێرە مۆبایلەکاندا.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

CSS و JS ی Bootstrap لەخۆ بگرە. <link>تاگەکە لە <head>بۆ CSS ـەکەمان دابنێ ، و <script>تاگەکە بۆ باندڵی جاڤاسکڕێپتەکەمان (لەوانەش Popper بۆ جێگیرکردنی درۆپداونەکان، پۆپەرەکان و ئامرازەکان) پێش داخستنی </body>. زیاتر بزانە دەربارەی بەستەرەکانی CDN .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

سڵاو جیهان! لە وێبگەڕی هەڵبژاردەکەتدا ئەو لاپەڕەیە بکەرەوە بۆ بینینی لاپەڕەی Bootstrapped ـەکەت. ئێستا دەتوانیت دەست بکەیت بە دروستکردن بە Bootstrap بە دروستکردنی نەخشەی تایبەت بە خۆت و زیادکردنی دەیان پێکهاتە و بەکارهێنانی نموونە فەرمیەکانمان .

بەستەرەکانی CDN

وەک ئاماژەیەک، لێرەدا بەستەرەکانی CDN سەرەکیمان دەخەینەڕوو.

وەسف	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
ج.س	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

هەروەها دەتوانیت CDN بەکاربهێنیت بۆ هێنانی هەریەکێک لە دروستکردنە زیادەکانمان کە لە لاپەڕەی ناوەڕۆکدا هاتووە .

هةنكاوةكانى داهاتوو

کەمێک زیاتر بخوێنەرەوە دەربارەی هەندێک ڕێکخستنی گرنگی ژینگەی جیهانی کە Bootstrap بەکاری دەهێنێت.
لە بەشی ناوەڕۆکەکانمان و لیستی ئەو پێکهاتانەی کە پێویستیان بە جاڤاسکڕێپت هەیە لە خوارەوە بخوێنەرەوە دەربارەی ئەوەی کە لە Bootstrap چی هەیە.
پێویستت بە کەمێک دەسەڵاتی زیاترە؟ بیر لە دروستکردن بکەرەوە بە Bootstrap بە هێنانە ناوەوەی فایلە سەرچاوەییەکان لە ڕێگەی بەڕێوەبەری پاکێجەوە .
بەدوای بەکارهێنانی Bootstrap وەک مۆدیولێک دەگەڕێیت لەگەڵ <script type="module">? تکایە ئاماژە بە بەکارهێنانی Bootstrap بکە وەک بەشی مۆدیول.

پێکهاتەکانی JS

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

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

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

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

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

جۆری دۆکیۆمێنتی 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">

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

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

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 دابین دەکەین.

کۆمەڵگە

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

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

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