بٽڻ گروپ

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

توھان وڌيڪ پيچيده منصوبن لاءِ سيٽن <div class="btn-group">کي گڏ ڪري سگھو ٿا.<div class="btn-toolbar">

مثال مارڪ اپ

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

۽ ڪيترن ئي گروپن لاءِ ٽول بار سان:

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

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

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

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

مٿي چڙهڻ

بٽڻ گروپن لاءِ CSS ھڪ الڳ فائل ۾ آھي، بٽڻ-groups.less.

بٽڻ دٻائڻ

ڊراپ ڊائون مينيو کي ٽرگر ڪرڻ لاءِ ڪو به بٽڻ استعمال ڪريو ان کي اندر رکڻ سان .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>

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

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

مثال مارڪ اپ

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

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

طاقتور بنيادي ڪلاس

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

ڇو tabs ۽ pills

بوٽ اسٽريپ ۾ ٽيبل ۽ گوليون <ul>ساڳيا بنيادي HTML سان ٺهيل آهن، لنڪ جي هڪ فهرست. صرف هڪ طبقي سان ٽيب يا گولن جي وچ ۾ تبديل ڪريو.

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

بنيادي ٽيب

باقاعده <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>ٽيگ شامل ڪريو ۽ توھان مقرر ڪيو ويو آھي.

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

ڇا شامل آهي

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

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

ٽيبل جو مثال

tabs کي ٽيبل ڪرڻ لاءِ، .nav-tabsٻئي div ۾ ڪلاس سان لپيٽيو .tabbable.

ڪسٽم 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 scaffolding

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

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

ويوپورٽ جي چوٽيءَ تي نيوبار مقرر ڪرڻ .navbar-fixed-topلاءِ، ٻاھرئين ڀاڱي ۾ شامل ڪريو، .navbar. توهان جي CSS ۾، توهان کي اوورليپ لاءِ به حساب ڏيڻو پوندو اهو padding-top: 40px;توهان جي <body>.

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

برانڊ جو نالو

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

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

ڳولا فارم

ڳولا فارم حاصل ڪن ٿا حسب ضرورت انداز نويبار ۾ .navbar-searchڪلاس سان. شامل ڪريو .pull-leftيا .pull-rightان formکي ترتيب ڏيڻ لاءِ.

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

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

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

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" > 
    <a href = "#" > ڊيٽا </a> 
  </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>

پيجر جي باري ۾

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

ڊفالٽ مثال

ڊفالٽ طور، پيجر مرڪز لنڪس.

• پويون
• اڳيان

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

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

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

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

ٿوري اضافي مارڪ اپ سان، اهو ممڪن آهي ته ڪنهن به قسم جو 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" > 
  <a class = "بند" > × </a> 
  <strong> خبردار! </strong> بهترين چيڪ يو پاڻ کي، توهان تمام سٺو نه ڏسي رهيا آهيو.
</div>

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

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

خطا يا خطرو

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

ڪاميابي

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

ڄاڻ

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

بنيادي

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

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

پٽي ٿيل

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

<div class = "progress progress-info 
     ترقي واري پٽي" >
  <div ڪلاس = "بار" 
       انداز = " چوڪر : 20 ٪؛ " ></div> 
</div>

متحرڪ

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

<div class = "ترقي ترقي-خطرو 
     ترقي واري پٽي فعال" >
  <div ڪلاس = "بار" 
       انداز = " چوڪر : 40 ٪؛ " ></div> 
</div>

اضافي رنگ

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

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

متبادل طور تي، توھان گھٽ فائلن کي ترتيب ڏئي سگھوٿا ۽ پنھنجو رنگ ۽ سائز رول ڪري سگھو ٿا.

رويو

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

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

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

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

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

کوهه

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

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

بيج

اڻ پڙهيل ڳڻپ لاءِ يا هڪ سادي اشاري جي طور تي هڪ عنصر تي بيج استعمال ڪريو.

<span ڪلاس = "��يج" > 3 </div> 

بند ڪريو آئڪن

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

×

<a class = "بند" > × </a>