بٹن گروپس

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

بہترین طریقوں

ہم بٹن گروپس اور ٹول بار استعمال کرنے کے لیے درج ذیل رہنما خطوط تجویز کرتے ہیں:

• ہمیشہ ایک ہی عنصر کو ایک بٹن گروپ میں استعمال کریں، <a>یا <button>.
• ایک ہی بٹن گروپ میں مختلف رنگوں کے بٹنوں کو نہ ملائیں۔
• متن کے علاوہ یا اس کے بجائے آئیکنز کا استعمال کریں، لیکن جہاں مناسب ہو وہاں ALT اور ٹائٹل ٹیکسٹ شامل کرنے کو یقینی بنائیں۔

ڈراپ ڈاؤن کے ساتھ متعلقہ بٹن گروپس (نیچے دیکھیں) کو الگ سے بلایا جانا چاہیے اور مطلوبہ رویے کی نشاندہی کرنے کے لیے ہمیشہ ڈراپ ڈاؤن کیریٹ شامل کرنا چاہیے۔

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

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

<div class = "btn-group" > 
  <بٹن کلاس = "btn" > 1 </ بٹن> 
  <بٹن کلاس = "btn" > 2 </ بٹن> 
  <بٹن کلاس = "btn" > 3 </ بٹن> 
</div>

ٹول بار کی مثال

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

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

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

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

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

بٹن گروپس میں ڈراپ ڈاؤن

سنو! ڈراپ ڈاؤن والے بٹنوں کو مناسب رینڈرنگ کے لیے انفرادی طور پر اپنے .btn-groupاندر لپیٹنا چاہیے۔.btn-toolbar

جائزہ اور مثالیں۔

ڈراپ ڈاؤن مینو کو متحرک کرنے کے لیے کسی بھی بٹن کو 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>

تمام بٹن سائز کے ساتھ کام کرتا ہے۔

بٹن ڈراپ ڈاؤن کسی بھی سائز پر کام کرتے ہیں۔ آپ کے بٹن کا سائز .btn-large, .btn-smallیا .btn-mini.

جاوا اسکرپٹ کی ضرورت ہے۔

بٹن ڈراپ ڈاؤن کو کام کرنے کے لیے بوٹسٹریپ ڈراپ ڈاؤن پلگ ان کی ضرورت ہوتی ہے۔

کچھ صورتوں میں—جیسے موبائل—ڈراپ ڈاؤن مینو ویو پورٹ سے باہر پھیل جائیں گے۔ آپ کو دستی طور پر یا حسب ضرورت جاوا اسکرپٹ کے ساتھ صف بندی کو حل کرنے کی ضرورت ہے۔

جائزہ اور مثالیں۔

بٹن گروپ سٹائل اور مارک اپ کی بنیاد پر، ہم آسانی سے اسپلٹ بٹن بنا سکتے ہیں۔ اسپلٹ بٹن میں بائیں طرف معیاری ایکشن اور سیاق و سباق کے لنکس کے ساتھ دائیں طرف ڈراپ ڈاؤن ٹوگل ہوتا ہے۔

سائز

اضافی بٹن کلاسز .btn-mini، .btn-smallیا .btn-largeسائز کے لیے استعمال کریں۔

<div class = "btn-group" > 
  ...
  <ul class = "ڈراپ ڈاؤن مینو پل دائیں" > 
    <!-- ڈراپ ڈاؤن مینو لنکس -->
  </ul>
</div>

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

ہم عام بٹن کے ڈراپ ڈاؤن پر توسیع کرتے ہیں تاکہ دوسرا بٹن ایکشن فراہم کیا جا سکے جو ایک علیحدہ ڈراپ ڈاؤن ٹرگر کے طور پر کام کرتا ہے۔

<div class = "btn-group" > 
  <بٹن کلاس = "btn" > ایکشن </ بٹن> 
  <بٹن کلاس = "بی ٹی این ڈراپ ڈاؤن ٹوگل" ڈیٹا ٹوگل = "ڈراپ ڈاؤن" >  
    <span class = "caret" ></span> 
  </ بٹن>
  <ul class = "ڈراپ ڈاؤن مینو" > 
    <!-- ڈراپ ڈاؤن مینو لنکس -->
  </ul>
</div>

ڈراپ اپ مینو

ڈراپ ڈاؤن مینو کو بھی نیچے سے اوپر تک ٹوگل کیا جا سکتا ہے کے فوری والدین میں ایک کلاس شامل کر کے .dropdown-menu۔ .caretیہ اوپر سے نیچے کی بجائے نیچے سے اوپر جانے کے لیے مینو کی سمت کو پلٹائے گا اور خود مینو کی جگہ لے لے گا۔

<div class = "btn-گروپ ڈراپ اپ" > 
  <بٹن کلاس = "btn" > ڈراپ اپ </ بٹن> 
  <بٹن کلاس = "بی ٹی این ڈراپ ڈاؤن ٹوگل" ڈیٹا ٹوگل = "ڈراپ ڈاؤن" >  
    <span class = "caret" ></span> 
  </ بٹن>
  <ul class = "ڈراپ ڈاؤن مینو" > 
    <!-- ڈراپ ڈاؤن مینو لنکس -->
  </ul>
</div>

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

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

کب استعمال کرنا ہے۔

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

اجزاء کی سیدھ

نیوی لنکس کو سیدھ میں لانے کے لیے، .pull-leftیا .pull-rightیوٹیلیٹی کلاسز کا استعمال کریں۔ دونوں کلاسیں مخصوص سمت میں ایک CSS فلوٹ شامل کریں گی۔

بنیادی ٹیبز

باقاعدگی <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 پلگ ان درکار ہے۔

بوٹسٹریپ میں ڈراپ ڈاؤن شروع کرنے سے متعلق دستاویزات کو پڑھنے کے لیے جاوا اسکرپٹ کے صفحے پر جائیں ۔

ڈراپ ڈاؤن کے ساتھ ٹیبز

• گھر
• مدد
• نیچے گرجانا
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

• گھر
• مدد
• نیچے گرجانا
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

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

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

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

آئیکنز کے ساتھ نیوی لسٹیں بھی آسان ہیں۔ کلاس کے ساتھ مناسب <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 = "فعال" > 
    <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 = "ٹیب پین فعال" id = "tab1" >  
      <p> میں سیکشن 1 میں ہوں۔ </p>
    </div>
    <div class = "tab- pan" id = "tab2" >  
      <p> شاباش، میں سیکشن 2 میں ہوں۔ </p>
    </div>
  </div>
</div>

نیچے ٹیبز

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

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

فکسڈ نیوبار

نیوبار کو ویو پورٹ کے اوپر یا نیچے ایک اضافی کلاس کے ساتھ سب سے باہری div پر درست کریں، .navbar۔

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

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

جب آپ navbar کو چسپاں کرتے ہیں، تو یاد رکھیں کہ نیچے چھپی ہوئی جگہ کا حساب کتاب کریں۔ میں 40px یا اس سے زیادہ پیڈنگ شامل کریں <body>۔ اس کو بنیادی بوٹسٹریپ CSS کے بعد اور اختیاری ریسپانسیو CSS سے پہلے شامل کرنا یقینی بنائیں۔

برانڈ کا نام

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

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

navbar میں فارم

navbar کے اندر فارم کو صحیح طریقے سے سٹائل کرنے اور پوزیشن دینے کے لیے، مناسب کلاسز شامل کریں جیسا کہ ذیل میں دکھایا گیا ہے۔ پہلے سے طے شدہ فارم کے لیے، شامل کریں .navbar-formاور یا تو .pull-leftیا .pull-rightاسے صحیح طریقے سے سیدھ کریں۔

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</form>

مزید حسب ضرورت تلاش کے فارم کے لیے، navbar میں خصوصی طرزوں کے لیے ان پٹ .navbar-searchمیں formاور شامل کریں۔.search-query

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

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

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

اجزاء کی سیدھ

نیوی، سرچ فارم، یا ٹیکسٹ کو سیدھ میں کرنے کے لیے، .pull-leftیا .pull-rightیوٹیلیٹی کلاسز کا استعمال کریں۔ دونوں کلاسیں مخصوص سمت میں ایک CSS فلوٹ شامل کریں گی۔

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

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

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

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

navbar میں متن

متن کے تاروں کو a میں لپیٹیں <.navbar-text>، عام طور پر <p>مناسب لیڈنگ اور رنگ کے لیے ٹیگ پر۔

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

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

مثالیں

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

• گھر

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

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

مارک اپ

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

<ul class = "بریڈ کرمب" > 
  <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 = "فعال" > 
      <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 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>

کے بارے میں

بیجز چھوٹے، سادہ اجزاء ہیں جو کسی قسم کے اشارے یا شمار کو ظاہر کرنے کے لیے ہوتے ہیں۔ وہ عام طور پر Mail.app جیسے ای میل کلائنٹس میں یا پش اطلاعات کے لیے موبائل ایپس پر پائے جاتے ہیں۔

دستیاب کلاسز

بوٹسٹریپ آپ کی سائٹ پر مواد کی نمائش کے لیے ایک ہلکا پھلکا، لچکدار جزو فراہم کرتا ہے جسے ہیرو یونٹ کہتے ہیں۔ یہ مارکیٹنگ اور مواد سے بھرپور سائٹس پر اچھی طرح کام کرتا ہے۔

مارک اپ

divاپنے مواد کو اس طرح لپیٹیں :

<div class = "ہیرو یونٹ" > 
  <h1> سرخی </h1>
  <p> ٹیگ لائن </p>
  <p>
    <a کلاس = "btn btn-primary btn-large" > 
      اورجانیے
    </a>
  </p>
</div>

h1صفحہ پر مواد کے حصوں کو مناسب طریقے سے خالی کرنے اور سیکشن کرنے کے لیے ایک سادہ شیل ۔ یہ h1کے ڈیفالٹ small، عنصر کے ساتھ ساتھ زیادہ تر دیگر اجزاء (اضافی طرزوں کے ساتھ) استعمال کر سکتا ہے۔

<div class = "page-header" > 
  <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-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>ڈیفالٹ کی ضرورت نہیں ہے، صرف بیرونی <div>۔

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

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

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

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

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

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

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

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

سنو! iOS آلات href="#"کو الرٹس کی برخاستگی کے لیے ایک کی ضرورت ہوتی ہے۔ اینکر کلوز آئیکنز کے لیے اسے اور ڈیٹا انتساب کو شامل کرنا یقینی بنائیں۔ متبادل طور پر، آپ buttonڈیٹا انتساب کے ساتھ ایک عنصر استعمال کر سکتے ہیں، جسے ہم نے اپنے دستاویزات کے لیے منتخب کیا ہے۔

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

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

غلطی یا خطرہ

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

کامیابی

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

معلومات

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

بنیادی

عمودی میلان کے ساتھ ڈیفالٹ پروگریس بار۔

<div class = "ترقی" > 
  <div کلاس = "بار" 
       سٹائل = " چوڑائی : 60 %؛ " ></div> 
</div>

دھاری دار

دھاری دار اثر (کوئی IE نہیں) بنانے کے لیے میلان کا استعمال کرتا ہے۔

<div class = "progress progress-striped" > 
  <div کلاس = "بار" 
       سٹائل = " چوڑائی : 20 %؛ " ></div> 
</div>

متحرک

دھاری دار مثال لیتا ہے اور اسے متحرک کرتا ہے (کوئی IE نہیں)۔

<div class = "progress پروگریس سٹرپڈ 
     فعال" >
  <div کلاس = "بار" 
       سٹائل = " چوڑائی : 40 %؛ " ></div> 
</div>

اضافی رنگ

پروگریس بارز مستقل انداز کے لیے کچھ ایک ہی بٹن اور الرٹ کلاسز کا استعمال کرتے ہیں۔

دھاری دار سلاخیں۔

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

رویہ

پروگریس بارز CSS3 ٹرانزیشنز کا استعمال کرتے ہیں، لہذا اگر آپ متحرک طور پر جاوا اسکرپٹ کے ذریعے چوڑائی کو ایڈجسٹ کرتے ہیں، تو یہ آسانی سے سائز تبدیل کر دے گا۔

اگر آپ .activeکلاس استعمال کرتے ہیں، تو آپ .progress-stripedکی پروگریس بارز پٹیوں کو بائیں سے دائیں متحرک کر دیں گی۔

براؤزر سپورٹ

پروگریس بار اپنے تمام اثرات کو حاصل کرنے کے لیے CSS3 گریڈینٹ، ٹرانزیشن، اور اینیمیشنز کا استعمال کرتے ہیں۔ یہ خصوصیات IE7-9 یا Firefox کے پرانے ورژن میں تعاون یافتہ نہیں ہیں۔

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

ویلز

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

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

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

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

×

<بٹن کلاس = "بند" > × </ بٹن> 

اگر آپ اینکر استعمال کرنے کے بجائے iOS ڈیوائسز کو کلک ایونٹس کے لیے ایک href="#" کی ضرورت ہوتی ہے۔

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