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

گروپی دوگمەکان بەکاربهێنە بۆ یەکخستنی چەندین دوگمە بەیەکەوە وەک یەک پێکهاتەی پێکهاتەیی. بە زنجیرەیەک <a>یان <button>توخم دروستیان بکە.

باشترین پراکتیزەکان

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

• هەمیشە هەمان توخم لە گروپی یەک دوگمەدا بەکاربهێنە، <a>یان <button>.
• دوگمەی ڕەنگی جیاواز لە یەک گروپی دوگمە تێکەڵ مەکە.
• جگە لە دەق یان لەبری دەق ئایکۆنەکان بەکاربهێنە، بەڵام دڵنیابە لە شوێنی گونجاودا دەقی alt و title لەخۆبگرە.

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

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

لێرەدا چۆن HTML بەدوای گروپێکی دوگمەی ستاندارددا دەگەڕێت کە بە دوگمەکانی تاگی ئەنکر دروستکراوە:

<div class = "گرووپی btn" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

نموونەی Toolbar

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

<div class = "btn-تولبار" > 
  <div class = "گرووپی btn" > 
    ...
  </div>
</div>

بۆکسی چێک و تامەکانی ڕادیۆ

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

جاڤاسکڕێپتەکە بەدەست بهێنە »

سەری بەرز دەکاتەوە

CSS بۆ گروپەکانی دوگمە لە فایلێکی جیاوازدایە، button-groups.less.

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

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

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

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

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

<div class = "گرووپی btn" > 
  <a class = "btn دابەزین-گۆڕین" data-toggle = "دابەزاندن" href = "#" >   
    کردار
    <span class = "کارێت" </span> 
  </a>
  <ul class = "مێنۆی دابەزین" > 
    <!-- بەستەرەکانی مینیوی دابەزین -->
  </ul>
</div>

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

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

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

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

<div class = "گرووپی btn" > 
  <a class = "btn" href = "#" > کردار </a>  
  <a class = "btn دابەزین-گۆڕین" data-toggle = "دابەزاندن" href = "#" >   
    <span class = "کارێت" </span> 
  </a>
  <ul class = "مێنۆی دابەزین" > 
    <!-- بەستەرەکانی مینیوی دابەزین -->
  </ul>
</div>

پۆلی بنەڕەتی بەهێز

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

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

تاب و حەبەکان زۆر باشن بۆ بەشەکانی ناوەڕۆک یان گەشتکردن لە نێوان لاپەڕەکانی ناوەڕۆکی پەیوەندیدار.

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

بۆ ڕێکخستنی بەستەرەکانی nav، پۆلەکانی .pull-leftor .pull-rightutility بەکاربهێنە. هەردوو پۆلەکە فلۆتێکی CSS بە ئاراستەی دیاریکراو زیاد دەکەن.

تابە بنەڕەتییەکان

بە شێوەیەکی ڕێکوپێک <ul>لە لینکەکان وەربگرە و زیاد بکە .nav-tabs:

• ماڵەوە
• پرۆفایل
• پەیامەکان

<ul class = "nav nav-tabs" > 
  <li class = "چالاك" > 
    <a href = "#" > ماڵەوە </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

حەبی بنەڕەتی

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

• ماڵەوە
• پرۆفایل
• پەیامەکان

<ul class = "nav nav-حەب" > 
  <li class = "چالاك" > 
    <a href = "#" > ماڵەوە </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

چۆنێتی کۆکردنەوەی 'em

بەو پێیەی تاب و حەبەکان بە شێوازی پێشوەختە ئاسۆین، تەنها پۆلێکی دووەم زیاد بکە، .nav-stacked, بۆ ئەوەی بە شێوەیەکی ڕاست لەسەر یەک دەرکەون.

تابەکانی کۆکراوە

• ماڵەوە
• پرۆفایل
• پەیامەکان

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

حەبی کۆکراوە

• ماڵەوە
• پرۆفایل
• پەیامەکان

<ul class = "nav nav-حەبەکان nav-کۆکراونەتەوە" > 
  ...
</ul>

مینیوی دەوڵەمەند ئاسان کراوە

مینیوەکانی دابەزین لە تاب و حەبەکانی Bootstrap زۆر ئاسانن و تەنها پێویستیان بە کەمێک HTML زیادە و پێوەکراوێکی jQuery ی سووک هەیە.

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

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

• ماڵەوە
• پرۆفایل
• فرێدان
  • کردار
  • کردارێکی تر
  • شتێکی تر لێرە
  • لینکی جیاکراوە

<ul class = "nav nav-tabs" > 
  <li class = "دابەزاندن" > 
    <a class = "گۆڕینی دابەزین" 
       data-toggle = "دابەزاندن"
       href = "#" >
        فرێدان
        <b class = "کارێت" ></b> 
      </a>
    <ul class = "مێنۆی دابەزین" > 
      <!-- بەستەرەکان -->
    </ul>
  </li>
</ul>

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

• ماڵەوە
• پرۆفایل
• فرێدان
  • کردار
  • کردارێکی تر
  • شتێکی تر لێرە
  • لینکی جیاکراوە

<ul class = "nav nav-حەب" > 
  <li class = "دابەزاندن" > 
    <a class = "گۆڕینی دابەزین" 
       data-toggle = "دابەزاندن"
       href = "#" >
        فرێدان
        <b class = "کارێت" ></b> 
      </a>
    <ul class = "مێنۆی دابەزین" > 
      <!-- بەستەرەکان -->
    </ul>
  </li>
</ul>

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

لیستەکانی Nav ڕێگەیەکی سادە و ئاسان بۆ دروستکردنی گروپی بەستەری nav بە سەردێڕی هەڵبژاردە دابین دەکەن. باشترین بەکارهێنانیان لە لایەنی وەک Finder لە OS X.

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

بە ئایکۆنەکانەوە

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

نموونەی nav list

لیستێک لە لینکەکان وەربگرە و زیاد بکە class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "سەردێڕی nav" > 
    سەردێڕی لیست
  </li>
  <li class = "چالاك" > 
    <a href = "#" > ماڵەوە </a> 
  </li>
  <li>
    <a href = "#" > کتێبخانە </a> 
  </li>
  ...
</ul>

نموونە بە ئایکۆنەکان

هەمان نموونە، بەڵام بە <i>تاگ بۆ ئایکۆنەکان.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "کتێبی ئایکۆن" ></i> 
      کتێبخانە
    </a>
  </li>
  ...
</ul>

ئەوەی لەخۆدەگرێت

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

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

نموونەی خشتەکان

بۆ ئەوەی تابەکان بکەیتە تاببڵ، .nav-tabsلە div ێکی تردا بە پۆل بپێچە .tabbable.

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

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

جاڤاسکڕێپتەکە بەدەست بهێنە →

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

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

<div class = "تابەکانی خشتەی خوارەوە" > 
  <div class = "ناوەڕۆکی تاب" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

تابەکان لە لای چەپەوە

پۆلەکە بگۆڕە بۆ ئەوەی تابەکان لە لای چەپ دابنێیت.

<div class = "تابەکانی خشتەکان-چەپ" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "ناوەڕۆکی تاب" > 
    ...
  </div>
</div>

تابەکان لە لای ڕاستەوە

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

<div class = "تابەکانی خشتەکان-ڕاست" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "ناوەڕۆکی تاب" > 
    ...
  </div>
</div>

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

navbar تەنها پێویستی بە چەند div ێک هەیە بۆ ئەوەی بە باشی پێکهاتە بکات بۆ پیشاندانی ئیستاتیک یان جێگیر.

<div class = "ناوبار" > 
  <div class = "ناوەوەی ناوبار" > 
    <div class = "دەفر" > 
      ...
    </div>
  </div>
</div>

جێگیرکردنی navbar

بۆ ئەوەی navbar لە سەرەوەی viewport جێگیر بێت، زیاد بکە .navbar-fixed-topبۆ دەرەوەترین div، .navbar.

<div class = "navbar ناوبار-سەرەوەی جێگیر" > 
  ...
</div>

هەروەها لە CSS ـەکەتدا پێویستە حساب بۆ ئەو سەریەککەوتنە بکەیت کە دەبێتە هۆی زیادکردنی 40px یان زیاتر لە پادکردن بۆ <body>. دڵنیابە کە ئەمە زیاد دەکەیت دوای CSS ی ناوەکی Bootstrap و پێش CSS ی وەڵامدەرەوەی هەڵبژاردە.

ناوی مارکە

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

<a class = "مارکە" href = "#" >  
  ناوی پرۆژە
</a>

فۆڕمی گەڕان

فۆڕمەکانی گەڕان لە ناو بارەکەدا لەگەڵ پۆلەکەدا ستایلە تایبەتمەندەکان وەردەگرن .navbar-search. لەگەڵ .pull-leftیان .pull-rightلەسەر formبۆ ڕێکخستنی.

<form class = "navbar-گەڕان ڕاکێشان-چەپ" > 
  < جۆری هاتنەژوورەوە = "دەق" پۆل = "گەڕان-پرسیار" شوێنگرەوە = "گەڕان" >   
</form>

گۆڕانی وەڵامدەرەوەی ئیختیاری

بەپێی بڕی ناوەڕۆک لە سەرەوەی تۆدا، لەوانەیە بتەوێت بژاردە وەڵامدەرەوەکان جێبەجێ بکەیت. بۆ ئەم مەبەستە، ناوەڕۆکی nav ـەکەت لە div ی تێدایە بپێچە، .nav-collapse.collapse, و دوگمەی گۆڕینی navbar زیاد بکە، .btn-navbar.

<div class = "ناوبار" > 
  <div class = "ناوەوەی ناوبار" > 
    <div class = "دەفر" > 
 
      <!-- .btn-navbar وەک گۆڕانکاری بۆ ناوەڕۆکی داڕماوەی navbar بەکاردێت -->
      <a class = "btn btn-navbar" data-toggle = "داڕمان" داتا-ئامانج = ".nav-داڕمان" >   
        <span class = "ئایکۆن-بار" </span> 
        <span class = "ئایکۆن-بار" </span> 
        <span class = "ئایکۆن-بار" </span> 
      </a>
 
      <!-- دڵنیابە کە براندەکە لەوێ بەجێبهێڵە ئەگەر دەتەوێت پیشان بدرێت -->
      <a class = "brand" href = "#" > ناوی پڕۆژە </a>  
 
      <!-- هەموو ئەو شتانەی کە دەتەوێت بە 940px یان کەمتر بشاردرێتەوە، لێرەدا دایبنێ -->
      <div class = "nav-داڕمان" > 
        <!-- .nav، .navbar-گەڕان، .navbar-فۆڕم، هتد -->
      </div>
 
    </div>
  </div>
</div>

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

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

<ul پۆل = "nav" > 
  <li class = "چالاك" > 
    <a href = "#" > ماڵەوە </a> 
  </li>
  <li><a href = "#" > بەستەر </a></li> 
  <li><a href = "#" > بەستەر </a></li> 
</ul>

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

<ul پۆل = "nav" > 
  ...
  <li class = "دابەشکەر-ڕاست" </li> 
  ...
</ul>

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

بۆ ڕێکخستنی nav، فۆڕمی گەڕان، یان دەق، پۆلەکانی .pull-leftیان .pull-rightسوودمەندی بەکاربهێنە. هەردوو پۆلەکە فلۆتێکی CSS بە ئاراستەی دیاریکراو زیاد دەکەن.

زیادکردنی درۆپداونەکان

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

<ul پۆل = "nav" > 
  <li class = "دابەزاندن" > 
    < a href = "#" 
          class = "گۆڕینی دابەزین"
          data-toggle = "دابەزاندن" >
          ئەژمێر
          <b class = "کارێت" ></b> 
    </a>
    <ul class = "مێنۆی دابەزین" > 
      ...
    </ul>
  </li>
</ul>

جاڤاسکڕێپتەکە بەدەست بهێنە →

بۆچی بەکاریان بهێنین

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

نموونە

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

• ماڵەوە

• ماڵەوە /
• کتێبخانە

• ماڵەوە /
• کتێبخانە /
• داتا

مارکاپ

HTML لیستی ستانداردی بێ ڕێکخستنی تۆیە کە بەستەرەکانی تێدایە.

<ul class = "نانە وردکراوەکان" > 
  <li>
    <a href = "#" > ماڵەوە </a> <span class = "دابەشکەر" > / </span>   
  </li>
  <li>
    <a href = "#" > کتێبخانە </a> <span class = "دابەشکەر" > / </span>   
  </li>
  <li class = "چالاك" > 
    <a href = "#" > زانیاری </a> 
  </li>
</ul>

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

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

بەستەری لاپەڕەی دەوڵەتدار

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

ڕێکخستنی نەرم و نیان

یەکێک لە دوو پۆلی هەڵبژاردە زیاد بکە بۆ گۆڕینی ڕێکخستنی بەستەرەکانی لاپەڕەسازی: .pagination-centeredو .pagination-right.

نموونە

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

مارکاپ

پێچراو لە <div>, لاپەڕەسازی تەنها <ul>.

<div class = "لاپەڕەکردن" > 
  <ul>
    <li><a href = "#" > پێشوو </a></li> 
    <li class = "چالاك" > 
      <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 = "#" > دواتر </a></li> 
  </ul>
</div>

دەربارەی pager

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

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

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

• پێشووتر
• دواتر

<ul پۆل = "پەیجەر" > 
  <li>
    <a href = "#" > پێشوو </a> 
  </li>
  <li>
    <a href = "#" > دواتر </a> 
  </li>
</ul>

بەستەرەکانی ڕێکخراو

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

• ← کۆنتر
• نوێتر →

<ul پۆل = "پەیجەر" > 
  <li class = "پێشوو" > 
    <a href = "#" > ← کۆنتر </a> 
  </li>
  <li class = "دواتر" > 
    <a href = "#" > نوێتر → </a> 
  </li>
</ul>

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

مارکاپ

ناوەڕۆکەکەت بە divلایکێک بپێچە بۆیە:

<div class = "یەکە-پاڵەوان" > 
  <h1> سەردێڕی </h1>
  <p> تاگلاین </p>
  <p>
    <a class = "btn btn-سەرەکی btn-گەورە" > 
      زیاتر فێربە
    </a>
  </p>
</div>

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

<div class = "لاپەڕە-هیدەر" > 
  <h1> نموونەی سەردێڕی لاپەڕە </h1>
</div>

وێنە بچووکەکانی پێشوەختە

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

زۆر خۆکارانە دەکرێت

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

• 

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

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

  کردار کردار

• 

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

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

  کردار کردار

بۆچی وێنە بچووکەکان بەکاربهێنرێت

وێنە بچووکەکان (پێشتر .media-gridتا v1.4) زۆر باشن بۆ تۆڕەکانی وێنە یان ڤیدیۆ، ئەنجامی گەڕانی وێنە، بەرهەمی تاکەکەسی، پۆرتفۆلیۆ و زۆر شتی تر. دەتوانن بەستەر یان ناوەڕۆکی ئیستاتیک بن.

مارکاپێکی سادە و نەرم و نیان

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

قەبارەی ستوونی تۆڕ بەکاردەهێنێت

لە کۆتاییدا، پێکهاتەی وێنە بچووکەکان پۆلەکانی سیستەمی تۆڕی هەبوو بەکاردەهێنێت-وەک .span2یان - .span3بۆ کۆنترۆڵکردنی ڕەهەندەکانی وێنە بچووکەکان.

مارکاپەکە

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

<ul class = "وێنە بچووکەکان" > 
  <li پۆل = "span3" > 
    <a href = "#" class = "وێنە بچووکەکە" >  
      <img src = "http://260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

بۆ ناوەڕۆکی HTML ی تایبەت لە وێنە بچووکەکاندا، مارکاپەکە کەمێک دەگۆڕێت. بۆ ئەوەی ڕێگە بە ناوەڕۆکی ئاستی بلۆک بدەین لە هەر شوێنێک، ئێمە دەگۆڕینەوە <a>بۆ <div>لایک بۆیە:

<ul class = "وێنە بچووکەکان" > 
  <li پۆل = "span3" > 
    <div class = "وێنەی بچووک" > 
      <img src = "http://260x180" alt = "" >  
      <h5> ناوی وێنە بچووکەکان </h5>
      <p> سەردێڕی وێنە بچووکەکان ڕاست لێرە... </p>
    </div>
  </li>
  ...
</ul>

نموونەی زیاتر

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

پۆلی بنەڕەتی دووبارە نووسراوەتەوە

لەگەڵ Bootstrap 2، ئێمە پۆلی بنەڕەتیمان ئاسان کردووە: .alertلەبری .alert-message. هەروەها کەمترین مارکاپی پێویستمان کەم کردووەتەوە- نەخێر <p>بە شێوازی پێشوەختە پێویست نییە، تەنها دەرەوە <div>.

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

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

لەگەڵ جاڤاسکڕێپتدا زۆر باش دەڕوات

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

پێوەکراوەکە بەدەست بهێنە »

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

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

<div class = "ئاگادارکردنەوە" > 
  <a class = "داخستنی" data-dismiss = "ئاگادارکردنەوە" > × </a>  
  <strong> ئاگادارکردنەوە! </strong> باشترین پشکنین یۆ خۆت، تۆ زۆر باش دەرناکەویت.
</div>

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

<div class = "ئاگادارکردنەوە-بلۆکی ئاگادارکردنەوە" > 
  <a class = "داخستنی" data-dismiss = "ئاگادارکردنەوە" > × </a>  
  <h4 class = "سەردێڕی ئاگادارکردنەوە" > ئاگادارکردنەوە! </h4> 
  باشترین پشکنین یۆ خۆت، تۆ نیت...
</div>

هەڵە یان مەترسی

<div class = "هەڵەی ئاگادارکردنەوە ئاگادارکردنەوە" > 
  ...
</div>

سەرکەوتن

<div class = "ئاگادارکردنەوە-سەرکەوتن" > 
  ...
</div>

زانیاری

<div class = "زانیاری ئاگادارکردنەوە" > 
  ...
</div>

بنەڕەتی

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

<div class = "پێشکەوتن" > 
  <div پۆل = "بار" 
       style = " پانایی : 60 %؛ " ></div> 
</div>

ڕەنگاوڕەنگ

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

<div class = "زانیاری پێشکەوتنی پێشکەوتن." 
     پێشکەوتن-ڕەنگاوڕەنگ" >
  <div پۆل = "بار" 
       style = " پانایی : 20 %؛ " ></div> 
</div>

ئەنیمەیشن

نموونەی ڕەنگاوڕەنگ وەردەگرێت و ئەنیمەیشن دەکات.

<div class = "پێشکەوتن-مەترسی." 
     چالاکە ڕەنگاوڕەنگەکانی پێشکەوتن" >
  <div پۆل = "بار" 
       style = " پانایی : 40 %؛ " ></div> 
</div>

ڕەنگی زیادە

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

• .progress-info
• .progress-success
• .progress-danger

یان دەتوانیت فایلەکانی LESS بە خواستی خۆت دابنێیت و ڕەنگ و قەبارەی خۆت ڕۆڵ بکەیت.

ڕەفتار

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

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

پشتگیری وێبگەڕ

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

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

وێڵز

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

<div class = "باشە" > 
  ...
</div>

نیشانەکان

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

<span class = "نیشانە" > 3 </div> 

ئایکۆنی داخستنی

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

×

<a class = "داخستنی" > × </a>