বুটষ্ট্ৰেপৰ বাবে জাভাস্ক্রিপ্ট

Bootstrap ৰ উপাদানসমূহক জীৱন্তলৈ আনক—এতিয়া 12 টা স্বনিৰ্বাচিত jQuery প্লাগইনৰ সৈতে।

মডালসমূহ

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

ড্ৰপডাউনসমূহ

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

স্ক্ৰলস্পাই

স্ক্ৰল অৱস্থানৰ ওপৰত ভিত্তি কৰি বৰ্তমান সক্ৰিয় সংযোগ দেখুৱাবলৈ আপোনাৰ navbar ত সংযোগসমূহ স্বয়ংক্ৰিয়ভাৱে আপডেইট কৰিবলে scrollspy ব্যৱহাৰ কৰক।

টগলযোগ্য টেবসমূহ

এই প্লাগ-ইন ব্যৱহাৰ কৰক টেব আৰু পিলসমূহক স্থানীয় বিষয়বস্তুৰ টেবেবল পেনসমূহৰ মাজেৰে টগল কৰাৰ অনুমতি দি অধিক উপযোগী কৰিবলে।

সঁজুলিৰ টিপছ

jQuery Tipsy প্লাগইনৰ এটা নতুন ধাৰণা, Tooltips ছবিৰ ওপৰত নিৰ্ভৰ নকৰে—তেওঁলোকে এনিমেচনৰ বাবে CSS3 ব্যৱহাৰ কৰে আৰু স্থানীয় শিৰোনাম সংৰক্ষণৰ বাবে ডাটা-বৈশিষ্ট্যসমূহ ব্যৱহাৰ কৰে।

Popovers *

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

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

সতৰ্কবাণী বাৰ্তাসমূহ

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

বুটামসমূহ

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

পতন হোৱা

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

কেৰউজেল

আপুনি বিষয়বস্তুৰ এটা পাৰস্পৰিক স্লাইডশ্ব' প্ৰদান কৰিব বিচৰা যিকোনো বিষয়বস্তুৰ এটা মেৰী-গো-ৰাউণ্ড সৃষ্টি কৰক।

টাইপএহেড

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

পৰিৱৰ্তনসমূহ *

সৰল পৰিবৰ্তন প্ৰভাৱসমূহৰ বাবে, bootstrap-transition.js এবাৰ অন্তৰ্ভুক্ত কৰক মডালত স্লাইড কৰিবলে বা সতৰ্কবাণীসমূহ ম্লান কৰিবলে ।

* প্লাগইনসমূহত এনিমেচনৰ বাবে প্ৰয়োজনীয়

মুৰ ডাঙি! সকলো জাভাস্ক্রিপ্ট প্লাগইনৰ বাবে jQuery ৰ শেহতীয়া সংস্কৰণৰ প্ৰয়োজন।

মডালৰ বিষয়ে

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

ফাইলটো ডাউনলোড কৰক

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

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

লাইভ ডেমো

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

ডেমো মডাল আৰম্ভ কৰক

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

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

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

বিকল্পসমূহ

নাম প্ৰকাৰ ডিফল্ট বিৱৰণ
পটভূমি বুলিয়ান সঁচা এটা মডাল-বেকড্ৰপ উপাদান অন্তৰ্ভুক্ত কৰা হৈছে। বৈকল্পিকভাৱে, staticএটা পটভূমিৰ বাবে ধাৰ্য্য কৰক যি ক্লিকত মডাল বন্ধ নকৰে।
কিবৰ্ড বুলিয়ান সঁচা এস্কেপ কি' টিপিলে মডাল বন্ধ কৰে
প্ৰদৰ্শনী বুলিয়ান সঁচা আৰম্ভণি কৰাৰ সময়ত মডাল দেখুৱায়।

মাৰ্কআপ

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

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

  1. <a class = "btn" data-toggle = "ম'ডাল" href = "#myModal" > মডাল আৰম্ভ কৰক </a>
  1. <div class = "ম'ডাল লুকুৱাওক" id = "myModal" >
  2. <div class = "ম'ডাল-হেডাৰ" >
  3. <বুটামৰ ধৰণ = "বুটাম" শ্ৰেণী = "বন্ধ কৰক" data-dismiss = "ম'ডাল" > × </button>
  4. <h3> মডাল হেডাৰ </h3>
  5. </div>
  6. <div class = "মডাল-শৰীৰ" >
  7. <p> এটা মিহি শৰীৰ... </p>
  8. </div>
  9. <div class = "মডাল-ফুটাৰ" >
  10. <a href = "#" class = "btn" data-dismiss = "ম'ডাল" > বন্ধ কৰক </a>
  11. <a href = "#" class = "btn btn-primary" > পৰিবৰ্তনসমূহ সংৰক্ষণ কৰক </a>
  12. </div>
  13. </div>
মুৰ ডাঙি! যদি আপুনি আপোনাৰ মডালক ইন আৰু আউট এনিমেট কৰিব বিচাৰে, মাত্ৰ উপাদানত এটা .fadeশ্ৰেণী যোগ কৰক .modal(ইয়াক কাৰ্য্যত চাবলৈ ডেমো চাওক) আৰু bootstrap-transition.js অন্তৰ্ভুক্ত কৰক ।

পদ্ধতিসমূহ

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

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

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

.modal('টগল')

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

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

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

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

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

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

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

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

ইভেন্টসমূহ

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

কাৰ্যক্ৰম বিৱৰণ
প্ৰদৰ্শনী এই ইভেন্ট তৎক্ষণাত ফায়াৰ হয় যেতিয়া showইনষ্টেন্স পদ্ধতি কল কৰা হয়।
দেখুওৱা হৈছে এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া মডালক ব্যৱহাৰকাৰীৰ বাবে দৃশ্যমান কৰা হয় (css পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হ'বলৈ অপেক্ষা কৰিব)।
লুকাই থকা এই ইভেন্ট তৎক্ষণাত ফায়াৰ কৰা হয় যেতিয়া hideইনষ্টেন্স পদ্ধতি কল কৰা হয়।
লুকাই থকা এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া মডাল ব্যৱহাৰকাৰীৰ পৰা লুকুৱাই ৰখা শেষ হয় (css পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হ'বলৈ অপেক্ষা কৰিব)।
  1. $ ( '#মোৰ মডাল' ). on ( 'লুকাই থকা' , ফাংচন () {
  2. // কিবা এটা কৰক...
  3. })

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

ফাইলটো ডাউনলোড কৰক

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

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

@শকত

বিজ্ঞাপন লেগিংছ keytar, ব্ৰাঞ্চ আইডি আৰ্ট পাৰ্টি dolor labore. Pitchfork yr enim lo-fi আগতে তেওঁলোকে qui বিক্ৰী হৈ গৈছিল। টাম্বলাৰ ফাৰ্মৰ পৰা টেবুললৈ চাইকেলৰ অধিকাৰ যিয়েই নহওক কিয়। Anim keffiyeh কাৰ্লছ কাৰ্ডিগান। Velit seitan mcsweeney এর ফটো বুথ 3 পহু চন্দ্ৰ irure. 'কচবি চুৱেটাৰ লোমো জিন শ্বৰ্ট', উইলিয়ামছবাৰ্গ হুডি মিনিম কুই আপুনি হয়তো তেওঁলোকৰ বিষয়ে শুনা নাই et cardigan trust fund culpa biodiesel wes anderson aesthetic. নিহিল টেটু কৰা accusamus, cred বিদ্ৰুপ বায়'ডিজেল keffiyeh শিল্পী ullamco consequat.

@mdo

ভেনিয়াম মাৰ্ফা গোঁফ স্কেটবৰ্ড, adipisicing fugiat velit pitchfork দাড়ি। ফ্ৰীগান দাড়ি aliqua cupidatat mcsweeney's vero. কুপিডাট চাৰি লোকো নিচি, ইএ হেলভেটিকা ​​নুলা কাৰ্লেছ। টেটু কৰা কচবি চুৱেটাৰ খাদ্য ট্ৰাক, mcsweeney's quis non freegan vinyl. লো-ফাই ৱেছ এণ্ডাৰ্ছন +১ চাৰ্টৰিয়েল। কাৰ্লেছৰ নন নান্দনিক ব্যায়াম quis gentrify. ব্ৰুকলিন adipisicing ক্ৰাফ্ট বিয়েৰ ভাইচ keytar deserunt.

এক

Occaecat কমোডো এলিকুৱা ডেলেক্টাছ। Fap ক্ৰাফ্ট বিয়েৰ deserunt স্কেটবোৰ্ড ea. লোমো চাইকেলৰ অধিকাৰ adipisicing banh mi, velit ea sunt পৰৱৰ্তী স্তৰ locavore একক-উৎপত্তি কফি in magna veniam. হাই লাইফ আইডি ভিনাইল, ইকো পাৰ্ক consequat quis aliquip banh mi pitchfork. ভেৰো ভিএইচএছ এষ্ট adipisicing. Consectetur nisi DIY নূন্যতম বাৰ্তাবাহক বেগ। ক্ৰেড এক্স ইন, বহনক্ষম delectus consectetur fanny pack iphone.

দুই

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa মেচেঞ্জাৰ বেগ মাৰ্ফা যিয়েই নহওক delectus খাদ্য ট্ৰাক। চেপিয়েন্টে চিনথ আইডি এছুমেণ্ডা। Locavore sed helvetica cliche বিদ্ৰুপ, thundercats আপুনি হয়তো তেওঁলোকৰ বিষয়ে শুনা নাই consequat hoodie গ্লুটেন-মুক্ত lo-fi fap aliquip. টেৰী ৰিচাৰ্ডছন প্ৰাইডেন্ট ব্ৰাঞ্চ nesciunt quis cosby চুৱেটাৰ pariatur keffiyeh ut helvetica শিল্পী. কাৰ্ডিগান ক্ৰাফ্ট বিয়েৰ seitan ৰেডিমেড velit. ভিএইচএছ চেম্ব্ৰে লেবৰিছ টেম্পৰ ভেনিয়াম। এনিম মলিট মিনিম কমোডো উলামকো থাণ্ডাৰকেটছ।


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

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

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

মাৰ্কআপ

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

  1. <body data-spy = "স্ক্ৰল কৰক" > ... </body>
মুৰ ডাঙি! Navbar সংযোগসমূহৰ সমাধানযোগ্য id লক্ষ্য থাকিব লাগিব। উদাহৰণস্বৰূপে, a <a href="#home">home</a>dom ৰ দৰে কিবা এটাৰ সৈতে মিল খাব লাগিব <div id="home"></div>

পদ্ধতিসমূহ

.scrollspy('সতেজ')

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

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

বিকল্পসমূহ

নাম প্ৰকাৰ ডিফল্ট বিৱৰণ
অফছেট সংখ্যা ১০ স্ক্ৰলৰ অৱস্থান গণনা কৰাৰ সময়ত ওপৰৰ পৰা অফছেট কৰিবলৈ পিক্সেলসমূহ।

ইভেন্টসমূহ

কাৰ্যক্ৰম বিৱৰণ
সক্ৰিয় কৰক এই ইভেন্টটো যেতিয়াই এটা নতুন বস্তু স্ক্ৰলস্পাইৰ দ্বাৰা সক্ৰিয় হয় তেতিয়াই ফায়াৰ হয়।

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

ফাইলটো ডাউনলোড কৰক

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

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

কেঁচা ডেনিম আপুনি হয়তো তেওঁলোকৰ বিষয়ে শুনা নাই জিন শ্বৰ্ট অষ্টিন। নেচচিউন্ট টোফু ষ্টাম্পটাউন এলিকুৱা, ৰেট্ৰ' চিন্থ মাষ্টাৰ ক্লিনজ। গোঁফ ক্লিচে টেম্পৰ, উইলিয়ামছবাৰ্গ কাৰ্লছ ভেগান হেলভেটিকা। Reprehenderit কসাই ৰেট্ৰ' keffiyeh ড্ৰিমকেচাৰ synth. কচবি চুৱেটাৰ ইউ বানহ মি, কুই ইৰুৰে টেৰী ৰিচাৰ্ডছন এক্স স্কুইড। Aliquip placeat ছালভিয়া চিলাম আইফোন। Seitan aliquip quis cardigan আমেৰিকান পোছাক, কসাই voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


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

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

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

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

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

মাৰ্কআপ

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

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

পদ্ধতিসমূহ

$().টেব

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

  1. <ul class = "nav nav-tabs" id = "মোৰ টেব" >
  2. <li class = "সক্ৰিয়" ><a href = "#ঘৰ" > ঘৰ </a></li>
  3. <li><a href = "#প্ৰফাইল" > আলেখ্যন </a></li>
  4. <li><a href = "#messages" > বাৰ্তাসমূহ </a></li>
  5. <li><a href = "#settings" > সংহতিসমূহ </a></li>
  6. </ul>
  7.  
  8. <div class = "টেব-সামগ্ৰী" >
  9. <div class = "টেব-পেন সক্ৰিয়" id = "ঘৰ" > ... </div>
  10. <div class = "টেব-পেন" id = "প্ৰফাইল" > ... </div>
  11. <div class = "টেব-পেন" id = "বাৰ্তাসমূহ" > ... </div>
  12. <div class = "টেব-পেন" id = "সংহতিসমূহ" > ... </div>
  13. </div>
  14.  
  15. <স্ক্রিপ্ট>
  16. $ ( ফাংচন () {
  17. $ ( '#মোৰ টেব এটা:শেষ' ). tab ( 'দেখাওক' );
  18. })
  19. </script>

ইভেন্টসমূহ

কাৰ্যক্ৰম বিৱৰণ
প্ৰদৰ্শনী এই ইভেন্ট টেব শ্ব'ত ফায়াৰ কৰে, কিন্তু নতুন টেব দেখুওৱাৰ আগতে। সক্ৰিয় টেব আৰু পূৰ্বৰ সক্ৰিয় টেব (যদি উপলব্ধ) লক্ষ্য কৰিবলে ক্ৰমে event.targetআৰু ব্যৱহাৰ কৰক।event.relatedTarget
দেখুওৱা হৈছে এই ইভেন্ট এটা টেব দেখুওৱাৰ পিছত টেব শ্ব'ত ফায়াৰ হয়। সক্ৰিয় টেব আৰু পূৰ্বৰ সক্ৰিয় টেব (যদি উপলব্ধ) লক্ষ্য কৰিবলে ক্ৰমে event.targetআৰু ব্যৱহাৰ কৰক।event.relatedTarget
  1. $ ( 'a[ডাটা-টগল="টেব"]' ). on ( 'দেখা হৈছে' , ফাংচন ( e ) {
  2. . লক্ষ্য // সক্ৰিয় কৰা টেব
  3. . relatedTarget // পূৰ্বৰ টেব
  4. })

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

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

ফাইলটো ডাউনলোড কৰক

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

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

টাইট পেণ্ট নেক্সট লেভেল কেফিয়েহ আপুনি হয়তো শুনা নাই। ফটো বুথ দাড়ি কেঁচা ডেনিম লেটাৰপ্ৰেছ ভেগান মেচেঞ্জাৰ বেগ stumptown. ফাৰ্ম-টু-টেবল seitan, mcsweeney's fixie বহনক্ষম quinoa 8-বিট আমেৰিকান পোছাক এটা টেৰী richardson vinyl chambray আছে. দাড়ি ষ্টাম্পটাউন, কাৰ্ডিগান বানহ মি লোমো থাণ্ডাৰকেটছ। টোফু বায়'ডিজেল উইলিয়ামছবাৰ্গ মাৰ্ফা, চাৰিটা লোকো mcsweeney's ক্লিনজ ভেগান chambray. 'এটা সঁচাকৈয়ে বিদ্ৰুপৰ শিল্পী যিয়েই নহওক কিয় keytar , scenester ফাৰ্ম-টু-টেবুল banksy অষ্টিন টুইটাৰ হেণ্ডেল freegan cred কেঁচা ডেনিম একক-উৎপত্তি কফি ভাইৰেল.


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

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

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

বিকল্পসমূহ

নাম প্ৰকাৰ ডিফল্ট বিৱৰণ
এনিমেচন বুলিয়ান সঁচা সঁজুলিটিপত এটা css ফেড পৰিৱৰ্তন প্ৰয়োগ কৰক
প্লেচমেণ্ট ষ্ট্ৰিং|ফলন 'শীৰ্ষ' সঁজুলিটিপ কেনেকৈ স্থাপন কৰিব - ওপৰত | তলৰ | বাওঁফালে | শুদ্ধ
নিৰ্বাচক তাঁৰ মিছা যদি এটা নিৰ্বাচক প্ৰদান কৰা হয়, সঁজুলিটিপ বস্তুসমূহক ধাৰ্য্য কৰা লক্ষ্যসমূহলে প্ৰত্যায়িত কৰা হ'ব।
অলপ ষ্ট্ৰিং | অনুষ্ঠান '' অবিকল্পিত শিৰোনাম মান যদি `title` টেগ উপস্থিত নহয়
ট্ৰিগাৰ তাঁৰ 'hover' tooltip কেনেকৈ ট্ৰিগাৰ কৰা হয় - hover | ফোকাচ | হাতপুথি
পলম কৰা সংখ্যা | বস্তু

সঁজুলিটিপ দেখুৱা আৰু লুকুৱাবলৈ বিলম্ব (ms) - হস্তচালিত ট্ৰিগাৰ ধৰণৰ বাবে প্ৰযোজ্য নহয়

যদি এটা নম্বৰ যোগান ধৰা হয়, তেন্তে লুকুৱাই/দেখা দুয়োটাতে বিলম্ব প্ৰয়োগ কৰা হয়

বস্তুৰ গঠন হ'ল:delay: { show: 500, hide: 100 }

মুৰ ডাঙি! ব্যক্তিগত সঁজুলি টিপসমূহৰ বাবে বিকল্পসমূহ বিকল্পভাৱে তথ্য বৈশিষ্ট্যসমূহৰ ব্যৱহাৰৰ যোগেদি ধাৰ্য্য কৰিব পাৰি।

মাৰ্কআপ

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

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

পদ্ধতিসমূহ

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

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

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

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

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

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

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

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

.tooltip('টগল')

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

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

popovers সম্পৰ্কে

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

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

ফাইলটো ডাউনলোড কৰক

উদাহৰণ hover popover

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


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

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

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

বিকল্পসমূহ

নাম প্ৰকাৰ ডিফল্ট বিৱৰণ
এনিমেচন বুলিয়ান সঁচা সঁজুলিটিপত এটা css ফেড পৰিৱৰ্তন প্ৰয়োগ কৰক
প্লেচমেণ্ট ষ্ট্ৰিং|ফলন 'শুদ্ধ' পোপঅভাৰ কেনেকৈ পজিচন কৰিব লাগে - শীৰ্ষ | তলৰ | বাওঁফালে | শুদ্ধ
নিৰ্বাচক তাঁৰ মিছা যদি এটা নিৰ্বাচক প্ৰদান কৰা হয়, সঁজুলিটিপ বস্তুসমূহক ধাৰ্য্য কৰা লক্ষ্যসমূহলে প্ৰত্যায়িত কৰা হব
ট্ৰিগাৰ তাঁৰ 'hover' tooltip কেনেকৈ ট্ৰিগাৰ কৰা হয় - hover | ফোকাচ | হাতপুথি
অলপ ষ্ট্ৰিং | অনুষ্ঠান '' অবিকল্পিত শিৰোনাম মান যদি `title` বৈশিষ্ট্য উপস্থিত নহয়
বিষয় ষ্ট্ৰিং | অনুষ্ঠান '' অবিকল্পিত বিষয়বস্তু মান যদি `data-content` বৈশিষ্ট্য উপস্থিত নহয়
পলম কৰা সংখ্যা | বস্তু

popover দেখুৱা আৰু লুকুৱাবলৈ বিলম্ব (ms) - হাতৰ ট্ৰিগাৰ ধৰণৰ বাবে প্ৰযোজ্য নহয়

যদি এটা নম্বৰ যোগান ধৰা হয়, তেন্তে লুকুৱাই/দেখা দুয়োটাতে বিলম্ব প্ৰয়োগ কৰা হয়

বস্তুৰ গঠন হ'ল:delay: { show: 500, hide: 100 }

মুৰ ডাঙি! ব্যক্তিগত পপঅভাৰৰ বাবে বিকল্পসমূহ বিকল্পভাৱে তথ্য বৈশিষ্ট্যসমূহৰ ব্যৱহাৰৰ যোগেদি ধাৰ্য্য কৰিব পাৰি।

মাৰ্কআপ

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

পদ্ধতিসমূহ

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

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

.popover('দেখান')

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

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

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

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

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

.popover('টগল')

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

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

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

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

ডাউনল’ড

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

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

পবিত্ৰ guacamole! Best check yo self, আপুনি বেছি ভাল দেখা নাই।

অ' স্নেপ! আপুনি এটা ভুল পাইছে!

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

এই ব্যৱস্থা লওক বা এইটো কৰক


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

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

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

মাৰ্কআপ

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

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

পদ্ধতিসমূহ

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

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

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

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

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

ইভেন্টসমূহ

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

কাৰ্যক্ৰম বিৱৰণ
বন্ধ এই ইভেন্ট তৎক্ষণাত ফায়াৰ হয় যেতিয়া closeইনষ্টেন্স পদ্ধতি কল কৰা হয়।
বন্ধ কৰা হৈছে এই ইভেন্টটো বন্ধ কৰা হয় যেতিয়া সতৰ্কবাণী বন্ধ কৰা হয় (css পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হোৱালৈ অপেক্ষা কৰিব)।
  1. $ ( '#মোৰ-সতৰ্কবাণী' ). bind ( 'বন্ধ' , ফাংচন () {
  2. // কিবা এটা কৰক...
  3. })

বিষয়ে

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

ফাইলটো ডাউনলোড কৰক

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

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

ষ্টেটফুল
একক টগল
চেকবক্স
ৰেডিঅ'

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

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

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

মাৰ্কআপ

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

  1. <!-- এটা বুটামত টগলিং সক্ৰিয় কৰিবলে data-toggle="button" যোগ কৰক -->
  2. <button class = "btn" data-toggle = "বুটাম" > একক টগল </button>
  3.  
  4. <!-- btn-group --> ত চেকবক্স শৈলী টগলিঙৰ বাবে data-toggle="buttons-checkbox" যোগ কৰক
  5. <div class = "btn-group" ডাটা-টগল = "বুটাম-চেকবক্স" >
  6. <button class = "btn" > বাওঁফালে </button>
  7. <button class = "btn" > মাজৰ </button >
  8. <button class = "btn" > সোঁ </button>
  9. </div>
  10.  
  11. <!-- btn-group ত ৰেডিঅ' শৈলী টগলিঙৰ বাবে data-toggle="buttons-radio" যোগ কৰক -->
  12. <div শ্ৰেণী = "btn-গোট" ডাটা-টগল = "বুটাম-ৰেডিঅ'" >
  13. <button class = "btn" > বাওঁফালে </button>
  14. <button class = "btn" > মাজৰ </button >
  15. <button class = "btn" > সোঁ </button>
  16. </div>

পদ্ধতিসমূহ

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

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

মুৰ ডাঙি! data-toggleআপুনি বৈশিষ্ট্য ব্যৱহাৰ কৰি এটা বুটামৰ স্বয়ংক্ৰিয় টগলিং সামৰ্থবান কৰিব পাৰে ।
  1. <button class = "btn" ডাটা-টগল = "বুটাম" > ... </button>

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

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

  1. <button class = "btn" data-loading-text = "বস্তু লোড কৰা হৈছে..." > ... </button>
মুৰ ডাঙি! Firefox এ পৃষ্ঠা লোডসমূহৰ মাজেৰে নিষ্ক্ৰিয় অৱস্থা বজাই ৰাখে । ইয়াৰ বাবে এটা সমাধান হ'ল ব্যৱহাৰ কৰা autocomplete="off"

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

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

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

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

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

বিষয়ে

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

ফাইলটো ডাউনলোড কৰক

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

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

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

Anim pariatur cliche reprehenderit, এনিম eiusmod উচ্চ জীৱন accusamus টেৰী richardson বিজ্ঞাপন স্কুইড. 3 পহু চন্দ্ৰ officia aute, অ cupidat স্কেটবোর্ড dolor ব্ৰাঞ্চ. খাদ্য ট্ৰাক quinoa nesciunt laborum eiusmod. ব্ৰাঞ্চ 3 পহু চন্দ্ৰ অস্থায়ী, sunt aliqua এটা পাখি রাখা স্কুইড একক উৎপত্তি কফি nulla assumenda shoreditch et. 'নিহিল এনিম কেফিয়েহ হেলভেটিকা', ক্ৰাফ্ট বিয়েৰ লেবাৰ ৱেছ এণ্ডাৰ্ছন ক্ৰেড নেচচিউণ্ট চেপিয়েণ্টে ইএ প্ৰ'ইডেন্ট। বিজ্ঞাপন নিৰামিষ ব্যতিক্ৰমী কসাই ভাইচ লোমো। লেগিংছ occaecat ক্ৰাফ্ট বিয়েৰ ফাৰ্ম-টু-টেবুল, কেঁচা ডেনিম নান্দনিক synth nesciunt আপুনি হয়তো তেওঁলোকৰ accusamus labore বহনক্ষম VHS শুনা নাই.
Anim pariatur cliche reprehenderit, এনিম eiusmod উচ্চ জীৱন accusamus টেৰী richardson বিজ্ঞাপন স্কুইড. 3 পহু চন্দ্ৰ officia aute, অ cupidat স্কেটবোর্ড dolor ব্ৰাঞ্চ. খাদ্য ট্ৰাক quinoa nesciunt laborum eiusmod. ব্ৰাঞ্চ 3 পহু চন্দ্ৰ অস্থায়ী, sunt aliqua এটা পাখি রাখা স্কুইড একক উৎপত্তি কফি nulla assumenda shoreditch et. 'নিহিল এনিম কেফিয়েহ হেলভেটিকা', ক্ৰাফ্ট বিয়েৰ লেবাৰ ৱেছ এণ্ডাৰ্ছন ক্ৰেড নেচচিউণ্ট চেপিয়েণ্টে ইএ প্ৰ'ইডেন্ট। বিজ্ঞাপন নিৰামিষ ব্যতিক্ৰমী কসাই ভাইচ লোমো। লেগিংছ occaecat ক্ৰাফ্ট বিয়েৰ ফাৰ্ম-টু-টেবুল, কেঁচা ডেনিম নান্দনিক synth nesciunt আপুনি হয়তো তেওঁলোকৰ accusamus labore বহনক্ষম VHS শুনা নাই.
Anim pariatur cliche reprehenderit, এনিম eiusmod উচ্চ জীৱন accusamus টেৰী richardson বিজ্ঞাপন স্কুইড. 3 পহু চন্দ্ৰ officia aute, অ cupidat স্কেটবোর্ড dolor ব্ৰাঞ্চ. খাদ্য ট্ৰাক quinoa nesciunt laborum eiusmod. ব্ৰাঞ্চ 3 পহু চন্দ্ৰ অস্থায়ী, sunt aliqua এটা পাখি রাখা স্কুইড একক উৎপত্তি কফি nulla assumenda shoreditch et. 'নিহিল এনিম কেফিয়েহ হেলভেটিকা', ক্ৰাফ্ট বিয়েৰ লেবাৰ ৱেছ এণ্ডাৰ্ছন ক্ৰেড নেচচিউণ্ট চেপিয়েণ্টে ইএ প্ৰ'ইডেন্ট। বিজ্ঞাপন নিৰামিষ ব্যতিক্ৰমী কসাই ভাইচ লোমো। লেগিংছ occaecat ক্ৰাফ্ট বিয়েৰ ফাৰ্ম-টু-টেবুল, কেঁচা ডেনিম নান্দনিক synth nesciunt আপুনি হয়তো তেওঁলোকৰ accusamus labore বহনক্ষম VHS শুনা নাই.

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

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

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

বিকল্পসমূহ

নাম প্ৰকাৰ ডিফল্ট বিৱৰণ
অভিভাৱক নিৰ্বাচক মিছা যদি নিৰ্বাচক তেন্তে ধাৰ্য্য কৰা মূলৰ অন্তৰ্গত সকলো সংকোচনযোগ্য উপাদান বন্ধ কৰা হ'ব যেতিয়া এই সংকোচনযোগ্য বস্তু দেখুৱা হয়। (পৰম্পৰাগত একৰ্ডিয়ন আচৰণৰ সৈতে একে)
টগল কৰক বুলিয়ান সঁচা আমন্ত্ৰণৰ সময়ত সংকোচনযোগ্য উপাদান টগল কৰে

মাৰ্কআপ

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

  1. <button class = "btn btn-danger" ডাটা-টগল = "সংকোচন " ডাটা-লক্ষ্য = "#ডেমো" >
  2. সহজ ভাঙিব পৰা
  3. </বুটাম>
  4.  
  5. <div id = "ডেমো" class = "ত সংকুচিত কৰক" > ... </div>
মুৰ ডাঙি! এটা সংকোচনযোগ্য নিয়ন্ত্ৰণত একৰ্ডিয়ন-ৰ দৰে গোট ব্যৱস্থাপনা যোগ কৰিবলে, তথ্য বৈশিষ্ট্য যোগ কৰক data-parent="#selector"। ইয়াক কাৰ্য্যত চাবলৈ ডেমো চাওক।

পদ্ধতিসমূহ

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

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

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

.collapse('টগল')

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

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

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

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

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

ইভেন্টসমূহ

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

কাৰ্যক্ৰম বিৱৰণ
প্ৰদৰ্শনী এই ইভেন্ট তৎক্ষণাত ফায়াৰ হয় যেতিয়া showইনষ্টেন্স পদ্ধতি কল কৰা হয়।
দেখুওৱা হৈছে এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া এটা সংকুচিত উপাদান ব্যৱহাৰকাৰীৰ বাবে দৃশ্যমান কৰা হয় (css পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হ'বলৈ অপেক্ষা কৰিব)।
লুকাই থকা এই ইভেন্টটো তৎক্ষণাত ফায়াৰ কৰা হয় যেতিয়া hideপদ্ধতিটো কল কৰা হয়।
লুকাই থকা এই ইভেন্টটো জুই কৰা হয় যেতিয়া এটা সংকুচিত উপাদান ব্যৱহাৰকাৰীৰ পৰা লুকুৱাই ৰখা হয় (css পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হ'বলৈ অপেক্ষা কৰিব)।
  1. $ ( '#মোৰ সংকোচনযোগ্য' ). on ( 'লুকাই থকা' , ফাংচন () {
  2. // কিবা এটা কৰক...
  3. })

বিষয়ে

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

ফাইলটো ডাউনলোড কৰক

উদাহৰণ

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


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

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

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

বিকল্পসমূহ

নাম প্ৰকাৰ ডিফল্ট বিৱৰণ
উত্‍স এৰে [ ] বিপক্ষে প্ৰশ্ন কৰিবলগীয়া তথ্যৰ উৎস।
সামগ্ৰী সংখ্যা ড্ৰপডাউনত প্ৰদৰ্শন কৰিবলগীয়া বস্তুৰ সৰ্বাধিক সংখ্যা।
মেচাৰ অনুষ্ঠান ডাঙৰ ডাঙৰ সংবেদনশীল এটা প্ৰশ্ন এটা বস্তুৰ সৈতে মিল আছে নে নাই সেইটো নিৰ্ণয় কৰিবলৈ ব্যৱহাৰ কৰা পদ্ধতি। এটা যুক্তি গ্ৰহণ কৰে, itemযাৰ বিপৰীতে প্ৰশ্নটো পৰীক্ষা কৰিব লাগে। ৰ সৈতে বৰ্তমান প্ৰশ্ন অভিগম কৰক this.querytrueপ্ৰশ্ন এটা মিল হ'লে এটা বুলিয়ান ঘূৰাই দিয়ক ।
সজাই পৰাই তোলা অনুষ্ঠান সঠিক মিল,
ডাঙৰ ডাঙৰ সংবেদনশীল,
ডাঙৰ ডাঙৰ সংবেদনহীন
স্বয়ংক্ৰিয় সম্পূৰ্ণ ফলাফল সজাবলৈ ব্যৱহৃত পদ্ধতি। এটা যুক্তি গ্ৰহণ কৰে itemsআৰু typeahead দৃষ্টান্তৰ পৰিসৰ আছে। বৰ্তমান প্ৰশ্নটোক ৰ সৈতে উল্লেখ কৰক this.query
হাইলাইটাৰ অনুষ্ঠান সকলো অবিকল্পিত মিল হাইলাইট কৰে স্বয়ংক্ৰিয় সম্পূৰ্ণ ফলাফলসমূহ উজ্জ্বল কৰিবলৈ ব্যৱহাৰ কৰা পদ্ধতি। এটা যুক্তি গ্ৰহণ কৰে itemআৰু typeahead দৃষ্টান্তৰ পৰিসৰ আছে। html ঘূৰাই দিব লাগে।

মাৰ্কআপ

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

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

পদ্ধতিসমূহ

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

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