মডেল সম্পর্কে

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

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

নীচে একটি স্ট্যাটিকালি রেন্ডার করা মডেল রয়েছে।

সরাসরি নমুনা

নিচের বোতামে ক্লিক করে জাভাস্ক্রিপ্টের মাধ্যমে একটি মডেল টগল করুন। এটি নীচে স্লাইড হবে এবং পৃষ্ঠার শীর্ষ থেকে বিবর্ণ হয়ে যাবে৷

বুটস্ট্র্যাপ-মোডাল ব্যবহার করে

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

$ ( '#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" > 
    <বোতামের ধরন = "বাটন" ক্লাস = "ক্লোজ" ডেটা-ডিসমিস = "মডাল" > × </ বোতাম>   
    <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' )। অন ​​( 'লুকানো' , ফাংশন () {   
  // কিছু কর…
})

ড্রপডাউন সম্পর্কে

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

উদাহরণ

ড্রপডাউন পরীক্ষা করতে নেভিবারে ড্রপডাউন এনএভি লিঙ্কে ক্লিক করুন এবং নিচের পিলগুলি দেখুন।

• নিয়মিত লিঙ্ক
• ড্রপডাউন
  • 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 ক্লাস = "ড্রপডাউন" আইডি = "মেনু1" >  
    <a ক্লাস = "ড্রপডাউন-টগল" ডেটা-টগল = "ড্রপডাউন" href = "#মেনু1" >   
      ড্রপডাউন
      <b ক্লাস = "ক্যারেট" ></b> 
    </a>
    <ul class = "ড্রপডাউন-মেনু" > 
      <li><a href = "#" > অ্যাকশন </a></li> 
      <li><a href = "#" > আরেকটি ক্রিয়া </a></li> 
      <li><a href = "#" > এখানে অন্য কিছু </a></li> 
      <li ক্লাস = "ডিভাইডার" ></li> 
      <li><a href = "#" > পৃথক লিঙ্ক </a></li> 
    </ul>
  </li>
  ...
</ul>

ইউআরএল অক্ষত রাখতে, data-targetএর পরিবর্তে অ্যাট্রিবিউট ব্যবহার করুন href="#"।

<ul class = "nav nav-pills" > 
  <li class = "ড্রপডাউন" > 
    <a ক্লাস = "ড্রপডাউন-টগল" ডেটা-টগল = "ড্রপডাউন" ডেটা-টার্গেট = "#" href = "path/to/page.html" >    
      ড্রপডাউন
      <b ক্লাস = "ক্যারেট" ></b> 
    </a>
    <ul class = "ড্রপডাউন-মেনু" > 
      ...
    </ul>
  </li>
</ul>

পদ্ধতি

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

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

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

scrollspy সঙ্গে উদাহরণ navbar

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

bootstrap-scrollspy.js ব্যবহার করে

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

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

মার্কআপ

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

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

পদ্ধতি

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

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

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

অপশন

ঘটনা

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

উদাহরণ ট্যাব

লুকানো প্যানগুলির মধ্যে টগল করতে নীচের ট্যাবগুলিতে ক্লিক করুন, এমনকি ড্রপডাউন মেনুগুলির মাধ্যমেও৷

• বাড়ি
• প্রোফাইল
• ড্রপডাউন
  • @fat
  • @mdo

bootstrap-tab.js ব্যবহার করে

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

$ ( '#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 ব্যবহার করে এবং স্থানীয় শিরোনাম সঞ্চয়ের জন্য ডেটা-অ্যাট্রিবিউট ব্যবহার করে।

টুলটিপ ব্যবহারের উদাহরণ

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

bootstrap-tooltip.js ব্যবহার করে

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

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

অপশন

মার্কআপ

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

<a href = "#" rel = "tooltip" title = "প্রথম টুলটিপ" > আমার উপরে হোভার করুন </a>   

পদ্ধতি

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

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

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

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

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

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

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

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

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

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

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

পপভার সম্পর্কে

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

* টুলটিপ অন্তর্ভুক্ত করা প্রয়োজন

উদাহরণ হোভার পপওভার

পপওভার ট্রিগার করার জন্য বোতামের উপর হোভার করুন।

bootstrap-popover.js ব্যবহার করে

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

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

অপশন

মার্কআপ

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

পদ্ধতি

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

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

.popover('শো')

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

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

.popover('লুকান')

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

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

.popover('টগল')

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

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

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

সতর্কতা প্লাগইনটি সতর্কতার সাথে ঘনিষ্ঠ কার্যকারিতা যোগ করার জন্য একটি ছোট শ্রেণী।

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

সতর্কতা প্লাগইন নিয়মিত সতর্কতা বার্তা এবং ব্লক বার্তাগুলিতে কাজ করে।

bootstrap-alert.js ব্যবহার করে

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

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

মার্কআপ

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

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

পদ্ধতি

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

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

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

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

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

ঘটনা

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

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

সম্পর্কিত

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

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

রাজ্য এবং টগলের জন্য বোতাম প্লাগইন ব্যবহার করুন।

bootstrap-button.js ব্যবহার করে

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

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

মার্কআপ

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

<!-- একটি একক বোতামে টগলিং সক্রিয় করতে data-toggle="button" যোগ করুন -->
<button class = "btn" data-toggle = "button" > একক টগল </ বোতাম>  
 
<!-- btn-গ্রুপে চেকবক্স শৈলী টগল করার জন্য data-toggle="buttons-checkbox" যোগ করুন -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > বাম </ বোতাম> 
  <button class = "btn" > মধ্য </ বোতাম> 
  <button class = "btn" > ডান </ বোতাম> 
</div>
 
<!-- btn-গ্রুপে রেডিও শৈলী টগল করার জন্য data-toggle="buttons-radio" যোগ করুন -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > বাম </ বোতাম> 
  <button class = "btn" > মধ্য </ বোতাম> 
  <button class = "btn" > ডান </ বোতাম> 
</div>

পদ্ধতি

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

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

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

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

বোতামের অবস্থা লোড করার জন্য সেট করে - বোতাম নিষ্ক্রিয় করে এবং টেক্সট লোডিং টেক্সট অদলবদল করে। ডেটা অ্যাট্রিবিউট ব্যবহার করে বোতাম এলিমেন্টে লোডিং টেক্সট সংজ্ঞায়িত করা উচিত 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-ডেঞ্জার" ডেটা-টগল = "পতন" ডেটা-টার্গেট = "#ডেমো" >   
  সহজ সঙ্কুচিত
</ বোতাম>
 
<div id = "demo" class = "colapse in" > … </div>  

পদ্ধতি

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

একটি সংকোচনযোগ্য উপাদান হিসাবে আপনার সামগ্রী সক্রিয় করে। একটি ঐচ্ছিক বিকল্প গ্রহণ করে 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.

‹ ›

bootstrap-carousel.js ব্যবহার করে

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

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

অপশন

মার্কআপ

পূর্ববর্তী এবং পরবর্তী নিয়ন্ত্রণের জন্য ডেটা বৈশিষ্ট্যগুলি ব্যবহার করা হয়। নীচের উদাহরণ মার্কআপ দেখুন.

<div id = "myCarousel" class = "ক্যারোজেল স্লাইড" >  
  <!-- ক্যারোজেল আইটেম -->
  <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>

পদ্ধতি

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

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

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

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

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

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

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

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

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

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

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

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

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

ঘটনা

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

সম্পর্কিত

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

উদাহরণ

টাইপহেড ফলাফলগুলি দেখানোর জন্য নীচের ক্ষেত্রে টাইপ করা শুরু করুন।

bootstrap-typeahead.js ব্যবহার করে

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

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

অপশন

মার্কআপ

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

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

পদ্ধতি

.typeahead(বিকল্প)

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