মডালৰ বিষয়ে

এটা সুশৃংখলিত, কিন্তু নমনীয়, কেৱল নূন্যতম প্ৰয়োজনীয় কাৰ্য্যকৰীতা আৰু স্মাৰ্ট অবিকল্পিতসমূহৰ সৈতে পৰম্পৰাগত জাভাস্ক্রিপ্ট মডাল প্লাগইন লয়।

ষ্টেটিক উদাহৰণ

তলত এটা স্থিতিশীলভাৱে ৰেণ্ডাৰ কৰা মডাল দিয়া হৈছে।

লাইভ ডেমো

তলৰ বুটামটো ক্লিক কৰি জাভাস্ক্রিপ্টৰ যোগেদি এটা মডাল টগল কৰক। ই তললৈ স্লাইড হৈ পৃষ্ঠাৰ ওপৰৰ পৰা ফিকে হৈ যাব।

bootstrap-modal ব্যৱহাৰ কৰি

জাভাস্ক্রিপ্টৰ জৰিয়তে মডাল কল কৰক:

$ ( '#মোৰ মডাল' ). modal ( বিকল্পসমূহ )

বিকল্পসমূহ

মাৰ্কআপ

আপুনি আপোনাৰ পৃষ্ঠাত সহজে মডাল সক্ৰিয় কৰিব পাৰে জাভাস্ক্রিপ্টৰ এটা শাৰী লিখিব নালাগে। মাত্ৰ data-toggle="modal"এটা নিয়ন্ত্ৰক উপাদানত সংহতি কৰক data-target="#foo"বা href="#foo"যি এটা মডাল উপাদান id ৰ সৈতে সংগতি ৰাখে, আৰু যেতিয়া ক্লিক কৰা হয়, ই আপোনাৰ মডাল আৰম্ভ কৰিব।

লগতে, আপোনাৰ মডাল উদাহৰণত বিকল্পসমূহ যোগ কৰিবলে, মাত্ৰ সিহতক নিয়ন্ত্ৰণ উপাদান বা মডাল মাৰ্কআপ নিজেই অতিৰিক্ত তথ্য বৈশিষ্ট্য হিচাপে অন্তৰ্ভুক্ত কৰক।

<a class = "btn" data-toggle = "ম'ডাল" href = "#myModal" > মডাল আৰম্ভ কৰক </a>    

<div class = "ম'ডাল লুকুৱাওক" id = "myModal" >  
  <div class = "ম'ডাল-হেডাৰ" > 
    <বুটামৰ ধৰণ = "বুটাম" শ্ৰেণী = "বন্ধ কৰক" data-dismiss = "ম'ডাল" > × </button>   
    <h3> মডাল হেডাৰ </h3>
  </div>
  <div class = "মডাল-শৰীৰ" > 
    <p> এটা মিহি শৰীৰ... </p>
  </div>
  <div class = "মডাল-ফুটাৰ" > 
    <a href = "#" class = "btn" data-dismiss = "ম'ডাল" > বন্ধ কৰক </a>   
    <a href = "#" class = "btn btn-primary" > পৰিবৰ্তনসমূহ সংৰক্ষণ কৰক </a>  
  </div>
</div>

পদ্ধতিসমূহ

.modal(বিকল্পসমূহ)

আপোনাৰ বিষয়বস্তু এটা মডাল হিচাপে সক্ৰিয় কৰে। এটা বৈকল্পিক বিকল্পসমূহ গ্ৰহণ কৰে object।

$ ( '#মোৰ মডাল' ). মডাল ({
  keyboard : মিছা 
})

.modal('টগল')

এটা মডাল হস্তচালিতভাৱে টগল কৰে।

$ ( '#মোৰ মডাল' ). modal ( 'টগল' )

.modal('দেখাওক')

হস্তচালিতভাৱে এটা মডাল খোলে।

$ ( '#মোৰ মডাল' ). modal ( 'দেখান' )

.modal('লুকুৱাওক')

এটা মডাল হস্তচালিতভাৱে লুকুৱাই ৰাখে।

$ ( '#মোৰ মডাল' ). modal ( 'লুকুৱাওক' )

ইভেন্টসমূহ

বুটষ্ট্ৰেপৰ মডাল শ্ৰেণীয়ে মডাল কাৰ্য্যকৰীতাত হুক কৰাৰ বাবে কেইটামান ইভেন্ট উন্মোচন কৰে।

$ ( '#মোৰ মডাল' ). on ( 'লুকাই থকা' , ফাংচন () {   
  // কিবা এটা কৰক...
})

ড্ৰপডাউনৰ বিষয়ে

এই সৰল প্লাগইনৰ সৈতে Bootstrap ৰ প্ৰায় যিকোনো বস্তুত ড্ৰপডাউন মেনুসমূহ যোগ কৰক । বুটষ্ট্ৰেপে নেভবাৰ, টেবসমূহ, আৰু বড়িসমূহত সম্পূৰ্ণ ড্ৰপডাউন মেনু সমৰ্থন অন কৰে।

উদাহৰণ

ড্ৰপডাউন পৰীক্ষা কৰিবলৈ তলৰ navbar আৰু pills ত থকা dropdown nav links ত ক্লিক কৰক।

• নিয়মীয়া লিংক
• ড্ৰপডাউন
  • Action
  • Another action
  • Something else here
  • Separated link
• ড্ৰপডাউন ২
  • 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 = "নৱ নাভ-বড়ি" > 
  <li class = "সক্ৰিয়" ><a href = "#" > নিয়মীয়া সংযোগ </a></li>  
  <li শ্ৰেণী = "ড্ৰপডাউন" id = "মেনু1" >  
    <a class = "ড্ৰপডাউন-টগল" data-toggle = "ড্ৰপডাউন" href = "#মেনু1" >   
      ড্ৰপডাউন
      <b class = "কেৰেট" </b> 
    </a>
    <ul class = "ড্ৰপডাউন-মেনু" > 
      <li><a href = "#" > কাৰ্য্য </a></li> 
      <li><a href = "#" > অন্য এটা কাৰ্য্য </a></li> 
      <li><a href = "#" > ইয়াত আন কিবা এটা </a></li> 
      <li class = "বিভাজক" </li> 
      <li><a href = "#" > পৃথক কৰা সংযোগ </a></li> 
    </ul>
  </li>
  ...
</ul>

URL সমূহ অক্ষত ৰাখিবলৈ, data-targetৰ পৰিবৰ্তে বৈশিষ্ট্য ব্যৱহাৰ কৰক href="#"।

<ul class = "নৱ নাভ-বড়ি" > 
  <li class = "ড্ৰপডাউন" > 
    <a class = "ড্ৰপডাউন-টগল" data-toggle = "ড্ৰপডাউন" ডাটা-লক্ষ্য = "#" href = "পথ/পৃষ্ঠালৈ/পৃষ্ঠা.html" >    
      ড্ৰপডাউন
      <b class = "কেৰেট" </b> 
    </a>
    <ul class = "ড্ৰপডাউন-মেনু" > 
      ...
    </ul>
  </li>
</ul>

পদ্ধতিসমূহ

$().ড্ৰপডাউন()

এটা প্ৰদত্ত navbar বা টেব কৰা নেভিগেচনৰ বাবে মেনুসমূহ সক্ৰিয় কৰাৰ বাবে এটা প্ৰগ্ৰেমেটিক api।

ScrollSpy প্লাগইন স্ক্ৰল অৱস্থানৰ ওপৰত ভিত্তি কৰি স্বয়ংক্ৰিয়ভাৱে nav লক্ষ্যসমূহ আপডেইট কৰাৰ বাবে।

scrollspy ৰ সৈতে উদাহৰণ navbar

তলৰ অঞ্চলটো স্ক্ৰল কৰক আৰু নেভিগেচন আপডেট চাওক। ড্ৰপডাউন উপ বস্তুবোৰো হাইলাইট কৰা হ’ব। চেষ্টা কৰক!

bootstrap-scrollspy.js ব্যৱহাৰ কৰি

জাভাস্ক্রিপ্টৰ জৰিয়তে scrollspy কল কৰক:

$ ( '#নৱবাৰ' ). scrollspy ()

মাৰ্কআপ

আপোনাৰ টপবাৰ নেভিগেচনত সহজে স্ক্ৰলস্পাই আচৰণ যোগ কৰিবলে, data-spy="scroll"আপুনি চোৰাংচোৱাগিৰি কৰিব বিচৰা উপাদানটোত যোগ কৰক (বেছিভাগ সাধাৰণতে এইটো হ'ব শৰীৰ)।

<body data-spy = "স্ক্ৰল কৰক" > ... </body>  

পদ্ধতিসমূহ

.scrollspy('সতেজ')

DOM ৰ পৰা উপাদানসমূহ যোগ বা আঁতৰোৱাৰ সৈতে scrollspy ব্যৱহাৰ কৰাৰ সময়ত, আপুনি সতেজ পদ্ধতিক এনেদৰে কল কৰিব লাগিব:

$ ( '[ডাটা-স্পাই="স্ক্ৰ'ল"]' ). প্ৰতিটো ( ফাংচন () {  
  var $spy = $ ( এইটো ). scrollspy ( 'সতেজ' )
});

বিকল্পসমূহ

ইভেন্টসমূহ

এই প্লাগিনে স্থানীয় বিষয়বস্তুৰ মাজেৰে পৰিৱৰ্তনৰ বাবে দ্ৰুত, গতিশীল টেব আৰু পিল কাৰ্য্যকৰীতা যোগ কৰে।

উদাহৰণ টেবসমূহ

লুকাই থকা পেনসমূহৰ মাজত টগল কৰিবলে তলৰ টেবসমূহ ক্লিক কৰক, আনকি ড্ৰপডাউন মেনুসমূহৰ যোগেদিও।

• গৃহ
• ৰূপৰেখা
• ড্ৰপডাউন
  • @fat
  • @mdo

bootstrap-tab.js ব্যৱহাৰ কৰি

জাভাস্ক্রিপ্টৰ যোগেদি টেবেবল টেবসমূহ সামৰ্থবান কৰক (প্ৰতিটো টেব পৃথকে পৃথকে সক্ৰিয় কৰিব লাগিব):

$ ( '#মোৰ টেব এটা' ). ক্লিক কৰক ( ফাংচন ( e ) {  
  ঙ . preventDefault ();
  $ ( এইটো ). tab ( 'দেখাওক' );
})

আপুনি কেইবাটাও উপায়েৰে ব্যক্তিগত টেবসমূহ সক্ৰিয় কৰিব পাৰে:

$ ( '#মোৰ টেব এটা[href="#প্ৰফাইল"]' ). tab ( 'দেখাওক' ); // নামৰ দ্বাৰা টেব নিৰ্বাচন কৰক 
$ ( '#মোৰ টেব এটা:প্ৰথম' ). tab ( 'দেখাওক' ); // প্ৰথম টেব নিৰ্বাচন কৰক 
$ ( '#মোৰ টেব এটা:শেষ' ). tab ( 'দেখাওক' ); // শেষৰ টেব নিৰ্বাচন কৰক 
$ ( '#মোৰ টেব li:eq(২) a' ). tab ( 'দেখাওক' ); // তৃতীয় টেব নিৰ্ব্বাচন কৰক (0-indexed) 

মাৰ্কআপ

আপুনি কোনো জাভাস্ক্রিপ্ট লিখা নোহোৱাকৈ এটা টেব বা পিল নেভিগেচন সক্ৰিয় কৰিব পাৰে কেৱল এটা উপাদান ধাৰ্য্য কৰি data-toggle="tab"বা তাৰ ওপৰত। টেবত আৰু শ্ৰেণীসমূহ data-toggle="pill"যোগ কৰিলে বুটষ্ট্ৰেপ টেব ষ্টাইলিং প্ৰয়োগ কৰিব।navnav-tabsul

<ul class = "nav nav-টেবসমূহ" > 
  <li><a href = "#ঘৰ" ডাটা-টগল = "টেব" > ঘৰ </a></li>  
  <li><a href = "#প্ৰফাইল" data-toggle = "টেব" > আলেখ্যন </a></li>  
  <li><a href = "#messages" data-toggle = "টেব" > বাৰ্তাসমূহ </a></li>  
  <li><a href = "#সংহতিসমূহ" data-toggle = "টেব" > সংহতিসমূহ </a></li>  
</ul>

পদ্ধতিসমূহ

$().টেব

এটা টেব উপাদান আৰু বিষয়বস্তু ধাৰক সক্ৰিয় কৰে। টেবত DOM ত এটা data-targetবা এটা hrefলক্ষ্য কৰি এটা ধাৰক ন'ড থাকিব লাগে।

<ul class = "nav nav-tabs" id = "মোৰ টেব" >  
  <li class = "সক্ৰিয়" ><a href = "#ঘৰ" > ঘৰ </a></li>  
  <li><a href = "#প্ৰফাইল" > আলেখ্যন </a></li> 
  <li><a href = "#messages" > বাৰ্তাসমূহ </a></li> 
  <li><a href = "#settings" > সংহতিসমূহ </a></li> 
</ul>
 
<div class = "টেব-সামগ্ৰী" > 
  <div class = "টেব-পেন সক্ৰিয়" id = "ঘৰ" > ... </div>  
  <div class = "টেব-পেন" id = "প্ৰফাইল" > ... </div>  
  <div class = "টেব-পেন" id = "বাৰ্তাসমূহ" > ... </div>  
  <div class = "টেব-পেন" id = "সংহতিসমূহ" > ... </div>  
</div>
 
<স্ক্রিপ্ট>
  $ ( ফাংচন () {  
    $ ( '#মোৰ টেব এটা:শেষ' ). tab ( 'দেখাওক' );
  })
</script>

ইভেন্টসমূহ

$ ( 'a[ডাটা-টগল="টেব"]' ). on ( 'দেখা হৈছে' , ফাংচন ( e ) {   
  ঙ . লক্ষ্য // সক্ৰিয় কৰা টেব
  ঙ . relatedTarget // পূৰ্বৰ টেব
})

সঁজুলি টিপছৰ বিষয়ে

জেছন ফ্ৰেমৰ দ্বাৰা লিখা চমৎকাৰ jQuery.tipsy প্লাগইনৰ দ্বাৰা অনুপ্ৰাণিত; সঁজুলিটিপসমূহ এটা আপডেইট কৰা সংস্কৰণ, যি ছবিসমূহৰ ওপৰত নিৰ্ভৰ নকৰে, এনিমেচনসমূহৰ বাবে css3 ব্যৱহাৰ কৰে, আৰু স্থানীয় শিৰোনাম সংৰক্ষণৰ বাবে ডাটা-বৈশিষ্ট্যসমূহ।

Tooltips ৰ উদাহৰণ ব্যৱহাৰ

সঁজুলি টিপছ চাবলৈ তলৰ লিংকসমূহৰ ওপৰত হাউভাৰ কৰক:

bootstrap-tooltip.js ব্যৱহাৰ কৰি

জাভাস্ক্রিপ্টৰ যোগেদি সঁজুলিটিপ ট্ৰিগাৰ কৰক:

$ ( '#উদাহৰণ' ). সঁজুলি টিপ ( বিকল্পসমূহ )

বিকল্পসমূহ

মাৰ্কআপ

পৰিৱেশন কাৰণৰ বাবে, Tooltip আৰু Popover data-apis opt in হয়। যদি আপুনি সিহতক ব্যৱহাৰ কৰিব বিচাৰে মাত্ৰ এটা নিৰ্বাচক বিকল্প ধাৰ্য্য কৰক।

<a href = "#" rel = "সঁজুলিৰ টিপ" title = "প্ৰথম সঁজুলি টিপ" > মোৰ ওপৰত মাউছ কৰক </a>   

পদ্ধতিসমূহ

$().tooltip(বিকল্পসমূহ)

এটা উপাদান সংগ্ৰহৰ সৈতে এটা সঁজুলিটিপ নিয়ন্ত্ৰক সংযুক্ত কৰে।

.tooltip('দেখাওক')

এটা উপাদানৰ সঁজুলিটিপ প্ৰকাশ কৰে।

$ ( '#উপাদান' ). tooltip ( 'দেখাওক' )

.tooltip('লুকুৱাওক')

এটা উপাদানৰ সঁজুলিটিপ লুকুৱাই ৰাখে।

$ ( '#উপাদান' ). tooltip ( 'লুকুৱাওক' )

.tooltip('টগল')

এটা উপাদানৰ সঁজুলিটিপ টগল কৰে।

$ ( '#উপাদান' ). সঁজুলি টিপ ( 'টগল' )

popovers সম্পৰ্কে

গৌণ তথ্য আৱাসৰ বাবে যিকোনো উপাদানত আইপেডত থকাৰ দৰে বিষয়বস্তুৰ সৰু সৰু অভাৰলে যোগ কৰক।

* Tooltip অন্তৰ্ভুক্ত কৰাৰ প্ৰয়োজন

উদাহৰণ hover popover

পপঅভাৰ ট্ৰিগাৰ কৰিবলৈ বুটামৰ ওপৰত মাউছ কৰক।

bootstrap-popover.js ব্যৱহাৰ কৰি

জাভাস্ক্রিপ্টৰ যোগেদি popovers সামৰ্থবান কৰক:

$ ( '#উদাহৰণ' ). popover ( বিকল্পসমূহ )

বিকল্পসমূহ

মাৰ্কআপ

পৰিৱেশন কাৰণৰ বাবে, Tooltip আৰু Popover data-apis opt in হয়। যদি আপুনি সিহতক ব্যৱহাৰ কৰিব বিচাৰে মাত্ৰ এটা নিৰ্বাচক বিকল্প ধাৰ্য্য কৰক।

পদ্ধতিসমূহ

$().popover(বিকল্পসমূহ)

এটা উপাদান সংগ্ৰহৰ বাবে popovers আৰম্ভ কৰে।

.popover('দেখান')

এটা উপাদান popover প্ৰকাশ কৰে।

$ ( '#উপাদান' ). popover ( 'দেখান' )

.popover('লুকুৱাওক')

এটা উপাদান popover লুকুৱাই ৰাখে।

$ ( '#উপাদান' ). popover ( 'লুকুৱাওক' )

.popover('টগল')

এটা উপাদান পপঅভাৰ টগল কৰে।

$ ( '#উপাদান' ). popover ( 'টগল' )

সতৰ্কবাণীৰ বিষয়ে

সতৰ্কবাণী প্লাগইন সতৰ্কবাণীসমূহত বন্ধ কাৰ্য্যকৰীতা যোগ কৰাৰ বাবে এটা সৰু শ্ৰেণী।

উদাহৰণ সতৰ্কবাণী

সতৰ্কবাণীসমূহ প্লাগ-ইনে নিয়মীয়া সতৰ্কবাণী বাৰ্তাসমূহত কাম কৰে, আৰু বাৰ্তাসমূহ ব্লক কৰে।

bootstrap-alert.js ব্যৱহাৰ কৰি

জাভাস্ক্রিপ্টৰ যোগেদি এটা সতর্কতা বাতিল সামৰ্থবান কৰক:

$ ( ".সতৰ্কবাণী" ). সতৰ্কবাণী ()

মাৰ্কআপ

মাত্ৰ data-dismiss="alert"আপোনাৰ বন্ধ বুটামত যোগ কৰক স্বয়ংক্ৰিয়ভাৱে এটা সতৰ্কবাণী বন্ধ কাৰ্য্যকৰীতা দিবলৈ।

<a class = "বন্ধ কৰক" data-dismiss = "সতৰ্কবাণী" href = "#" > × </a>   

পদ্ধতিসমূহ

$().সতৰ্কবাণী()

সকলো সতৰ্কবাণী বন্ধ কাৰ্য্যকৰীতাৰ সৈতে ৰেপ কৰে। আপোনাৰ সতৰ্কবাণীসমূহ বন্ধ কৰাৰ সময়ত এনিমেট আউট কৰিবলৈ, নিশ্চিত কৰক যে সিহঁতৰ ওপৰত ইতিমধ্যে .fadeআৰু .inশ্ৰেণী প্ৰয়োগ কৰা হৈছে।

.alert('বন্ধ কৰক')

এটা সতৰ্কবাণী বন্ধ কৰে।

$ ( ".সতৰ্কবাণী" ). alert ( 'বন্ধ কৰক' )

ইভেন্টসমূহ

বুটষ্ট্ৰেপৰ সতৰ্কতা শ্ৰেণীয়ে সতৰ্কতা কাৰ্য্যকৰীতাত হুক কৰাৰ বাবে কেইটামান ইভেন্ট উন্মোচন কৰে।

$ ( '#মোৰ-সতৰ্কবাণী' ). bind ( 'বন্ধ' , ফাংচন () {   
  // কিবা এটা কৰক...
})

বিষয়ে

বুটামৰ সৈতে অধিক কৰক। নিয়ন্ত্ৰণ বুটামে সঁজুলিদণ্ডিকাৰ দৰে অধিক উপাদানৰ বাবে বুটামৰ গোটসমূহ অৱস্থান কৰে বা সৃষ্টি কৰে।

উদাহৰণ ব্যৱহাৰ

অৱস্থা আৰু টগলসমূহৰ বাবে বুটাম প্লাগইন ব্যৱহাৰ কৰক।

bootstrap-button.js ব্যৱহাৰ কৰি

জাভাস্ক্রিপ্টৰ যোগেদি বুটাম���মূহ সামৰ্থবান কৰক:

$ ( '.nav-tabs' ). বুটাম ()

মাৰ্কআপ

তথ্য বৈশিষ্ট্যসমূহ বুটাম প্লাগইনৰ অবিচ্ছেদ্য অংগ। বিভিন্ন মাৰ্কআপ ধৰণৰ বাবে তলৰ উদাহৰণ ক'ডটো চাওক।

<!-- এটা বুটামত টগলিং সক্ৰিয় কৰিবলে data-toggle="button" যোগ কৰক -->
<button class = "btn" data-toggle = "বুটাম" > একক টগল </button>  
 
<!-- btn-group --> ত চেকবক্স শৈলী টগলিঙৰ বাবে data-toggle="buttons-checkbox" যোগ কৰক
<div class = "btn-group" ডাটা-টগল = "বুটাম-চেকবক্স" >  
  <button class = "btn" > বাওঁফালে </button> 
  <button class = "btn" > মাজৰ </button > 
  <button class = "btn" > সোঁ </button> 
</div>
 
<!-- btn-group ত ৰেডিঅ' শৈলী টগলিঙৰ বাবে data-toggle="buttons-radio" যোগ কৰক -->
<div শ্ৰেণী = "btn-গোট" ডাটা-টগল = "বুটাম-ৰেডিঅ'" >  
  <button class = "btn" > বাওঁফালে </button> 
  <button class = "btn" > মাজৰ </button > 
  <button class = "btn" > সোঁ </button> 
</div>

পদ্ধতিসমূহ

$().বুটাম('টগল')

ঠেলা অৱস্থা টগল কৰে। বুটামটোক এনে ৰূপ দিয়ে যে ই সক্ৰিয় কৰা হৈছে।

<button class = "btn" ডাটা-টগল = "বুটাম" > ... </button>   

$().button('লোড কৰা হৈছে')

বুটামৰ অৱস্থা লোড কৰালৈ সংহতি কৰে - বুটাম নিষ্ক্ৰিয় কৰে আৰু লিখনী লোড কৰালৈ শ্বেপ কৰে। তথ্য বৈশিষ্ট্য ব্যৱহাৰ কৰি বুটাম উপাদানত লিখনী লোড কৰা সংজ্ঞায়িত কৰিব লাগে data-loading-text।

<button class = "btn" data-loading-text = "বস্তু লোড কৰা হৈছে..." > ... </button>   

$().বুটাম('ৰিছেট')

বুটাম অৱস্থা পুনৰায় সেট কৰে - মূল লিখনীলৈ লিখনী শ্বেপ কৰে।

$().বুটাম(স্ট্ৰিং)

বুটাম অৱস্থা পুনৰায় সেট কৰে - যিকোনো তথ্য সংজ্ঞায়িত লিখনী অৱস্থালৈ লিখনী শ্বেপ কৰে।

<button class = "btn" তথ্য-সম্পূৰ্ণ-পাঠ = "সমাপ্ত!" > ... </বুটাম>   
<স্ক্রিপ্ট>
  $ ( '.btn' ) । বুটাম ( 'সম্পূৰ্ণ' )
</script>

বিষয়ে

একৰ্ডিয়ন আৰু নেভিগেচনৰ দৰে সংকোচনযোগ্য উপাদানসমূহৰ বাবে ভিত্তি শৈলীসমূহ আৰু নমনীয় সমৰ্থন লাভ কৰক।

* Transitions প্লাগইন অন্তৰ্ভুক্ত কৰাৰ প্ৰয়োজন।

উদাহৰণ একৰ্ডিয়ন

collapse plugin ব্যৱহাৰ কৰি, আমি এটা সৰল accordion শৈলী ৱিজেট নিৰ্মাণ কৰিলোঁ:

bootstrap-collapse.js ব্যৱহাৰ কৰি

জাভাস্ক্রিপ্টৰ যোগেদি সামৰ্থবান কৰক:

$ ( ".সংকোচন" ). পতন ()

বিকল্পসমূহ

মাৰ্কআপ

মাত্ৰ এটা সংকোচনযোগ্য উপাদানৰ নিয়ন্ত্ৰণ স্বয়ংক্ৰিয়ভাৱে নিযুক্ত কৰিবলৈ মাত্ৰ data-toggle="collapse"এটা উপাদানলৈ যোগ কৰক । data-targetবৈশিষ্ট্যই এটা css নিৰ্বাচক গ্ৰহণ কৰে য'ত data-targetসংকোচন প্ৰয়োগ কৰিবলে। collapseসংকোচনযোগ্য উপাদানটোত শ্ৰেণীটো নিশ্চিতভাৱে যোগ কৰক । যদি আপুনি ইয়াক অবিকল্পিতভাৱে খোলাটো বিচাৰে, অতিৰিক্ত শ্ৰেণী যোগ কৰক in।

<button class = "btn btn-danger" ডাটা-টগল = "সংকোচন " ডাটা-লক্ষ্য = "#ডেমো" >   
  সহজ ভাঙিব পৰা
</বুটাম>
 
<div id = "ডেমো" class = "ত সংকুচিত কৰক" > ... </div>  

পদ্ধতিসমূহ

.collapse(বিকল্পসমূহ)

আপোনাৰ বিষয়বস্তু এটা সংকোচনযোগ্য উপাদান হিচাপে সক্ৰিয় কৰে। এটা বৈকল্পিক বিকল্পসমূহ গ্ৰহণ কৰে object।

$ ( '#মোৰ সংকোচনযোগ্য' ). পতন ({
  toggle : মিছা 
})

.collapse('টগল')

এটা সংকোচনযোগ্য উপাদান দেখুওৱা বা লুকুৱাবলৈ টগল কৰে।

.collapse('দেখাওক')

এটা সংকোচনযোগ্য উপাদান দেখুৱায়।

.collapse('লুকুৱাওক')

এটা সংকোচনযোগ্য উপাদান লুকুৱাই ৰাখে।

ইভেন্টসমূহ

বুটষ্ট্ৰেপৰ পতন শ্ৰেণীয়ে পতন কাৰ্য্যকৰীতাত হুক কৰাৰ বাবে কেইটামান ইভেন্ট উন্মোচন কৰে।

$ ( '#মোৰ সংকোচনযোগ্য' ). on ( 'লুকাই থকা' , ফাংচন () {   
  // কিবা এটা কৰক...
})

বিষয়ে

উপাদানসমূহৰ মাজেৰে চাইক্লিং কৰাৰ বাবে এটা সাধাৰণ প্লাগইন। এটা মেৰী-গো-ৰাউণ্ড।

উদাহৰণ কেৰউজেল

তলত স্লাইডশ্ব’টো চাওক।

প্ৰথম থাম্বনেইল লেবেল

ক্ৰাছ জাষ্টো অডিঅ', ডাপিবাছ এচি ফেচিলিচিছ ইন, এগেষ্টাছ এগেট কোৱাম। ডনেক আইডি এলিট নন মি পৰ্টা গ্ৰেভিডা এট এগেট মেটাছ। নুল্লাম আইডি ডোলৰ আইডি নিভ উল্ট্ৰিচিয়েছ ভেহিকুলা উট আইডি এলিট।

দ্বিতীয় থাম্বনেইল লেবেল

ক্ৰাছ জাষ্টো অডিঅ', ডাপিবাছ এচি ফেচিলিচিছ ইন, এগেষ্টাছ এগেট কোৱাম। ডনেক আইডি এলিট নন মি পৰ্টা গ্ৰেভিডা এট এগেট মেটাছ। নুল্লাম আইডি ডোলৰ আইডি নিভ উল্ট্ৰিচিয়েছ ভেহিকুলা উট আইডি এলিট।

তৃতীয় থাম্বনেইল লেবেল

ক্ৰাছ জাষ্টো অডিঅ', ডাপিবাছ এচি ফেচিলিচিছ ইন, এগেষ্টাছ এগেট কোৱাম। ডনেক আইডি এলিট নন মি পৰ্টা গ্ৰেভিডা এট এগেট মেটাছ। নুল্লাম আইডি ডোলৰ আইডি নিভ উল্ট্ৰিচিয়েছ ভেহিকুলা উট আইডি এলিট।

‹ ›

bootstrap-carousel.js ব্যৱহাৰ কৰি

জাভাস্ক্রিপ্টৰ জৰিয়তে কল কৰক:

$ ( '.কেৰউজেল' ). কেৰউজেল ()

বিকল্পসমূহ

মাৰ্কআপ

ডাটা বৈশিষ্ট্যসমূহ পূৰ্বৱৰ্তী আৰু পৰৱৰ্তী conrols ৰ বাবে ব্যৱহাৰ কৰা হয়। তলৰ উদাহৰণ মাৰ্কআপটো চাওক।

<div id = "myCarousel" class = "কেৰউজেল স্লাইড" >  
  <!-- কেৰউজেলৰ বস্তু -->
  <div class = "কেৰউজেল-অভ্যন্তৰীণ" > 
    <div class = "সক্ৰিয় বস্তু" > ... </div> 
    <div শ্ৰেণী = "বস্তু" > ... </div> 
    <div শ্ৰেণী = "বস্তু" > ... </div> 
  </div>
  <!-- কেৰউজেল নৱ -->
  <a class = "কেৰউজেল-নিয়ন্ত্ৰণ বাওঁফালে" href = "#myCarousel" data-slide = "পূৰ্বৰ" > ‹ </a>   
  <a class = "কেৰউজেল-নিয়ন্ত্ৰণ অধিকাৰ" href = "#myCarousel" ডাটা-স্লাইড = "পৰৱৰ্তী" > › </a>   
</div>

পদ্ধতিসমূহ

.carousel(বিকল্পসমূহ)

এটা ঐচ্ছিক বিকল্পৰ সৈতে কেৰউজেল আৰম্ভ কৰে objectআৰু বস্তুসমূহৰ মাজেৰে চাইকেল চলাবলৈ আৰম্ভ কৰে।

$ ( '.কেৰউজেল' ). কেৰউজেল ({
  ব্যৱধান : ২০০০ 
})

.কেৰউজেল('চক্ৰ')

কেৰউজেলৰ বস্তুবোৰৰ মাজেৰে বাওঁফালৰ পৰা সোঁফাললৈ চক্ৰান্ত কৰে।

.কেৰউজেল('বিৰতি')

বস্তুৰ মাজেৰে চাইকেল চলোৱাৰ পৰা কেৰউজেল বন্ধ কৰে।

.কেৰউজেল(নম্বৰ)

কেৰউজেলক এটা নিৰ্দিষ্ট ফ্ৰেমলৈ চক্ৰ কৰে (0 ভিত্তিত, এটা এৰেৰ দৰে)।

.কেৰউজেল('পূৰ্ব')

পূৰ্বৰ বস্তুটোলৈ চক্ৰ কৰে।

.কেৰউজেল('পৰৱৰ্তী')

পৰৱৰ্তী বস্তুলৈ চক্ৰ কৰে।

ইভেন্টসমূহ

বুটষ্ট্ৰেপৰ কেৰউজেল শ্ৰেণীয়ে কেৰউজেল কাৰ্য্যকৰীতাত হুক কৰাৰ বাবে দুটা ইভেন্ট উন্মোচন কৰে।

বিষয়ে

যিকোনো ফৰ্ম লিখনী ইনপুটৰ সৈতে মাৰ্জিত টাইপহেডসমূহ দ্ৰুতভাৱে সৃষ্টি কৰাৰ বাবে এটা মৌলিক, সহজে সম্প্ৰসাৰিত প্লাগ-ইন।

উদাহৰণ

টাইপএহেডৰ ফলাফল দেখুৱাবলৈ তলৰ ক্ষেত্ৰত টাইপ কৰিবলৈ আৰম্ভ কৰক।

bootstrap-typeahead.js ব্যৱহাৰ কৰি

জাভাস্ক্রিপ্টৰ যোগেদি typeahead কল কৰক:

$ ( '.টাইপএহেড' ). টাইপহেড ()

বিকল্পসমূহ

মাৰ্কআপ

typeahead কাৰ্য্যকৰীতাৰ সৈতে এটা উপাদান পঞ্জীয়ন কৰিবলে তথ্য বৈশিষ্ট্যসমূহ যোগ কৰক।

<ইনপুট ধৰণ = "পাঠ" ডাটা-প্ৰদান = "টাইপএহেড" >  

পদ্ধতিসমূহ

.typeahead(বিকল্পসমূহ)

এটা টাইপএহেডৰ সৈতে এটা ইনপুট আৰম্ভ কৰে।