مثال

ڳنڍڻ لائق، ڳنڍين جي لسٽ ڏيکارڻ لاءِ لاڳاپيل مينيو. ڊراپ ڊائون JavaScript پلگ ان سان انٽرايڪٽو ٺاهيو .

<ul class = "dropdown-menu" role = "menu" 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 = "divider" ></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 = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > الڳ ٿيل لنڪ </a></li>  
  </ul>
</div>

اختيارن

مينيو کي ساڄي طرف ترتيب ڏيو ۽ شامل ڪريو ڊراپ ڊائونز جا اضافي ليول شامل ڪريو.

مينيو کي ترتيب ڏيڻ

شامل ڪريو .pull-righta .dropdown-menu۾ ساڄي طرف ڊروپ ڊائون مينيو کي ترتيب ڏيو.

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

غير فعال مينيو اختيارن

لنڪ کي بند ڪرڻ لاءِ ڊراپ ڊائون ۾ .disabledشامل ڪريو .<li>

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "ڊراپ ڊائون مينيو" >   
  <li><a tabindex = "-1" href = "#" > باقاعده لنڪ </a></li>  
  <li class = "disabled" ><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 = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > وڌيڪ اختيارن </a>  
    <ul class = "ڊراپ ڊائون مينيو" > 
      ...
    </ul>
  </li>
</ul>

مثال

ٻه بنيادي اختيارن سان گڏ، ٻه وڌيڪ مخصوص تبديليون.

سنگل بٽڻ گروپ

.btnان سان گڏ بٽڻ جو هڪ سلسلو لپي .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > کاٻي </ بٽڻ> 
  < بٽن ڪلاس = "btn" > وچين </ بٽڻ> 
  <button class = "btn" > ساڄي </ بٽڻ> 
</div>

گھڻن بٽڻ گروپ

وڌيڪ پيچيده اجزاء لاء سيٽن کي <div class="btn-group">گڏ ڪريو.<div class="btn-toolbar">

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

عمودي بٽڻ گروپ

بٽڻ جو هڪ سيٽ ٺاهيو عمودي طور تي اسٽيڪ ٿيل نه بلڪه افقي طور تي.

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

چيڪ بڪس ۽ ريڊيو ذائقو

بٽڻ گروپ پڻ ريڊيو طور ڪم ڪري سگھن ٿا، جتي صرف هڪ بٽڻ فعال ٿي سگھي ٿو، يا چيڪ بڪس، جتي ڪي به بٽڻ فعال ٿي سگھن ٿيون. ان لاءِ جاوا اسڪرپٽ دستاويز ڏسو .

بٽڻ گروپن ۾ ڊراپ ڊائونز

اٿو!ڊراپ ڊائونز سان گڏ بٽڻن کي لازمي طور تي مناسب رينڊرنگ لاءِ انفرادي طور پاڻ ۾ ويڙھيو وڃي .btn-group..btn-toolbar

جائزو ۽ مثال

ڊراپ ڊائون مينيو کي ٽرگر ڪرڻ لاءِ ڪو به بٽڻ استعمال ڪريو ان کي اندر رکڻ سان .btn-group۽ مناسب مينيو مارڪ اپ مهيا ڪريو.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    عمل
    <span class = "caret" ></span> 
  </a>
  <ul class = "ڊراپ ڊائون مينيو" > 
    <!-- ڊراپ ڊائون مينيو لنڪس -->
  </ul>
</div>

سڀني بٽڻ جي سائز سان ڪم ڪري ٿو

بٽڻ ڊراپ ڊائون ڪنهن به سائيز تي ڪم ڪن ٿا: .btn-large, .btn-small, or .btn-mini.

جاوا اسڪرپٽ جي ضرورت آهي

بٽڻ ڊراپ ڊائونز کي ڪم ڪرڻ لاءِ بوٽ اسٽريپ ڊراپ ڊائون پلگ ان جي ضرورت آهي.

ڪجھ ڪيسن ۾- جھڙوڪ موبائل- ڊراپ ڊائون مينيو وييو پورٽ کان ٻاھر وڌندو. توھان کي دستي طور تي يا ڪسٽم جاوا اسڪرپٽ سان ترتيب ڏيڻ جي ضرورت آھي.

ورهايو بٽڻ دٻايو

بٽڻ جي گروپ جي طرز ۽ مارڪ اپ تي تعمير ڪندي، اسان آساني سان هڪ تقسيم بٽڻ ٺاهي سگهون ٿا. ورهائڻ واري بٽڻ کي کاٻي پاسي هڪ معياري عمل ۽ ساڄي پاسي هڪ ڊراپ ڊائون ٽوگل سان لاڳاپيل لنڪس جي خصوصيت آهي.

<div class = "btn-group" > 
  <button class = "btn" > عمل </ بٽڻ> 
  < بٽن ڪلاس = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </ بٽڻ>
  <ul class = "ڊراپ ڊائون مينيو" > 
    <!-- ڊراپ ڊائون مينيو لنڪس -->
  </ul>
</div>

سائيز

استعمال ڪريو اضافي بٽڻ طبقن .btn-mini، .btn-small, يا sizing .btn-largeلاء.

<div class = "btn-group" > 
  < بٽن ڪلاس = "btn btn-mini" > عمل </ بٽڻ> 
  < بٽن ڪلاس = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </ بٽڻ>
  <ul class = "ڊراپ ڊائون مينيو" > 
    <!-- ڊراپ ڊائون مينيو لنڪس -->
  </ul>
</div>

ڊراپ اپ مينيو

ڊراپ ڊائون مينيو پڻ ٽوگل ڪري سگھجن ٿا ھيٺئين پاسي کان ھڪڙي ڪلاس کي فوري طور تي والدين ۾ شامل ڪندي .dropdown-menu. اهو هدايت جي طرف .caretڦيرايو ويندو ۽ مينيو کي تبديل ڪري ڇڏيندو ته جيئن هيٺان کان مٿي وڃڻ جي بدران مٿي کان مٿي.

<div class = "btn-group dropup" > 
  <button class = "btn" > ڊراپ اپ < / بٽڻ> 
  < بٽن ڪلاس = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </ بٽڻ>
  <ul class = "ڊراپ ڊائون مينيو" > 
    <!-- ڊراپ ڊائون مينيو لنڪس -->
  </ul>
</div>

ھلڪو وزن ڊفالٽ ساڳيو مارڪ اپ، مختلف طبقن

سڀ نيوي اجزاء هتي - ٽيب، گوليون، ۽ لسٽون- ڪلاس ذريعي ساڳيا بنيادي مارڪ اپ ۽ انداز حصيداري ڪريو ..nav

بنيادي ٽيب

باقاعده <ul>لنڪس وٺو ۽ شامل ڪريو .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "active" > 
    <a href="#" > گھر </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

بنيادي گوليون

اهو ساڳيو HTML وٺو، پر .nav-pillsان جي بدران استعمال ڪريو:

<ul class = "nav nav-pills" > 
  <li class = "active" > 
    <a href="#" > گھر </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

معذور رياست

ڪنهن به نيوي جزو لاءِ (ٽيب، گوليون، يا فهرست)، گرين لنڪس.disabled لاءِ شامل ڪريو ۽ ڪو به هوور اثر نه . لنڪس ڪلڪ ڪرڻ جي قابل رهنديون، جڏهن ته، جيستائين توهان خاصيت کي ختم نه ڪندا. متبادل طور تي، توھان انھن ڪلڪن کي روڪڻ لاءِ ڪسٽم جاوا اسڪرپٽ لاڳو ڪري سگھو ٿا.href

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > گهر </a></li>  
  ...
</ul>

اجزاء جي ترتيب

نيو لنڪس کي ترتيب ڏيڻ لاء، استعمال ڪريو .pull-leftيا .pull-rightيوٽيلٽي ڪلاس. ٻئي ڪلاس شامل ڪندا سي ايس ايس فلوٽ مقرر ڪيل هدايت ۾.

اسٽيڪ لائق

جيئن ته ٽيب ۽ گوليون ڊفالٽ طور افقي آهن، صرف هڪ سيڪنڊ ڪلاس شامل ڪريو، .nav-stackedانهن کي عمودي طور تي اسٽيڪ ٿيل ظاهر ڪرڻ لاء.

اسٽيڪ ٿيل ٽيب

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

اسٽيڪ ٿيل گوليون

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

ڊراپ ڊائونز

شامل ڪريو ڊراپ ڊائون مينيو ٿورڙو اضافي HTML ۽ ڊراپ ڊائونز جاوا اسڪرپٽ پلگ ان سان.

ڊراپ ڊائونز سان ٽيب

<ul class = "nav nav-tabs" > 
  <li class = "ڊراپ ڊائون" > 
    <a class = "ڊراپ ڊائون-ٽگل" 
       ڊيٽا ٽوگل = "ڊراپ ڊائون"
       href = "#" >
        ڊراپ ڊائون
        <b class = "caret" ></b> 
      </a>
    <ul class = "ڊراپ ڊائون مينيو" > 
      <!-- لنڪس -->
    </ul>
  </li>
</ul>

ڊراپ ڊائونز سان گڏ گوليون

<ul class = "nav nav-pills" > 
  <li class = "ڊراپ ڊائون" > 
    <a class = "ڊراپ ڊائون-ٽگل" 
       ڊيٽا ٽوگل = "ڊراپ ڊائون"
       href = "#" >
        ڊراپ ڊائون
        <b class = "caret" ></b> 
      </a>
    <ul class = "ڊراپ ڊائون مينيو" > 
      <!-- لنڪس -->
    </ul>
  </li>
</ul>

نيوي لسٽون

اختياري هيڊرن سان نيوي لنڪس جا گروپ ٺاهڻ جو هڪ سادو ۽ آسان طريقو. اهي بهترين طور تي استعمال ڪيا ويا آهن سائڊبارز جهڙوڪ فائنر OS X ۾.

مثال nav فهرست

لنڪ جي هڪ فهرست وٺو ۽ شامل ڪريو class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > فهرست هيڊر </li> 
  <li class = "active" ><a href = "#" > گهر </a></li>  
  <li><a href = "#" > لائبريري </a></li> 
  ...
</ul>

نوٽنيوي لسٽ ۾ nesting لاءِ، class="nav nav-list"ڪنهن به nested تي شامل ڪريو <ul>.

افقي ورهائيندڙ

ڪلاس سان هڪ خالي لسٽ شيون ٺاهي هڪ افقي ورهائيندڙ شامل ڪريو .divider، جهڙوڪ:

<ul class = "nav nav-list" > 
  ...
  <li class = "divider" ></li> 
  ...
</ul>

ٽيبلبل نيوي

پنهنجي ٽيب کي زندگي ۾ آڻيو هڪ سادي پلگ ان سان ٽيب ذريعي مواد جي وچ ۾ ٽوگل ڪرڻ لاءِ. بوٽ اسٽريپ ٽيببل ٽيب کي چار انداز ۾ ضم ڪري ٿو: مٿي (ڊفالٽ)، ساڄي، هيٺيون، ۽ کاٻي.

ٽيبل جو مثال

ٽيب کي ٽيبل ڪرڻ لاءِ، .tab-paneهر ٽيب لاءِ هڪ منفرد ID سان ٺاهيو ۽ ان ۾ لپيٽيو .tab-content.

<div class = "tabbable" > <!-- صرف کاٻي / ساڄي ٽيب لاءِ گهربل آهي -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > سيڪشن 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > سيڪشن 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> مان سيڪشن 1 ۾ آهيان. </p>
    </div>
    <div class = "tab-pan" id = "tab2" >  
      <p> ڪيئن، مان سيڪشن 2 ۾ آهيان. </p>
    </div>
  </div>
</div>

ٽيب ۾ ڦيرايو

ٽيب کي ڦهلائڻ لاء، .fadeهر هڪ ۾ شامل ڪريو .tab-pane.

jQuery پلگ ان جي ضرورت آھي

سڀئي ٽيبلبل ٽيب اسان جي ٿلهي وزن جي jQuery پلگ ان طرفان طاقتور آهن. جاوا اسڪرپٽ دستاويزن واري صفحي تي ٽيبلبل ٽيب کي زندگي ۾ ڪيئن آڻڻ جي باري ۾ وڌيڪ پڙهو .

ڪنهن به رخ ۾ ٽيبل

هيٺيون ٽيب

HTML جي آرڊر کي فلپ ڪريو ۽ ھيٺئين پاسي ٽيب رکڻ لاءِ ڪلاس شامل ڪريو.

<div class = "tabable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

کاٻي پاسي ٽيب

کاٻي پاسي ٽيب رکڻ لاءِ ڪلاس کي تبديل ڪريو.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

ساڄي پاسي ٽيب

ساڄي پاسي ٽيب رکڻ لاءِ ڪلاس کي تبديل ڪريو.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

بنيادي navbar

شروع ڪرڻ لاءِ، نيوبارز جامد آ��ن (مٿي تي مقرر نه آهن) ۽ پروجيڪٽ جي نالي ۽ بنيادي نيويگيشن لاءِ سپورٽ شامل آهن. ھڪڙي ھڪڙي جڳھ جي اندر ڪٿي به رکو .container، جيڪو توھان جي سائيٽ ۽ مواد جي چوٽي کي سيٽ ڪري ٿو.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "برانڊ" href = "#" > عنوان </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > گهر </a></li>  
      <li><a href = "#" > لنڪ </a></li> 
      <li><a href = "#" > لنڪ </a></li> 
    </ul>
  </div>
</div>

Navbar اجزاء

برانڊ

توهان جي برانڊ يا پروجيڪٽ جو نالو ڏيکارڻ لاءِ هڪ سادي لنڪ صرف هڪ اينڪر ٽيگ جي ضرورت آهي.

<a class = "برانڊ" href = "#" > پروجيڪٽ جو نالو </a>  

نيو لنڪس

نيوي شيون غير ترتيب ڏنل فهرستن ذريعي شامل ڪرڻ لاء آسان آهن.

<ul class = "nav" > 
  <li class = "active" > 
    <a href="#" > گھر </a> _ _ 
  </li>
  <li><a href = "#" > لنڪ </a></li> 
  <li><a href = "#" > لنڪ </a></li> 
</ul>

توهان آساني سان پنهنجي نيوي لنڪس ۾ ورهائيندڙ شامل ڪري سگهو ٿا هڪ خالي فهرست واري شيءِ ۽ هڪ سادي ڪلاس سان. بس هن لنڪ جي وچ ۾ شامل ڪريو:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

فارم

نيوبار جي اندر فارم کي صحيح انداز ۽ پوزيشن ڪرڻ لاءِ، مناسب ڪلاس شامل ڪريو جيئن ھيٺ ڏيکاريل آھي. ڊفالٽ فارم لاء، شامل ڪريو .navbar-form۽ يا ته .pull-leftيا .pull-rightان کي صحيح طور تي ترتيب ڏيو.

<فارم ڪلاس = "navbar-form pull-left" > 
  <ان پٽ قسم = "ٽيڪسٽ" ڪلاس = "span2" >  
  <بٽن جو قسم = "جمع ڪريو" ڪلاس = "btn" > جمع ڪريو </ بٽڻ>  
</form>

ڳولا فارم

وڌيڪ حسب ضرورت ڳولا فارم لاءِ، نيوبار ۾ خاص اسلوب لاءِ ۽ ان پٽ ۾ .navbar-searchشامل formڪريو ..search-query

<فارم ڪلاس = "navbar-search pull-left" > 
  <انپٽ جو قسم = "ٽيڪسٽ" ڪلاس = "ڳولا-سوال" جڳهه هولڊر = "ڳولا" >   
</form>

اجزاء جي ترتيب

نيوي لنڪس کي ترتيب ڏيو, ڳولا فارم, يا متن, استعمال .pull-leftيا .pull-rightافاديت طبقن. ٻئي ڪلاس شامل ڪندا سي ايس ايس فلوٽ مقرر ڪيل هدايت ۾.

ڊراپ ڊائونز استعمال ڪندي

ڊراپ ڊائونز ۽ ڊراپ اپ شامل ڪريو نيوي ۾ ٿوري مارڪ اپ ۽ ڊراپ ڊائونز جاوا اسڪرپٽ پلگ ان سان.

<ul class = "nav" > 
  <li class = "ڊراپ ڊائون" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      کاتو
      <b class = "caret" ></b> 
    </a>
    <ul class = "ڊراپ ڊائون مينيو" > 
      ...
    </ul>
  </li>
</ul>

وڌيڪ مارڪ اپ ۽ ڪالنگ ڊراپ ڊائونز تي معلومات لاءِ جاوا اسڪرپٽ ڊراپ ڊائون دستاويزن جو دورو ڪريو .

متن

متن جي تارن کي هڪ عنصر ۾ لفاف ڪريو .navbar-text، عام طور تي <p>صحيح ليڊنگ ۽ رنگ لاءِ ٽيگ تي.

اختياري ڊسپلي تبديليون

نيوبار کي ويو پورٽ جي مٿين يا هيٺئين پاسي کي فڪس ڪريو هڪ اضافي ڪلاس سان ٻاهرئين ڊيو، .navbar.

مٿي تي مقرر

گھٽ ۾ گھٽ 40px شامل ڪندي .navbar-fixed-topان جي ھيٺان لڪيل علائقي جو حساب ڪريو ۽ ياد رکو . هن کي شامل ڪرڻ جي پڪ ڪريو بنيادي بوٽ اسٽريپ سي ايس ايس کان پوءِ ۽ اختياري جوابي سي ايس ايس کان اڳ.padding<body>

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

هيٺئين طرف مقرر ٿيل

بدران شامل ڪريو .navbar-fixed-bottom.

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

جامد مٿين نيوبار

هڪ مڪمل چوٽي وارو نيوبار ٺاهيو جيڪو شامل ڪرڻ سان صفحي سان گڏ اسڪرال ڪري ٿو .navbar-static-top. ڪلاس جي برعڪس .navbar-fixed-top، توهان کي ڪنهن به پيڊنگ کي تبديل ڪرڻ جي ضرورت ناهي body.

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

جوابي نيوبار

هڪ کولڻ واري جوابي نيوبار کي لاڳو ڪرڻ لاءِ، پنهنجي نيوبار مواد کي شامل ڪريو div ۾ .nav-collapse.collapse، ۽ نيوبار ٽوگل بٽڻ شامل ڪريو، .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar کي ٽوگل طور استعمال ڪيو ويندو آهي ٽوگل ٿيل نيوبار مواد -->
      <a class = "btn btn-navbar" data-toggle = "colapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- پڪ ڪريو ته برانڊ کي اتي ڇڏي ڏيو جيڪڏھن توھان چاھيو ته اھو ڏيکاريو -->
      <a class = "برانڊ" href = "#" > پروجيڪٽ جو نالو </a>  
 
      <!-- سڀڪنھن شيء کي توھان لڪائڻ چاھيو ٿا 940px يا ان کان گھٽ، ھتي رکو -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav، .navbar-ڳولا، .navbar-فارم، وغيره -->
      </div>
 
    </div>
  </div>
</div>

ڦيرو ڦيرائي

شامل ڪندي نيوبار جي نظر کي تبديل ڪريو .navbar-inverse.

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

مثال

ھڪڙو ھڪڙو مثال ڏيکاريل آھي جيئن اھو ڪيترن ئي صفحن ۾ ڏيکاريل هجي.

<ul class = "breadcrumb" > 
  <li><a href = "#" > گھر </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > لائبريري </a> <span class = "divider" > / </span></li>   
  <li class = "active" > ڊيٽا </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 = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

توھان اختياري طور تي تبديل ڪري سگھوٿا فعال يا غير فعال اينڪرز کي اسپن لاءِ ڪلڪ ڪارڪردگي کي ختم ڪرڻ لاءِ جڏهن ارادو ڪيل انداز برقرار رکيو وڃي.

<div class = "صفحو" > 
  <ul>
    <li class = "معذور" ><span> « </span></li> 
    <li class = "active" ><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چونڊيندڙ ذريعي) جڏھن اندر ڪو مواد موجود نه ھوندو.

هيرو يونٽ

توهان جي سائيٽ تي اهم مواد ڏيکارڻ لاءِ هڪ هلڪو وزن، لچڪدار جزو. اهو سٺو ڪم ڪري ٿو مارڪيٽنگ ۽ مواد جي ڳري سائيٽن تي.

<div class = "هيرو-يونٽ" > 
  <h1> عنوان </h1>
  <p> ٽيگ لائن </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      وڌيڪ سکو
    </a>
  </p>
</div>

صفحو هيڊر

ھڪڙو سادو شيل ھڪڙي h1لاءِ مناسب طور تي جاءِ ڏيڻ لاءِ ۽ ھڪڙي صفحي تي مواد جي حصن کي ورهايو. اهو استعمال ڪري سگھي ٿو h1's default small, element سان گڏو گڏ ٻيا سڀ جزا (اضافي انداز سان).

<div ڪلاس = "صفحو-هيڊر" > 
  <h1> مثال صفحي جو مٿو <small> Subtext for header </small></h1>
</div>

ڊفالٽ ٿمبنيلس

ڊفالٽ طور، بوٽ اسٽريپ جا ٿامب نيل ٺهيل آهن جڙيل تصويرون ڏيکارڻ لاءِ گهٽ ۾ گهٽ گهربل مارڪ اپ سان.

انتهائي حسب ضرورت

ٿوري اضافي مارڪ اپ سان، اهو ممڪن آهي ته ڪنهن به قسم جو HTML مواد شامل ڪيو وڃي جهڙوڪ هيڊنگس، پيراگراف، يا بٽڻ کي ٿامبنيلز ۾.

ٿمبنيلز ڇو استعمال ڪريو

ٿمبنيلز (اڳ .media-grid۾ v1.4 تائين) فوٽوز يا وڊيوز جي گرڊز، تصويري ڳولا جا نتيجا، پرچون پروڊڪٽس، پورٽ فوليو، ۽ گهڻو ڪجهه لاءِ بهترين آهن. اهي لنڪ يا جامد مواد ٿي سگهن ٿا.

سادو، لچڪدار مارڪ اپ

ٿمبنيل مارڪ اپ سادو آهي - هڪ عنصرن ulجي ڪنهن به تعداد سان liاهو سڀ ڪجهه گهربل آهي. اهو پڻ سپر لچڪدار آهي، ڪنهن به قسم جي مواد جي اجازت ڏئي ٿو توهان جي مواد کي لفافي ڪرڻ لاء صرف ٿورو وڌيڪ مارڪ اپ سان.

گرڊ ڪالمن جي سائز کي استعمال ڪري ٿو

آخر ۾، ٿمبنيل جو حصو استعمال ڪري ٿو موجوده گرڊ سسٽم ڪلاسز- جھڙوڪ .span2يا- .span3تھمبنيل طول و عرض جي ڪنٽرول لاءِ.

مارڪ اپ

جيئن اڳ بيان ڪيو ويو آهي، ٿامبنلز لاءِ گهربل مارڪ اپ هلڪو ۽ سڌو آهي. هتي ڳنڍيل تصويرن لاءِ ڊفالٽ سيٽ اپ تي هڪ نظر آهي :

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

ٿمبنلز ۾ ڪسٽم HTML مواد لاءِ، مارڪ اپ ٿورڙو تبديل ٿئي ٿو. بلاڪ سطح جي مواد کي ڪٿي به اجازت ڏيڻ لاء، اسان ان کي تبديل ڪريون ٿا <a>جيئن <div>ته:

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> ٿامب نيل ليبل </h3>
      <p> ٿمب نيل ڪيپشن... </p>
    </div>
  </li>
  ...
</ul>

وڌيڪ مثال

توهان جي سڀني اختيارن جي ڳولا ڪريو مختلف گرڊ طبقن سان جيڪي توهان وٽ موجود آهن. توهان پڻ ملائي سگهو ٿا ۽ مختلف سائزن سان ملائي سگهو ٿا.

ڊفالٽ خبرداري

.alertبنيادي ڊيڄاريندڙ خبرداري واري پيغام لاءِ ڪنهن به متن ۽ اختياري برطرفي واري بٽڻ کي لپايو.

<div class = "alert" > 
  <بٽن جو قسم = "بٽن" ڪلاس = "بند ڪريو" ڊيٽا-برطرف = "خبردار" > × </ بٽڻ>   
  <strong> خبردار! </strong> بهترين چيڪ يو پاڻ کي، توهان تمام سٺو نه ڏسي رهيا آهيو.
</div>

ختم ڪريو بٽڻ

موبائل سفاري ۽ موبائل اوپيرا برائوزر، خصوصيت کان علاوه ، هڪ ٽيگ استعمال ڪرڻ وقت الرٽ جي برطرفي لاءِ data-dismiss="alert"گهربل آهي .href="#"<a>

<a href = "#" ڪلاس = "بند ڪريو" ڊيٽا-برطرف = "خبردار" > × </a>   

متبادل طور تي، توھان استعمال ڪري سگھوٿا ھڪڙو <button>عنصر ڊيٽا جي خاصيت سان، جيڪو اسان پنھنجي دستاويزن لاءِ چونڊيو آھي. استعمال ڪرڻ وقت <button>، توھان کي شامل ڪرڻ گھرجي type="button"يا توھان جا فارم جمع نه ٿي سگھن.

<بٽن جو قسم = "بٽن" ڪلاس = "بند ڪريو" ڊيٽا-برطرف = "خبردار" > × </ بٽڻ>   

جاوا اسڪرپٽ ذريعي خبردارين کي رد ڪريو

الرٽس جي جلدي ۽ آسان برطرفي لاءِ الرٽ jQuery پلگ ان استعمال ڪريو .

اختيارن

ڊگھي پيغامن لاءِ، شامل ڪندي الرٽ ريپر جي مٿئين ۽ تري ۾ پيڊنگ کي وڌايو .alert-block.

<div class = "alert alert-block" > 
  <بٽن جو قسم = "بٽن" ڪلاس = "بند ڪريو" ڊيٽا-برطرف = "خبردار" > × </ بٽڻ>   
  <h4> خبردار! </h4>
  پاڻ کي بهترين چيڪ ڪريو، توهان نه آهيو ...
</div>

لاڳاپيل متبادل

اختياري ڪلاس شامل ڪريو خبرداري جي مفهوم کي تبديل ڪرڻ لاءِ.

خطا يا خطرو

<div ڪلاس = "خبردار الرٽ-غلطي" > 
  ...
</div>

ڪاميابي

<div ڪلاس = "خبردار الرٽ-ڪاميابي" > 
  ...
</div>

ڄاڻ

<div class = "alert alert-info" > 
  ...
</div>

مثال ۽ مارڪ اپ

بنيادي

ڊفالٽ پروگريس بار عمودي گريجوئيٽ سان.

<div class = "ترقي" > 
  <div class = "bar" style = " with : 60 %; " ></div>   
</div>

پٽي ٿيل

پٽي ٿيل اثر پيدا ڪرڻ لاء گريجوئيٽ استعمال ڪري ٿو. IE7-8 ۾ دستياب ناهي.

<div class = "progress progress-striped" > 
  <div class = "bar" style = " with : 20 %; " ></div>   
</div>

متحرڪ

ساڄي کان کاٻي پاسي واري پٽي کي متحرڪ ڪرڻ لاءِ .activeشامل ڪريو . .progress-stripedIE جي سڀني نسخن ۾ دستياب ناهي.

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " with : 40 %; " ></div>   
</div>

اسٽيڪ ٿيل

.progressانهن کي اسٽيڪ ڪرڻ لاءِ هڪ ئي جاءِ تي ڪيترائي بار رکو .

<div class = "ترقي" > 
  <div class = "bar bar-success" style = " with : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " with : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " with : 10 %; " ></div>   
</div>

اختيارن

اضافي رنگ

پروگريس بار استعمال ڪن ٿا ڪجھ ساڳيا بٽڻ ۽ الرٽ ڪلاسز مسلسل اسٽائلز لاءِ.

<div class = "progress progress-info" > 
  <div class = "bar" style = " with : 20 % " ></div>   
</div>
<div class = "progress progress-success" > 
  <div class = "bar" style = " with : 40 % " ></div>   
</div>
<div class = "progress progress-warning" > 
  <div class = "bar" style = " with : 60 % " ></div>   
</div>
<div ڪلاس = "ترقي ترقي خطري" > 
  <div class = "bar" style = " with : 80 % " ></div>   
</div>

پٽي ٿيل بار

سڪل رنگن سان ملندڙ جلندڙ، اسان وٽ مختلف پٽي ٿيل پيش رفت بار آهن.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " with : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" style = " with : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " with : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " with : 80 % " ></div>   
</div>

برائوزر سپورٽ

پروگريس بار استعمال ڪن ٿا CSS3 گريجوئيٽ، ٽرانزيڪشن، ۽ اينيميشنز انهن جي سڀني اثرن کي حاصل ڪرڻ لاءِ. اهي خاصيتون IE7-9 يا Firefox جي پراڻن ورزن ۾ سهڪار نه ٿيون ڪن.

انٽرنيٽ ايڪسپلورر 10 ۽ اوپيرا 12 کان اڳ وارا ورجن اينيميشن کي سپورٽ نٿا ڪن.

مختلف قسمن جي اجزاء (جهڙوڪ بلاگ تبصرا، ٽوئيٽس، وغيره) تعمير ڪرڻ لاءِ خلاصو اعتراض انداز جيڪي متن جي مواد سان گڏ کاٻي يا ساڄي طرف واري تصوير جي خصوصيت رکن ٿا.

ڊفالٽ مثال

ڊفالٽ ميڊيا مواد بلاڪ جي کاٻي يا ساڄي طرف ميڊيا اعتراض (تصويرون، وڊيو، آڊيو) کي فلوٽ ڪرڻ جي اجازت ڏئي ٿي.

ميڊيا جي عنوان

Cras sit amet nibh libero, gravida nulla ۾. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

ميڊيا جي عنوان

Cras sit amet nibh libero, gravida nulla ۾. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

ميڊيا جي عنوان

Cras sit amet nibh libero, gravida nulla ۾. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class = "ميڊيا" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "ميڊيا-باڊي" > 
    <h4 ڪلاس = "ميڊيا-هيڊنگ" > ميڊيا هيڊنگ </h4> 
    ...
 
    <!-- Nested media object -->
    <div class = "ميڊيا" > 
      ...
    </div>
  </div>
</div>

ميڊيا لسٽ

ٿوري اضافي مارڪ اپ سان، توهان فهرست جي اندر ميڊيا استعمال ڪري سگهو ٿا (تبصري جي سلسلي يا مضمونن جي فهرستن لاءِ مفيد).

<ul class = "ميڊيا-لسٽ" > 
  <li class = "ميڊيا" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "ميڊيا-باڊي" > 
      <h4 ڪلاس = "ميڊيا-هيڊنگ" > ميڊيا هيڊنگ </h4> 
      ...
 
      <!-- Nested media object -->
      <div class = "ميڊيا" > 
        ...
     </div>
    </div>
  </li>
</ul>

کوهه

هڪ عنصر تي هڪ سادي اثر جي طور تي استعمال ڪريو ان کي هڪ inset اثر ڏي.

<div ڪلاس = "سٺو" > 
  ...
</div>

اختياري ڪلاس

ڪنٽرول پيڊنگ ۽ گول ڪنڊن کي ٻن اختياري ترميمي طبقن سان.

<div ڪلاس = "چڱو سٺو-وڏو" > 
  ...
</div>

<div class = "چڱو سٺو-ننڍو" > 
  ...
</div>

بند ڪريو آئڪن

مواد کي برطرف ڪرڻ لاءِ عام بند آئڪن استعمال ڪريو جهڙوڪ ماڊلز ۽ الرٽ.

<بٽن ڪلاس = "بند ڪريو" > × </ بٽڻ> 

iOS ڊوائيسز جي ضرورت آهي هڪ href="#"ڪلڪ جي واقعن لاءِ جيڪڏهن توهان بجاءِ اينڪر استعمال ڪندا.

<a class = "close" href = "#" > × </a>  

مددگار طبقن

سادو، مرڪوز طبقن ننڍڙن ڊسپلي يا رويي جي ٽئڪس لاءِ.

کاٻي پاسي ڇڪيو

هڪ عنصر کي ڇڏي ڏيو

ڪلاس = "کاٻي طرف ڇڪڻ"

. ڇڪڻ - کاٻي {
  float : کاٻي ؛
}

ساڄي طرف ڇڪيو

هڪ عنصر کي ساڄي طرف ڦيرايو

ڪلاس = "ساڄي پل"

. ڇڪڻ - ساڄي {
  فلوٽ : ساڄي ؛
}

.خاموش

ھڪڙي عنصر جي رنگ کي تبديل ڪريو#999

ڪلاس = "خاموش"

. خاموش {
  رنگ : #999؛ 
}

.clearfix

floatڪنهن به عنصر تي صاف ڪريو

ڪلاس = "صاف فڪس"

. صاف ڪرڻ {
  * زوم : 1 ؛ 
  &: اڳ ،
  &: بعد {
    ڏيکاريو : ٽيبل ؛
    مواد : "" ؛ 
  }
  &: بعد {
    صاف : ٻنهي ؛
  }
}