بٹن گروپس

ایک جامع جزو کے طور پر متعدد بٹنوں کو ایک ساتھ جوڑنے کے لیے بٹن گروپس کا استعمال کریں۔ انہیں ایک سیریز <a>یا <button>عناصر کے ساتھ بنائیں۔

آپ زیادہ پیچیدہ پروجیکٹس کے لیے سیٹوں کو <div class="btn-group">a میں بھی جوڑ سکتے ہیں ۔<div class="btn-toolbar">

مارک اپ کی مثال

اینکر ٹیگ بٹنوں کے ساتھ بنائے گئے ایک معیاری بٹن گروپ کو ایچ ٹی ایم ایل کیسا لگتا ہے:

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

چیک باکس اور ریڈیو فلیور

بٹن گروپس ریڈیو کے طور پر بھی کام کر سکتے ہیں، جہاں صرف ایک بٹن فعال ہو سکتا ہے، یا چیک باکسز، جہاں بہت سے بٹن فعال ہو سکتے ہیں۔ اس کے لیے جاوا اسکرپٹ دستاویزات دیکھیں ۔

جاوا اسکرپٹ حاصل کریں »

سر اپ

بٹن گروپس کے لیے سی ایس ایس ایک علیحدہ فائل میں ہے، بٹن گروپس.لیس۔

بٹن ڈراپ ڈاؤنز

ڈراپ ڈاؤن مینو کو متحرک کرنے کے لیے کسی بھی بٹن کو a کے اندر رکھ کر .btn-groupاور مناسب مینو مارک اپ فراہم کر کے استعمال کریں۔

مارک اپ کی مثال

بٹن گروپ کی طرح، ہمارا مارک اپ باقاعدہ بٹن مارک اپ کا استعمال کرتا ہے، لیکن انداز کو بہتر بنانے اور بوٹسٹریپ کے ڈراپ ڈاؤن jQuery پلگ ان کو سپورٹ کرنے کے لیے مٹھی بھر اضافے کے ساتھ۔

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "ڈراپ ڈاؤن" 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 = "ڈراپ ڈاؤن" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "ڈراپ ڈاؤن مینو" > 
    <!-- ڈراپ ڈاؤن مینو لنکس -->
  </ul>
</div>

طاقتور بیس کلاس

یہاں کے تمام nav اجزاء — ٹیبز، گولیاں، اور فہرستیں— کلاس کے ذریعے ایک ہی بیس مارک اپ اور اسٹائلز کا اشتراک کرتے ہیں ۔.nav

ٹیبز اور گولیاں کیوں؟

بوٹسٹریپ میں ٹیبز اور گولیاں ایک <ul>ہی بنیادی HTML کے ساتھ، لنکس کی ایک فہرست پر بنائی گئی ہیں۔ صرف ایک کلاس کے ساتھ ٹیبز یا گولیوں کے درمیان تبادلہ کریں۔

دونوں اختیارات مواد کے ذیلی حصوں یا متعلقہ مواد کے صفحات کے درمیان نیویگیٹ کرنے کے لیے بہترین ہیں۔

بنیادی ٹیبز

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

بنیادی گولیاں

وہی ایچ ٹی ایم ایل لیں، لیکن .nav-pillsاس کے بجائے استعمال کریں:

• گھر
• پروفائل
• پیغامات

<ul class = "nav nav-pills" > 
  <li class = "فعال" > 
    <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 کلاس = "ڈراپ ڈاؤن" > 
    <a کلاس = "ڈراپ ڈاؤن ٹوگل" 
       ڈیٹا ٹوگل = "ڈراپ ڈاؤن"
       href = "#" >
        نیچے گرجانا
        <b کلاس = "کیریٹ" ></b> 
      </a>
    <ul class = "ڈراپ ڈاؤن مینو" > 
      <!-- لنکس -->
    </ul>
  </li>
</ul>

ڈراپ ڈاؤن کے ساتھ گولیاں

• گھر
• پروفائل
• نیچے گرجانا
  • عمل
  • ایک اور عمل
  • یہاں کچھ اور
  • علیحدہ لنک

<ul class = "nav nav-pills" > 
  <li کلاس = "ڈراپ ڈاؤن" > 
    <a کلاس = "ڈراپ ڈاؤن ٹوگل" 
       ڈیٹا ٹوگل = "ڈراپ ڈاؤن"
       href = "#" >
        نیچے گرجانا
        <b کلاس = "کیریٹ" ></b> 
      </a>
    <ul class = "ڈراپ ڈاؤن مینو" > 
      <!-- لنکس -->
    </ul>
  </li>
</ul>

ایپلیکیشن طرز کی نیویگیشن

نیوی فہرستیں اختیاری ہیڈر کے ساتھ نیوی لنکس کے گروپس بنانے کا ایک آسان اور آسان طریقہ فراہم کرتی ہیں۔ وہ OS X میں فائنڈر جیسے سائڈ بارز میں بہترین استعمال ہوتے ہیں۔

ساختی طور پر، وہ ٹیبز اور گولیوں کی طرح ایک ہی بنیادی NAV سٹائل پر بنائے گئے ہیں، لہذا استعمال اور حسب ضرورت سیدھی ہے۔

شبیہیں کے ساتھ

آئیکنز کے ساتھ نیوی لسٹیں بھی آسان ہیں۔ کلاس کے ساتھ مناسب <i>ٹیگ شامل کریں اور آپ سیٹ ہو گئے۔

مثال NAV فہرست

لنکس کی ایک فہرست لیں اور شامل کریں 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>

شبیہیں کے ساتھ مثال

ایک ہی مثال، لیکن <i>شبیہیں کے ٹیگز کے ساتھ۔

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href="#" > _ _ 
      <i class = "icon-book" ></i> 
      کتب خانہ
    </a>
  </li>
  ...
</ul>

کیا شامل ہے۔

ٹیبز کے ذریعے مواد کے درمیان ٹوگل کرنے کے لیے ایک سادہ پلگ ان کے ساتھ اپنے ٹیبز کو زندہ کریں۔ بوٹسٹریپ ٹیببل ٹیبز کو چار شیلیوں میں ضم کرتا ہے: اوپر (پہلے سے طے شدہ)، دائیں، نیچے، اور بائیں۔

ان کے درمیان تبدیل کرنا آسان ہے اور صرف بہت کم مارک اپ کو تبدیل کرنے کی ضرورت ہے۔

ٹیبلبل مثال

.nav-tabsٹیبز کو ٹیب ایبل بنانے کے لیے، کلاس کے ساتھ ایک اور div میں لپیٹیں .tabbable۔

اپنی مرضی کے مطابق jQuery پلگ ان

تمام ٹیب ایبل ٹیبز ہمارے ہلکے وزن والے jQuery پلگ ان سے چلتی ہیں۔ جاوا اسکرپٹ دستاویزات کے صفحہ پر ٹیب ایبل ٹیبز کو زندہ کرنے کے طریقے کے بارے میں مزید پڑھیں۔

جاوا اسکرپٹ → حاصل کریں۔

نیچے ٹیبز

ایچ ٹی ایم ایل کے آرڈر کو پلٹائیں اور نیچے ٹیبز لگانے کے لیے ایک کلاس شامل کریں۔

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

بائیں طرف ٹیبز

بائیں طرف ٹیبز لگانے کے لیے کلاس کو تبدیل کریں۔

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

دائیں طرف ٹیبز

دائیں طرف ٹیبز لگانے کے لیے کلاس کو تبدیل کریں۔

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

Navbar سہاروں

نیوبار کو جامد یا فکسڈ ڈسپلے کے لیے اس کی اچھی ساخت کے لیے صرف چند divs کی ضرورت ہوتی ہے۔

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "کنٹینر" > 
      ...
    </div>
  </div>
</div>

نیوبار کو ویو پورٹ کے اوپری حصے پر فکس کرنے کے لیے، سب سے .navbar-fixed-topباہری div میں شامل کریں .navbar۔ padding-top: 40px;آپ کے CSS میں، آپ کو اپنے میں شامل کرنے سے ہونے والے اوورلیپ کا بھی حساب دینا <body>ہوگا۔

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

برانڈ کا نام

آپ کے برانڈ یا پروجیکٹ کا نام دکھانے کے لیے ایک سادہ لنک کے لیے صرف اینکر ٹیگ کی ضرورت ہوتی ہے۔

<a کلاس = "برانڈ" href = "#" >  
  پراجیکٹ کا نام
</a>

فارم تلاش کریں۔

.navbar-searchتلاش کے فارم کلاس کے ساتھ navbar میں حسب ضرورت طرزیں حاصل کرتے ہیں ۔ اسے سیدھ میں لانے کے لیے شامل کریں .pull-leftیا اس .pull-rightپر ۔form

<form class = "navbar-search pull-left" > 
  <ان پٹ کی قسم = "ٹیکسٹ" کلاس = "تلاش-استفسار" پلیس ہولڈر = "تلاش" >   
</form>

اختیاری ذمہ دار تغیر

آپ کے ٹاپ بار میں مواد کی مقدار پر منحصر ہے، آپ جوابی اختیارات کو لاگو کرنا چاہیں گے۔ ایسا کرنے کے لیے، اپنے nav مواد کو ایک پر مشتمل div میں لپیٹیں .nav-collapse.collapse، اور navbar ٹوگل بٹن شامل کریں .btn-navbar۔

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "کنٹینر" > 
 
      <!-- .btn-navbar کو منہدم نیوبار مواد کے لیے ٹوگل کے طور پر استعمال کیا جاتا ہے -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- اگر آپ اسے دکھانا چاہتے ہیں تو برانڈ کو وہاں چھوڑنا یقینی بنائیں -->
      <a کلاس = "برانڈ" href = "#" > پروجیکٹ کا نام </a>  
 
      <!-- ہر وہ چیز جسے آپ 940px یا اس سے کم پر چھپانا چاہتے ہیں، یہاں پر رکھیں -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

نیوی لنکس

نیوی آئٹمز کو غیر ترتیب شدہ فہرستوں کے ذریعے شامل کرنا آسان ہے۔

<ul class = "nav" > 
  <li class = "فعال" > 
    <a href="#" > ہوم </a> _ _ 
  </li>
  <li><a href = "#" > لنک </a></li> 
  <li><a href = "#" > لنک </a></li> 
</ul>

ڈراپ ڈاؤن شامل کرنا

nav میں ڈراپ ڈاؤن شامل کرنا انتہائی آسان ہے، لیکن اس کے لیے ہمارے جاوا اسکرپٹ پلگ ان کے استعمال کی ضرورت ہے ۔

<ul class = "nav" > 
  <li کلاس = "ڈراپ ڈاؤن" > 
    <a href = "#" 
          کلاس = "ڈراپ ڈاؤن ٹوگل"
          data-toggle = "ڈراپ ڈاؤن" >
          کھاتہ
          <b کلاس = "کیریٹ" ></b> 
    </a>
    <ul class = "ڈراپ ڈاؤن مینو" > 
      ...
    </ul>
  </li>
</ul>

جاوا اسکرپٹ → حاصل کریں۔

ان کا استعمال کیوں کریں۔

بریڈ کرمب نیویگیشن کا استعمال صارفین کو یہ دکھانے کے لیے کیا جاتا ہے کہ وہ ایپ یا سائٹ کے اندر کہاں ہیں، لیکن بنیادی نیویگیشن کے لیے نہیں۔ سب سے زیادہ موثر ہونے کے لیے ان کے استعمال کو کم اور مختصر رکھیں۔

مثالیں

ایک واحد مثال دکھائی گئی ہے جیسا کہ اسے متعدد صفحات پر دکھایا جا سکتا ہے۔

• گھر

• گھر /
• کتب خانہ

• گھر /
• لائبریری /
• ڈیٹا

مارک اپ

HTML لنک کے ساتھ آپ کی معیاری غیر ترتیب شدہ فہرست ہے۔

<ul class = "بریڈ کرمب" > 
  <li>
    <a href = "#" > ہوم </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > لائبریری </a> <span class = "divider" > / </span>   
  </li>
  <li class = "فعال" > 
    <a href="#" > ڈیٹا </a> _ _ 
  </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>

پیجر کے بارے میں

پیجر کا جزو ہلکے مارک اپ اور یہاں تک کہ ہلکے انداز کے ساتھ سادہ صفحہ بندی کے نفاذ کے لیے لنکس کا ایک مجموعہ ہے۔ یہ سادہ سائٹس جیسے بلاگز یا میگزینز کے لیے بہت اچھا ہے۔

پہلے سے طے شدہ مثال

پہلے سے طے شدہ طور پر، پیجر لنکس کو سینٹر کرتا ہے۔

• پچھلا
• اگلے

<ul class = "پیجر" > 
  <li>
    <a href="#" > پچھلا </a> _ _ 
  </li>
  <li>
    <a href="#" > اگلا </a> _ _ 
  </li>
</ul>

منسلک لنکس

متبادل طور پر، آپ ہر ایک لنک کو اطراف میں سیدھ کر سکتے ہیں:

• ← پرانا
• جدید تر →

<ul class = "پیجر" > 
  <li کلاس = "پچھلا" > 
    <a href="#" > & larr ; پرانا </a> 
  </li>
  <li کلاس = "اگلا" > 
    <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-gridv1.4 تک) تصاویر یا ویڈیوز کے گرڈ، تصویری تلاش کے نتائج، خوردہ مصنوعات، پورٹ فولیوز اور بہت کچھ کے لیے بہترین ہیں۔ وہ لنکس یا جامد مواد ہوسکتے ہیں۔

سادہ، لچکدار مارک اپ

تھمب نیل مارک اپ آسان ہے — جس ulمیں کسی بھی تعداد میں liعناصر کی ضرورت ہوتی ہے۔ یہ انتہائی لچکدار بھی ہے، جو آپ کے مواد کو سمیٹنے کے لیے کسی بھی قسم کے مواد کو تھوڑا سا زیادہ مارک اپ کے ساتھ اجازت دیتا ہے۔

گرڈ کالم سائز استعمال کرتا ہے۔

آخر میں، تھمب نیلز کا جزو موجودہ گرڈ سسٹم کلاسز کا استعمال کرتا ہے — جیسے .span2یا .span3— تھمب نیل کے طول و عرض کے کنٹرول کے لیے۔

مارک اپ

جیسا کہ پہلے ذکر کیا گیا ہے، تھمب نیلز کے لیے مطلوبہ مارک اپ ہلکا اور سیدھا ہے۔ منسلک تصاویر کے لیے پہلے سے طے شدہ سیٹ اپ پر ایک نظر یہ ہے :

<ul class = "تھمب نیلز" > 
  <li class = "span3" > 
    <a href = "#" کلاس = "تھمب نیل" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

تھمب نیلز میں حسب ضرورت HTML مواد کے لیے، مارک اپ تھوڑا سا تبدیل ہوتا ہے۔ بلاک سطح کے مواد کو کہیں بھی اجازت دینے کے لیے، ہم اس طرح <a>کے لیے تبدیل کرتے ہیں <div>:

<ul class = "تھمب نیلز" > 
  <li class = "span3" > 
    <div class = "تھمب نیل" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> تھمب نیل لیبل </h5>
      <p> تھمب نیل کیپشن یہیں... </p>
    </div>
  </li>
  ...
</ul>

مزید مثالیں۔

آپ کے لیے دستیاب مخت��ف گرڈ کلاسز کے ساتھ اپنے تمام اختیارات کو دریافت کریں۔ آپ مختلف سائز کو مکس اور میچ بھی کر سکتے ہیں۔

دوبارہ لکھی گئی بیس کلاس

بوٹسٹریپ 2 کے ساتھ، ہم نے بیس کلاس کو آسان بنا دیا ہے: .alertکے بجائے .alert-message۔ ہم نے کم از کم مطلوبہ مارک اپ کو بھی کم کر دیا ہے — کوئی <p>ڈیفالٹ کی ضرورت نہیں ہے، صرف outter <div>۔

سنگل الرٹ پیغام

کم کوڈ کے ساتھ زیادہ پائیدار جزو کے لیے، ہم نے بلاک الرٹس، زیادہ پیڈنگ اور عام طور پر زیادہ متن کے ساتھ آنے والے پیغامات کے لیے فرق کو ہٹا دیا ہے۔ کلاس بھی تبدیل کر دی گئی ہے .alert-block۔

جاوا اسکرپٹ کے ساتھ بہت اچھا ہے۔

بوٹسٹریپ ایک زبردست jQuery پلگ ان کے ساتھ آتا ہے جو انتباہی پیغامات کو سپورٹ کرتا ہے، انہیں فوری اور آسان بناتا ہے۔

پلگ ان حاصل کریں »

مثال کے انتباہات

سادہ کلاس کے ساتھ ایک div میں اپنا پیغام اور اختیاری کلوز آئیکن لپیٹیں۔

<div class = "انتباہ" > 
  <a class = "close" > × </a> 
  <strong> انتباہ! </strong> بہترین خود کو چیک کریں، آپ زیادہ اچھے نہیں لگ رہے ہیں۔
</div>

معیاری الرٹ پیغام کو دو اختیاری کلاسوں کے ساتھ آسانی سے بڑھائیں: .alert-blockمزید پیڈنگ اور ٹیکسٹ کنٹرولز .alert-headingکے لیے اور مماثل سرخی کے لیے۔

<div class = " الرٹ الرٹ بلاک" > 
  <a class = "close" > × </a> 
  <h4 class = "alert-heading" > وارننگ! </h4> 
  خود کو چیک کریں، آپ نہیں ہیں...
</div>

غلطی یا خطرہ

<div class = " الرٹ الرٹ - ایرر " > 
  ...
</div>

کامیابی

<div class = "انتباہ الرٹ-کامیابی" > 
  ...
</div>

معلومات

<div class = "انتباہ الرٹ-معلومات" > 
  ...
</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 کے پرانے ورژن میں تعاون یافتہ نہیں ہیں۔

اوپیرا اس وقت متحرک تصاویر کو سپورٹ نہیں کرتا ہے۔

ویلز

کسی عنصر کو انسیٹ اثر دینے کے لیے اس پر سادہ اثر کے طور پر کنویں کا استعمال کریں۔

<div class = "اچھا" > 
  ...
</div>

بیجز

بغیر پڑھے ہوئے شمار کے لیے یا سادہ اشارے کے طور پر کسی عنصر پر بیج استعمال کریں۔

<span class = "badge" > 3 </div> 

آئیکن بند کریں۔

موڈلز اور الرٹس جیسے مواد کو مسترد کرنے کے لیے عام قریبی آئیکن کا استعمال کریں۔

×

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