انفرادی یا مرتب شدہ

پلگ انز کو انفرادی طور پر شامل کیا جا سکتا ہے (حالانکہ کچھ پر انحصار کی ضرورت ہوتی ہے)، یا سب ایک ساتھ۔ bootstrap.js اور bootstrap.min.js دونوں ایک فائل میں تمام پلگ ان پر مشتمل ہیں۔

ڈیٹا کی خصوصیات

آپ جاوا اسکرپٹ کی ایک لائن لکھے بغیر تمام بوٹسٹریپ پلگ انز کو مارک اپ API کے ذریعے خالصتاً استعمال کر سکتے ہیں۔ یہ بوٹسٹریپ کا فرسٹ کلاس API ہے اور پلگ ان استعمال کرتے وقت آپ کا پہلا خیال ہونا چاہیے۔

اس نے کہا، کچھ حالات میں اس فعالیت کو بند کرنا ضروری ہو سکتا ہے۔ لہٰذا، ہم `'data-api'` کے ساتھ باڈی نیم اسپیس پر تمام ایونٹس کو غیر بائنڈنگ کرکے ڈیٹا انتساب API کو غیر فعال کرنے کی اہلیت بھی فراہم کرتے ہیں۔ یہ اس طرح لگتا ہے:

$ ( 'جسم' )۔ آف ( '.data-api' )

متبادل طور پر، کسی مخصوص پلگ ان کو نشانہ بنانے کے لیے، صرف اس طرح کے ڈیٹا-api نام کی جگہ کے ساتھ پلگ ان کا نام بطور نام شامل کریں:

$ ( 'جسم' )۔ آف ( '.alert.data-api' )

پروگرامیٹک API

ہم یہ بھی مانتے ہیں کہ آپ کو تمام بوٹسٹریپ پلگ ان کو خالصتاً JavaScript API کے ذریعے استعمال کرنے کے قابل ہونا چاہیے۔ تمام عوامی APIs سنگل، چین کے قابل طریقے ہیں، اور اس پر عمل کیا گیا مجموعہ واپس کرتے ہیں۔

$ ( ".btn.danger" )۔ بٹن ( "ٹوگل" )۔ addClass ( "چربی" )

تمام طریقوں کو اختیاری آپشن آبجیکٹ کو قبول کرنا چاہیے، ایک سٹرنگ جو کسی خاص طریقہ کو نشانہ بناتی ہے، یا کچھ نہیں (جو پہلے سے طے شدہ رویے کے ساتھ پلگ ان شروع کرتا ہے):

$ ( "#myModal" )۔ modal () // ڈیفالٹس کے ساتھ شروع کیا گیا۔                       
$ ( "#myModal" )۔ موڈل ({ کی بورڈ : غلط }) // بغیر کی بورڈ کے شروع کیا گیا۔     
$ ( "#myModal" )۔ موڈل ( 'شو' ) // شروع کرتا ہے اور فوری طور پر شو کو طلب کرتا ہے۔                

ہر پلگ ان اپنے خام کنسٹرکٹر کو 'کنسٹرکٹر' پراپرٹی پر بھی ظاہر کرتا ہے: $.fn.popover.Constructor۔ اگر آپ کوئی خاص پلگ ان مثال حاصل کرنا چاہتے ہیں، تو اسے براہ راست کسی عنصر سے بازیافت کریں: $('[rel=popover]').data('popover')۔

کوئی تنازعہ نہیں۔

بعض اوقات بوٹسٹریپ پلگ ان کو دوسرے UI فریم ورک کے ساتھ استعمال کرنا ضروری ہوتا ہے۔ ان حالات میں نام کی جگہ کے تصادم کبھی کبھار ہو سکتے ہیں۔ اگر ایسا ہوتا ہے تو، آپ .noConflictاس پلگ ان پر کال کر سکتے ہیں جس کی قدر کو آپ واپس کرنا چاہتے ہیں۔

var بوٹسٹریپ بٹن = $ ۔ fn _ بٹن _ noConflict () // $.fn.button کو پہلے تفویض کردہ قدر پر واپس کریں۔ 
$ _ fn _ bootstrapBtn = بوٹسٹریپ بٹن             // $().bootstrapBtn بوٹسٹریپ کی فعالیت

تقریبات

بوٹسٹریپ زیادہ تر پلگ ان کی منفرد کارروائیوں کے لیے حسب ضرورت واقعات فراہم کرتا ہے۔ عام طور پر، یہ ایک انفینٹیو اور ماضی میں حصہ لینے والی شکل میں آتے ہیں - جہاں infinitive (ex. show) کسی واقعہ کے آغاز پر متحرک ہوتا ہے، اور اس کی ماضی کی شریک شکل (ex. shown) کسی عمل کی تکمیل پر محرک ہوتی ہے۔

تمام غیرمعمولی واقعات کو روکنے کی ڈیفالٹ فعالیت فراہم کرتے ہیں۔ یہ کسی کارروائی کے شروع ہونے سے پہلے اس پر عمل درآمد کو روکنے کی صلاحیت فراہم کرتا ہے۔

$ ( '#myModal' )۔ پر ( 'شو' ، فنکشن ( ای ) {   
    اگر (! ڈیٹا ) واپس کریں e . preventDefault () // موڈل کو دکھانے سے روکتا ہے۔   
})

منتقلی کے بارے میں

منتقلی کے آسان اثرات کے لیے، bootstrap-transition.js کو دوسری JS فائلوں کے ساتھ شامل کریں۔ اگر آپ مرتب شدہ (یا کم کردہ) bootstrap.js استعمال کر رہے ہیں ، تو اسے شامل کرنے کی ضرورت نہیں ہے—یہ پہلے سے موجود ہے۔

کیسز استعمال کریں۔

منتقلی پلگ ان کی چند مثالیں:

• موڈلز میں پھسلنا یا دھندلا ہونا
• ٹیبز کو ختم کرنا
• انتباہات کو ختم کرنا
• سلائیڈنگ کیروسل پینز

مثالیں

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

جامد مثال

فوٹر میں ہیڈر، باڈی، اور اعمال کے سیٹ کے ساتھ ایک پیش کردہ ماڈل۔

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </ بٹن>    
    <h3> موڈل ہیڈر </h3>
  </div>
  <div class = "modal-body" > 
    <p> ایک عمدہ جسم… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > بند کریں </a>  
    <a href = "#" class = "btn btn-primary" > تبدیلیاں محفوظ کریں </a>  
  </div>
</div>

لائیو ڈیمو

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

<!-- موڈل کو متحرک کرنے کا بٹن -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > ڈیمو موڈل لانچ کریں </a>    
 
<!-- موڈل -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > موڈل ہیڈر </h3> 
  </div>
  <div class = "modal-body" > 
    <p> ایک عمدہ جسم… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > بند کریں </ بٹن>   
    <بٹن کلاس = "btn btn-primary" > تبدیلیاں محفوظ کریں </button> 
  </div>
</div>

استعمال

ڈیٹا اوصاف کے ذریعے

جاوا اسکرپٹ لکھے بغیر موڈل کو چالو کریں۔ ایک کنٹرولر عنصر پر سیٹ کریں data-toggle="modal"، جیسے بٹن، ایک کے ساتھ data-target="#foo"یا href="#foo"کسی مخصوص موڈل کو ٹوگل کرنے کے لیے ہدف بنانا۔

<button type = "button" data- toggle = "modal " data-target = "#myModal" > موڈل لانچ کریں </button>   

جاوا اسکرپٹ کے ذریعے

myModalJavaScript کی ایک لائن کے ساتھ id کے ساتھ ایک موڈل کو کال کریں :

$ ( '#myModal' )۔ موڈل ( اختیارات )

اختیارات

اختیارات کو ڈیٹا انتساب یا جاوا اسکرپٹ کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-backdrop=""۔

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

طریقے

.modal(اختیارات)

آپ کے مواد کو ایک ماڈل کے طور پر فعال کرتا ہے۔ اختیاری اختیارات کو قبول کرتا ہے object۔

$ ( '#myModal' )۔ موڈل ({
  کی بورڈ : غلط 
})

.modal('ٹوگل')

دستی طور پر ایک موڈل ٹوگل کرتا ہے۔

$ ( '#myModal' )۔ موڈل ( 'ٹوگل' )

.modal('شو')

دستی طور پر ایک موڈل کھولتا ہے۔

$ ( '#myModal' )۔ موڈل ( 'شو' )

.modal('چھپائیں')

دستی طور پر ایک موڈل چھپاتا ہے۔

$ ( '#myModal' )۔ موڈل ( 'چھپائیں' )

تقریبات

بوٹسٹریپ کی موڈل کلاس موڈل فنکشنلٹی میں شامل ہونے کے لیے چند واقعات کو بے نقاب کرتی ہے۔

$ ( '#myModal' )۔ پر ( 'پوشیدہ' ، فنکشن () {   
  // کچھ کرو...
})

مثالیں

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

ایک نوبار کے اندر

ٹیبز کے اندر

استعمال

ڈیٹا اوصاف کے ذریعے

data-toggle="dropdown"ڈراپ ڈاؤن ٹوگل کرنے کے لیے کسی لنک یا بٹن میں شامل کریں ۔

<div class = "ڈراپ ڈاؤن" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > ڈراپ ڈاؤن ٹرگر </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

URLs کو برقرار رکھنے کے لیے، کی data-targetبجائے انتساب کا استعمال کریں href="#"۔

<div class = "ڈراپ ڈاؤن" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    نیچے گرجانا
    <b کلاس = "کیریٹ" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

جاوا اسکرپٹ کے ذریعے

جاوا اسکرپٹ کے ذریعے ڈراپ ڈاؤن کو کال کریں:

$ ( '. ڈراپ ڈاؤن ٹوگل' )۔ ڈراپ ڈاؤن ()

اختیارات

کوئی نہیں۔

طریقے

$().ڈراپ ڈاؤن('ٹوگل')

دیئے گئے نیوی بار یا ٹیب شدہ نیویگیشن کے لیے مینوز کو ٹوگل کرنے کے لیے ایک پروگرامیٹک API۔

navbar میں مثال

ScrollSpy پلگ ان اسکرول پوزیشن کی بنیاد پر نیوی اہداف کو خود بخود اپ ڈیٹ کرنے کے لیے ہے۔ navbar کے نیچے کے علاقے کو اسکرول کریں اور فعال کلاس کی تبدیلی دیکھیں۔ ڈراپ ڈاؤن ذیلی اشیاء کو بھی نمایاں کیا جائے گا۔

استعمال

ڈیٹا اوصاف کے ذریعے

اپنی ٹاپ بار نیویگیشن میں آسانی سے اسکرول اسپی رویہ شامل data-spy="scroll"کرنے کے لیے، صرف اس عنصر میں شامل کریں جس کی آپ جاسوسی کرنا چاہتے ہیں (عام طور پر یہ باڈی ہوگی) اور data-target=".navbar"یہ منتخب کرنے کے لیے کہ کون سا نیویگیشن استعمال کرنا ہے۔ .navآپ ایک جزو کے ساتھ scrollspy استعمال کرنا چاہیں گے ۔

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

جاوا اسکرپٹ کے ذریعے

اسکرول اسپی کو جاوا اسکرپٹ کے ذریعے کال کریں:

$ ( '#navbar' )۔ scrollspy ()

طریقے

.scrollspy('ریفریش')

DOM سے عناصر کو شامل کرنے یا ہٹانے کے ساتھ مل کر scrollspy کا استعمال کرتے وقت، آپ کو ریفریش طریقہ کو اس طرح کال کرنے کی ضرورت ہوگی:

$ ( '[data-spy="scroll"]' )۔ ہر ایک ( فنکشن () {  
  var $spy = $ ( یہ ) scrollspy ( 'ریفریش' )
});

اختیارات

اختیارات کو ڈیٹا انتساب یا جاوا اسکرپٹ کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-offset=""۔

تقریبات

مثال کے ٹیبز

مقامی مواد کے پین کے ذریعے منتقلی کے لیے فوری، متحرک ٹیب کی فعالیت شامل کریں، یہاں تک کہ ڈراپ ڈاؤن مینو کے ذریعے۔

استعمال

جاوا اسکرپٹ کے ذریعے ٹیب ایبل ٹیبز کو فعال کریں (ہر ٹیب کو انفرادی طور پر چالو کرنے کی ضرورت ہے):

$ ( '#myTab a' )۔ کلک کریں ( فنکشن ( ای ) {  
  e _ preventDefault ();
  $ ( یہ ) ٹیب ( 'شو' )؛
})

آپ انفرادی ٹیبز کو کئی طریقوں سے چالو کر سکتے ہیں:

$ ( '#myTab a[href="#profile"]' )۔ ٹیب ( 'شو' )؛ // نام سے ٹیب منتخب کریں۔ 
$ ( '#myTab a:first' )۔ ٹیب ( 'شو' )؛ // پہلا ٹیب منتخب کریں۔ 
$ ( '#myTab a:last' )۔ ٹیب ( 'شو' )؛ // آخری ٹیب منتخب کریں۔ 
$ ( '#myTab li:eq(2) a' )۔ ٹیب ( 'شو' )؛ // تیسرا ٹیب منتخب کریں (0-انڈیکسڈ) 

مارک اپ

آپ کسی بھی جاوا اسکرپٹ کو لکھے بغیر data-toggle="tab"یا data-toggle="pill"کسی عنصر کی وضاحت کرکے ٹیب یا گولی نیویگیشن کو چالو کرسکتے ہیں۔ navٹیب میں اور nav-tabsکلاسز کو شامل ulکرنے سے بوٹسٹریپ ٹیب اسٹائل لاگو ہوگا۔

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > پروفائل </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > پیغامات </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > ترتیبات </a></li>  
</ul>

طریقے

$().tab

ایک ٹیب عنصر اور مواد کے کنٹینر کو چالو کرتا ہے۔ ٹیب میں یا تو data-targetDOM hrefمیں کنٹینر نوڈ کو ٹارگٹ کرنے والا ہونا چاہیے۔

<ul class = "nav nav -tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > گھر </a></li>  
  <li><a href = "#profile" > پروفائل </a></li> 
  <li><a href = "#messages" > پیغامات </a></li> 
  <li><a href = "#settings" > ترتیبات </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pan" id = "messages" > ... </div>  
  <div class = "tab-pan" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( فنکشن () {  
    $ ( '#myTab a:last' )۔ ٹیب ( 'شو' )؛
  })
</script>

تقریبات

$ ( 'a[data-toggle="tab"]' )۔ پر ( 'دکھایا' ، فنکشن ( ای ) {   
  e _ ہدف // چالو ٹیب
  e _ متعلقہ ہدف // پچھلا ٹیب
})

مثالیں

جیسن فریم کے تحریر کردہ بہترین jQuery.tipsy پلگ ان سے متاثر ہو کر؛ ٹول ٹِپس ایک اپ ڈیٹ شدہ ورژن ہیں، جو تصاویر پر انحصار نہیں کرتے، اینیمیشنز کے لیے CSS3 اور مقامی ٹائٹل اسٹوریج کے لیے ڈیٹا-انتساب استعمال کرتے ہیں۔

کارکردگی کی وجوہات کی بناء پر، ٹول ٹِپ اور پاپ اوور ڈیٹا ایپس آپٹ اِن ہیں، یعنی آپ کو خود ان کو شروع کرنا چاہیے ۔

ٹول ٹپس دیکھنے کے لیے نیچے دیے گئے لنکس پر ہوور کریں:

چار سمتیں۔

ان پٹ گروپس میں ٹول ٹپس

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

استعمال

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

$ ( '#مثال' )۔ ٹول ٹپ ( اختیارات )

اختیارات

اختیارات کو ڈیٹا انتساب یا جاوا اسکرپٹ کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-animation=""۔

مارک اپ

<a href = "#" data-toggle = "tooltip" title = "پہلا ٹول ٹپ" > میرے اوپر ہوور کریں </a>   

طریقے

$().tooltip(اختیارات)

ایک ٹول ٹِپ ہینڈلر کو عنصر کے مجموعہ میں منسلک کرتا ہے۔

.tooltip('شو')

ایک عنصر کے ٹول ٹپ کو ظاہر کرتا ہے۔

$ ( '# عنصر' )۔ ٹول ٹپ ( 'شو' )

ٹول ٹپ ('چھپائیں')

ایک عنصر کے ٹول ٹپ کو چھپاتا ہے۔

$ ( '# عنصر' )۔ ٹول ٹپ ( 'چھپائیں' )

ٹول ٹپ ('ٹوگل')

ایک عنصر کے ٹول ٹپ کو ٹوگل کرتا ہے۔

$ ( '# عنصر' )۔ ٹول ٹپ ( 'ٹوگل' )

.tooltip('destroy')

ایک عنصر کے ٹول ٹپ کو چھپاتا اور تباہ کرتا ہے۔

$ ( '# عنصر' )۔ ٹول ٹپ ( 'تباہ' )

مثالیں

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

جامد پاپ اوور

چار اختیارات دستیاب ہیں: اوپر، دائیں، نیچے، اور بائیں سیدھ میں۔

dataجاوا اسکرپٹ اور کسی انتساب کے اندر موجود مواد سے پاپ اوور کے طور پر کوئی مارک اپ نہیں دکھایا گیا ہے۔

لائیو ڈیمو

چار سمتیں۔

استعمال

جاوا اسکرپٹ کے ذریعے پاپ اوور کو فعال کریں:

$ ( '#مثال' )۔ پاپ اوور ( اختیارات )

اختیارات

اختیارات کو ڈیٹا انتساب یا جاوا اسکرپٹ کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-animation=""۔

مارک اپ

کارکردگی کی وجوہات کی بناء پر، ٹول ٹِپ اور پاپ اوور ڈیٹا ایپس آپٹ ان ہیں۔ اگر آپ انہیں استعمال کرنا چاہتے ہیں تو صرف ایک سلیکٹر آپشن کی وضاحت کریں۔

طریقے

$().popover(اختیارات)

عنصر کے مجموعہ کے لیے پاپ اوور شروع کرتا ہے۔

.popover('شو')

ایک عناصر کے پاپ اوور کو ظاہر کرتا ہے۔

$ ( '# عنصر' )۔ پاپ اوور ( 'شو' )

.popover('چھپائیں')

ایک عناصر کے پاپ اوور کو چھپاتا ہے۔

$ ( '# عنصر' )۔ پاپ اوور ( 'چھپائیں' )

.popover('ٹوگل')

ایک عناصر کے پاپ اوور کو ٹوگل کرتا ہے۔

$ ( '# عنصر' )۔ پاپ اوور ( 'ٹوگل' )

.popover('destroy')

ایک عنصر کے پاپ اوور کو چھپاتا اور تباہ کرتا ہے۔

$ ( '# عنصر' )۔ پاپ اوور ( 'تباہ' )

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

اس پلگ ان کے ساتھ تمام انتباہی پیغامات میں برخاست کی فعالیت شامل کریں۔

استعمال

جاوا اسکرپٹ کے ذریعے الرٹ کی برخاستگی کو فعال کریں:

$ ( ". الرٹ" )۔ الرٹ ()

مارک اپ

data-dismiss="alert"خود بخود الرٹ قریبی فعالیت دینے کے لیے بس اپنے کلوز بٹن میں شامل کریں ۔

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

طریقے

$(). الرٹ()

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

الرٹ ('بند')

ایک الرٹ بند کرتا ہے۔

$ ( ". الرٹ" )۔ الرٹ ( 'قریب' )

تقریبات

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

$ ( '#my-alert' )۔ پابند ( 'بند' ، فنکشن () {   
  // کچھ کرو...
})

مثال کے استعمال

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

ریاستی

data-loading-text="Loading..."بٹن پر لوڈنگ حالت استعمال کرنے کے لیے شامل کریں ۔

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > لوڈنگ حالت </button>   

سنگل ٹوگل

data-toggle="button"ایک بٹن پر ٹوگلنگ کو چالو کرنے کے لیے شامل کریں ۔

<button type = "button" class = "btn btn-primary" data-toggle = "button" > سنگل ٹوگل </button>   

چیک باکس

data-toggle="buttons-checkbox"بی ٹی این گروپ پر چیک باکس اسٹائل ٹوگلنگ کے لیے شامل کریں ۔

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > بائیں </ بٹن>  
  <بٹن کی قسم = "بٹن" کلاس = "btn btn-primary" > درمیانی </ بٹن>  
  <button type = "button" class = "btn btn-primary" > دائیں </ بٹن>  
</div>

ریڈیو

data-toggle="buttons-radio"btn-group پر ریڈیو اسٹائل ٹوگلنگ کے لیے شامل کریں ۔

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > بائیں </ بٹن>  
  <بٹن کی قسم = "بٹن" کلاس = "btn btn-primary" > درمیانی </ بٹن>  
  <button type = "button" class = "btn btn-primary" > دائیں </ بٹن>  
</div>

استعمال

جاوا اسکرپٹ کے ذریعے بٹنوں کو فعال کریں:

$ ( '.nav-tabs' )۔ بٹن ()

مارک اپ

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

اختیارات

کوئی نہیں۔

طریقے

$().بٹن('ٹوگل')

ٹوگل پش اسٹیٹ۔ بٹن کو یہ ظاہر کرتا ہے کہ اسے چالو کر دیا گیا ہے۔

<بٹن کی قسم = "بٹن" کلاس = "btn" ڈیٹا ٹوگل = "بٹن" > … </ بٹن>    

$().بٹن('لوڈنگ')

بٹن کی حالت کو لوڈ کرنے پر سیٹ کرتا ہے - بٹن کو غیر فعال کرتا ہے اور متن کو لوڈ کرنے والے متن میں تبدیل کرتا ہے۔ لوڈنگ ٹیکسٹ کو ڈیٹا انتساب کا استعمال کرتے ہوئے بٹن عنصر پر بیان کیا جانا چاہئے data-loading-text۔

<button type = "button" class = "btn" data-loading-text = "لوڈنگ سامان..." > ... </button>    

$().بٹن('ری سیٹ')

بٹن کی حالت کو ری سیٹ کرتا ہے - متن کو اصل متن میں تبدیل کرتا ہے۔

$().بٹن(سٹرنگ)

بٹن کی حالت کو ری سیٹ کرتا ہے - متن کو کسی بھی ڈیٹا کی وضاحت شدہ ٹیکسٹ حالت میں تبدیل کرتا ہے۔

<button type = "button" class = "btn" data-complete-text = "ختم!" > ... </ بٹن>    
<script>
  $ ( '.btn' )۔ بٹن ( 'مکمل' )
</script>

کے بارے میں

ایکارڈینز اور نیویگیشن جیسے ٹوٹنے والے اجزاء کے لیے بیس اسٹائل اور لچکدار سپورٹ حاصل کریں۔

* ٹرانزیشن پلگ ان کو شامل کرنے کی ضرورت ہے۔

ایکارڈین کی مثال

کولپس پلگ ان کا استعمال کرتے ہوئے، ہم نے ایک سادہ ایکارڈین اسٹائل ویجیٹ بنایا:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        ٹوٹنے کے قابل گروپ آئٹم #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body collapse in" >  
      <div class = "accordion-inner" > 
        انیم پاریٹور کلچ...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        ٹوٹنے کے قابل گروپ آئٹم #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body collapse" >  
      <div class = "accordion-inner" > 
        انیم پاریٹور کلچ...
      </div>
    </div>
  </div>
</div>
...

آپ ایکارڈین مارک اپ کے بغیر بھی پلگ ان استعمال کر سکتے ہیں۔ ایک بٹن بنائیں دوسرے عنصر کے پھیلنے اور گرنے کو ٹوگل کریں۔

<بٹن کی قسم = "بٹن" کلاس = "btn btn-خطرہ" data- toggle = "collapse" data-target = "#demo" >    
  سادہ ٹوٹنے والا
</ بٹن>
 
<div id = "demo" class = "collapse in" > … </div>  

استعمال

ڈیٹا اوصاف کے ذریعے

کسی ٹوٹنے والے عنصر کا کنٹرول خود بخود تفویض کرنے کے لیے صرف عنصر میں شامل کریں data-toggle="collapse"اور a کریں۔ انتساب کلیپس کو لاگو کرنے کے لیے ایک سی ایس ایس سلیکٹر کو قبول کرتا ہے data-target۔ data-targetکلاس collapseکو ٹوٹنے والے عنصر میں شامل کرنا یقینی بنائیں۔ اگر آپ اسے ڈیفالٹ کھولنا چاہتے ہیں تو اضافی کلاس شامل کریں in۔

اکارڈیئن نما گروپ مینجمنٹ کو کولیپس ایبل کنٹرول میں شامل کرنے کے لیے، ڈیٹا انتساب شامل کریں data-parent="#selector"۔ اس کو عملی شکل میں دیکھنے کے لیے ڈیمو سے رجوع کریں۔

جاوا اسکرپٹ کے ذریعے

اس کے ساتھ دستی طور پر فعال کریں:

$ ( ". گرنا" )۔ گرنا ()

اختیارات

اختیارات کو ڈیٹا انتساب یا جاوا اسکرپٹ کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-parent=""۔

طریقے

.collaps(اختیارات)

آپ کے مواد کو ایک ٹوٹنے کے قابل عنصر کے طور پر فعال کرتا ہے۔ اختیاری اختیارات کو قبول کرتا ہے object۔

$ ( '#myCollapsible' )۔ گرنا ({
  ٹوگل : غلط 
})

.collapse('toggle')

دکھائے جانے یا چھپنے کے لیے ٹوٹنے کے قابل عنصر کو ٹوگل کرتا ہے۔

.collapse('شو')

ایک ٹوٹنے والا عنصر دکھاتا ہے۔

.collaps('چھپائیں')

ایک ٹوٹنے والا عنصر چھپاتا ہے۔

تقریبات

بوٹسٹریپ کی گرنے والی کلاس گرنے کی فعالیت کو جوڑنے کے لیے چند واقعات کو بے نقاب کرتی ہے۔

$ ( '#myCollapsible' )۔ پر ( 'پوشیدہ' ، فنکشن () {   
  // کچھ کرو...
})

مثال carousel

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

پہلا تھمب نیل لیبل

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.

تیسرا تھمب نیل لیبل

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.

‹ ›

<div id = "myCarousel" class = "carousel slide" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- carousel اشیاء -->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

استعمال

ڈیٹا اوصاف کے ذریعے

carousel کی پوزیشن کو آسانی سے کنٹرول کرنے کے لیے ڈیٹا کی خصوصیات کا استعمال کریں۔ data-slideمطلوبہ الفاظ کو قبول کرتا ہے prevیا next، جو اس کی موجودہ پوزیشن کے نسبت سلائیڈ پوزیشن کو تبدیل کرتا ہے۔ متبادل طور پر، data-slide-toایک خام سلائیڈ انڈیکس کو carousel میں منتقل کرنے کے لیے استعمال کریں data-slide-to="2"، جو سلائیڈ کی پوزیشن کو کسی خاص انڈیکس سے شروع کرتا 0ہے۔

جاوا اسکرپٹ کے ذریعے

carousel کو دستی طور پر اس کے ساتھ کال کریں:

$ ( '. carousel' ). carousel ()

اختیارات

اختیارات کو ڈیٹا انتساب یا JavaScriptz کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-interval=""۔

طریقے

.carousel(اختیارات)

ایک اختیاری اختیارات کے ساتھ carousel objectکو شروع کرتا ہے اور آئٹمز کے ذریعے سائیکل چلانا شروع کرتا ہے۔

$ ( '. carousel' ). carousel ({
  وقفہ : 2000 
})

.carousel('cycle')

بائیں سے دائیں کیروسل آئٹمز کے ذریعے سائیکل۔

.carousel('pause')

carousel کو آئٹمز کے ذریعے سائیکل چلانے سے روکتا ہے۔

.carousel(نمبر)

carousel کو کسی خاص فریم پر چکر لگاتا ہے (0 پر مبنی، ایک صف کی طرح)۔

.carousel('پچھلا')

پچھلی آئٹم پر سائیکل۔

.carousel('اگلا')

اگلی آئٹم پر سائیکل۔

تقریبات

بوٹسٹریپ کی carousel کلاس carousel کی فعالیت میں جڑنے کے لیے دو واقعات کو بے نقاب کرتی ہے۔

مثال

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

<input type = "text" data- provide = "typeahead" >  

autocomplete="off"آپ ڈیفالٹ براؤزر مینوز کو بوٹسٹریپ ٹائپ ہیڈ ڈراپ ڈاؤن پر ظاہر ہونے سے روکنے کے لیے سیٹ کرنا چاہیں گے ۔

استعمال

ڈیٹا اوصاف کے ذریعے

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

جاوا اسکرپٹ کے ذریعے

ٹائپ ہیڈ کو دستی طور پر اس کے ساتھ کال کریں:

$ ( '.typeahead' )۔ ٹائپ ہیڈ ()

اختیارات

اختیارات کو ڈیٹا انتساب یا جاوا اسکرپٹ کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-source=""۔

طریقے

.typeahead(اختیارات)

ٹائپ ہیڈ کے ساتھ ایک ان پٹ کو شروع کرتا ہے۔

مثال

بائیں طرف سب نیویگیشن affix پلگ ان کا لائیو ڈیمو ہے۔

استعمال

ڈیٹا اوصاف کے ذریعے

کسی بھی عنصر میں آسانی سے affix برتاؤ شامل data-spy="affix"کرنے کے لیے، صرف اس عنصر میں شامل کریں جس کی آپ جاسوسی کرنا چاہتے ہیں۔ پھر یہ بتانے کے لیے آفسیٹس کا استعمال کریں کہ کسی عنصر کی پننگ کو کب آن اور آف کرنا ہے۔

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

جاوا اسکرپٹ کے ذریعے

جاوا اسکرپٹ کے ذریعے affix پلگ ان کو کال کریں:

$ ( '#navbar' )۔ چسپاں کرنا ()

اختیارات

اختیارات کو ڈیٹا انتساب یا جاوا اسکرپٹ کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-offset-top="200"۔