بٽڻ گروپ

ڪيترن ئي بٽڻن کي گڏ ڪرڻ لاءِ بٽڻ گروپ استعمال ڪريو ھڪڙي جامع جزو جي طور تي. انھن کي ھڪڙي سيريز <a>يا <button>عناصر سان ٺاھيو.

بهترين عمل

اسان بٽڻ گروپن ۽ ٽول بار استعمال ڪرڻ لاءِ ھيٺين ھدايتن جي صلاح ڏيون ٿا:

• هميشه هڪ واحد بٽڻ گروپ ۾ ساڳيو عنصر استعمال ڪريو، <a>يا <button>.
• ساڳي بٽڻ گروپ ۾ مختلف رنگن جا بٽڻ نه ملايو.
• متن جي اضافي ۾ يا بدران آئڪن استعمال ڪريو، پر پڪ ڪريو ته alt ۽ عنوان متن شامل ڪريو جتي مناسب هجي.

لاڳاپيل بٽڻ گروپن سان گڏ ڊراپ ڊائونز (هيٺ ڏسو) کي الڳ الڳ سڏيو وڃي ۽ هميشه هڪ ڊراپ ڊائون ڪارٽ شامل ڪيو وڃي ته جيئن ارادي واري رويي کي ظاهر ڪيو وڃي.

ڊفالٽ مثال

ھتي آھي ڪيئن HTML ھڪڙي معياري بٽڻ واري گروپ کي ڳولي ٿو جيڪو لنگر ٽيگ بٽڻ سان ٺهيل آھي:

<div class = "btn-group" > 
  < بٽن ڪلاس = "btn" > 1 </ بٽڻ> 
  < بٽن ڪلاس = "btn" > 2 </ بٽڻ> 
  < بٽن ڪلاس = "btn" > 3 </ بٽڻ> 
</div>

ٽول بار مثال

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

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

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

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

حاصل ڪريو جاوا اسڪرپٽ »

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

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

جائزو ۽ مثال

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

مثال مارڪ اپ

هڪ بٽڻ واري گروپ وانگر، اسان جو مارڪ اپ باقاعده بٽڻ مارڪ اپ استعمال ڪري ٿو، پر انداز کي بهتر ڪرڻ ۽ بوٽ اسٽريپ جي ڊراپ ڊائون jQuery پلگ ان کي سپورٽ ڪرڻ لاءِ هٿرادو اضافو سان.

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

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

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

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

جائزو ۽ مثال

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

سائيز

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

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- ڊراپ ڊائون مينيو لنڪس -->
  </ul>
</div>

مثال مارڪ اپ

اسان عام بٽڻ جي ڊراپ ڊائونز تي وڌايون ٿا ٻيو بٽڻ ايڪشن مهيا ڪرڻ لاءِ جيڪو ڪم ڪري ٿو الڳ ڊراپ ڊائون ٽرگر طور.

<div class = "btn-group" > 
  <button class = "btn" > عمل </ بٽڻ> 
  < بٽن ڪلاس = "btn 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

جڏهن استعمال ڪرڻ

ٽيب ۽ گوليون مواد جي حصن لاءِ يا لاڳاپيل مواد جي صفحن جي وچ ۾ نيويگيٽ ڪرڻ لاءِ بهترين آهن.

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

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

بنيادي ٽيب

باقاعده <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>

ان کي ڪيئن اسٽيڪ ڪجي

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

اسٽيڪ ٿيل ٽيب

• گهر
• پروفائل
• نياپا

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

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

• گهر
• پروفائل
• نياپا

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

امير مينيو آسان ڪيو

بوٽ اسٽريپ ٽيب ۽ گولين ۾ ڊراپ ڊائون مينيو تمام آسان آهن ۽ صرف ٿورڙو اضافي HTML ۽ هڪ هلڪو وزن jQuery پلگ ان جي ضرورت آهي.

جاوا اسڪرپٽ جي صفحي ڏانهن وڃو بوٽ اسٽراپ ۾ ڊراپ ڊائون شروع ڪرڻ تي دستاويز پڙهڻ لاءِ.

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

• گهر
• مدد
• ڊراپ ڊائون
  • عمل
  • ٻيو عمل
  • هتي ٻيو ڪجهه
  • الڳ ٿيل لنڪ

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

ساختي طور تي، اهي ساڳيا بنيادي نيوي اسلوب تي ٺهيل آهن جيئن ٽيب ۽ گوليون، تنهنڪري استعمال ۽ ڪسٽمائيزيشن سڌو آهي.

icons سان

نيو لسٽون پڻ آسان آهن آئڪن سان ليس ڪرڻ لاءِ. ڪلاس سان مناسب <i>ٽيگ شامل ڪريو ۽ توھان مقرر ڪيو ويو آھي.

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

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

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

مثال 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>

مثالن سان گڏ

ساڳيو مثال، پر <i>آئڪن لاءِ ٽيگ سان.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      لائبريري
    </a>
  </li>
  ...
</ul>

ڇا شامل آهي

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

انهن جي وچ ۾ تبديل ڪرڻ آسان آهي ۽ صرف تمام گهٽ مارڪ اپ تبديل ڪرڻ جي ضرورت آهي.

ٽيب ۾ ڦيرايو

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

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

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

جاوا اسڪرپٽ حاصل ڪريو →

ٽيبل جو مثال

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

ساڄي يا کاٻي سان ٺھيل ٽيب لاءِ، .nav-tabs۽ .tab-contentان ۾ وجھو .tabbable.

سڌي مارڪ اپ

ٽيبلبل ٽيب استعمال ڪرڻ جي ضرورت آھي ھڪڙي ريپنگ ڊيو، ٽيب جو ھڪڙو سيٽ، ۽ مواد جي ٽيبلبل پين جو ھڪڙو سيٽ.

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

هيٺيون ٽيب

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 scaffolding

نيوبار کي صرف چند ڊويزن جي ضرورت آهي ته ان کي مستحڪم يا مقرر ٿيل ڊسپلي لاءِ چڱيءَ طرح ٺهڪي.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

مقرر ٿيل نيوبار

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

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

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

جڏهن توهان نيوبار کي ڳنڍيندا آهيو، ياد رکو ته هيٺ ڏنل لڪيل علائقي جي حساب سان. شامل ڪريو 40px يا وڌيڪ پيڊنگ ۾ <body>. هن کي شامل ڪرڻ جي پڪ ڪريو بنيادي بوٽ اسٽريپ سي ايس ايس کان پوءِ ۽ اختياري جوابي سي ايس ايس کان اڳ.

برانڊ جو نالو

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

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

نوبار ۾ فارم

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

<فارم ڪلاس = "navbar-form pull-left" > 
  <ان پٽ قسم = "ٽيڪسٽ" ڪلاس = "span2" >  
</form>

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

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

اختياري جوابي تبديلي

توھان جي ٽاپبار ۾ مواد جي مقدار تي مدار رکندي، توھان شايد جوابي اختيارن کي لاڳو ڪرڻ چاھيو ٿا. ائين ڪرڻ لاءِ، پنھنجي نيوي مواد کي ھڪڙي 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-colapse" > 
        <!-- .nav، .navbar-ڳولا، .navbar-فارم، وغيره -->
      </div>
 
    </div>
  </div>
</div>

نيو لنڪس

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

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

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

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

ڊراپ ڊائون مينيو شامل ڪرڻ

نيوي ۾ ڊراپ ڊائونز ۽ ڊراپ اپ شامل ڪرڻ بلڪل سادو آهي، پر اسان جي جاوا اسڪرپٽ پلگ ان جي استعمال جي ضرورت آهي .

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

جاوا اسڪرپٽ حاصل ڪريو →

navbar ۾ متن

متن جي تارن کي لفاف ڪريو a ۾ <.navbar-text>، عام طور تي <p>مناسب اڳواٽ ۽ رنگ لاءِ ٽيگ تي.

ڇو ان کي استعمال

Breadcrumb نيويگيشن استعمال ڪيو ويندو آهي هڪ طريقي طور استعمال ڪندڙن کي ڏيکارڻ لاءِ جتي اهي ڪنهن ايپ يا سائيٽ ۾ آهن، پر پرائمري نيويگيشن لاءِ نه. انھن جي استعمال کي تمام گھڻو اثرائتو رکڻ لاءِ گھٽ ۽ مختصر رکو.

مثال

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

• گهر

• گهر /
• لائبريري

• گهر /
• لائبريري /
• ڊيٽا

مارڪ اپ

HTML لنڪ سان گڏ توهان جي معياري اڻ ترتيب ڏنل فهرست آهي.

<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 کان متاثر، ايپس ۽ ڳولا جي نتيجن لاءِ بهترين. وڏي بلاڪ کي ياد ڪرڻ ڏکيو آهي، آساني سان اسپيبلبل، ۽ وڏي ڪلڪ وارا علائقا مهيا ڪري ٿي.

رياستي صفحو لنڪس

لنڪس حسب ضرورت آهن ۽ صحيح طبقي سان ڪيترن ئي حالتن ۾ ڪم ڪن ٿيون. .disabledناقابل ڪلڪ لنڪس ۽ .activeموجوده صفحي لاءِ.

لچڪدار ترتيب

صفحي جي لنڪ جي ترتيب کي تبديل ڪرڻ لاءِ ٻن اختياري طبقن مان ڪنهن کي شامل ڪريو: .pagination-centered۽ .pagination-right.

مثال

ڊفالٽ صفحو جو حصو لچڪدار آهي ۽ مختلف قسمن ۾ ڪم ڪري ٿو.

مارڪ اپ

هڪ <div>۾ ويڙهيل، صفحو صرف هڪ آهي <ul>.

<div class = "صفحو" > 
  <ul>
    <li><a href = "#" > اڳيون </a></li> 
    <li class = "active" > 
      <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>

پيجر جي باري ۾

پيجر جو حصو لنڪن جو هڪ سيٽ آهي سادو صفحو لاڳو ڪرڻ لاءِ لائٽ مارڪ اپ ۽ اڃا به لائٽر اسلوب سان. اهو سادي سائيٽن جهڙوڪ بلاگن يا رسالن لاءِ تمام سٺو آهي.

اختياري معذور رياست

پيجر لنڪس پڻ استعمال ڪن ٿا عام .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-primary btn-large" > 
      وڌيڪ سکو
    </a>
  </p>
</div>

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

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

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

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

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

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

• 

  ٿمبنيل ليبل

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  عمل عمل

• 

  ٿمبنيل ليبل

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  عمل عمل

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

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

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

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

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

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

مارڪ اپ

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

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> ٿامب نيل ليبل </h5>
      <p> ٿمب نيل ڪيپشن هتي ئي... </p>
    </div>
  </li>
  ...
</ul>

وڌيڪ مثال

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

ٻيهر لکيل بنيادي ڪلاس

Bootstrap 2 سان، اسان بنيادي طبقي کي آسان ڪيو آهي: .alertبدران .alert-message. اسان گھٽ ۾ گھٽ گهربل مارڪ اپ کي به گھٽائي ڇڏيو آھي - <p>ڊفالٽ جي ضرورت نه آھي، صرف ٻاهرين <div>.

اڪيلو خبرداري پيغام

گهٽ ڪوڊ سان وڌيڪ پائيدار جزو لاءِ، اسان بلاڪ الارٽس، پيغام جيڪي وڌيڪ پيڊنگ ۽ عام طور تي وڌيڪ متن سان ايندا آهن، لاءِ مختلف نظرن کي هٽائي ڇڏيو آهي. ڪلاس پڻ تبديل ٿي چڪو آهي .alert-block.

جاوا اسڪرپٽ سان تمام سٺو

بوٽ اسٽراپ هڪ عظيم jQuery پلگ ان سان گڏ اچي ٿو جيڪو خبرداري پيغامن کي سپورٽ ڪري ٿو، انهن کي جلدي ۽ آسان بڻائي ٿو.

پلگ ان حاصل ڪريو »

مثال جي خبرداري

پنھنجي پيغام کي لپ ڪريو ۽ ھڪ اختياري بند آئڪن ھڪڙي div ۾ سادي ڪلاس سان.

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

اٿو! iOS ڊوائيسز جي ضرورت آهي هڪ href="#"خبرداري جي برطرفي لاء. ان کي شامل ڪرڻ جي پڪ ڪريو ۽ لنگر بند آئڪن لاءِ ڊيٽا جي خاصيت. متبادل طور تي، توھان استعمال ڪري سگھوٿا ھڪڙو buttonعنصر ڊيٽا جي خاصيت سان، جيڪو اسان پنھنجي دستاويزن لاءِ چونڊيو آھي.

معياري الرٽ پيغام کي آسانيءَ سان وڌايو ٻن اختياري طبقن سان: .alert-blockوڌيڪ پيڊنگ ۽ ٽيڪسٽ ڪنٽرول .alert-headingلاءِ ۽ ملندڙ هيڊنگ لاءِ.

<div class = "alert alert-block" > 
  <a class = "close" data- dismiss = "alert" href = "#" > × </a>   
  <h4 ڪلاس = "alert-heading" > خبردار! </h4> 
  پاڻ کي بهترين چيڪ ڪريو، توهان نه آهيو ...
</div>

خطا يا خطرو

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

ڪاميابي

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

ڄاڻ

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

بنيادي

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

<div class = "ترقي" > 
  <div ڪلاس = "بار" 
       انداز = " چوڪر : 60 ٪؛ " ></div> 
</div>

پٽي ٿيل

هڪ پٽي اثر پيدا ڪرڻ لاء گريجوئيٽ استعمال ڪري ٿو (نه IE).

<div class = "progress progress-striped" > 
  <div ڪلاس = "بار" 
       انداز = " چوڪر : 20 ٪؛ " ></div> 
</div>

متحرڪ

پٽي ٿيل مثال وٺي ٿو ۽ ان کي متحرڪ ڪري ٿو (نه IE).

<div class = "progress progress-striped 
     فعال" >
  <div ڪلاس = "بار" 
       انداز = " چوڪر : 40 ٪؛ " ></div> 
</div>

اضافي رنگ

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

پٽي ٿيل بار

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

رويو

پروگريس بارز CSS3 ٽرانزيڪشن استعمال ڪندا آھن، تنھنڪري جيڪڏھن توھان متحرڪ طور تي ويڪر کي جاوا اسڪرپٽ ذريعي ترتيب ڏيو، اھو آسانيءَ سان ريزائز ٿيندو.

جيڪڏهن توهان .activeڪلاس استعمال ڪندا آهيو، توهان جي .progress-stripedترقي واري بار کاٻي کان ساڄي پٽي کي متحرڪ ڪندو.

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

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

اوپيرا ۽ IE هن وقت اينيميشن کي سپورٽ نٿا ڪن.

کوهه

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

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

بند ڪريو آئڪن

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

×

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

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

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