ماڈلز کے بارے میں

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

جامد مثال

ذیل میں ایک مستحکم طور پر پیش کردہ ماڈل ہے۔

لائیو ڈیمو

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

بوٹسٹریپ موڈل کا استعمال

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

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

اختیارات

مارک اپ

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

اس کے علاوہ، اپنے موڈل مثال میں اختیارات شامل کرنے کے لیے، انہیں صرف کنٹرول عنصر یا خود موڈل مارک اپ پر اضافی ڈیٹا کی خصوصیات کے طور پر شامل کریں۔

<a class = "btn" data-toggle = "modal" href = "#myModal" > موڈل لانچ کریں </a>    

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

طریقے

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

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

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

.modal('ٹوگل')

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

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

.modal('شو')

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

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

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

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

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

تقریبات

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

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

ڈراپ ڈاؤن کے بارے میں

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

مثالیں

ڈراپ ڈاؤن کی جانچ کرنے کے لیے نیچے navbar اور گولیوں میں ڈراپ ڈاؤن نیوی لنکس پر کلک کریں۔

• باقاعدہ لنک
• نیچے گرجانا
  • Action
  • Another action
  • Something else here
  • Separated link
• ڈراپ ڈاؤن 2
  • Action
  • Another action
  • Something else here
  • Separated link
• ڈراپ ڈاؤن 3
  • Action
  • Another action
  • Something else here
  • Separated link

bootstrap-dropdown.js استعمال کرنا

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

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

مارک اپ

کسی بھی عنصر میں فوری طور پر ڈراپ ڈاؤن فعالیت شامل کرنے کے لیے صرف شامل کریں data-toggle="dropdown"اور کوئی بھی درست بوٹسٹریپ ڈراپ ڈاؤن خود بخود چالو ہوجائے گا۔

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > باقاعدہ لنک </a></li>  
  <li class = "ڈراپ ڈاؤن" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "ڈراپ ڈاؤن" href = "#menu1" >   
      نیچے گرجانا
      <b کلاس = "کیریٹ" ></b> 
    </a>
    <ul class = "ڈراپ ڈاؤن مینو" > 
      <li><a href = "#" > ایکشن </a></li> 
      <li><a href = "#" > ایک اور کارروائی </a></li> 
      <li><a href = "#" > یہاں کچھ اور ہے </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > الگ کردہ لنک </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li کلاس = "ڈراپ ڈاؤن" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      نیچے گرجانا
      <b کلاس = "کیریٹ" ></b> 
    </a>
    <ul class = "ڈراپ ڈاؤن مینو" > 
      ...
    </ul>
  </li>
</ul>

طریقے

$() ڈراپ ڈاؤن()

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

اسکرول اسپی پلگ ان اسکرول پوزیشن کی بنیاد پر نیوی اہداف کو خود بخود اپ ڈیٹ کرنے کے لیے ہے۔

scrollspy کے ساتھ navbar کی مثال

نیچے کے علاقے کو اسکرول کریں اور نیویگیشن اپ ڈیٹ دیکھیں۔ ڈراپ ڈاؤن ذیلی آئٹمز کو بھی نمایاں کیا جائے گا۔ کوشش کرو!

bootstrap-scrollspy.js کا استعمال کرتے ہوئے

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

$ ( '#navbar' )۔ scrollspy ()

مارک اپ

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

<body data-spy = "اسکرول" > ... </body>  

طریقے

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

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

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

اختیارات

تقریبات

یہ پلگ ان مقامی مواد کے ذریعے منتقلی کے لیے فوری، متحرک ٹیب اور گولی کی فعالیت کا اضافہ کرتا ہے۔

مثال کے ٹیبز

پوشیدہ پینوں کے درمیان ٹوگل کرنے کے لیے نیچے دیے گئے ٹیبز پر کلک کریں، یہاں تک کہ ڈراپ ڈاؤن مینو کے ذریعے۔

• گھر
• پروفائل
• نیچے گرجانا
  • @fat
  • @mdo

bootstrap-tab.js استعمال کرنا

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

$ ( '#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

ایک ٹیب عنصر اور مواد کے کنٹینر کو چالو کرتا ہے۔ ٹیب میں DOM میں کنٹینر نوڈ کو ٹارگٹ کرنے والا data-targetیا تو ہونا چاہیے۔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-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( فنکشن () {  
    $ ( '#myTab a:last' )۔ ٹیب ( 'شو' )؛
  })
</script>

تقریبات

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

ٹول ٹپس کے بارے میں

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

ٹول ٹپس کے استعمال کی مثال

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

bootstrap-tooltip.js استعمال کرنا

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

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

اختیارات

مارک اپ

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

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

طریقے

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

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

.tooltip('شو')

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

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

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

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

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

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

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

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

پاپورز کے بارے میں

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

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

مثال کے طور پر ہوور پاپ اوور

پاپ اوور کو متحرک کرنے کے لیے بٹن پر ہوور کریں۔

bootstrap-popover.js استعمال کرنا

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

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

اختیارات

مارک اپ

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

طریقے

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

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

.popover('شو')

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

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

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

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

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

.popover('ٹوگل')

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

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

انتباہات کے بارے میں

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

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

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

bootstrap-alert.js استعمال کرنا

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

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

مارک اپ

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

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

طریقے

$() الرٹ()

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

الرٹ ('بند')

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

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

تقریبات

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

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

کے بارے میں

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

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

ریاستوں اور ٹوگلز کے لیے بٹن پلگ ان کا استعمال کریں۔

bootstrap-button.js استعمال کرنا

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

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

مارک اپ

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

<!-- ایک بٹن پر ٹوگلنگ کو چالو کرنے کے لیے data-toggle="button" شامل کریں -->
<بٹن کلاس = "btn" ڈیٹا ٹوگل = "بٹن" > سنگل ٹوگل </ بٹن>  
 
<!-- btn-group پر چیک باکس اسٹائل ٹوگلنگ کے لیے data-toggle="buttons-checkbox" شامل کریں -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <بٹن کلاس = "btn" > بائیں </ بٹن> 
  <بٹن کلاس = "btn" > درمیانی </ بٹن> 
  <بٹن کلاس = "btn" > دائیں </ بٹن> 
</div>
 
<!-- btn-group پر ریڈیو اسٹائل ٹوگلنگ کے لیے data-toggle="buttons-radio" شامل کریں -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <بٹن کلاس = "btn" > بائیں </ بٹن> 
  <بٹن کلاس = "btn" > درمیانی </ بٹن> 
  <بٹن کلاس = "btn" > دائیں </ بٹن> 
</div>

طریقے

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

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

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

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

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

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

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

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

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

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

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

کے بارے میں

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

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

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

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

bootstrap-collapse.js استعمال کرنا

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

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

اختیارات

مارک اپ

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

<بٹن کلاس = "btn btn-danger" data- toggle = "collapse" data-target = "#demo" >   
  سادہ ٹوٹنے والا
</ بٹن>
 
<div id = "demo" class = "collaps in" > … </div>  

طریقے

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

‹ ›

bootstrap-carousel.js استعمال کرنا

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

$ ( '. carousel' ). carousel ()

اختیارات

مارک اپ

ڈیٹا کی خصوصیات پچھلے اور اگلے کنٹرولز کے لیے استعمال ہوتی ہیں۔ ذیل میں مثال مارک اپ کو چیک کریں۔

<div id = "myCarousel" class = "carousel slide" >  
  <!-- 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(اختیارات)

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

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

.carousel('cycle')

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

.carousel('pause')

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

.carousel(نمبر)

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

.carousel('پچھلا')

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

.carousel('اگلا')

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

تقریبات

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

کے بارے میں

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

مثال

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

bootstrap-typeahead.js استعمال کرنا

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

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

اختیارات

Markup

Add data attributes to register an element with typeahead functionality.

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

Methods

.typeahead(options)

Initializes an input with a typeahead.