نموونە

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

<ul class = "مێنۆی دابەزین" ڕۆڵ = "مێنۆ" aria-labelledby = "مێنۆی دابەزین" >   
  <li><a tabindex = "-1" href = "#" > کردار </a></li>  
  <li><a tabindex = "-1" href = "#" > کردارێکی تر </a></li>  
  <li><a tabindex = "-1" href = "#" > شتێکی تر لێرە </a></li>  
  <li class = "دابەشکەر" </li> 
  <li><a tabindex = "-1" href = "#" > بەستەری جیاکراوە </a></li>  
</ul>

مارکاپ

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

<div class = "دابەزاندن" > 
  <!-- بەستەر یان دوگمەی گۆڕینی دابەزین -->
  <ul class = "مێنۆی دابەزین" ڕۆڵ = "مێنۆ" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > کردار </a></li>  
    <li><a tabindex = "-1" href = "#" > کردارێکی تر </a></li>  
    <li><a tabindex = "-1" href = "#" > شتێکی تر لێرە </a></li>  
    <li class = "دابەشکەر" </li> 
    <li><a tabindex = "-1" href = "#" > بەستەری جیاکراوە </a></li>  
  </ul>
</div>

بژاردەکان

مینیوەکان بۆ لای ڕاست ڕێکبخە و ئاستی زیادەی دابەزینەکان زیاد بکە.

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

زیادکردن .pull-rightبۆ a .dropdown-menuبۆ ڕاست ڕێکخستنی مینیوی دابەزین.

<ul class = "مێنۆی دابەزین ڕاکێشانی ڕاست" ڕۆڵ = "مێنۆ" aria-labelledby = "dLabel" >   
  ...
</ul>

هەڵبژاردەکانی مینیو لەکارخراوە

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

<ul class = "مێنۆی دابەزین" ڕۆڵ = "مێنۆ" aria-labelledby = "مێنۆی دابەزین" >   
  <li><a tabindex = "-1" href = "#" > بەستەری ئاسایی </a></li>  
  <li class = "لەکارخراوە" ><a tabindex = "-1" href = "#" > بەستەر لەکارخراوە </a></li>   
  <li><a tabindex = "-1" href = "#" > بەستەرێکی تر </a></li>  
</ul>

مینیوی لاوەکی لەسەر درۆپداونەکان

ئاستێکی زیادە لە مینیوەکانی دابەزین زیاد بکە، لە سەر هۆڤەر وەک ئەوانەی OS X دەردەکەون، لەگەڵ هەندێک زیادکردنی سادەی مارکاپ. زیاد بکە .dropdown-submenuبۆ هەر liیەکێک لە مینیویەکی دابەزین بۆ ستایلکردنی ئۆتۆماتیکی.

<ul class = "مێنۆی دابەزین" ڕۆڵ = "مێنۆ" aria-labelledby = "dLabel" >   
  ...
  <li class = "ژێر مێنۆی دابەزین" > 
    <a tabindex = "-1" href = "#" > هەڵبژاردەی زیاتر </a>  
    <ul class = "مێنۆی دابەزین" > 
      ...
    </ul>
  </li>
</ul>

نموونە

دوو بژاردەی بنەڕەتی، لەگەڵ دوو گۆڕانکاری تایبەتتر.

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

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

<div class = "گرووپی btn" > 
  <button class = "btn" > چەپ </button> 
  <button class = "btn" > ناوەڕاست </button> 
  <button class = "btn" > ڕاست </button> 
</div>

چەندین گروپی دوگمە

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

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

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

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

<div class = "gtn-گرووپ btn-گرووپ-ڕاست" > 
  ...
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

قەبارەکان

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

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

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

بە شێوەیەکی ڕێکوپێک <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>

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

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

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

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

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

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

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

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

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

حەبی کۆکراوە

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

دابەزینەکان

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

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

<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 بە سەردێڕی ئیختیاری. باشترین بەکارهێنانیان لە لایەنی وەک Finder لە OS X.

نموونەی nav list

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

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

تێبینیبۆ هێلانەکردن لەناو لیستی nav، class="nav nav-list"لەسەر هەر هێلانەکردنێک دایبخە <ul>.

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

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

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

Tabbable nav

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

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

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

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

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

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

پێویستی بە پێوەکراوەکەی 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 بنەڕەتی

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

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

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

براند

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

<a class = "brand" href = "#" > ناوی پڕۆژە </a>  

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

شتەکانی 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>

فۆڕمەکان

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

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

فۆڕمی گەڕان

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

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

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

بەستەرەکانی 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>تاگێک بۆ پێشەنگی و ڕەنگکردنی دروست.

گۆڕانکارییەکانی پیشاندانی ئیختیاری

جێگیرکردنی navbar لە سەرەوە یان خوارەوەی viewport بە پۆلێکی زیادە لەسەر دەرەوەترین div، .navbar.

جێگیر کراوە بۆ سەرەوە

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

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

جێگیر کراوە بۆ خوارەوە

.navbar-fixed-bottomلەبری ئەوە زیاد بکە .

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

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

ناوبارێکی تەواو پان دروست بکە کە لەگەڵ لاپەڕەکەدا دەڕوات بە زیادکردنی .navbar-static-top. بە پێچەوانەی .navbar-fixed-topپۆلەکە، پێویست ناکات هیچ پادکردنێک لەسەر body.

<div class = "navbar ناوبار-ئێستاتیک-سەرەوە" > 
  ...
</div>

navbar وەڵامدەرەوە

بۆ جێبەجێکردنی ناوبارێکی وەڵامدەرەوەی داڕماوە، ناوەڕۆکی ناوبارەکەت لە div ی تێدایە بپێچە، .nav-collapse.collapse, و دوگمەی گۆڕینی ناوبار زیاد بکە، .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>

گۆڕانی هەڵگەڕاوە

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

<div class = "navbar ناوبار-پێچەوانە" > 
  ...
</div>

نموونە

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

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

لاپەڕەسازی ستاندارد

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

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

بژاردەکان

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

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

<div class = "لاپەڕەکردن" > 
  <ul>
    <li class = "لەکارخراوە" ><a href = "#" > « </a></li>  
    <li class = "چالاك" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

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

<div class = "لاپەڕەکردن" > 
  <ul>
    <li class = "لەکارخراوە" ><span> « </span></li> 
    <li class = "چالاك" ><span> 1 </span></li> 
    ...
  </ul>
</div>

قەبارەکان

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

<div class = "لاپەڕەکردنی لاپەڕە-گەورە" > 
  <ul>
    ...
  </ul>
</div>
<div class = "لاپەڕەکردن" > 
  <ul>
    ...
  </ul>
</div>
<div class = "لاپەڕەکردنی لاپەڕە-بچووک" > 
  <ul>
    ...
  </ul>
</div>
<div class = "لاپەڕەکردنی لاپەڕە-مینی" > 
  <ul>
    ...
  </ul>
</div>

ڕێکخستن

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

<div class = "ناوەندی لاپەڕەسازی لاپەڕە" > 
  ...
</div>

<div class = "لاپەڕەکردن-ڕاست" > 
  ...
</div>

پەیجەر

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

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

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

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

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

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

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

لیبێڵەکان

نیشانەکان

بە ئاسانی دەڕووخێت

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

یەکەی پاڵەوان

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

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

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

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

<div class = "سەردێڕی لاپەڕە" > 
  <h1> نموونەی سەردێڕی لاپەڕە <small> ژێردەق بۆ سەردێڕ </small></h1>
</div>

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

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

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

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

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

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

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

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

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

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

مارکاپ

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

<ul class = "وێنە بچووکەکان" > 
  <li پۆل = "span4" > 
    <a href = "#" class = "وێنە بچووکەکە" >  
      <img data-src = "هەڵگر.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "وێنە بچووکەکان" > 
  <li پۆل = "span4" > 
    <div class = "وێنەی بچووک" > 
      <img data-src = "هەڵگر.js/300x200" alt = "" >  
      <h3> ناوی وێنە بچووکەکان </h3>
      <p> سەردێڕی وێنە بچووکەکان... </p>
    </div>
  </li>
  ...
</ul>

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

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

ئاگادارکردنەوەی پێشوەختە

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

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

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

وێبگەڕەکانی مۆبایل سەفاری و مۆبایل ئۆپێرا، جگە لە data-dismiss="alert"تایبەتمەندییەکە، پێویستیان بە href="#"ڕەتکردنەوەی ئاگادارکردنەوەکان هەیە لەکاتی بەکارهێنانی <a>تاگێکدا.

<a href = "#" class = "داخستنی" data-dismiss = "ئاگادارکردنەوە" > × </a>   

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

< جۆری دوگمە = "دوگمە" پۆل = "داخستنی" data-dismiss = "ئاگادارکردنەوە" > × </دوگمەی>   

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

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

بژاردەکان

بۆ نامەی درێژتر، پادکردنەکە لە سەرەوە و خوارەوەی پێچاوی ئاگادارکردنەوەکە زیاد بکە بە زیادکردنی .alert-block.

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

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

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

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

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

سەرکەوتن

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

زانیاری

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

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

بنەڕەتی

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

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

ڕەنگاوڕەنگ

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

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

ئەنیمەیشن

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

<div class = "چالاكی پێشکەوتن-هێڵکاری پێشکەوتن" > 
  <div class = "bar" style = " پانایی : 40 %؛ " ></div>   
</div>

کۆکراوە

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

<div class = "پێشکەوتن" > 
  <div class = "bar bar-success" style = " پانایی : 35 %؛ " ></div>   
  <div class = "بار-بار-ئاگادارکردنەوە" style = " پانایی : 20 %; " ></div>   
  <div class = "بار بار-مەترسی" style = " پانایی : 10 %؛ " ></div>   
</div>

بژاردەکان

ڕەنگی زیادە

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

<div class = "زانیاری پێشکەوتنی پێشکەوتن" > 
  <div class = "bar" style = " پانایی : 20 % " ></div>   
</div>
<div class = "پێشکەوتن پێشکەوتن-سەرکەوتن" > 
  <div class = "bar" style = " پانایی : 40 % " ></div>   
</div>
<div class = "ئاگاداری پێشکەوتنی پێشکەوتن" > 
  <div class = "bar" style = " پانایی : 60 % " ></div>   
</div>
<div class = "پێشکەوتن-مەترسی" > 
  <div class = "bar" style = " پانایی : 80 % " ></div>   
</div>

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

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

<div class = "زانیاری پێشکەوتن-پێشکەوتن-هێڵکاری پێشکەوتن" > 
  <div class = "bar" style = " پانایی : 20 % " ></div>   
</div>
<div class = "پێشکەوتن پێشکەوتن-سەرکەوتن پێشکەوتن-هێڵکاری" > 
  <div class = "bar" style = " پانایی : 40 % " ></div>   
</div>
<div class = "پێشکەوتن-ئاگادارکردنەوە پێشکەوتن-هێڵکاری" > 
  <div class = "bar" style = " پانایی : 60 % " ></div>   
</div>
<div class = "پێشکەوتنی پێشکەوتن-مەترسی پێشکەوتن-هێڵکاری" > 
  <div class = "bar" style = " پانایی : 80 % " ></div>   
</div>

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

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

وەشانی پێشووتر لە ئینتەرنێت ئێکسپلۆرەر ١٠ و ئۆپێرا ١٢ پشتگیری ئەنیمەیشن ناکەن.

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

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

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

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

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

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

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

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

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

<div class = "میدیا" > 
  <a class = "چەپ ڕاکێشان" href = "#" >  
    <img class = "میدیا-ئۆبژە" داتا- src = "هەڵگر.js/64x64" >  
  </a>
  <div class = "جەستەی میدیا" > 
    <h4 class = "media-heading" > سەردێڕی میدیا </h4> 
    ...
 
    <!-- ئۆبجێکتی میدیای هێلانەکراو -->
    <div class = "میدیا" > 
      ...
    </div>
  </div>
</div>

لیستی میدیا

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

<ul class = "لیستی میدیا" > 
  <li class = "میدیا" > 
    <a class = "چەپ ڕاکێشان" href = "#" >  
      <img class = "میدیا-ئۆبژە" داتا- src = "هەڵگر.js/64x64" >  
    </a>
    <div class = "جەستەی میدیا" > 
      <h4 class = "media-heading" > سەردێڕی میدیا </h4> 
      ...
 
      <!-- ئۆبجێکتی میدیای هێلانەکراو -->
      <div class = "میدیا" > 
        ...
     </div>
    </div>
  </li>
</ul>

وێڵز

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

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

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

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

<div class = "باشە باش-گەورە" > 
  ...
</div>

<div class = "باشە باش-بچووکە" > 
  ...
</div>

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

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

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

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

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

پۆلەکانی یارمەتیدەر

پۆلی سادە و فۆکەس بۆ نمایشی بچووک یان تویککردنی ڕەفتار.

.کێشان-چەپ

توخمێک بە چەپ هەڵدەفڕێت

class = "ڕاکێشانی چەپ"

. ڕاکێشان - چەپ {
  float : چەپ ;
}

.ڕاکێشان-ڕاست

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

class = "ڕاکێشان-ڕاست"

. ڕاکێشان - ڕاست {
  float : ڕاست ;
}

.بێدەنگ کراوەتەوە

ڕەنگی توخمێک بگۆڕە بۆ...#999

class = "بێدەنگ"

. muted {
  ڕەنگ : #999؛ 
}

.ڕوونکردنەوە

پاککردنەوەی floatلەسەر هەر توخمێک

class = "پاککردنەوە"

. ڕوونکردنەوە {
  * زووم : 1 ; 
  &: پێش ,
  &: دوای {
    نمایش : خشتەی ;
    ناوەڕۆک : "" ; 
  }
  &: دوای {
    ڕوون : هەردووکیان ;
  }
}