স্বতন্ত্র বা সংকলিত

প্লাগইনগুলি পৃথকভাবে অন্তর্ভুক্ত করা যেতে পারে (যদিও কিছুর জন্য প্রয়োজনীয় নির্ভরতা রয়েছে), বা সবগুলি একবারে। bootstrap.js এবং bootstrap.min.js উভয়ই একটি ফাইলে সমস্ত প্লাগইন ধারণ করে।

ডেটা বৈশিষ্ট্য

আপনি জাভাস্ক্রিপ্টের একটি লাইন না লিখে মার্কআপ API এর মাধ্যমে বিশুদ্ধভাবে সমস্ত বুটস্ট্র্যাপ প্লাগইন ব্যবহার করতে পারেন। এটি বুটস্ট্র্যাপের প্রথম শ্রেণীর API এবং প্লাগইন ব্যবহার করার সময় আপনার প্রথম বিবেচনা করা উচিত।

এটি বলেছে, কিছু পরিস্থিতিতে এই কার্যকারিতা বন্ধ করা বাঞ্ছনীয় হতে পারে। তাই, আমরা `'data-api'` এর সাথে বডি নেমস্পেসের সমস্ত ইভেন্টকে আনবাইন্ড করে ডেটা অ্যাট্রিবিউট API নিষ্ক্রিয় করার ক্ষমতাও প্রদান করি। এটি এই মত দেখায়:

$ ( 'শরীর' )। বন্ধ ( '.data-api' )

বিকল্পভাবে, একটি নির্দিষ্ট প্লাগইনকে টার্গেট করতে, শুধু প্লাগইনের নামটি একটি নামস্থান হিসাবে অন্তর্ভুক্ত করুন এবং ডেটা-এপিআই নামস্থানের সাথে এইভাবে:

$ ( 'শরীর' )। বন্ধ ( '.alert.data-api' )

প্রোগ্রাম্যাটিক API

আমরা এটাও বিশ্বাস করি যে আপনি জাভাস্ক্রিপ্ট API এর মাধ্যমে সম্পূর্ণরূপে সমস্ত বুটস্ট্র্যাপ প্লাগইন ব্যবহার করতে সক্ষম হবেন। সমস্ত পাবলিক API একক, চেইনযোগ্য পদ্ধতি এবং এর উপর কাজ করা সংগ্রহ ফেরত দেয়।

$ ( ".btn.ডেঞ্জার" )। বোতাম ( "টগল" )। অ্যাডক্লাস ( "ফ্যাট" )

সমস্ত পদ্ধতির একটি ঐচ্ছিক বিকল্প অবজেক্ট গ্রহণ করা উচিত, একটি স্ট্রিং যা একটি নির্দিষ্ট পদ্ধতিকে লক্ষ্য করে, বা কিছুই নয় (যা ডিফল্ট আচরণ সহ একটি প্লাগইন শুরু করে):

$ ( "#myModal" )। modal () // ডিফল্ট সহ আরম্ভ করা হয়েছে                       
$ ( "#myModal" )। modal ({ কীবোর্ড : মিথ্যা }) // কোন কীবোর্ড ছাড়াই শুরু করা হয়েছে     
$ ( "#myModal" )। modal ( 'শো' ) // আরম্ভ করে এবং অবিলম্বে শো আহ্বান করে                

প্রতিটি প্লাগইন একটি 'কনস্ট্রাক্টর' সম্পত্তিতে তার কাঁচা কনস্ট্রাক্টরকেও প্রকাশ করে $.fn.popover.Constructor: আপনি যদি একটি নির্দিষ্ট প্লাগইন উদাহরণ পেতে চান, তাহলে একটি উপাদান থেকে সরাসরি এটি পুনরুদ্ধার করুন $('[rel=popover]').data('popover'):

নো কনফ্লিক্ট

কখনও কখনও অন্যান্য UI ফ্রেমওয়ার্কের সাথে বুটস্ট্র্যাপ প্লাগইনগুলি ব্যবহার করা প্রয়োজন। এই পরিস্থিতিতে, নামস্থানের সংঘর্ষ মাঝে মাঝে ঘটতে পারে। যদি এটি ঘটে, আপনি .noConflictযে প্লাগইনটির মান ফিরিয়ে আনতে চান সেটিকে কল করতে পারেন।

var বুটস্ট্র্যাপ বোতাম = $ । fn _ বোতাম _ noConflict () // $.fn.button পূর্বে নির্ধারিত মান ফেরত দিন 
$ _ fn _ bootstrapBtn = বুটস্ট্র্যাপ বোতাম             // $(). bootstrapBtn বুটস্ট্র্যাপ কার্যকারিতা দিন

ঘটনা

বুটস্ট্র্যাপ বেশিরভাগ প্লাগইনের অনন্য কর্মের জন্য কাস্টম ইভেন্ট প্রদান করে। সাধারনত, এগুলি একটি অসীম এবং অতীত পার্টিসিপল ফর্মে আসে - যেখানে showএকটি ইভেন্টের শুরুতে ইনফিনিটিভ (উদাহরণস্বরূপ ) ট্রিগার হয় এবং এর অতীত পার্টিসিপল ফর্ম (উদাহরণস্বরূপ shown) একটি ক্রিয়া সম্পূর্ণ হওয়ার সময় ট্রিগার হয়।

সমস্ত অসীম ইভেন্ট প্রতিরোধ ডিফল্ট কার্যকারিতা প্রদান করে। এটি শুরু হওয়ার আগে একটি ক্রিয়া সম্পাদন বন্ধ করার ক্ষমতা প্রদান করে।

$ ( '#myModal' )। অন ​​( 'শো' , ফাংশন ( ই ) {   
    যদি (! ডেটা ) ই ফেরত দেয় । ডিফল্ট () // মডেল দেখানো বন্ধ করে   
})

রূপান্তর সম্পর্কে

সাধারণ ট্রানজিশন ইফেক্টের জন্য, অন্য JS ফাইলগুলির সাথে একবার bootstrap-transition.js অন্তর্ভুক্ত করুন। আপনি যদি কম্পাইল করা (বা মিনিফাইড) bootstrap.js ব্যবহার করেন , তাহলে এটি অন্তর্ভুক্ত করার দরকার নেই—এটি ইতিমধ্যেই আছে।

ব্যবহারের ক্ষেত্রে

ট্রানজিশন প্লাগইনের কয়েকটি উদাহরণ:

• মোডালে স্লাইডিং বা ফেইডিং
• ট্যাবগুলি বিবর্ণ হচ্ছে
• বিবর্ণ আউট সতর্কতা
• স্লাইডিং ক্যারোজেল প্যান

উদাহরণ

মডেলগুলি স্ট্রীমলাইনড, কিন্তু নমনীয়, ন্যূনতম প্রয়োজনীয় কার্যকারিতা এবং স্মার্ট ডিফল্ট সহ ডায়ালগ প্রম্পট।

স্ট্যাটিক উদাহরণ

হেডার, বডি এবং ফুটারে অ্যাকশনের সেট সহ একটি রেন্ডার করা মডেল।

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <বাটন টাইপ = "বোতাম" ক্লাস = "ক্লোজ" ডেটা-ডিসমিস = "মডাল" আরিয়া-লুকানো = "সত্য" > &সময়; </ বোতাম>    
    <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" ভূমিকা = "button" class = "btn" data-toggle = "modal" > ডেমো মোডাল চালু করুন </a>    
 
<!-- মডেল -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" ভূমিকা = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <বোতামের ধরন = "বাটন" ক্লাস = "ক্লোজ" ডেটা-ডিসমিস = "মডাল" আরিয়া-হিডেন = "সত্য" > × </ বোতাম>    
    <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" > পরিবর্তনগুলি সংরক্ষণ করুন </ বোতাম> 
  </div>
</div>

ব্যবহার

ডেটা অ্যাট্রিবিউটের মাধ্যমে

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

<বাটন প্রকার = "বাটন" ডেটা-টগল = "মডাল" ডেটা-টার্গেট = "#মাইমোডাল" > মোডাল চালু করুন </ বোতাম>   

জাভাস্ক্রিপ্টের মাধ্যমে

myModalজাভাস্ক্রিপ্টের একটি লাইন সহ আইডি সহ একটি মডেল কল করুন :

$ ( '#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' )। অন ​​( 'লুকানো' , ফাংশন () {   
  // কিছু কর…
})

উদাহরণ

নেভিবার, ট্যাব এবং বড়ি সহ এই সাধারণ প্লাগইনের সাহায্যে প্রায় যেকোনো কিছুতে ড্রপডাউন মেনু যোগ করুন।

একটি নববারের মধ্যে

ট্যাবের মধ্যে

ব্যবহার

ডেটা অ্যাট্রিবিউটের মাধ্যমে

data-toggle="dropdown"একটি ড্রপডাউন টগল করতে একটি লিঙ্ক বা বোতামে যোগ করুন ।

<div class = "ড্রপডাউন" > 
  <a ক্লাস = "ড্রপডাউন-টগল" ডেটা-টগল = "ড্রপডাউন" href = "#" > ড্রপডাউন ট্রিগার </a>   
  <ul class = "ড্রপডাউন-মেনু" ভূমিকা = "মেনু" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

ইউআরএল অক্ষত রাখতে, 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 = "ড্রপডাউন-মেনু" ভূমিকা = "মেনু" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

জাভাস্ক্রিপ্টের মাধ্যমে

জাভাস্ক্রিপ্টের মাধ্যমে ড্রপডাউনগুলি কল করুন:

$ ( '.ড্রপডাউন-টগল' )। ড্রপডাউন ()

অপশন

কোনোটিই নয়

পদ্ধতি

$().ড্রপডাউন('টগল')

একটি প্রদত্ত নেভিবার বা ট্যাবড নেভিগেশনের জন্য মেনু টগল করার জন্য একটি প্রোগ্রাম্যাটিক এপিআই।

নভবারে উদাহরণ

ScrollSpy প্লাগইন স্ক্রোল অবস্থানের উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে নেভি লক্ষ্যগুলি আপডেট করার জন্য। নেভিবারের নীচের এলাকাটি স্ক্রোল করুন এবং সক্রিয় শ্রেণী পরিবর্তন দেখুন। ড্রপডাউন সাব আইটেমগুলিও হাইলাইট করা হবে।

ব্যবহার

ডেটা অ্যাট্রিবিউটের মাধ্যমে

আপনার টপবার নেভিগেশনে সহজে স্ক্রোলস্পি আচরণ যোগ data-spy="scroll"করতে, আপনি যে উপাদানটি গুপ্তচর করতে চান সেটিতে যোগ করুন (সবচেয়ে সাধারণত এটি হবে বডি) এবং data-target=".navbar"কোন ন্যাভিটি ব্যবহার করবেন তা নির্বাচন করুন। .navআপনি একটি উপাদান সঙ্গে scrollspy ব্যবহার করতে চাইবেন .

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

জাভাস্ক্রিপ্টের মাধ্যমে

জাভাস্ক্রিপ্টের মাধ্যমে scrollspy কল করুন:

$ ( '# নববার' )। scrollspy ()

পদ্ধতি

.scrollspy('রিফ্রেশ')

DOM থেকে উপাদান যোগ বা অপসারণের সাথে স্ক্রোলস্পাই ব্যবহার করার সময়, আপনাকে রিফ্রেশ পদ্ধতিতে কল করতে হবে:

$ ( '[data-spy="scroll"]' )। প্রতিটি ( ফাংশন () {  
  var $spy = $ ( এই )। scrollspy ( 'রিফ্রেশ' )
});

অপশন

বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-, যেমনটি data-offset=""।

ঘটনা

উদাহরণ ট্যাব

এমনকি ড্রপডাউন মেনুর মাধ্যমেও স্থানীয় বিষয়বস্তুর প্যানে স্থানান্তরের জন্য দ্রুত, গতিশীল ট্যাব কার্যকারিতা যোগ করুন।

ব্যবহার

জাভাস্ক্রিপ্টের মাধ্যমে ট্যাবযোগ্য ট্যাবগুলি সক্ষম করুন (প্রতিটি ট্যাব পৃথকভাবে সক্রিয় করা প্রয়োজন):

$ ( '#myTab a' )। ক্লিক করুন ( ফাংশন ( ই ) {  
  e _ প্রতিরোধ ডিফল্ট ();
  $ ( এই )। ট্যাব ( 'দেখান' );
})

আপনি বিভিন্ন উপায়ে পৃথক ট্যাব সক্রিয় করতে পারেন:

$ ( '#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" > Messages </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > সেটিংস </a></li>  
</ul>

পদ্ধতি

$() ট্যাব

একটি ট্যাব উপাদান এবং বিষয়বস্তু ধারক সক্রিয় করে। ট্যাবে একটি 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 = "ট্যাব-সামগ্রী" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" 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 ব্যবহার করে এবং স্থানীয় শিরোনাম সঞ্চয়ের জন্য ডেটা-অ্যাট্রিবিউট ব্যবহার করে।

কর্মক্ষমতার কারণে, টুলটিপ এবং পপওভার ডেটা-এপিস অপ্ট ইন করা হয়েছে, যার অর্থ আপনাকে সেগুলি নিজেই শুরু করতে হবে ৷

টুলটিপগুলি দেখতে নীচের লিঙ্কগুলিতে হোভার করুন:

চার দিক

ইনপুট গ্রুপে টুলটিপ

বুটস্ট্র্যাপ ইনপুট গোষ্ঠীগুলির সাথে টুলটিপস এবং পপওভার ব্যবহার করার সময়, containerঅবাঞ্ছিত পার্শ্ব প্রতিক্রিয়া এড়াতে আপনাকে (নীচে নথিভুক্ত) বিকল্পটি সেট করতে হবে।

ব্যবহার

জাভাস্ক্রিপ্টের মাধ্যমে টুলটিপটি ট্রিগার করুন:

$ ( '# উদাহরণ' )। টুলটিপ ( বিকল্প )

অপশন

বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-, যেমনটি data-animation=""।

মার্কআপ

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > আমার উপর হোভার করুন </a>   

পদ্ধতি

$(). টুলটিপ(বিকল্প)

একটি উপাদান সংগ্রহে একটি টুলটিপ হ্যান্ডলার সংযুক্ত করে।

টুলটিপ('শো')

একটি উপাদানের টুলটিপ প্রকাশ করে।

$ ( '# উপাদান' )। টুলটিপ ( 'দেখান' )

টুলটিপ('লুকান')

একটি উপাদানের টুলটিপ লুকিয়ে রাখে।

$ ( '# উপাদান' )। টুলটিপ ( 'লুকান' )

টুলটিপ('টগল')

একটি উপাদানের টুলটিপ টগল করে।

$ ( '# উপাদান' )। টুলটিপ ( 'টগল' )

টুলটিপ('ধ্বংস')

একটি উপাদানের টুলটিপ লুকায় এবং ধ্বংস করে।

$ ( '# উপাদান' )। টুলটিপ ( 'ধ্বংস' )

উদাহরণ

হাউজিং সেকেন্ডারি তথ্যের জন্য যেকোনো উপাদানে আইপ্যাডের মতো বিষয়বস্তুর ছোট ওভারলে যোগ করুন। পপওভার ট্রিগার করার জন্য বোতামের উপর হোভার করুন। টুলটিপ অন্তর্ভুক্ত করা প্রয়োজন .

স্ট্যাটিক পপওভার

চারটি বিকল্প উপলব্ধ: উপরে, ডান, নীচে এবং বাম প্রান্তিককৃত।

dataএকটি বৈশিষ্ট্যের মধ্যে জাভাস্ক্রিপ্ট এবং সামগ্রী থেকে পপওভার হিসাবে দেখানো কোনও মার্কআপ নেই ৷

সরাসরি নমুনা

চার দিক

ব্যবহার

জাভাস্ক্রিপ্টের মাধ্যমে পপওভার সক্ষম করুন:

$ ( '# উদাহরণ' )। পপওভার ( বিকল্প )

অপশন

বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-, যেমনটি data-animation=""।

মার্কআপ

পারফরম্যান্সের কারণে, টুলটিপ এবং পপওভার ডেটা-এপিস বেছে নেওয়া হয়েছে৷ আপনি যদি সেগুলি ব্যবহার করতে চান তবে কেবল একটি নির্বাচক বিকল্প নির্দিষ্ট করুন৷

পদ্ধতি

$().popover(বিকল্প)

একটি উপাদান সংগ্রহের জন্য পপওভার শুরু করে।

.popover('শো')

একটি উপাদান popover প্রকাশ করে.

$ ( '# উপাদান' )। পপওভার ( 'শো' )

.popover('লুকান')

একটি উপাদান পপওভার লুকায়।

$ ( '# উপাদান' )। পপওভার ( 'লুকান' )

.popover('টগল')

একটি উপাদান পপওভার টগল করে।

$ ( '# উপাদান' )। পপওভার ( 'টগল' )

.popover('ধ্বংস')

একটি উপাদানের পপওভার লুকায় এবং ধ্বংস করে।

$ ( '# উপাদান' )। পপওভার ( 'ধ্বংস' )

উদাহরণ সতর্কতা

এই প্লাগইন সহ সমস্ত সতর্কতা বার্তাগুলিতে খারিজ কার্যকারিতা যুক্ত করুন৷

ব্যবহার

জাভাস্ক্রিপ্টের মাধ্যমে একটি সতর্কতা খারিজ সক্ষম করুন:

$ ( ". সতর্কতা" )। সতর্কতা ()

মার্কআপ

data-dismiss="alert"স্বয়ংক্রিয়ভাবে একটি সতর্কতা বন্ধ কার্যকারিতা দিতে শুধু আপনার বন্ধ বোতাম যোগ করুন .

<a class = "close" data-dismiss = "সতর্কতা" href = "#" > × </a>   

পদ্ধতি

$().সতর্কতা()

ঘনিষ্ঠ কার্যকারিতা সহ সমস্ত সতর্কতা মোড়ানো। আপনার সতর্কতাগুলি বন্ধ হয়ে গেলে অ্যানিমেট করার জন্য, নিশ্চিত করুন যে তারা ইতিমধ্যেই তাদের উপর প্রয়োগ করা আছে .fadeএবং ক্লাস।.in

সতর্কতা ('ক্লোজ')

একটি সতর্কতা বন্ধ করে।

$ ( ". সতর্কতা" )। সতর্কতা ( 'বন্ধ' )

ঘটনা

বুটস্ট্র্যাপের সতর্কতা শ্রেণী সতর্কতা কার্যকারিতার মধ্যে হুক করার জন্য কয়েকটি ইভেন্ট প্রকাশ করে।

$ ( '#আমার-সতর্ক' )। আবদ্ধ ( 'বন্ধ' , ফাংশন () {   
  // কিছু কর…
})

উদাহরণ ব্যবহার

বোতাম দিয়ে আরও কিছু করুন। কন্ট্রোল বোতাম স্টেট বা টুলবারের মত আরো উপাদানের জন্য বোতামের গ্রুপ তৈরি করুন।

রাষ্ট্রীয়

data-loading-text="Loading..."একটি বোতামে একটি লোডিং অবস্থা ব্যবহার করতে যোগ করুন ।

<button type = "button" class = "btn btn-primary" data-loading-text = "লোড হচ্ছে..." > লোড হচ্ছে অবস্থা </ বোতাম>   

একক টগল

data-toggle="button"একটি একক বোতামে টগলিং সক্রিয় করতে যোগ করুন ।

<বোতামের ধরন = "বাটন" ক্লাস = "btn btn-প্রাথমিক" ডেটা-টগল = "বোতাম" > একক টগল </ বোতাম>   

চেকবক্স

data-toggle="buttons-checkbox"বিটিএন-গ্রুপে চেকবক্স শৈলী টগল করার জন্য যোগ করুন।

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <বোতামের ধরন = "বাটন" ক্লাস = "btn btn-প্রাথমিক" > বাম </ বোতাম>  
  <বোতামের ধরন = "বাটন" ক্লাস = "btn btn-প্রাথমিক" > মধ্য </ বোতাম>  
  <বোতামের ধরন = "বাটন" ক্লাস = "btn btn-প্রাথমিক" > ডান </ বোতাম>  
</div>

রেডিও

data-toggle="buttons-radio"btn-গ্রুপে রেডিও শৈলী টগল করার জন্য যোগ করুন ।

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <বোতামের ধরন = "বাটন" ক্লাস = "btn btn-প্রাথমিক" > বাম </ বোতাম>  
  <বোতামের ধরন = "বাটন" ক্লাস = "btn btn-প্রাথমিক" > মধ্য </ বোতাম>  
  <বোতামের ধরন = "বাটন" ক্লাস = "btn btn-প্রাথমিক" > ডান </ বোতাম>  
</div>

ব্যবহার

জাভাস্ক্রিপ্টের মাধ্যমে বোতাম সক্রিয় করুন:

$ ( '.nav-ট্যাব' )। বোতাম ()

মার্কআপ

ডেটা বৈশিষ্ট্যগুলি বোতাম প্লাগইনের অবিচ্ছেদ্য অংশ। বিভিন্ন ধরনের মার্কআপের জন্য নিচের উদাহরণ কোডটি দেখুন।

অপশন

কোনোটিই নয়

পদ্ধতি

$() বোতাম('টগল')

পুশ স্টেট টগল করে। বোতামটিকে এমন চেহারা দেয় যে এটি সক্রিয় করা হয়েছে।

<বোতামের ধরন = "বাটন" ক্লাস = "বিটিএন" ডেটা-টগল = "বোতাম" > … </ বোতাম>    

$() বোতাম('লোড হচ্ছে')

বোতামের অবস্থা লোড করার জন্য সেট করে - বোতাম নিষ্ক্রিয় করে এবং টেক্সট লোডিং টেক্সট অদলবদল করে। ডেটা অ্যাট্রিবিউট ব্যবহার করে বোতাম এলিমেন্টে লোডিং টেক্সট সংজ্ঞায়িত করা উচিত data-loading-text।

<বোতামের ধরন = "বাটন" ক্লাস = "বিটিএন" ডেটা-লোডিং-টেক্সট = "সামগ্রী লোড হচ্ছে..." > ... </ বোতাম>    

$() বোতাম('রিসেট')

বোতামের অবস্থা রিসেট করে - পাঠ্যকে মূল পাঠ্যে অদলবদল করে।

$().বোতাম(স্ট্রিং)

বোতামের অবস্থা রিসেট করে - যেকোনো ডেটা সংজ্ঞায়িত পাঠ্য অবস্থায় পাঠ্য অদলবদল করে।

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

আপনি অ্যাকর্ডিয়ন মার্কআপ ছাড়াই প্লাগইনটি ব্যবহার করতে পারেন। অন্য উপাদানের সম্প্রসারণ এবং পতন টগল করার জন্য একটি বোতাম তৈরি করুন।

<বোতামের ধরন = "বাটন" ক্লাস = "বিটিএন বিটিএন-ডেঞ্জার" ডেটা-টগল = "পতন" ডেটা-টার্গেট = "# ডেমো" >    
  সহজ সঙ্কুচিত
</ বোতাম>
 
<div id = "demo" class = "colapse in" > … </div>  

ব্যবহার

ডেটা অ্যাট্রিবিউটের মাধ্যমে

একটি সংকোচনযোগ্য উপাদানের নিয়ন্ত্রণ স্বয়ংক্রিয়ভাবে বরাদ্দ করতে উপাদানটিতে যোগ করুন data-toggle="collapse"এবং a যোগ করুন। data-targetঅ্যাট্রিবিউটটি data-targetএকটি সিএসএস নির্বাচককে গ্রহন করে যাতে পতন প্রয়োগ করা যায়। collapseকলাপসিবল এলিমেন্টে ক্লাস যোগ করতে ভুলবেন না । আপনি যদি এটি ডিফল্ট খুলতে চান তবে অতিরিক্ত ক্লাস যোগ করুন in।

একটি কোলাপসিবল কন্ট্রোলে অ্যাকর্ডিয়নের মতো গ্রুপ ম্যানেজমেন্ট যোগ করতে, ডেটা অ্যাট্রিবিউট যোগ করুন data-parent="#selector"। এটি কর্মে দেখতে ডেমো পড়ুন।

জাভাস্ক্রিপ্টের মাধ্যমে

এর সাথে ম্যানুয়ালি সক্ষম করুন:

$ ( ".পতন" )। পতন ()

অপশন

বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-, যেমনটি data-parent=""।

পদ্ধতি

.পতন (বিকল্প)

একটি সংকোচনযোগ্য উপাদান হিসাবে আপনার সামগ্রী সক্রিয় করে। একটি ঐচ্ছিক বিকল্প গ্রহণ করে object।

$ ( '#myCollapsible' )। পতন ({
  টগল : মিথ্যা 
})

.পতন ('টগল')

দেখানো বা লুকানোর জন্য একটি সংকোচনযোগ্য উপাদান টগল করে।

.পতন ('শো')

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

.পতন ('লুকান')

একটি সংকোচনযোগ্য উপাদান লুকায়।

ঘটনা

বুটস্ট্র্যাপের পতনের শ্রেণীটি পতন কার্যকারিতার মধ্যে হুক করার জন্য কয়েকটি ইভেন্টকে প্রকাশ করে।

$ ( '#myCollapsible' )। অন ​​( 'লুকানো' , ফাংশন () {   
  // কিছু কর…
})

উদাহরণ ক্যারোসেল

নীচের স্লাইডশোটি ক্যারোজেলের মতো উপাদানগুলির মাধ্যমে সাইকেল চালানোর জন্য একটি সাধারণ প্লাগইন এবং উপাদান দেখায়।

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

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.

Second Thumbnail label

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.

Third Thumbnail label

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 = "ক্যারোজেল স্লাইড" >  
  <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>
  <!-- ক্যারোজেল আইটেম -->
  <div class = "carousel-inner" > 
    <div class = "সক্রিয় আইটেম" > … </div> 
    <div ক্লাস = "আইটেম" > … </div> 
    <div ক্লাস = "আইটেম" > … </div> 
  </div>
  <!-- ক্যারোজেল নেভি -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

ব্যবহার

ডেটা অ্যাট্রিবিউটের মাধ্যমে

ক্যারোজেলের অবস্থান সহজে নিয়ন্ত্রণ করতে ডেটা অ্যাট্রিবিউট ব্যবহার করুন। data-slideকীওয়ার্ড গ্রহণ করে prevবা next, যা স্লাইডের বর্তমান অবস্থানের সাপেক্ষে অবস্থান পরিবর্তন করে। বিকল্পভাবে, data-slide-toক্যারোজেলে একটি কাঁচা স্লাইড সূচক পাস করতে ব্যবহার করুন data-slide-to="2", যা স্লাইডের অবস্থান থেকে শুরু করে একটি নির্দিষ্ট সূচকে যায় 0।

জাভাস্ক্রিপ্টের মাধ্যমে

এর সাথে ম্যানুয়ালি ক্যারোজেল কল করুন:

$ ( '.ক্যারোজেল' )। ক্যারোজেল ()

অপশন

বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টজের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-, যেমনটি data-interval=""।

পদ্ধতি

ক্যারোসেল(বিকল্প)

একটি ঐচ্ছিক বিকল্প সহ ক্যারোজেল objectশুরু করে এবং আইটেমগুলির মাধ্যমে সাইকেল চালানো শুরু করে৷

$ ( '.ক্যারোজেল' )। ক্যারোজেল ({
  ব্যবধান : 2000 
})

.ক্যারোসেল('সাইকেল')

বাম থেকে ডানে ক্যারোজেল আইটেমগুলির মধ্যে দিয়ে সাইকেল করুন৷

.ক্যারোসেল('পজ')

আইটেমগুলির মধ্য দিয়ে সাইকেল চালানো থেকে ক্যারোসেল বন্ধ করে।

ক্যারোসেল (সংখ্যা)

ক্যারোজেলকে একটি নির্দিষ্ট ফ্রেমে সাইকেল করে (0 ভিত্তিক, অ্যারের মতো)।

.ক্যারোসেল('আগের')

পূর্ববর্তী আইটেম চক্র.

.ক্যারোসেল('পরবর্তী')

পরবর্তী আইটেম সাইকেল.

ঘটনা

বুটস্ট্র্যাপের ক্যারোজেল ক্লাস ক্যারোজেল কার্যকারিতা মধ্যে হুক করার জন্য দুটি ইভেন্ট প্রকাশ করে।

উদাহরণ

যেকোন ফর্ম টেক্সট ইনপুট দিয়ে দ্রুত মার্জিত টাইপহেড তৈরি করার জন্য একটি মৌলিক, সহজে প্রসারিত প্লাগইন।

<ইনপুট প্রকার = "টেক্সট" ডেটা-প্রদান = "টাইপহেড" >  

আপনি autocomplete="off"ডিফল্ট ব্রাউজার মেনুগুলিকে বুটস্ট্র্যাপ টাইপহেড ড্রপডাউনে উপস্থিত হওয়া থেকে বিরত রাখতে চান৷

ব্যবহার

ডেটা অ্যাট্রিবিউটের মাধ্যমে

উপরের উদাহরণে দেখানো হিসাবে টাইপহেড কার্যকারিতা সহ একটি উপাদান নিবন্ধন করতে ডেটা বৈশিষ্ট্য যুক্ত করুন।

জাভাস্ক্রিপ্টের মাধ্যমে

টাইপহেডকে ম্যানুয়ালি এর সাথে কল করুন:

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

অপশন

বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-, যেমনটি data-source=""।

পদ্ধতি

.typeahead(বিকল্প)

টাইপহেড সহ একটি ইনপুট শুরু করে।

উদাহরণ

বাম দিকের সাবনেভিগেশনটি অ্যাফিক্স প্লাগইনের একটি লাইভ ডেমো।

ব্যবহার

ডেটা অ্যাট্রিবিউটের মাধ্যমে

যেকোন এলিমেন্টে সহজে অ্যাফিক্স আচরণ যোগ data-spy="affix"করতে, আপনি যে উপাদানটি গুপ্তচর করতে চান তাতে যোগ করুন। তারপর একটি উপাদানের পিনিং চালু এবং বন্ধ কখন টগল করতে হবে তা নির্ধারণ করতে অফসেটগুলি ব্যবহার করুন৷

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

জাভাস্ক্রিপ্টের মাধ্যমে

জাভাস্ক্রিপ্টের মাধ্যমে অ্যাফিক্স প্লাগইনটি কল করুন:

$ ( '# নববার' )। সংযুক্ত করা ()

অপশন

বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-, যেমনটি data-offset-top="200"।