گلیفیکۆنەکان

هێماکانی بەردەست

زیاتر لە ٢٥٠ گلیف بە شێوەی فۆنت لە کۆمەڵەی Glyphicon Halflings لەخۆدەگرێت. Glyphicons Halflings بە شێوەیەکی ئاسایی بە خۆڕایی بەردەست نین، بەڵام دروستکەرەکەیان بە خۆڕایی بۆ Bootstrap بەردەستی کردووە. وەک سوپاسێک تەنها داوا دەکەین کە هەرکاتێک بتوانیت لینکی گەڕانەوە بۆ Glyphicons دابنێیت .

  • گلیفیکۆن گلیفیکۆن-ئەستێرە
  • گلیفیکۆن گلیفیکۆن-پڵەس
  • گلیفیکۆن گلیفیکۆن-یۆرۆ
  • گلیفیکۆن گلیفیکۆن-eur
  • گلیفیکۆن گلیفیکۆن-کەم
  • گلیفیکۆن گلیفیکۆن-هەور
  • گلیفیکۆن گلیفیکۆن-زەرف
  • گلیفیکۆن گلیفیکۆن-قەڵەم
  • گلیفیکۆن گلیفیکۆن-شووشە
  • glyphicon گلیفیکۆن-مۆسیقا
  • glyphicon glyphicon-گەڕان
  • گلیفیکۆن گلیفیکۆن-دڵ
  • گلیفیکۆن گلیفیکۆن-ئەستێرە
  • glyphicon glyphicon-ئەستێرە-بەتاڵ
  • glyphicon glyphicon-بەکارهێنەر
  • گلیفیکۆن گلیفیکۆن-فیلم
  • گلیفیکۆن گلیفیکۆن-گەورە
  • گلیفیکۆن گلیفیکۆن-th
  • glyphicon glyphicon-لیستی یەکەم
  • گلیفیکۆن گلیفیکۆن-ok
  • glyphicon glyphicon-لابردنی
  • glyphicon glyphicon-زومکردن
  • glyphicon glyphicon-زوومکردنەوە
  • گلیفیکۆن گلیفیکۆن-کوژاوە
  • گلیفیکۆن گلیفیکۆن-سیگناڵ
  • گلیفیکۆن گلیفیکۆن-کۆگ
  • گلیفیکۆن گلیفیکۆن-زبڵ
  • گلیفیکۆن گلیفیکۆن-ماڵەوە
  • glyphicon فایلێکی گلیفیکۆن
  • گلیفیکۆن گلیفیکۆن-کات
  • گلیفیکۆن گلیفیکۆن-ڕۆد
  • glyphicon glyphicon-دابەزاندن-alt
  • glyphicon glyphicon-دابەزاندن
  • glyphicon glyphicon-بارکردن
  • glyphicon glyphicon-ئینبۆکس
  • glyphicon glyphicon-بازنە-یاریکردن
  • glyphicon گلیفیکۆن-دوبارەکردنەوە
  • glyphicon glyphicon-نوێکردنەوە
  • گلیفیکۆن گلیفیکۆن-لیستی-alt
  • گلیفیکۆن گلیفیکۆن-قفڵ
  • glyphicon ئاڵای گلیفیکۆن
  • glyphicon glyphicon-هێدفۆن
  • glyphicon glyphicon-قەبارە کوژاندنەوە
  • glyphicon glyphicon-قەبارەی دابەزین
  • گلیفیکۆن گلیفیکۆن-قەبارە بەرزکردنەوە
  • گلیفیکۆن گلیفیکۆن-qrcode
  • glyphicon گلیفیکۆن-بارکۆد
  • گلیفیکۆن گلیفیکۆن-تاگ
  • گلیفیکۆن گلیفیکۆن-تاگەکان
  • glyphicon کتێبی گلیفیکۆن
  • glyphicon گلیفیکۆن-نیشانەی نیشانە
  • گلیفیکۆن گلیفیکۆن-چاپ
  • glyphicon گلیفیکۆن-کامێرا
  • گلیفیکۆن گلیفیکۆن-فۆنت
  • گلیفیکۆن گلیفیکۆن-bold
  • glyphicon گلیفیکۆن-ئیتاڵیک
  • glyphicon glyphicon-دەق-بەرزی
  • glyphicon glyphicon-دەق-پانی
  • glyphicon glyphicon-ڕێکخستنی-چەپ
  • glyphicon glyphicon-align-center
  • glyphicon گلیفیکۆن-ڕێکخستنی-ڕاست
  • glyphicon گلیفیکۆن-ڕێکخستنی-ڕەوایەتیدان
  • glyphicon گلیفیکۆن-لیستی
  • glyphicon glyphicon-indent-چەپ
  • glyphicon glyphicon-indent-ڕاست
  • glyphicon glyphicon-ڕووخسار-کات-ڤیدیۆ
  • glyphicon گلیفیکۆن-وێنە
  • glyphicon گلیفیکۆن-نیشاندەری نەخشە
  • glyphicon glyphicon-ڕێکخستنی
  • گلیفیکۆن گلیفیکۆنی ڕەنگاوڕەنگ
  • glyphicon glyphicon-دەستکاریکردن
  • glyphicon گلیفیکۆن-بەشکردن
  • glyphicon glyphicon-پشکنین
  • گلیفیکۆن گلیفیکۆن-جوڵە
  • glyphicon glyphicon-هەنگاو-پاشەوە
  • glyphicon glyphicon-خێرا-پاشکەوتوو
  • گلیفیکۆن گلیفیکۆن-پاشکەوتوو
  • گلیفیکۆن گلیفیکۆن-یاری
  • گلیفیکۆن گلیفیکۆن-وەستان
  • گلیفیکۆن گلیفیکۆن-وەستان
  • glyphicon glyphicon-بۆ پێشەوە
  • glyphicon glyphicon-خێرا-پێشەوە
  • glyphicon glyphicon-هەنگاوێک بۆ پێشەوە
  • گلیفیکۆن گلیفیکۆن-دەرهێنان
  • گلیفیکۆن گلیفیکۆن-شێڤرۆن-چەپ
  • گلیفیکۆن گلیفیکۆن-شێڤرۆن-ڕاست
  • glyphicon هێمای گلیفیکۆن-پڵەس
  • glyphicon هێمای گلیفیکۆن-کەمکردنەوە
  • glyphicon glyphicon-لابردنی-نیشانە
  • glyphicon هێمای گلیفیکۆن-ok
  • glyphicon glyphicon-هێمای پرسیار
  • glyphicon glyphicon-زانیاری-نیشانە
  • glyphicon وێنەی شاشەی glyphicon
  • glyphicon glyphicon-لابردنی-بازنە
  • glyphicon glyphicon-ok-بازنە
  • گلیفیکۆن گلیفیکۆن-بان-بازنە
  • glyphicon گلیفیکۆن-تیر-چەپ
  • glyphicon گلیفیکۆن-تیر-ڕاست
  • گلیفیکۆن گلیفیکۆن-تیر-سەرەوە
  • گلیفیکۆن گلیفیکۆن-تیر-خوارەوە
  • glyphicon گلیفیکۆن-بەشکردن-alt
  • glyphicon glyphicon-قەبارەی-پڕ
  • glyphicon glyphicon-قەبارە بگۆڕە-بچووک
  • glyphicon glyphicon-هێمای سەرسوڕمان
  • glyphicon گلیفیکۆن-دیاری
  • گلیفیکۆن گلیفیکۆن-گەڵا
  • گلیفیکۆن گلیفیکۆن-ئاگر
  • glyphicon گلیفیکۆن-چاو کراوە
  • گلیفیکۆن گلیفیکۆن-چاو-داخستنی
  • glyphicon glyphicon-نیشانەی ئاگادارکردنەوە
  • گلیفیکۆن گلیفیکۆن-فڕۆکە
  • glyphicon glyphicon-ڕۆژژمێر
  • glyphicon گلیفیکۆن-هەڕەمەکی
  • glyphicon گلیفیکۆن-کۆمێنت
  • گلیفیکۆن گلیفیکۆن-موگناتیسی
  • گلیفیکۆن گلیفیکۆن-شێڤرۆن-ئەپ
  • گلیفیکۆن گلیفیکۆن-شێڤرۆن-داون
  • glyphicon glyphicon-ریتویت بکە
  • glyphicon glyphicon-سەبەتەی کڕین
  • glyphicon glyphicon-فۆڵدەر-داخستنی
  • glyphicon glyphicon-فۆڵدەر-کراوە
  • glyphicon glyphicon-قەبارەی-ڕاستەوخۆ
  • گلیفیکۆن گلیفیکۆن-قەبارەی-ئاسۆیی
  • گلیفیکۆن گلیفیکۆن-hdd
  • گلیفیکۆن گلیفیکۆن-بولهۆرن
  • گلیفیکۆن گلیفیکۆن-زەنگ
  • glyphicon بڕوانامەی glyphicon
  • گلیفیکۆن گلیفیکۆن-پەنجە گەورە بەرزکردنەوە
  • گلیفیکۆن گلیفیکۆن-پەنجە گەورە بۆ خوارەوە
  • glyphicon glyphicon-دەست-ڕاست
  • glyphicon glyphicon-دەست-چەپ
  • گلیفیکۆن گلیفیکۆن-دەست-سەرەوە
  • گلیفیکۆن گلیفیکۆن-دەست-خوارەوە
  • glyphicon glyphicon-بازنە-تیر-ڕاست
  • glyphicon glyphicon-بازنە-تیر-چەپ
  • glyphicon glyphicon-بازنە-تیر-سەرەوە
  • glyphicon glyphicon-بازنە-تیر-خوارەوە
  • گلیفیکۆن گلیفیکۆن-گڵۆب
  • glyphicon کلیلی گلیفیکۆن
  • glyphicon glyphicon-ئەرکەکان
  • گلیفیکۆن گلیفیکۆن-فلتەر
  • glyphicon glyphicon-جانتای زانیاری
  • glyphicon glyphicon-شاشەی تەواو
  • glyphicon glyphicon-داشبۆرد
  • گلیفیکۆن گلیفیکۆن-گیرەی کاغەز
  • گلیفیکۆن گلیفیکۆن-دڵ-بەتاڵ
  • گلیفیکۆن گلیفیکۆن-لینک
  • glyphicon glyphicon-فۆن
  • گلیفیکۆن گلیفیکۆن-پاشپین
  • گلیفیکۆن گلیفیکۆن-usd
  • گلیفیکۆن گلیفیکۆن-gbp
  • گلیفیکۆن گلیفیکۆن-جۆر
  • glyphicon glyphicon-ڕیزکردن بەپێی ئەلفوبێ
  • glyphicon glyphicon-ڕیزکردن-بەپێی-ئەلفوبێ-alt
  • glyphicon glyphicon-ڕیزکردن-بەپێی-ڕیزبەندی
  • glyphicon glyphicon-ڕیزکردن-بەپێی-ڕیزبەندی-alt
  • glyphicon glyphicon-ڕیزکردن-بەپێی-تایبەتمەندییەکان
  • glyphicon glyphicon-ڕیزکردن-بەپێی-تایبەتمەندیەکان-alt
  • glyphicon glyphicon-پشکنینی نەکراوە
  • گلیفیکۆن گلیفیکۆن-expand
  • glyphicon glyphicon-داڕمان-داڕمان
  • glyphicon گلیفیکۆن-داڕمان
  • glyphicon glyphicon-چوونەژوورەوە
  • گلیفیکۆن گلیفیکۆن-فلاش
  • glyphicon glyphicon-دەرچوون
  • glyphicon glyphicon-پەنجەرەی-نوێ
  • glyphicon glyphicon-تۆمارکردن
  • glyphicon گلیفیکۆن-پاککردنەوە
  • glyphicon گلیفیکۆن-کراوە
  • glyphicon glyphicon-پاککراوە
  • glyphicon گلیفیکۆن-هاوردەکردن
  • glyphicon گلیفیکۆن-هەناردەکردن
  • glyphicon گلیفیکۆن-ناردن
  • glyphicon گلیفیکۆن-فلۆپی-دیسک
  • glyphicon glyphicon-فلۆپی-پاککردنەوە
  • glyphicon glyphicon-فلۆپی-لابردنی
  • glyphicon گلیفیکۆن-فلۆپی-پاککردنەوە
  • glyphicon glyphicon-فلۆپی-کراوە
  • glyphicon glyphicon-کارتی باج
  • گلیفیکۆن گلیفیکۆن-گواستنەوە
  • glyphicon گلیفیکۆن-چەقۆ
  • glyphicon glyphicon-سەردێڕ
  • glyphicon بە گلیفیکۆن پاڵپێوەنراوە
  • glyphicon glyphicon-گوێی
  • glyphicon گلیفیکۆن-فۆن-alt
  • گلیفیکۆن گلیفیکۆن-تاوەر
  • glyphicon glyphicon-ئامارەکان
  • glyphicon گلیفیکۆن-sd-ڤیدیۆ
  • گلیفیکۆن گلیفیکۆن-hd-video
  • glyphicon glyphicon-ژێرنووسەکان
  • glyphicon گلیفیکۆن-دەنگی-ستێریۆ
  • گلیفیکۆن گلیفیکۆن-دەنگی-دۆلبی
  • گلیفیکۆن گلیفیکۆن-دەنگی-5-1
  • گلیفیکۆن گلیفیکۆن-دەنگی-6-1
  • گلیفیکۆن گلیفیکۆن-دەنگی-7-1
  • glyphicon glyphicon-نیشانەی مافی چاپکردن
  • glyphicon glyphicon-نیشانەی تۆمارکردن
  • glyphicon glyphicon-هەور-دابەزاندن
  • glyphicon glyphicon-هەور-بارکردن
  • glyphicon گلیفیکۆن-دار-کۆنیفەر
  • گلیفیکۆن گلیفیکۆن-دار-پەڕە ڕواوە
  • گلیفیکۆن گلیفیکۆن-cd
  • glyphicon glyphicon-پاککردنەوە-پەڕگە
  • glyphicon glyphicon-پەڕگەی کراوە
  • glyphicon glyphicon-ئاست بەرزکردنەوە
  • گلیفیکۆن گلیفیکۆن-کۆپی
  • گلیفیکۆن گلیفیکۆن-هەویر
  • گلیفیکۆن گلیفیکۆن-ئاگادارکردنەوە
  • glyphicon گلیفیکۆن-یەکسانکەرەوە
  • گلیفیکۆن گلیفیکۆن-پاشا
  • گلیفیکۆن گلیفیکۆن-کوین
  • گلیفیکۆن گلیفیکۆن-pawn
  • گلیفیکۆن گلیفیکۆن-قەشە
  • glyphicon گلیفیکۆن-شۆڕشگێڕ
  • گلیفیکۆن گلیفیکۆن-فۆرمولەی منداڵ
  • گلیفیکۆن glyphicon-tent
  • glyphicon glyphicon-تەختەی ڕەش
  • گلیفیکۆن گلیفیکۆن-جێگا
  • گلیفیکۆن گلیفیکۆن-سێو
  • گلیفیکۆن گلیفیکۆن-سڕین
  • گلیفیکۆن گلیفیکۆن-کاتژمێری شەختە
  • گلیفیکۆن گلیفیکۆن-لامپ
  • گلیفیکۆن گلیفیکۆن-دووبارە
  • گلیفیکۆن گلیفیکۆن-بەراز-بانک
  • گلیفیکۆن گلیفیکۆن-قیچی
  • گلیفیکۆن گلیفیکۆن-بیتکۆین
  • گلیفیکۆن گلیفیکۆن-btc
  • گلیفیکۆن گلیفیکۆن-xbt
  • گلیفیکۆن گلیفیکۆن-یێن
  • گلیفیکۆن گلیفیکۆن-jpy
  • گلیفیکۆن گلیفیکۆن-ڕووبڵ
  • گلیفیکۆن گلیفیکۆن-ڕوب
  • glyphicon glyphicon-پێوەر
  • گلیفیکۆن گلیفیکۆن-سەهۆڵ-لۆلی
  • گلیفیکۆن گلیفیکۆن-سەهۆڵ-لۆلی-تامی
  • گلیفیکۆن گلیفیکۆن-پەروەردە
  • glyphicon glyphicon-بژاردە-ئاسۆیی
  • glyphicon glyphicon-بژاردە-ڕاست
  • گلیفیکۆن گلیفیکۆن-مێنۆ-هەمبەرگەر
  • glyphicon پەنجەرەی-مۆداڵی گلیفیکۆن
  • گلیفیکۆن گلیفیکۆن-ڕۆن
  • گلیفیکۆن گلیفیکۆن-دانەوێڵ
  • glyphicon چاویلکەی خۆر glyphicon
  • glyphicon glyphicon-قەبارەی دەق
  • glyphicon glyphicon-دەق-ڕەنگ
  • glyphicon glyphicon-دەق-پاشخان
  • glyphicon glyphicon-شت-ڕێکخستنی-سەرەوە
  • glyphicon glyphicon-شت-ڕێکخستنی-خوارەوە
  • glyphicon glyphicon-شت-ڕێکخستنی-ئاسۆیی
  • glyphicon glyphicon-شت-ڕێکخستنی-چەپ
  • glyphicon glyphicon-ئۆبژە-ڕێکخستنی-ڕاست
  • glyphicon glyphicon-شت-ڕێکخستنی-ڕاست
  • glyphicon گلیفیکۆن-سێگۆشە-ڕاست
  • glyphicon glyphicon-سێگۆشە-چەپ
  • glyphicon گلیفیکۆن-سێگۆشە-خوارەوە
  • glyphicon glyphicon-سێگۆشە-سەرەوە
  • glyphicon کۆنسۆلی گلیفیکۆن
  • glyphicon گلیفیکۆن-سەرنووس
  • glyphicon glyphicon-ژێرنووس
  • glyphicon glyphicon-مێنۆ-چەپ
  • glyphicon glyphicon-مێنۆ-ڕاست
  • glyphicon glyphicon-مێنۆ-خوارەوە
  • glyphicon گلیفیکۆن-مێنۆ-ئاپ

چۆن بەكار دەهێنرێت

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

تێکەڵ بە پێکهاتەکانی تر مەکە

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

تەنها بۆ بەکارهێنان لەسەر توخمە بەتاڵەکان

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

گۆڕینی شوێنی فۆنتەکەی ئایکۆنەکە

بووتستراپ گریمانە دەکات کە فایلە فۆنتەکانی ئایکۆن لە ../fonts/ناوەڕۆکەکەدا جێگیر دەبن، بە بەراورد بە فایلە CSS کۆکراوەکان. گواستنەوە یان گۆڕینی ناوی ئەو فایلە فۆنتانە واتە نوێکردنەوەی CSS بە یەکێک لە سێ ڕێگە:

  • @icon-font-pathو/یان @icon-font-nameگۆڕاوەکان لە فایلەکانی سەرچاوە کەمتر بگۆڕە .
  • بژاردەی URLs ڕێژەییەکان بەکاربهێنە کە لەلایەن کۆمپایەری کەمترەوە دابینکراوە.
  • url()ڕێڕەوەکان لە CSS ی کۆکراوەدا بگۆڕە .

هەر بژاردەیەک کە بە باشترین شێوە لەگەڵ ڕێکخستنی تایبەتی گەشەپێدانەکەتدا بگونجێت بەکاربهێنە.

ئایکۆنە دەستڕاگەیشتنەکان

وەشانی مۆدێرن لە تەکنەلۆژیا یارمەتیدەرەکان ناوەڕۆکی دروستکراوی CSS ڕادەگەیەنن، هەروەها پیتە تایبەتەکانی یونیکۆد. aria-hidden="true"بۆ ئەوەی دەرچوونی نەخوازراو و سەرلێشێواو لە خوێنەری شاشەدا ڕوونەدات (بەتایبەت کاتێک ئایکۆنەکان تەنها بۆ ڕازاندنەوە بەکاردەهێنرێن)، ئێمە بە تایبەتمەندییەکە دەیانشارینەوە .

ئەگەر ئایکۆنێک بەکاردەهێنیت بۆ گەیاندنی مانا (نەک تەنها وەک توخمێکی دیکۆرات)، دڵنیابە لەوەی کە ئەم مانایە بۆ تەکنەلۆژیا یارمەتیدەرەکانیش دەگەیەنرێت – بۆ نموونە، ناوەڕۆکی زیادە لەخۆ بگرە، کە بە شێوەیەکی بینراو لەگەڵ .sr-onlyپۆلەکەدا شاراوەن.

ئەگەر کۆنتڕۆڵەکان دروست دەکەیت کە هیچ دەقێکی تریان نییە (وەک a <button>کە تەنها ئایکۆنێکی تێدایە)، پێویستە هەمیشە ناوەڕۆکی بەدیل دابین بکەیت بۆ دیاریکردنی ئامانجی کۆنتڕۆڵەکە، بۆ ئەوەی بۆ بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان مانای هەبێت. لەم حاڵەتەدا دەتوانیت aria-labelتایبەتمەندییەک لەسەر خودی کۆنتڕۆڵەکە زیاد بکەیت.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

نموونە

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

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

ئایکۆنێک کە لە ئاگادارکردنەوەیەکدا بەکاردێت بۆ گەیاندنی ئەوەی کە پەیامێکی هەڵەیە، لەگەڵ .sr-onlyدەقی زیادە بۆ گەیاندنی ئەم ئاماژەیە بە بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان.

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

دابەزینەکان

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

تریگەری دابەزینەکە و مینیوی دابەزینەکە لەناو .dropdown, یان توخمێکی تردا بپێچە کە ڕایدەگەیەنێت position: relative;. پاشان HTML ی مینیوەکە زیاد بکە.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

دەتوانرێت مینیوەکانی دابەزین بگۆڕدرێت بۆ فراوانکردن بەرەو سەرەوە (لەبری بەرەو خوارەوە) بە زیادکردن .dropupبۆ دایک و باوک.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

بە شێوازی پێشوەختە، مینیویەکی دابەزین بە شێوەیەکی ئۆتۆماتیکی لە سەرەوە و بە درێژایی لای چەپی دایک و باوکەکەی 100% دادەنرێت. زیادکردن .dropdown-menu-rightبۆ a .dropdown-menuبۆ ڕاست ڕێکخستنی مینیوی دابەزین.

لەوانەیە پێویستی بە جێگیرکردنی زیاتر بێت

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

.pull-rightڕێکخستنی بەکارنەهاتوو

لە v3.1.0ەوە، ئێمە .pull-rightلە مینیوەکانی دابەزین بەکارمان نەهێناوە. بۆ ڕێکخستنی مینیویەک بە ڕاست، .dropdown-menu-right. پێکهاتەکانی nav کە بە ڕاست ڕیزکراون لە navbar دا وەشانی mixin ی ئەم پۆلە بەکاردەهێنن بۆ ئەوەی بە شێوەیەکی ئۆتۆماتیکی مینیوەکە ڕێکبخەن. بۆ جێبەجێکردنی، .dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

دابەشکەرێک زیاد بکە بۆ جیاوازی زنجیرە بەستەرەکان لە مینیویەکی دابەزین.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

زیاد بکە .disabledبۆ a <li>لە درۆپ داونەکەدا بۆ لەکارخستنی بەستەرەکە.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

گروپەکانی دوگمە

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

Tooltips & popovers لە گروپەکانی دوگمەکاندا پێویستیان بە ڕێکخستنی تایبەت هەیە

لە کاتی بەکارهێنانی ئامرازەکان یان پۆپۆڤەرەکان لەسەر توخمەکانی ناو a .btn-group، دەبێت بژاردەکە دیاری بکەیت container: 'body'بۆ دوورکەوتنەوە لە کاریگەرییە لاوەکییە نەخوازراوەکان (وەک ئەوەی توخمەکە فراوانتر دەبێت و/یان گۆشە گوڵاوەکانی لەدەست دەدات کاتێک ئامرازەکە یان پۆپۆڤەرەکە دەستپێدەکات).

دڵنیابە لە دروستی roleو لیبێڵێک دابین بکە

بۆ ئەوەی تەکنەلۆژیا یارمەتیدەرەکان – وەک خوێنەری شاشە – بگەیەنن کە زنجیرەیەک دوگمە گرووپ کراون، roleپێویستە تایبەتمەندییەکی گونجاو دابین بکرێت. بۆ گروپەکانی دوگمەکان، ئەمە دەبێتە role="group", لە کاتێکدا ئامرازەکان دەبێت role="toolbar".

یەکێک لە ئیستسنایەکان ئەو گروپانەن کە تەنها یەک کۆنتڕۆڵ لەخۆدەگرن (بۆ نموونە گروپەکانی دوگمەی ڕەوا لەگەڵ <button>توخمەکان) یان دابەزینێک.

سەرەڕای ئەوە، پێویستە گروپ و توولبارەکان ناوێکی ڕوونیان پێ بدرێت، چونکە زۆربەی تەکنەلۆژیا یارمەتیدەرەکان ئەگەرنا ڕایان ناگەیەنن، سەرەڕای بوونی roleتایبەتمەندی دروست. لەم نموونانەی لێرەدا هاتووە، ئێمە , بەکاردەهێنین aria-label، بەڵام بەدیلەکانی وەک aria-labelledbyدەتوانرێت بەکاربهێنرێت.

نموونەی بنەڕەتی

زنجیرەیەک دوگمە بە .btnin بپێچە .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

ئامرازەکانی دوگمە

کۆمەڵێک لە بۆ پێکهاتە ئاڵۆزترەکان تێکەڵ <div class="btn-group">بکە <div class="btn-toolbar">.

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

قەبارەدانان

لەبری ئەوەی پۆلەکانی قەبارەدانانی دوگمەکان بۆ هەموو دوگمەیەک لە گروپێکدا بەکاربهێنیت، تەنها زیاد بکە .btn-group-*بۆ هەریەکێک .btn-group، لەوانەش لەکاتی هێلانەکردنی چەند گروپێکدا.




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

هێلانەکردن

کاتێک دەتەوێت مینیوی دابەزین تێکەڵ بە زنجیرەیەک دوگمە بکرێت، یەکێک لە .btn-groupناو یەکێکی تردا دابنێ ..btn-group

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

گۆڕانی ڕاست

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

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

گروپی دوگمەی ڕەوا

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

مامەڵەکردن لەگەڵ سنوورەکان

بەهۆی ئەو HTML و CSS تایبەتەی کە بۆ ڕەوایەتیدان بە دوگمەکان بەکاردەهێنرێت (واتە display: table-cell)، سنوورەکانی نێوانیان دوو هێندە دەبن. لە گروپەکانی دوگمەی ئاساییدا، margin-left: -1pxبەکاردێت بۆ کۆکردنەوەی سنوورەکان لەبری لابردنی. بەڵام marginلەگەڵ display: table-cell. لە ئەنجامدا، بەپێی خۆکارکردنەکانت بۆ Bootstrap، لەوانەیە بتەوێت سنوورەکان لاببەیت یان دووبارە ڕەنگیان بکەیتەوە.

IE8 و سنوورەکان

ئینتەرنێت ئێکسپلۆرەر ٨ سنوور لەسەر دوگمەکان لە گروپێکی دوگمەی ڕەوادا ڕەندەر ناکات، جا چ چالاک بێت <a>یان <button>توخمەکان. بۆ ئەوەی لەوە دەربچیت، هەر دوگمەیەک لە دوگمەیەکی تردا بپێچە .btn-group.

بۆ زانیاری زیاتر سەیری #12476 بکە.

لەگەڵ <a>توخمەکان

تەنها زنجیرەیەک .btns لە .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

بەستەرەکان کە وەک دوگمە کاردەکەن

ئەگەر <a>توخمەکان بەکاربهێنرێن بۆ کارکردن وەک دوگمە – دەستپێکردنی کارایی ناو لاپەڕە، نەک گەشتکردن بۆ بەڵگەنامە یان بەشێکی تر لە ناو لاپەڕەی ئێستادا – هەروەها پێویستە role="button".

لەگەڵ <button>توخمەکان

بۆ بەکارهێنانی گروپی دوگمەی ڕەوا لەگەڵ <button>توخمەکان، پێویستە هەر دوگمەیەک لە گروپێکی دوگمەدا بپێچیتەوە . زۆربەی وێبگەڕەکان بە باشی CSS ـمان بۆ ڕەوایەتیدان بە <button>توخمەکان بەکارناهێنن، بەڵام بەو پێیەی ئێمە پشتگیری لە دابەزینی دوگمەکان دەکەین، دەتوانین کار لەسەر ئەوە بکەین.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

دابەزینی دوگمەکان

هەر دوگمەیەک بەکاربهێنە بۆ دەستپێکردنی مینیویەکی دابەزین بە دانانی لەناو a .btn-groupو دابینکردنی نیشاندانی مینیوی دروست.

وابەستەیی بە پێوەکراو

درۆپ داونەکانی دوگمەکان پێویستیان بەوەیە کە پێوەکراوەکە لە وەشانی Bootstrap ـەکەتدا هەبێت.

دابەزینی تاکە دوگمە

دوگمەیەک بگۆڕە بۆ وەرچەرخانێکی دابەزین لەگەڵ هەندێک گۆڕانکاری بنەڕەتی لە نیشانەدان.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

دابەزینی دوگمەی دابەشکردن

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

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

قەبارەدانان

درۆپداونەکانی دوگمەکان بە دوگمەکانی هەموو قەبارەکان کاردەکەن.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

گۆڕانی وازهێنان

مینیوەکانی سەرەوەی توخمەکان بە زیادکردن .dropupبۆ دایک و باوکەکە دەستپێبکە.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

گروپەکانی هاتنە ژوورەوە

کۆنتڕۆڵەکانی فۆڕم درێژ بکەرەوە بە زیادکردنی دەق یان دوگمە پێش، دوای، یان لە هەردوو لای هەر دەقێک کە لەسەر بنەمای دەق بێت <input>. بەکارهێنان .input-groupلەگەڵ .input-group-addonیان .input-group-btnبۆ پێش پەیوەستکردن یان پەیوەستکردنی توخمەکان بە تاکە .form-control.

<input>تەنها s دەقی

لێرەدا خۆت بەدوور بگرە لە بەکارهێنانی <select>توخمەکان چونکە ناتوانرێت لە وێبگەڕەکانی وێبکیتدا بە تەواوی ستایلیان بۆ دابنرێت.

لێرەدا خۆت بەدوور بگرە لە بەکارهێنانی <textarea>توخمەکان چونکە rowsلە هەندێک حاڵەتدا ڕێز لە سیفاتەکەیان ناگیرێت.

Tooltips & popovers لە گروپەکانی هاتنە ژوورەوەدا پێویستیان بە ڕێکخستنی تایبەت هەیە

لەکاتی بەکارهێنانی ئامرازەکان یان پۆپۆڤەرەکان لەسەر توخمەکانی ناو an .input-group، دەبێت بژاردەکە دیاری بکەیت container: 'body'بۆ دوورکەوتنەوە لە کاریگەرییە لاوەکییە نەخوازراوەکان (وەک ئەوەی توخمەکە فراوانتر دەبێت و/یان گۆشە گوڵاوەکانی لەدەست دەدات کاتێک ئامرازەکە یان پۆپۆڤەرەکە دەستپێدەکات).

تێکەڵ بە پێکهاتەکانی تر مەکە

گروپەکانی فۆڕم یان پۆلەکانی ستوونی تۆڕ ڕاستەوخۆ لەگەڵ گروپەکانی هاتنەژوورەوە تێکەڵ مەکە. لەبری ئەوە، گروپی هاتنەژوورەوە لە ناو گروپی فۆڕم یان توخمەکەی پەیوەست بە تۆڕەکە هێلانە بکە.

هەمیشە ناوەکان زیاد بکە

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

تەکنیکە وردەکە کە بەکاردەهێنرێت (توخمە بینراوەکان <label>، <label>توخمەکانی شاراوە بە بەکارهێنانی .sr-onlyپۆلەکە، یان بەکارهێنانی aria-label, aria-labelledby, aria-describedby, titleیان placeholderتایبەتمەندی) و چ زانیارییەکی زیادە پێویستە بگەیەنرێت دەگۆڕێت بەپێی جۆری وردی ویجتەکەی ڕووکار کە جێبەجێی دەکەیت. نموونەکانی ئەم بەشە چەند رێبازێکی پێشنیارکراوی تایبەت بە کەیسەکان دەخەنە ڕوو.

نموونەی بنەڕەتی

یەک زیادکردن یان دوگمە لە هەردوو لای ئینپوتێک دابنێ. هەروەها دەتوانیت یەکێکیان لە هەردوو لای ئینپوتێک دابنێیت.

ئێمە پشتگیری لە چەندین زیادکراو ( .input-group-addonیان .input-group-btn) لە یەک لایەنەوە ناکەین.

ئێمە پشتگیری لە چەندین فۆڕم-کۆنتڕۆڵ ناکەین لە یەک گروپی هاتنەژوورەوەدا.

@

@نموونە.com

$ .00

https://نموونە.com/بەکارهێنەران/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

قەبارەدانان

پۆلەکانی قەبارەدانانی فۆڕمی ڕێژەیی زیاد بکە بۆ .input-groupخۆی و ناوەڕۆکەکانی ناوەوە بە شێوەیەکی ئۆتۆماتیکی قەبارەیان دەگۆڕێت- پێویست بە دووبارەکردنەوەی پۆلەکانی قەبارەی کۆنترۆڵی فۆڕم لەسەر هەر توخمێک ناکات.

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

بۆکسەکانی هەڵبژاردن و زیادکراوەکانی ڕادیۆ

هەر سندوقێکی هەڵبژاردن یان هەڵبژاردەیەکی ڕادیۆیی لەناو زیادکردنی گروپێکی چوونەژوورەوەدا دابنێ لەبری دەق.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

زیادکردنی دوگمە

دوگمەکان لە گروپەکانی هاتنە ژوورەوەدا کەمێک جیاوازن و پێویستیان بە یەک ئاستی زیادەی هێلانەکردن هەیە. لەبری .input-group-addon, پێویستە بەکاری بهێنیت .input-group-btnبۆ پێچانی دوگمەکان. ئەمەش پێویستە بەهۆی شێوازە پێشوەختەکانی وێبگەڕ کە ناتوانرێت سەرپێچی بکرێت.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

دوگمەکان بە درۆپ داون

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

دوگمە بەش کراوەکان

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

چەند دوگمەیەک

لە کاتێکدا دەتوانیت تەنها یەک زیادکردنت هەبێت بۆ هەر لایەک، دەتوانیت چەند دوگمەیەک لە ناو یەک .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

ناوس

Navs کە لە Bootstrap بەردەستە مارکاپی هاوبەشیان هەیە، لە .navپۆلی بنەڕەتی دەست پێدەکات، هەروەها باری هاوبەش. پۆلەکانی دەستکاریکەر بگۆڕە بۆ گۆڕینی نێوان هەر ستایلێک.

بەکارهێنانی navs بۆ پانێڵەکانی تاب پێویستی بە پێوەکراوەکەی تابەکانی جاڤاسکڕێپت هەیە

بۆ ئەو تابانەی کە ناوچەی تابیان هەیە، پێویستە پێوەکراوەکانی جاڤاسکڕێپت بەکاربهێنیت . هەروەها نیشانەدانەکە پێویستی بە roleتایبەتمەندی زیادە و ARIA دەبێت – بۆ وردەکاری زیاتر سەیری نیشاندانی نموونەی پێوەکراوەکە بکە.

وا بکە کە navs کە وەکو گەشتکردن بەکاردەهێنرێن دەستڕاگەیشتنیان پێ بکرێت

ئەگەر navs بەکاردەهێنیت بۆ دابینکردنی پەتی گەشتکردن، دڵنیابە کە a زیاد دەکەیت role="navigation"بۆ لۆژیکیترین کۆنتێنەری باوکی <ul>, یان <nav>توخمێک بە دەوری تەواوی گەشتەکەدا بپێچە. ڕۆڵەکە زیاد مەکە بۆ <ul>خۆی، چونکە ئەمە ڕێگری دەکات لەوەی وەک لیستێکی ڕاستەقینە لەلایەن تەکنەلۆژیا یارمەتیدەرەکانەوە ڕابگەیەنرێت.

تێبینی .nav-tabsپۆلەکە پێویستی بە .navپۆلی بنەڕەتی هەیە.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

هەمان HTML وەربگرە، بەڵام .nav-pillsلەبری ئەوە بەکاربهێنە:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

هەروەها حەبەکان بە شێوەی ڕاست لەسەر یەک کۆدەکرێنەوە. تەنها زیاد بکە .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

بە ئاسانی تاب یان حەبەکان یەکسان بکەن بە پانایی دایک و باوکیان لە شاشەکانی فراوانتر لە 768px لەگەڵ .nav-justified. لە شاشە بچووکەکاندا بەستەرەکانی nav لەسەر یەک کۆدەکرێنەوە.

بەستەرەکانی navbar nav ی ڕەوا لە ئێستادا پشتگیری ناکرێت.

سەفاری و وەڵامدەرەوە پاساو navs

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

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

بۆ هەر پێکهاتەیەکی nav (تاب یان حەب)، زیاد بکە .disabledبۆ بەستەری خۆڵەمێشی و هیچ کاریگەرییەکی hover .

کارایی بەستەر کاریگەری لەسەر نییە

ئەم پۆلە تەنها <a>دەرکەوتنی 's دەگۆڕێت نەک کاراییەکانی. بۆ لەکارخستنی بەستەرەکان لێرەدا جاڤاسکڕێپتی تایبەت بەکاربهێنە.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

زیادکردنی مینیوی دابەزین بە کەمێک HTML زیادە و پێوەکراوەکانی JavaScript .

تابەکان بە درۆپ داون

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

حەبەکان بە درۆپداون

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ناوبەر

ناوبارەکان پێکهاتەی مێتا وەڵامدەرەوەن کە وەک سەردێڕی گەشتکردن بۆ بەرنامەکەت یان ماڵپەڕەکەت کاردەکەن. لە دیمەنەکانی مۆبایلدا بە داڕمان دەست پێدەکەن (و دەتوانرێت بگۆڕدرێن) و لەگەڵ زیادبوونی پانایی دەرچەی بینینی بەردەستدا دەبنە ئاسۆیی.

بەستەرەکانی navbar nav ی ڕەوا لە ئێستادا پشتگیری ناکرێت.

ناوەڕۆکی ڕژاو

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

  1. بڕی یان پانایی شتەکانی navbar کەم بکەرەوە.
  2. هەندێک بابەتی ناوبار لە هەندێک قەبارەی شاشەدا بشارەوە بە بەکارهێنانی پۆلەکانی سوودمەندی وەڵامدەرەوە .
  3. ئەو خاڵە بگۆڕە کە ناوبارەکەت لە نێوان دۆخی داڕووخاو و ئاسۆیی دەگۆڕێت. گۆڕاوەکە بەپێی خواستی خۆت @grid-float-breakpointدروست بکە یان پرسیاری میدیایی خۆت زیاد بکە.

پێویستی بە پێوەکراوەکەی جاڤاسکڕێپت هەیە

ئەگەر جاڤاسکڕێپت لەکاربخرێت و دەرگای بینینەکە ئەوەندە تەسک بێت کە ناوبارەکە داڕمێت، ئەوا مەحاڵ دەبێت ناوبارەکە فراوان بکرێت و ناوەڕۆکەکە لەناو .navbar-collapse.

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

گۆڕینی خاڵی شکاندنی ناوباری مۆبایل کە داڕماوە

ناوبارەکە دەڕوخێتە ناو دیمەنی مۆبایلە ڕاستەکەیەوە کاتێک دەرچەی بینینەکە تەسکتر بێت لە @grid-float-breakpoint, و فراوان دەبێت بۆ دیمەنە نامۆبایلە ئاسۆییەکانی خۆی کاتێک دەرچەی بینینەکە لانیکەم @grid-float-breakpointلە پاناییدا بێت. ئەم گۆڕاوە لە سەرچاوەی Less ڕێکبخە بۆ ئەوەی کۆنتڕۆڵی کەی navbar داڕمێت/فراوان دەبێت. بەهای پێشوەختە بریتییە 768pxلە (بچووکترین شاشەی "بچووک" یان "تابلێت").

navbars بکە بە دەستڕاگەیشتن

دڵنیابە لە بەکارهێنانی <nav>توخمێک یان، ئەگەر توخمێکی گشتیتر وەک a بەکاردەهێنیت <div>، a زیاد بکە role="navigation"بۆ هەموو ناوبارێک بۆ ئەوەی بە ڕوونی وەک ناوچەیەکی هێما بۆ بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان دەستنیشان بکەیت.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

مارکەی navbar بگۆڕە بە وێنەی خۆت بە گۆڕینەوەی دەقەکە بە <img>. بەو پێیەی کە .navbar-brandپادکردن و بەرزی تایبەتی خۆی هەیە، لەوانەیە پێویستت بە سەرپێچی هەندێک CSS بێت بەپێی وێنەکەت.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

ناوەڕۆکی فۆڕم لە ناوەوە دابنێ .navbar-formبۆ ڕێکخستنی ڕاست و هەڵسوکەوتی داڕووخاو لە دەرچەی بینینی تەسکدا. هەڵبژاردەکانی ڕێکخستن بەکاربهێنە بۆ بڕیاردان لەسەر ئەوەی لە کوێ لەناو ناوەڕۆکی ناوبارەکەدا نیشتەجێیە.

وەک سەری بەرز، .navbar-formزۆربەی کۆدەکانی لەگەڵ .form-inlineلە ڕێگەی mixin هاوبەش دەکات. هەندێک لە کۆنتڕۆڵەکانی فۆڕم، وەک گروپەکانی چوونەژوورەوە، لەوانەیە پێویستیان بە پانایی جێگیر هەبێت بۆ ئەوەی بە باشی لەناو ناوبارێکدا پیشان بدرێت.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ئاگادارکردنەوەکانی ئامێری مۆبایل

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

هەمیشە ناوەکان زیاد بکە

خوێنەرانی شاشە کێشەیان لەگەڵ فۆڕمەکانتدا دەبێت ئەگەر تۆ لیبێڵێک بۆ هەموو زانیارییەک دانەنێیت. بۆ ئەم فۆڕمە ناو هێڵانە، دەتوانیت بە بەکارهێنانی .sr-onlyپۆلەکە ناوەکان بشاریتەوە. شێوازی بەدیل زیاتر هەیە بۆ دابینکردنی ناوێک بۆ تەکنەلۆژیا یارمەتیدەرەکان، وەک aria-label, aria-labelledbyیان titleتایبەتمەندی. ئەگەر هیچ کام لەمانە ئامادە نەبوون، خوێنەرانی شاشە لەوانەیە پەنا بۆ بەکارهێنانی placeholderتایبەتمەندییەکە ببەن، ئەگەر هەبوو، بەڵام تێبینی بکە کە بەکارهێنانی placeholderوەک جێگرەوەیەک بۆ شێوازەکانی تری ناونانی ئامۆژگاری ناکرێت.

.navbar-btnپۆلەکە زیاد بکە بۆ ئەو <button>توخمانەی کە لە a نیشتەجێ نین <form>بۆ ئەوەی بە شێوەیەکی ڕاست لە ناو بارەکەدا ناوەندیان بکەیت.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

بەکارهێنانی تایبەت بە کۆنتێکست

وەک پۆلەکانی دوگمەی ستاندارد , .navbar-btnدەتوانرێت لەسەر <a>و <input>توخمەکان بەکاربهێنرێت. بەڵام، نە .navbar-btnپۆلەکانی دوگمەی ستاندارد نابێت لەسەر <a>توخمەکانی ناو .navbar-nav.

ڕیزەکانی دەق لە توخمێکدا بە پێچە .navbar-text، بەزۆری لەسەر <p>تاگێک بۆ پێشەنگی و ڕەنگی دروست.

<p class="navbar-text">Signed in as Mark Otto</p>

بۆ ئەو کەسانەی کە بەستەری ستاندارد بەکاردەهێنن کە لە پێکهاتەی گەشتکردنی ناوباری ئاساییدا نین، .navbar-linkپۆلەکە بەکاربهێنە بۆ زیادکردنی ڕەنگی گونجاو بۆ هەڵبژاردەکانی ناوباری پێشوەختە و پێچەوانە.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

بەستەرەکانی nav، فۆڕمەکان، دوگمەکان، یان دەقەکان ڕێکبخە، بە بەکارهێنانی پۆلەکانی .navbar-leftیان .navbar-rightسوودمەند. هەردوو پۆلەکە فلۆتێکی CSS بە ئاراستەی دیاریکراو زیاد دەکەن. بۆ نموونە بۆ ڕێکخستنی بەستەرەکانی nav، لە شوێنێکی جیاوازدا دابنێ <ul>لەگەڵ پۆلی سوودمەندی تایبەت بە جێبەجێکردن.

ئەم پۆلانە وەشانی mixin-ed ی .pull-leftو .pull-right، بەڵام ئەوان مەودایان بۆ پرسیارەکانی میدیا هەیە بۆ مامەڵەکردنی ئاسانتر لەگەڵ پێکهاتەکانی navbar لە سەرانسەری قەبارەی ئامێرەکاندا.

ڕێکخستنی ڕاستی چەندین پێکهاتە

لە ئێستادا ناوبارەکان سنوورێکیان هەیە لەگەڵ چەندین .navbar-rightپۆل. بۆ ئەوەی ناوەڕۆک بە شێوەیەکی دروست فەزایی دروست بکەین، ئێمە پەراوێزی نەرێنی لەسەر دوا .navbar-rightتوخم بەکاردەهێنین. کاتێک چەندین توخم هەن کە ئەو پۆلە بەکاردەهێنن، ئەم پەراوێزانە وەک مەبەست کار ناکەن.

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

ناوەڕۆکی ناوبار زیاد بکە .navbar-fixed-topو بۆ ناوەند .containerو .container-fluidپاد بکە.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

پادکردنی جەستە پێویستە

ناوەڕۆکی جێگیر ناوەڕۆکەکەی ترت دادەپۆشێت، مەگەر زیاد بکەیت paddingبۆ سەرەوەی <body>. بەهاکانی خۆت تاقی بکەرەوە یان پارچەی خوارەوەمان بەکاربهێنە. ئامۆژگاری: بە شێوازی پێشوەختە، navbar 50px بەرزە.

body { padding-top: 70px; }

دڵنیابە کە ئەمە دوای ناوەکی Bootstrap CSS ی تێدایە.

ناوەڕۆکی ناوبار زیاد بکە .navbar-fixed-bottomو بۆ ناوەند .containerو .container-fluidپاد بکە.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

پادکردنی جەستە پێویستە

ناوەڕۆکی جێگیر ناوەڕۆکەکەی ترت دادەپۆشێت، مەگەر زیاد بکەیت paddingبۆ خوارەوەی <body>. بەهاکانی خۆت تاقی بکەرەوە یان پارچەی خوارەوەمان بەکاربهێنە. ئامۆژگاری: بە شێوازی پێشوەختە، navbar 50px بەرزە.

body { padding-bottom: 70px; }

دڵنیابە کە ئەمە دوای ناوەکی Bootstrap CSS ی تێدایە.

ناوبارێکی تەواو پان دروست بکە کە لەگەڵ لاپەڕەکەدا دەڕوات بە زیادکردن .navbar-static-topو لەخۆگرتنی .containerیان .container-fluidبۆ ناوەڕاست و ناوەڕۆکی ناوباری پاد.

بە پێچەوانەی .navbar-fixed-*پۆلەکان، پێویست ناکات هیچ پادکردنێک لەسەر body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

دەستکاری دیمەنی navbar بکە بە زیادکردنی .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

نانە وردکراوەکان

شوێنی لاپەڕەی ئێستا لە ناو پلەبەندییەکی گەشتکردندا نیشان بدە.

جیاکەرەوەکان بە شێوەیەکی ئۆتۆماتیکی لە CSS لە ڕێگەی :beforeو content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

لاپەڕەسازی

بەستەری لاپەڕەسازی بۆ ماڵپەڕەکەت یان ئەپەکەت بە پێکهاتەی لاپەڕەسازی فرە لاپەڕەیی، یان بەدیلێکی سادەتری لاپەڕەسازی دابین بکە .

لاپەڕەسازی پێشوەختە

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

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

ناونانی پێکهاتەی لاپەڕەسازی

پێکهاتەی لاپەڕەسازی دەبێ لە توخمێکدا بپێچرێتەوە <nav>بۆ ئەوەی وەک بەشێکی گەشتکردن بۆ خوێنەری شاشە و تەکنەلۆژیا یارمەتیدەرەکانی تر دەستنیشان بکرێت. سەرەڕای ئەوە، بەو پێیەی کە ئەگەری ئەوە هەیە لاپەڕەیەک زیاتر لە یەکێک لەو بەشەی گەشتکردنی هەبێت پێشتر (وەک گەشتی سەرەکی لە سەردێڕەکەدا، یان گەشتێکی لایەنی)، باشتر وایە وەسفێک aria-labelبۆ ئەو بەشە دابین بکرێت <nav>کە ئامانجەکەی ڕەنگدەداتەوە. بۆ نموونە ئەگەر پێکهاتەی لاپەڕەسازی بەکاربهێنرێت بۆ گەشتکردن لە نێوان کۆمەڵێک ئەنجامی گەڕان، دەتوانێت ناوێکی گونجاو aria-label="Search results pages".

باری کەمئەندام و چالاک

لینکەکان بۆ بارودۆخی جیاواز دەتوانرێت خۆکارانە دابنرێت. .disabledبۆ ئەو بەستەرانەی کە کلیکیان لەسەر نەکرێت و .activeبۆ ئاماژەدان بە لاپەڕەی ئێستا بەکاربهێنە .

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

پێشنیار دەکەین کە ئەنکرە چالاکەکان یان لەکارخراوەکان بگۆڕیتەوە بۆ <span>, یان ئەنکرەکە لە حاڵەتی تیرەکانی پێشوو/دواتردا نەهێڵیت، بۆ لابردنی کارایی کلیککردن لەکاتێکدا ستایلە مەبەستدارەکان دەهێڵیتەوە.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

قەبارەدانان

فەنتازی گەورەتر یان بچووکتر لاپەڕەسازی؟ زیاد بکە .pagination-lgیان .pagination-smبۆ قەبارەی زیادە.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

پەیجەر

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

نموونەی پێشوەختە

بە شێوەیەكی بنەڕەتی، پەیجەرەكە بەستەرەكان ناوەند دەكات.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

یان دەتوانیت هەر بەستەرێک بە لایەکان ڕێکبخەیت:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

دۆخی لەکارخراوی ئیختیاری

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

لیبێڵەکان

نموونە

نموونەی سەردێڕی نوێ

نموونەی سەردێڕی نوێ

نموونەی سەردێڕی نوێ

نموونەی سەردێڕی نوێ

نموونەی سەردێڕی نوێ
نموونەی سەردێڕی نوێ
<h3>Example heading <span class="label label-default">New</span></h3>

جۆرەکانی بەردەست

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

پێشوەختە زانیاری سەرکەوتنی سەرەتایی مەترسی ئاگادارکردنەوە
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

تۆنێک لیبێڵت هەیە؟

کێشەی ڕەندەرکردن دەتوانێت کاتێک سەرهەڵبدات کە دەیان ناوی ناو هێڵت لەناو دەفرێکی تەسکدا هەبێت، هەریەکەیان inline-blockتوخمێکی تایبەتی خۆی لەخۆدەگرێت (وەک ئایکۆنێک). ڕێگای چارەسەرکردنی ئەمە ڕێکخستنە display: inline-block;. بۆ کۆنتێکست و نموونەیەک، سەیری #13219 بکە .

نیشانەکان

بە ئاسانی شتە نوێیەکان یان نەخوێندراوەکان تیشک بخەرە سەر بە زیادکردنی a <span class="badge">بۆ بەستەرەکان، Bootstrap navs و زۆر شتی تر.

ئینبۆکس42. 42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

خۆ داڕمان

کاتێک هیچ شتێکی نوێ یان نەخوێندراوەتەوە نییە، نیشانەکان بە سادەیی دەڕووخێن (لە ڕێگەی :emptyهەڵبژێرەری CSS) بە مەرجێک هیچ ناوەڕۆکێک لە ناوەوەدا نەبێت.

گونجاوی نێوان وێبگەڕەکان

نیشانەکان لە ئینتەرنێت ئێکسپلۆرەر ٨دا خۆیان ناڕووخێن چونکە پشتگیری بۆ :emptyهەڵبژێرەرەکە نییە.

خۆی لەگەڵ حاڵەتە چالاکەکانی nav دەگونجێنێت

ستایلە بنیات نراوەکان بۆ دانانی نیشانەکان لە حاڵەتە چالاکەکان لە گەشتەکانی حەبدا لەخۆدەگرێت.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

جامبۆترۆن

پێکهاتەیەکی سووک و نەرم و نیان کە دەتوانێت بە ئیختیاری تەواوی دەرچەی بینین درێژ بکاتەوە بۆ پیشاندانی ناوەڕۆکی سەرەکی لە ماڵپەڕەکەتدا.

سڵاو جیهان!

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

زیاتر فێربە

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

بۆ ئەوەی جامبۆترۆنەکە تەواو پان بێت، و بەبێ گۆشەی گوڵاو، لە دەرەوەی هەموو .containers دایبنێ و لەبری ئەوە .containerلەناوەوە زیاد بکە.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

سەردێڕی لاپەڕە

توێکڵێکی سادە بۆ یەکێک بۆ ئەوەی h1بە شێوەیەکی گونجاو بۆشایی دەربهێنرێت و بەشەکانی ناوەڕۆک لە لاپەڕەیەکدا دابەش بکات. دەتوانێت توخمە h1پێشوەختەکەی 's بەکاربهێنێت small، هەروەها زۆربەی پێکهاتەکانی تر (بە شێوازی زیادە).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

وێنە بچووکەکان

سیستەمی تۆڕی Bootstrap درێژ بکەرەوە بە پێکهاتەی وێنە بچووکەکان بۆ ئەوەی بە ئاسانی تۆڕەکانی وێنە و ڤیدیۆ و دەق و زۆر شتی تر پیشان بدەیت.

ئەگەر بەدوای پێشکەشکردنی هاوشێوەی Pinterest دەگەڕێیت بۆ وێنە بچووکەکان بە بەرزی و/یان پانی جیاواز، پێویستە پێوەکراوێکی لایەنی سێیەم وەک Masonry , Isotope , یان Salvattore بەکاربهێنیت .

نموونەی پێشوەختە

بە شێوازی پێشوەختە، وێنە بچووکەکانی Bootstrap بۆ پیشاندانی وێنە بەستراوەکان بە کەمترین نیشانەکردنی پێویست دیزاین کراون.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

ناوەڕۆکی تایبەت بەخۆت

بە کەمێک مارکاپی زیادە، دەتوانرێت هەر جۆرە ناوەڕۆکێکی HTML وەک سەردێڕ، پەرەگراف، یان دوگمە زیاد بکرێت بۆ وێنە بچووکەکان.

100%x200

ناوی وێنە بچووکەکان

کراس جوستۆ ئۆدیۆ، داپیبوس فاسیلیسیس لە، ئێگێستاس ئێگێت کوام. Donec id elit non mi porta gravida لە ئیگێت مێتۆس. نولم id dolor id nibh ultricies ئۆتۆمبێلەکان ut id elit.

دوگمه‌ دوگمه‌

100%x200

ناوی وێنە بچووکەکان

کراس جوستۆ ئۆدیۆ، داپیبوس فاسیلیسیس لە، ئێگێستاس ئێگێت کوام. Donec id elit non mi porta gravida لە ئیگێت مێتۆس. نولم id dolor id nibh ultricies ئۆتۆمبێلەکان ut id elit.

دوگمه‌ دوگمه‌

100%x200

ناوی وێنە بچووکەکان

کراس جوستۆ ئۆدیۆ، داپیبوس فاسیلیسیس لە، ئێگێستاس ئێگێت کوام. Donec id elit non mi porta gravida لە ئیگێت مێتۆس. نولم id dolor id nibh ultricies ئۆتۆمبێلەکان ut id elit.

دوگمه‌ دوگمه‌

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

ئاگادارکردنەوەکان

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

نموونە

هەر دەقێک و دوگمەی ڕەتکردنەوەی هەڵبژاردە لە .alertو یەکێک لە چوار پۆلی کۆنتێکست (بۆ نموونە، .alert-success) بۆ پەیامی ئاگادارکردنەوەی بنەڕەتی بپێچەرەوە.

هیچ پۆلێکی پێشوەختە نییە

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

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

ئاگادارکردنەوە ڕەتکراوەکان

لەسەر هەر ئاگادارکردنەوەیەک دروست بکە بە زیادکردنی دوگمەی ئیختیاری .alert-dismissibleو داخستنی.

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

بۆ ئاگادارکردنەوە کە بە تەواوی کاربکەن و ڕەتدەکرێنەوە، پێویستە پێوەکراوەکەی جاڤاسکڕێپتی ئاگادارکردنەوەکان بەکاربهێنیت .

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

دڵنیابوون لە ڕەفتاری دروست لە سەرانسەری هەموو ئامێرەکاندا

دڵنیابە لە بەکارهێنانی <button>توخمەکە لەگەڵ data-dismiss="alert"تایبەتمەندی داتا.

پۆلی سوودمەندی بەکاربهێنە .alert-linkبۆ ئەوەی بە خێرایی بەستەری ڕەنگاوڕەنگی هاوتا لەناو هەر ئاگادارکردنەوەیەکدا دابین بکەیت.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

هێڵەکانی پێشکەوتن

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

گونجاوی نێوان وێبگەڕەکان

پێشکەوتن بارەکان گواستنەوە و ئەنیمەیشنەکانی CSS3 بەکاردەهێنن بۆ بەدەستهێنانی هەندێک لە کاریگەرییەکانیان. ئەم تایبەتمەندیانە لە ئینتەرنێت ئێکسپلۆرەر ٩ و خوارەوە یان وەشانی کۆنتری فایەرفۆکس پشتگیری ناکرێت. ئۆپێرا ١٢ پشتگیری لە ئەنیمەیشن ناکات.

گونجاوی سیاسەتی ئاسایشی ناوەڕۆک (CSP).

ئەگەر ماڵپەڕەکەت سیاسەتی ئاسایشی ناوەڕۆکی (CSP)ی هەیە کە ڕێگە نادات style-src 'unsafe-inline'، ئەوا ناتوانیت styleتایبەتمەندییەکانی ناو هێڵ بەکاربهێنیت بۆ دانانی پاناییەکانی باری پێشکەوتن وەک لە نموونەکانی خوارەوەماندا نیشان دراوە. شێوازە جێگرەوەکان بۆ ڕێکخستنی پاناییەکان کە لەگەڵ CSP توندەکاندا دەگونجێن بریتین لە بەکارهێنانی کەمێک جاڤاسکڕێپتی تایبەتمەند (کە دادەنێت element.style.width) یان بەکارهێنانی پۆلەکانی CSS تایبەتمەند.

نموونەی بنەڕەتی

پەتی پێشکەوتنی پێشوەختە.

60% تەواو
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

بە لیبێڵەوە

<span>پۆلی with لە ناو پەتی پێشکەوتن دەربهێنە .sr-onlyبۆ ئەوەی ڕێژەیەکی دیار پیشان بدەیت.

60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

بۆ دڵنیابوون لەوەی کە دەقی ناوەکە تەنانەت بۆ ڕێژەی سەدی نزمیش بە خوێنەرەوە دەمێنێتەوە، بیر لە زیادکردنی a بکەرەوە min-widthبۆ پەتی پێشکەوتن.

0%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

بەدیلەکانی کۆنتێکست

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

40% تەواو (سەرکەوتن)
20% تەواو
60% تەواو (ئاگادارکردنەوە)
80% تەواو (مەترسی)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

ڕەنگاوڕەنگ

گرادێنت بەکاردەهێنێت بۆ دروستکردنی کاریگەرییەکی ڕەنگاوڕەنگ. لە IE9 و خوارەوەدا بەردەست نییە.

40% تەواو (سەرکەوتن)
20% تەواو
60% تەواو (ئاگادارکردنەوە)
80% تەواو (مەترسی)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

ئەنیمەیشن

زیاد بکە .activeبۆ .progress-bar-stripedبۆ ئەنیمەیشنکردنی هێڵەکان لە ڕاستەوە بۆ چەپ. لە IE9 و خوارەوەدا بەردەست نییە.

45% تەواو بووە
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

کۆکراوە

چەندین بار بخەرە ناو یەکەوە بۆ ئەوەی لەسەر یەک .progressکۆبکەینەوە.

35% تەواو (سەرکەوتوو)
20% تەواو (ئاگادارکردنەوە)
10% تەواو (مەترسی)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

ئۆبجێکتی میدیایی

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

میدیای پێشوەختە

میدیای پێشوەختە شتێکی میدیایی (وێنە، ڤیدیۆ، دەنگ) لە لای چەپ یان ڕاستی بلۆکێکی ناوەڕۆک پیشان دەدات.

سەردێڕی میدیایی

کراس دانیشتن amet nibh libero، لە gravida nulla. Nulla vel metus scelerisque پێش سۆلیسیتۆدین کۆمۆدۆ. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.

سەردێڕی میدیایی

کراس دانیشتن amet nibh libero، لە gravida nulla. Nulla vel metus scelerisque پێش سۆلیسیتۆدین کۆمۆدۆ. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.

سەردێڕی میدیای هێلانەکراو

کراس دانیشتن amet nibh libero، لە gravida nulla. Nulla vel metus scelerisque پێش سۆلیسیتۆدین کۆمۆدۆ. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.

سەردێڕی میدیایی

کراس دانیشتن amet nibh libero، لە gravida nulla. Nulla vel metus scelerisque پێش سۆلیسیتۆدین کۆمۆدۆ. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis.

سەردێڕی میدیایی

کراس دانیشتن amet nibh libero، لە gravida nulla. Nulla vel metus scelerisque پێش سۆلیسیتۆدین کۆمۆدۆ. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

پۆلەکان .pull-leftو .pull-rightهەروەها هەن و پێشتر وەک بەشێک لە پێکهاتەی میدیا بەکاردەهێنران، بەڵام بۆ ئەو بەکارهێنانە لە v3.3.0 بەکارنەهێنراون. ئەوان بە نزیکەیی یەکسانن بە .media-leftو .media-right, تەنها ئەوە نەبێت کە .media-rightپێویستە لە دوای .media-bodyلە html دابنرێت.

ڕێکخستنی میدیا

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

میدیای سەرەوەی ڕێکخراو

کراس دانیشتن amet nibh libero، لە gravida nulla. Nulla vel metus scelerisque پێش سۆلیسیتۆدین کۆمۆدۆ. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.

دۆنێک سێد ئۆدیۆ دوی. Nullam quis risus eget ئورنا مۆلیس ئۆرنارێ ڤێل ئیو لیۆ. Cum sociis natoque پێناتیبوس و مەگنیس دیس پارتوریێنت مۆنتێس، ناسێکتۆر ڕیدیکولۆس موس.

میدیای ڕیزبەندی ناوەڕاست

کراس دانیشتن amet nibh libero، لە gravida nulla. Nulla vel metus scelerisque پێش سۆلیسیتۆدین کۆمۆدۆ. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.

دۆنێک سێد ئۆدیۆ دوی. Nullam quis risus eget ئورنا مۆلیس ئۆرنارێ ڤێل ئیو لیۆ. Cum sociis natoque پێناتیبوس و مەگنیس دیس پارتوریێنت مۆنتێس، ناسێکتۆر ڕیدیکولۆس موس.

میدیای ڕیزکراوی خوارەوە

کراس دانیشتن amet nibh libero، لە gravida nulla. Nulla vel metus scelerisque پێش سۆلیسیتۆدین کۆمۆدۆ. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis. Fusce condimentum nunc ac nisi کۆئەندامی زاوزێ. دۆنێک لاسینیا کۆنگی فێلیس لە فاوسیبوسدا.

دۆنێک سێد ئۆدیۆ دوی. Nullam quis risus eget ئورنا مۆلیس ئۆرنارێ ڤێل ئیو لیۆ. Cum sociis natoque پێناتیبوس و مەگنیس دیس پارتوریێنت مۆنتێس، ناسێکتۆر ڕیدیکولۆس موس.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

لیستی میدیا

بە کەمێک مارکاپی زیادە، دەتوانیت میدیا لەناو لیستەکەدا بەکاربهێنیت (بەسوودە بۆ بابەتەکانی کۆمێنت یان لیستی بابەتەکان).

  • سەردێڕی میدیایی

    کراس دانیشتن amet nibh libero، لە gravida nulla. Nulla vel metus scelerisque پێش سۆلیسیتۆدین کۆمۆدۆ. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis.

    سەردێڕی میدیای هێلانەکراو

    کراس دانیشتن amet nibh libero، لە gravida nulla. Nulla vel metus scelerisque پێش سۆلیسیتۆدین کۆمۆدۆ. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis.

    سەردێڕی میدیای هێلانەکراو

    کراس دانیشتن amet nibh libero، لە gravida nulla. Nulla vel metus scelerisque پێش سۆلیسیتۆدین کۆمۆدۆ. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis.

    سەردێڕی میدیای هێلانەکراو

    کراس دانیشتن amet nibh libero، لە gravida nulla. Nulla vel metus scelerisque پێش سۆلیسیتۆدین کۆمۆدۆ. Cras purus odio، vestibulum لە vulputate لە، tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

گروپی لیست

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

نموونەی بنەڕەتی

بنەڕەتیترین گروپی لیست بە سادەیی لیستێکی بێ ڕێکخستنە کە بابەتە لیستەکانی تێدایە، و پۆلە گونجاوەکان. لەسەری بنیات بنێ بەو بژاردانەی کە لە دوای ئەوە دێن، یان CSS ی خۆت بەپێی پێویست.

  • کراس جوستۆ ئۆدیۆ
  • داپیبوس ac facilisis لە
  • مۆربی لیۆ ریسوس
  • پۆرتا ئەی سی کۆنسێکتێتور ئەی سی
  • ڤێستیبولوم لە ئیرۆس
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

نیشانەکان

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

  • 14. 14کراس جوستۆ ئۆدیۆ
  • 2. 2داپیبوس ac facilisis لە
  • 1. 1مۆربی لیۆ ریسوس
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

بابەتە بەستراوەکان

بابەتە گروپەکانی لیست بەیەکەوە ببەستە بە بەکارهێنانی تاگی ئەنکر لەبری بابەتە لیستەکان (کە هەروەها بە واتای دایک و باوک دێت <div>لەبری یەک <ul>). پێویست بە تاکی دایک و باوک ناکات لە دەوری هەر توخمێک.

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

بابەتە دوگمەییەکان

ڕەنگە بابەتە گروپەکانی لیست دوگمە بن لەبری بابەتە لیستەکان (کە هەروەها بە واتای دایک و باوک دێت <div>لەبری ئەوەی <ul>). پێویست بە تاکی دایک و باوک ناکات لە دەوری هەر توخمێک. لێرەدا پۆلە ستانداردەکان بەکارمەهێنە ..btn

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

بابەتە لەکارخراوەکان

زیاد بکە .disabledبۆ a .list-group-itemبۆ ئەوەی خۆڵەمێشی بکەیت بۆ ئەوەی لەکارکەوتوو دەربکەوێت.

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

پۆلە کۆنتێکستەکان

پۆلەکانی کۆنتێکست بەکاربهێنە بۆ ستایلکردنی بابەتە لیستەکان، بە پێشوەختە یان بەستراو. هەروەها .activeدەوڵەتیش دەگرێتەوە.

  • داپیبوس ac facilisis لە
  • کراس دانیشتن amet nibh libero
  • پۆرتا ئەی سی کۆنسێکتێتور ئەی سی
  • ڤێستیبولوم لە ئیرۆس
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

ناوەڕۆکی تایبەت بەخۆت

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

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

پانێڵەکان

لە کاتێکدا هەمیشە پێویست نییە، هەندێک جار پێویستە DOM ـەکەت بخەیتە ناو سندوقێکەوە. بۆ ئەو بارودۆخانە پێکهاتەی پانێڵەکە تاقی بکەرەوە.

نموونەی بنەڕەتی

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

نموونەی پانێڵی بنەڕەتی
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

پانێڵێک بە سەردێڕەوە

بە ئاسانی دەفرێکی سەردێڕ زیاد بکە بۆ پانێڵەکەت بە .panel-heading. هەروەها دەتوانیت هەر <h1>- <h6>لەگەڵ .panel-titleپۆلێک دابنێیت بۆ زیادکردنی سەردێڕێکی پێشوەختە ستایلکراو. بەڵام قەبارەی فۆنتەکانی <h1>- <h6>بە .panel-heading.

بۆ ڕەنگکردنی دروستی بەستەرەکان، دڵنیابە کە بەستەرەکان لە سەردێڕەکاندا لە ناو .panel-title.

سەردێڕی پانێڵ بەبێ ناونیشان
ناوەڕۆکی پانێڵ

ناونیشانی پانێڵ

ناوەڕۆکی پانێڵ
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

دوگمەکان یان دەقی لاوەکی لە .panel-footer. سەرنج بدە کە ژێرەوەی پانێڵەکان ڕەنگ و سنوورەکان بە میرات ناگرن لە کاتی بەکارهێنانی گۆڕانکارییەکانی ناوەڕۆکدا چونکە مەبەست لێی ئەوە نییە کە لە پێشەوە بن.

ناوەڕۆکی پانێڵ
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

بەدیلەکانی کۆنتێکست

وەک پێکهاتەکانی تر، بە ئاسانی پانێڵێک مانادارتر بکە بۆ کۆنتێکستێکی دیاریکراو بە زیادکردنی هەریەکێک لە پۆلەکانی باری کۆنتێکست.

ناونیشانی پانێڵ

ناوەڕۆکی پانێڵ

ناونیشانی پانێڵ

ناوەڕۆکی پانێڵ

ناونیشانی پانێڵ

ناوەڕۆکی پانێڵ

ناونیشانی پانێڵ

ناوەڕۆکی پانێڵ

ناونیشانی پانێڵ

ناوەڕۆکی پانێڵ
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

لەگەڵ مێزەکاندا

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

سەردێڕی پانێڵ

هەندێک ناوەڕۆکی پانێڵی پێشوەختە لێرەدا. Nulla vitae elit libero، یەکێکە لە فارێترا ئاوگەکان. Aenean lacinia bibendum nulla sed consectetur. Aenean eu لیۆ کوام. پێلێنتێسک رازاوە sem lacinia quam venenatis vestibulum. نولم id dolor id nibh ultricies ئۆتۆمبێلەکان ut id elit.

# . ناوی یەکەم ناوی کۆتایی ناوی بەکارهێنەر
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندەکە لە @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

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

سەردێڕی پانێڵ
# . ناوی یەکەم ناوی کۆتایی ناوی بەکارهێنەر
1. 1 مارک ئۆتۆ @mdo
2. 2 یاقوب تۆرنتن @قەڵەو
3. 3 لاری باڵندەکە لە @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

لەگەڵ گروپەکانی لیست

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

سەردێڕی پانێڵ

هەندێک ناوەڕۆکی پانێڵی پێشوەختە لێرەدا. Nulla vitae elit libero، یەکێکە لە فارێترا ئاوگەکان. Aenean lacinia bibendum nulla sed consectetur. Aenean eu لیۆ کوام. پێلێنتێسک رازاوە sem lacinia quam venenatis vestibulum. نولم id dolor id nibh ultricies ئۆتۆمبێلەکان ut id elit.

  • کراس جوستۆ ئۆدیۆ
  • داپیبوس ac facilisis لە
  • مۆربی لیۆ ریسوس
  • پۆرتا ئەی سی کۆنسێکتێتور ئەی سی
  • ڤێستیبولوم لە ئیرۆس
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

جێگیرکردنی وەڵامدەرەوە

ڕێگە بە وێبگەڕەکان بدە کە ڕەهەندەکانی ڤیدیۆ یان نمایشی سلاید دیاری بکەن بە پشتبەستن بە پانایی بلۆکی تێدایە بە دروستکردنی ڕێژەیەکی ناوەکی کە بە شێوەیەکی دروست لەسەر هەر ئامێرێک قەبارە دەکات.

یاساکان ڕاستەوخۆ بۆ <iframe>, <embed>, <video>, و <object>توخمەکان بەکاردەهێنرێن؛ بە ئیختیاری پۆلێکی نەوەی ڕوون بەکاربهێنە .embed-responsive-itemکاتێک دەتەوێت ستایلەکە بۆ تایبەتمەندیەکانی تر بگونجێنی.

پرۆ-تیپ! پێویست ناکات frameborder="0"لە <iframe>s ـەکەتدا جێی بکەیتەوە چونکە ئێمە ئەوە بۆ تۆ سەرپێچی دەکەین.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

وێڵز

بەپێی پێشوەختە بە باشی

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

سەیرکە من لەناو بیرێکدام!
<div class="well">...</div>

پۆلە ئیختیارییەکان

کۆنترۆڵی پادکردن و گۆشە گوڵاوەکان بە دوو پۆلی دەستکاریکەری ئیختیاری.

سەیرکە من لەناو بیرێکی گەورەدام!
<div class="well well-lg">...</div>
سەیرکە من لە بیرێکی بچوکدام!
<div class="well well-sm">...</div>