Button groups

Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.

Best practices

We recommend the following guidelines for using button groups and toolbars:

• Always use the same element in a single button group, <a> or <button>.
• Don't mix buttons of different colors in the same button group.
• Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.

Related Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.

Default example

Here's how the HTML looks for a standard button group built with anchor tag buttons:

<div class="btn-group">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
</div>

Toolbar example

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

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

Checkbox and radio flavors

Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.

Get the javascript »

Dropdowns in button groups

Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

Overview and examples

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

Example markup

Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.

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

بە هەموو قەبارەکانی دوگمە کاردەکات

درۆپداونەکانی دوگمەکان بە هەر قەبارەیەک کاردەکەن. قەبارەی دوگمەکانت بۆ .btn-large, .btn-small, یان .btn-mini.

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

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

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

تێڕوانینێکی گشتی و نموونەکان

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

قەبارەکان

پۆلەکانی دوگمەی زیادە بەکاربهێنە .btn-mini, .btn-small, یان .btn-largeبۆ قەبارەدانان.

<div class = "گرووپی btn" > 
  ...
  <ul class = "مێنۆی دابەزین ڕاکێشانی ڕاست" > 
    <!-- بەستەرەکانی مینیوی دابەزین -->
  </ul>
</div>

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

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

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

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

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

<div class = "دابەزاندنی گروپی btn" > 
  <button class = "btn" > دابەزین </button> 
  <button class = "btn دابەزین-گۆڕین" data-toggle = "دابەزاندن" >  
    <span class = "کارێت" </span> 
  </دوگمەی>
  <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.

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

• ماڵەوە
• یارمەتیدان
• فرێدان
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

• ماڵەوە
• یارمەتیدان
• فرێدان
  • Action
  • Another action
  • Something else here
  • Separated link

<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>لەگەڵ پۆل زیاد بکە و تۆ ڕێکدەخرێت.

دابەشکەری ئاسۆیی

دابەشکەرێکی ئاسۆیی زیاد بکە بە دروستکردنی بابەتی لیستی بەتاڵ لەگەڵ پۆلەکە .divider, وەک:

<ul class = "nav nav-list" > 
  ...
  <li class = "دابەشکەر" </li> 
  ...
</ul>

نموونەی 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 تابەکانی تابەکان بە چوار شێواز یەکدەخات: سەرەوە (بەپێی پێشوەختە)، ڕاست، خوارەوە و چەپ.

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

لە تابەکاندا کاڵ بکەرەوە

بۆ ئەوەی تابەکان کاڵ ببنەوە، زیاد بکە .fadeبۆ هەر یەکەیان .tab-pane.

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

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

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

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

بۆ ئەوەی تابەکان بکەنە تاببڵ، .tab-paneناسنامەیەکی تایبەت بە هەموو تابێک دروست بکە و لە .tab-content.

بۆ تابەکانی ڕیزکراوی ڕاست یان چەپ، .nav-tabsو .tab-contentلە .tabbable.

مارکاپی ڕاستەوخۆ

بەکارهێنانی تابەکانی تابەکان پێویستی بە div ی پێچان و کۆمەڵێک تاب و کۆمەڵێک پەنجەرەی ناوەڕۆکی تاببڵ هەیە.

<div class = "tabbable" > <-- تەنها بۆ تابەکانی چەپ/ڕاست پێویستە --> 
  <ul class = "nav nav-tabs" > 
    <li class = "چالاك" ><a href = "#tab1" data-toggle = "تاب" > بەشی یەکەم </a></li>   
    <li><a href = "#tab2" data-toggle = "تاب" > بەشی دووەم </a></li>  
  </ul>
  <div class = "ناوەڕۆکی تاب" > 
    <div class = "tab-pane چالاکە" id = "tab1" >  
      <p> من لە بەشی یەکەمم. </p>
    </div>
    <div class = "tab-pane" id = "تاب2" >  
      <p> هاودی، من لە بەشی دووەمم. </p>
    </div>
  </div>
</div>

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

ڕیزبەندی 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 بە پۆلێکی زیادە لەسەر دەرەوەترین div، .navbar.

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

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

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

ناوی مارکە

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

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

فۆڕمەکان لە navbar

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

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

بۆ فۆڕمی گەڕانێکی تایبەتمەندتر، زیاد بکە .navbar-searchبۆ formو .search-queryبۆ زانیارییەکانی ناوەوە بۆ ستایلە تایبەتمەندەکان لە ناوبارەکەدا.

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

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

دەق لە ناو بارەکەدا

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

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

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

نموونە

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

• ماڵەوە

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

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

مارکاپ

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

<ul class = "نانە وردکراوەکان" > 
  <li>
    <a href = "#" > ماڵەوە </a> <span class = "دابەشکەر" > / </span>   
  </li>
  <li>
    <a href = "#" > کتێبخانە </a> <span class = "دابەشکەر" > / </span>   
  </li>
  <li class = "چالاك" > داتا </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

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

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

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

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

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

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

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

دەربارەی

نیشانەکان پێکهاتەیەکی بچووک و سادەن بۆ پیشاندانی نیشاندەرێک یان ژماردنێک لە جۆرێک. بەگشتی لە ئیمەیڵ کرێدەرەکانی وەک Mail.app یان لە ئەپەکانی مۆبایلدا بۆ ئاگادارکردنەوەی پاڵنەر دەبینرێن.

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

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

مارکاپ

ناوەڕۆکەکەت بە 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 = "https://qu.wish/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

سەرەکان بەرز دەکەنەوە! ئامێرەکانی ئای ئۆ ئێس پێویستیان بە href="#"ڕەتکردنەوەی ئاگادارکردنەوەکان هەیە. دڵنیابە کە ئەو و تایبەتمەندی داتا بۆ ئایکۆنەکانی داخستنی ئەنکر لەخۆ بگرە. یان دەتوانیت buttonتوخمێک بەکاربهێنیت کە تایبەتمەندی داتاکانی تێدایە، کە ئێمە هەڵمانبژاردووە بۆ دۆکیومێنتەکانمان بیکەین.

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

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

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

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

سەرکەوتن

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

زانیاری

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

بنەڕەتی

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

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

ڕەنگاوڕەنگ

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

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

ئەنیمەیشن

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

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

ڕەنگی زیادە

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

باری ڕەنگاوڕەنگ

هاوشێوەی ڕەنگە ڕەقەکان، ئێمە چەندین جۆری پێشکەوتنی ڕەنگاوڕەنگمان هەیە.

ڕەفتار

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

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

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

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

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

وێڵز

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

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

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

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

×

<button class = "داخستنی" > × </دوگمەی> 

ئامێرەکانی iOS پێویستیان بە href="#" هەیە بۆ ڕووداوەکانی کلیک ئەگەر پێت باشە ئەنکر بەکاربهێنیت.

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