مثال

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

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <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 = "dropdown-menu" role = "menu" 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-rightکرنے کے لیے a میں شامل کریں ۔.dropdown-menu

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

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

لنک کو غیر فعال کرنے کے لیے ڈراپ ڈاؤن میں .disabledشامل کریں ۔<li>

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <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 = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li کلاس = "ڈراپ ڈاؤن-سب مینیو" > 
    <a tabindex = "-1" href = "#" > مزید اختیارات </a>  
    <ul class = "ڈراپ ڈاؤن مینو" > 
      ...
    </ul>
  </li>
</ul>

مثالیں

دو بنیادی اختیارات، دو مزید مخصوص تغیرات کے ساتھ۔

سنگل بٹن گروپ

بٹنوں کی ایک سیریز کو اندر کے ساتھ .btnلپیٹیں .btn-group۔

<div class = "btn-group" > 
  <بٹن کلاس = "btn" > بائیں </ بٹن> 
  <بٹن کلاس = "btn" > درمیانی </ بٹن> 
  <بٹن کلاس = "btn" > دائیں </ بٹن> 
</div>

ایک سے زیادہ بٹن گروپس

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

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

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

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

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

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

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

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

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

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

سائز

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

<div class = "btn-group" > 
  <بٹن کلاس = "btn btn-mini" > ایکشن </ بٹن> 
  <بٹن کلاس = "btn btn-mini dropdown-toggle" data-toggle = "ڈراپ ڈاؤن" >  
    <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

بنیادی ٹیبز

باقاعدگی <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 جزو (ٹیبز، گولیاں، یا فہرست) کے لیے، سرمئی لنکس .disabledکے لیے شامل کریں اور کوئی ہوور اثرات نہیں ہیں ۔ تاہم، جب تک آپ hrefانتساب کو ہٹا نہیں دیتے، لنکس قابل کلک رہیں گے۔ متبادل طور پر، آپ ان کلکس کو روکنے کے لیے اپنی مرضی کے مطابق JavaScript کو لاگو کر سکتے ہیں۔

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > ہوم </a></li>  
  ...
</ul>

اجزاء کی سیدھ

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

اسٹیک ایبل

چونکہ ٹیبز اور گولیاں پہلے سے طے شدہ طور پر افقی ہیں، صرف ایک سیکنڈ کلاس شامل کریں، .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 کلاس = "ڈراپ ڈاؤن" > 
    <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 فہرست

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

نوٹNAV فہرست میں گھونسلے کے لیے، class="nav nav-list"کسی بھی نیسٹڈ پر شامل کریں <ul>۔

افقی تقسیم کرنے والے

کلاس کے ساتھ ایک خالی فہرست آئٹم بنا کر افقی تقسیم شامل کریں .divider، جیسے:

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

Tabbable nav

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

ٹیبلبل مثال

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

ٹیبز میں دھندلا

ٹیبز کو دھندلا بنانے کے لیے، .fadeہر ایک میں شامل کریں .tab-pane۔

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

شروع کرنے کے لیے، navbars جامد ہوتے ہیں (اوپر پر فکس نہیں ہوتے) اور پروجیکٹ کے نام اور بنیادی نیویگیشن کے لیے سپورٹ شامل کرتے ہیں۔ ایک کو ایک کے اندر کہیں بھی رکھیں .container، جو آپ کی سائٹ اور مواد کی چوڑائی کا تعین کرتا ہے۔

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a کلاس = "برانڈ" 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>

نیوبار اجزاء

برانڈ

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

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

نیوی لنکس

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

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

فارمز

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

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > جمع کروائیں </ بٹن>  
</form>

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

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

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

اجزاء کی سیدھ

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

ڈراپ ڈاؤن استعمال کرنا

تھوڑا سا مارک اپ اور ڈراپ ڈاؤن JavaScript پلگ ان کے ساتھ nav میں ڈراپ ڈاؤن اور ڈراپ اپس شامل کریں ۔

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

مزید مارک اپ اور کالنگ ڈراپ ڈاؤن کے بارے میں معلومات کے لیے JavaScript ڈراپ ڈاؤن دستاویزات دیکھیں ۔

متن

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

اختیاری ڈسپلے تغیرات

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

اوپر سے طے شدہ

.navbar-fixed-topمیں کم از کم 40px شامل کرکے اس کے نیچے چھپے ہوئے علاقے کو شامل کریں اور یاد paddingرکھیں <body>۔ اس کو بنیادی بوٹسٹریپ CSS کے بعد اور اختیاری ریسپانسیو CSS سے پہلے شامل کرنا یقینی بنائیں۔

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

نیچے سے طے شدہ

.navbar-fixed-bottomاس کے بجائے شامل کریں ۔

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

جامد ٹاپ نیوبار

ایک پوری چوڑائی والا navbar بنائیں جو شامل کرکے صفحہ کے ساتھ اسکرول ہوجائے .navbar-static-top۔ کلاس کے برعکس .navbar-fixed-top، آپ کو پر کوئی پیڈنگ تبدیل کرنے کی ضرورت نہیں ہے body۔

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

قبول نوبار

ایک سمٹتے ہوئے ریسپانسیو نیوبار کو نافذ کرنے کے لیے، اپنے navbar کے مواد کو ایک پر مشتمل 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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

الٹا تغیر

شامل کرکے navbar کی شکل میں ترمیم کریں .navbar-inverse۔

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

مثالیں

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

<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 سے متاثر سادہ صفحہ بندی، ایپس اور تلاش کے نتائج کے لیے بہترین۔ بڑے بلاک کو کھونا مشکل ہے، آسانی سے توسیع پذیر ہے، اور بڑے کلک والے علاقے فراہم کرتا ہے۔

<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 = "صفحہ بندی صفحہ بندی-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "صفحہ بندی" > 
  <ul>
    ...
  </ul>
</div>
<div class = "صفحہ بندی صفحہ بندی-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "صفحہ بندی صفحہ بندی-منی" > 
  <ul>
    ...
  </ul>
</div>

سیدھ

صفحہ بندی کے لنکس کی سیدھ کو تبدیل کرنے کے لیے دو اختیاری کلاسوں میں سے ایک شامل کریں: .pagination-centeredاور .pagination-right۔

<div class = "صفحہ بندی صفحہ بندی-مرکز" > 
  ...
</div>

<div class = "صفحہ بندی صفحہ بندی-دائیں" > 
  ...
</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>

اختیاری معذور حالت

پیجر لنکس .disabledصفحہ بندی سے عام یوٹیلیٹی کلاس بھی استعمال کرتے ہیں۔

<ul class = "پیجر" > 
  <li کلاس = "پچھلا غیر فعال" > 
    <a href="#" > & larr ; پرانا </a> 
  </li>
  ...
</ul>

لیبلز

بیجز

آسانی سے ٹوٹنے والا

:emptyآسان نفاذ کے لیے، جب کوئی مواد اندر موجود نہ ہو تو لیبلز اور بیجز آسانی سے (CSS کے سلیکٹر کے ذریعے) گر جائیں گے ۔

ہیرو یونٹ

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

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

صفحہ کا ہیڈر

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

<div class = "page-header" > 
  <h1> مثال صفحہ ہیڈر <small> ذیلی متن برائے ہیڈر </small></h1>
</div>

پہلے سے طے شدہ تھمب نیلز

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

انتہائی حسب ضرورت

تھوڑا سا اضافی مارک اپ کے ساتھ، کسی بھی قسم کے HTML مواد جیسے عنوانات، پیراگراف، یا بٹن کو تھمب نیلز میں شامل کرنا ممکن ہے۔

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

تھمب نیلز (پہلے .media-gridv1.4 تک) تصاویر یا ویڈیوز کے گرڈ، تصویری تلاش کے نتائج، خوردہ مصنوعات، پورٹ فولیوز اور بہت کچھ کے لیے بہترین ہیں۔ وہ لنکس یا جامد مواد ہوسکتے ہیں۔

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

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

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

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

مارک اپ

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

<ul class = "تھمب نیلز" > 
  <li class = "span4" > 
    <a href = "#" کلاس = "تھمب نیل" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "تھمب نیلز" > 
  <li class = "span4" > 
    <div class = "تھمب نیل" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> تھمب نیل لیبل </h3>
      <p> تھمب نیل کیپشن... </p>
    </div>
  </li>
  ...
</ul>

مزید مثالیں۔

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

ڈیفالٹ الرٹ

.alertبنیادی انتباہی انتباہی پیغام کے لیے کسی بھی متن اور اختیاری برخاست بٹن کو لپیٹ دیں ۔

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

برخاست کے بٹن

موبائل سفاری اور موبائل اوپیرا براؤزرز، data-dismiss="alert"خصوصیت کے علاوہ، ٹیگ href="#"کا استعمال کرتے وقت الرٹس کی برخاستگی کے لیے ایک کی ضرورت ہوتی ہے۔<a>

<a href = "#" کلاس = "close" data-dismiss = "alert" > × </a>   

متبادل طور پر، آپ <button>ڈیٹا انتساب کے ساتھ ایک عنصر استعمال کر سکتے ہیں، جسے ہم نے اپنے دستاویزات کے لیے منتخب کیا ہے۔ استعمال کرتے وقت <button>، آپ کو لازمی طور پر شامل کرنا چاہیے type="button"ورنہ آپ کے فارم جمع نہیں ہو سکتے۔

<button type = "button" class = "close" data-dismiss = "alert" > × </ بٹن>   

جاوا اسکرپٹ کے ذریعے الرٹس کو مسترد کریں۔

الرٹس کو فوری اور آسانی سے برخاست کرنے کے لیے الرٹس jQuery پلگ ان کا استعمال کریں ۔

اختیارات

لمبے پیغامات کے لیے، شامل کر کے الرٹ ریپر کے اوپر اور نیچے کی پیڈنگ میں اضافہ کریں .alert-block۔

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

سیاق و سباق کے متبادل

الرٹ کا مفہوم تبدیل کرنے کے لیے اختیاری کلاسیں شامل کریں۔

غلطی یا خطرہ

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

کامیابی

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

معلومات

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

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

بنیادی

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

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

دھاری دار

ایک دھاری دار اثر بنانے کے لیے گریڈینٹ کا استعمال کرتا ہے۔ IE7-8 میں دستیاب نہیں ہے۔

<div class = "progress progress-striped" > 
  <div class = "bar" سٹائل = " چوڑائی : 20 %; " ></div>   
</div>

متحرک

دائیں سے بائیں دھاریوں کو متحرک کرنے کے لیے میں .activeشامل کریں ۔ .progress-stripedIE کے تمام ورژن میں دستیاب نہیں ہے۔

<div class = "progress progress-striped active" > 
  <div class = "bar" سٹائل = " چوڑائی : 40 %; " ></div>   
</div>

ڈھیر لگا ہوا

ایک سے زیادہ سلاخوں .progressکو اسٹیک کرنے کے لیے ایک ہی جگہ پر رکھیں۔

<div class = "ترقی" > 
  <div class = "bar bar-success" سٹائل = " چوڑائی : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " چوڑائی : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " چوڑائی : 10 %; " ></div>   
</div>

اختیارات

اضافی رنگ

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

<div class = "progress progress-info" > 
  <div class = "bar" سٹائل = " چوڑائی : 20 % " ></div>   
</div>
<div class = "progress progress-success" > 
  <div class = "bar" سٹائل = " چوڑائی : 40 % " ></div>   
</div>
<div class = "progress progress-warning" > 
  <div class = "bar" سٹائل = " چوڑائی : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" سٹائل = " چوڑائی : 80 % " ></div>   
</div>

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

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" سٹائل = " چوڑائی : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" سٹائل = " چوڑائی : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" سٹائل = " چوڑائی : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" سٹائل = " چوڑائی : 80 % " ></div>   
</div>

براؤزر سپورٹ

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

انٹرنیٹ ایکسپلورر 10 اور اوپیرا 12 سے پہلے کے ورژن متحرک تصاویر کو سپورٹ نہیں کرتے ہیں۔

مختلف قسم کے اجزاء (جیسے بلاگ کے تبصرے، ٹویٹس، وغیرہ) بنانے کے لیے تجریدی آبجیکٹ کی طرزیں جو متنی مواد کے ساتھ بائیں یا دائیں سیدھ والی تصویر کو نمایاں کرتی ہیں۔

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

پہلے سے طے شدہ میڈیا میڈیا آبجیکٹ (تصاویر، ویڈیو، آڈیو) کو مواد کے بلاک کے بائیں یا دائیں فلوٹ کرنے کی اجازت دیتا ہے۔

میڈیا ہیڈنگ

Cras sit amet nibh libero, in 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. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔

میڈیا ہیڈنگ

Cras sit amet nibh libero, in 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. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔

میڈیا ہیڈنگ

Cras sit amet nibh libero, in 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. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔

<div class = "میڈیا" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "میڈیا باڈی" > 
    <h4 کلاس = "میڈیا ہیڈنگ" > میڈیا ہیڈنگ </h4> 
    ...
 
    <!-- نیسٹڈ میڈیا آبجیکٹ -->
    <div class = "میڈیا" > 
      ...
    </div>
  </div>
</div>

میڈیا کی فہرست

تھوڑا سا اضافی مارک اپ کے ساتھ، آپ فہرست کے اندر میڈیا استعمال کر سکتے ہیں (تبصرے کے دھاگوں یا مضامین کی فہرست کے لیے مفید)۔

<ul class = "media-list" > 
  <li class = "میڈیا" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "میڈیا باڈی" > 
      <h4 کلاس = "میڈیا ہیڈنگ" > میڈیا ہیڈنگ </h4> 
      ...
 
      <!-- نیسٹڈ میڈیا آبجیکٹ -->
      <div class = "میڈیا" > 
        ...
     </div>
    </div>
  </li>
</ul>

ویلز

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

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

اختیاری کلاسز

دو اختیاری ترمیمی کلاسوں کے ساتھ پیڈنگ اور گول کونوں کو کنٹرول کریں۔

<div class = "well-large" > 
  ...
</div>

<div class = "well-small" > 
  ...
</div>

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

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

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

href="#"اگر آپ اینکر استعمال کرنا چاہتے ہیں تو iOS آلات کو کلک ایونٹس کی ضرورت ہوتی ہے ۔

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

مددگار کلاسز

چھوٹے ڈسپلے یا رویے کے موافقت کے لیے سادہ، مرکوز کلاسز۔

بائیں طرف کھینچیں۔

ایک عنصر کو چھوڑ دیں۔

کلاس = "بائیں طرف کھینچیں"

. کھینچنا - بائیں {
  فلوٹ : بائیں ;
}

دائیں طرف کھینچیں۔

ایک عنصر کو دائیں طرف فلوٹ کریں۔

کلاس = "دائیں ھیںچو"

. کھینچیں - دائیں {
  فلوٹ : دائیں ؛
}

.خاموش

کسی عنصر کا رنگ اس میں تبدیل کریں۔#999

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

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

.clearfix

floatکسی بھی عنصر کو صاف کریں۔

کلاس = "کلیئر فکس"

. صاف کرنا {
  * زوم : 1 ؛ 
  اور: پہلے ،
  اور: بعد {
    ڈسپلے : میز ؛
    مواد : "" ; 
  }
  اور: بعد {
    واضح : دونوں _
  }
}