Bootstrap ৰ উপাদানসমূহক জীৱন্তলৈ আনিব—এতিয়া 13 টা স্বনিৰ্বাচিত jQuery প্লাগইনৰ সৈতে।
প্লাগিনসমূহক পৃথকে পৃথকে অন্তৰ্ভুক্ত কৰিব পাৰি (যদিও কিছুমানৰ নিৰ্ভৰশীলতাৰ প্ৰয়োজন আছে), বা সকলো একেলগে। bootstrap.js আৰু bootstrap.min.js দুয়োটাতে এটা নথিপত্ৰত সকলো প্লাগ-ইন থাকে ।
আপুনি সকলো Bootstrap প্লাগ-ইনসমূহ কেৱল মাৰ্কআপ API ৰ যোগেদি ব্যৱহাৰ কৰিব পাৰিব জাভাস্ক্রিপ্টৰ এটা শাৰী লিখা নোহোৱাকৈ । এইটো Bootstrap ৰ প্ৰথম শ্ৰেণীৰ API আৰু এটা প্লাগইন ব্যৱহাৰ কৰাৰ সময়ত আপোনাৰ প্ৰথম বিবেচনা হ'ব লাগে ।
এইখিনিতে ক’ব পাৰি যে কিছুমান পৰিস্থিতিত এই কাৰ্য্যকৰীতা বন্ধ কৰাটো বাঞ্ছনীয় হ’ব পাৰে। গতিকে, আমি `'data-api'` ৰ সৈতে বডি নামস্পেচ কৰা দেহৰ সকলো ইভেন্ট আনবাইণ্ড কৰি ডাটা এট্ৰিবিউট API নিষ্ক্ৰিয় কৰাৰ ক্ষমতাও প্ৰদান কৰোঁ। এইটো এনেকুৱা দেখা যায়:
- $ ( 'শৰীৰ' ). অফ ( '.ডাটা-এপিই' )
বৈকল্পিকভাৱে, এটা নিৰ্দিষ্ট প্লাগইনক লক্ষ্য কৰিবলে, মাত্ৰ প্লাগইনৰ নাম এটা নামস্থান হিচাপে ডাটা-এপিই নামস্থানৰ সৈতে এনেদৰে অন্তৰ্ভুক্ত কৰক:
- $ ( 'শৰীৰ' ). বন্ধ ( '.alert.data-api' )
আমি এইটোও বিশ্বাস কৰোঁ যে আপুনি সকলো বুটষ্ট্ৰেপ প্লাগ-ইনসমূহ কেৱল জাভাস্ক্রিপ্ট API ৰ যোগেদি ব্যৱহাৰ কৰিব পাৰিব লাগে। সকলো ৰাজহুৱা API একক, শৃংখলাবদ্ধ পদ্ধতি, আৰু কাৰ্য্য কৰা সংগ্ৰহ ঘূৰাই দিয়ে।
- $ ( ".btn.বিপদ" ). বুটাম ( "টগল কৰক" ). addClass ( "চৰ্বি" )
সকলো পদ্ধতিয়ে এটা বৈকল্পিক বিকল্প বস্তু, এটা স্ট্ৰিং যি এটা নিৰ্দিষ্ট পদ্ধতিক লক্ষ্য কৰে, বা একোৱেই গ্ৰহণ নকৰে (যি অবিকল্পিত আচৰণৰ সৈতে এটা প্লাগ-ইন আৰম্ভ কৰে):
- $ ( "#মোৰ মডাল" ). modal () // অবিকল্পিতসমূহৰ সৈতে আৰম্ভ কৰা হৈছে
- $ ( "#মোৰ মডাল" ). modal ({ keyboard : false }) // কোনো কিবৰ্ডৰ সৈতে আৰম্ভ কৰা হৈছে
- $ ( "#মোৰ মডাল" ). modal ( 'show' ) // তৎক্ষণাত দেখুৱা আৰম্ভ কৰে আৰু আমন্ত্ৰণ কৰে
প্ৰতিটো প্লাগ-ইনে ইয়াৰ কেঁচা নিৰ্মাতাক এটা `নিৰ্মাতা` বৈশিষ্ট্যত উন্মোচন কৰে: $.fn.popover.Constructor
। যদি আপুনি এটা নিৰ্দিষ্ট প্লাগ-ইন উদাহৰণ পাব বিচাৰে, ইয়াক এটা উপাদানৰ পৰা পোনপটীয়াকৈ উদ্ধাৰ কৰক: $('[rel=popover]').data('popover')
।
কেতিয়াবা অন্য UI ফ্ৰেমৱৰ্কসমূহৰ সৈতে Bootstrap প্লাগইনসমূহ ব্যৱহাৰ কৰাটো প্ৰয়োজনীয়। এই পৰিস্থিতিত নামস্থানৰ সংঘৰ্ষ মাজে মাজে হ’ব পাৰে। যদি এনেকুৱা হয়, আপুনি .noConflict
মান ঘূৰাই দিব বিচৰা প্লাগ-ইনক কল কৰিব পাৰে ।
- var বুটষ্ট্ৰেপবুটাম = $ . fn . বুটাম . noConflict () // $.fn.button পূৰ্বতে নিযুক্ত মানলৈ ঘূৰাই দিয়ক
- $ . fn . bootstrapBtn = bootstrapButton // $().bootstrapBtn বুটষ্ট্ৰেপ কাৰ্য্যকৰীতা দিয়ক
বুটষ্ট্ৰেপে বেছিভাগ প্লাগইনৰ একক কাৰ্য্যসমূহৰ বাবে স্বনিৰ্বাচিত ইভেন্টসমূহ প্ৰদান কৰে। সাধাৰণতে, এইবোৰ এটা অব্যয় আৰু অতীত বিভক্তি ৰূপত আহে - য'ত অব্যয় (ex. show
) এটা পৰিঘটনাৰ আৰম্ভণিতে ট্ৰিগাৰ হয়, আৰু ইয়াৰ অতীত বিভক্তি ৰূপ (ex. shown
) এটা কাৰ্য্য সম্পূৰ্ণ হোৱাৰ লগে লগে ট্ৰিগাৰ হয়।
সকলো অসীম ইভেন্টে preventDefault কাৰ্য্যকৰীতা প্ৰদান কৰে। ই এটা কাৰ্য্য আৰম্ভ হোৱাৰ আগতে নিষ্পাদন বন্ধ কৰাৰ ক্ষমতা প্ৰদান কৰে।
- $ ( '#মোৰ মডাল' ). on ( 'দেখাওক' , ফাংচন ( e ) {
- যদি (! ডাটা ) ঘূৰাই দিয়ে e . preventDefault () // মডাল দেখুৱাৰ পৰা বন্ধ কৰে
- })
সৰল পৰিবৰ্তন প্ৰভাৱসমূহৰ বাবে, bootstrap-transition.js অন্য JS নথিপত্ৰসমূহৰ সৈতে এবাৰ অন্তৰ্ভুক্ত কৰক । যদি আপুনি কমপাইল কৰা (বা সৰু কৰা) bootstrap.js ব্যৱহাৰ কৰিছে , ইয়াক অন্তৰ্ভুক্ত কৰাৰ প্ৰয়োজন নাই—ই ইতিমধ্যে আছে ।
পৰিৱৰ্তন প্লাগ-ইনৰ কেইটামান উদাহৰণ:
মডালসমূহ ষ্ট্ৰীমলাইন কৰা হৈছে, কিন্তু নমনীয়, নূন্যতম প্ৰয়োজনীয় কাৰ্য্যকৰীতা আৰু স্মাৰ্ট অবিকল্পিতসমূহৰ সৈতে সংলাপ প্ৰমপ্টসমূহ।
হেডাৰ, দেহ, আৰু ফুটাৰত কাৰ্য্যসমূহৰ গোটৰ সৈতে এটা ৰেণ্ডাৰ কৰা মডাল।
ৱান ফাইন বডি...
- <div class = "মডাল লুকুৱাওক ম্লান" >
- <div class = "ম'ডাল-হেডাৰ" >
- <বুটামৰ ধৰণ = "বুটাম" শ্ৰেণী = "বন্ধ কৰক" data-dismiss = "ম'ডাল" aria-hidden = "true" > × </বুটাম>
- <h3> মডাল হেডাৰ </h3>
- </div>
- <div class = "মডাল-শৰীৰ" >
- <p> এটা মিহি শৰীৰ... </p>
- </div>
- <div class = "মডাল-ফুটাৰ" >
- <a href = "#" class = "btn" > বন্ধ কৰক </a>
- <a href = "#" class = "btn btn-primary" > পৰিবৰ্তনসমূহ সংৰক্ষণ কৰক </a>
- </div>
- </div>
তলৰ বুটামটো ক্লিক কৰি জাভাস্ক্রিপ্টৰ যোগেদি এটা মডাল টগল কৰক। ই তললৈ স্লাইড হৈ পৃষ্ঠাৰ ওপৰৰ পৰা ফিকে হৈ যাব।
- <!-- মডাল ট্ৰিগাৰ কৰিবলৈ বুটাম -->
- <a href = "#myModal" role = "button" class = "btn" data-toggle = "ম'ডাল" > ডেমো মডাল আৰম্ভ কৰক </a>
- <!-- মডাল -->
- <div id = "myModal" class = "ম'ডাল লুকুৱাওক ম্লান" tabindex = "-1" ভূমিকা = "সংলাপ" aria-labelledby = "myModalLabel" aria-hidden = "সঁচা" >
- <div class = "ম'ডাল-হেডাৰ" >
- <button type = "button" class = "বন্ধ কৰক" data-dismiss = "ম'ডাল" aria-hidden = "সঁচা" > × </button>
- <h3 id = "myModalLabel" > মডাল হেডাৰ </h3>
- </div>
- <div class = "মডাল-শৰীৰ" >
- <p> এটা মিহি শৰীৰ... </p>
- </div>
- <div class = "মডাল-ফুটাৰ" >
- <button class = "btn" data-dismiss = "ম'ডাল" aria-hidden = "সঁচা" > বন্ধ কৰক </button>
- <button class = "btn btn-primary" > পৰিবৰ্তনসমূহ সংৰক্ষণ কৰক </button>
- </div>
- </div>
জাভাস্ক্রিপ্ট লিখা নোহোৱাকৈ এটা মডাল সক্ৰিয় কৰক। data-toggle="modal"
এটা নিয়ন্ত্ৰক উপাদানত সংহতি কৰক , যেনে এটা বুটাম, এটা data-target="#foo"
বা href="#foo"
টগল কৰিবলে এটা নিৰ্দিষ্ট মডাল লক্ষ্য কৰিবলৈ।
- <button type = "button" data-toggle = "ম'ডাল" ডাটা-লক্ষ্য = "#myModal" > মডাল আৰম্ভ কৰক </button>
myModal
জাভাস্ক্রিপ্টৰ এটা শাৰীৰ সৈতে id ৰ সৈতে এটা মডাল কল কৰক :
- $ ( '#মোৰ মডাল' ). modal ( বিকল্পসমূহ )
বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক data-
, যেনে data-backdrop=""
.
নাম | প্ৰকাৰ | ডিফল্ট | বিৱৰণ |
---|---|---|---|
পটভূমি | বুলিয়ান | সঁচা | এটা মডাল-বেকড্ৰপ উপাদান অন্তৰ্ভুক্ত কৰা হৈছে। বৈকল্পিকভাৱে, static এটা পটভূমিৰ বাবে ধাৰ্য্য কৰক যি ক্লিকত মডাল বন্ধ নকৰে। |
কিবৰ্ড | বুলিয়ান | সঁচা | এস্কেপ কি' টিপিলে মডাল বন্ধ কৰে |
প্ৰদৰ্শনী | বুলিয়ান | সঁচা | আৰম্ভণি কৰাৰ সময়ত মডাল দেখুৱায়। |
দূৰৱৰ্তী | পথ | মিছা | যদি এটা দূৰৱৰ্তী url প্ৰদান কৰা হয়, বিষয়বস্তু jQuery ৰ
|
আপোনাৰ বিষয়বস্তু এটা মডাল হিচাপে সক্ৰিয় কৰে। এটা বৈকল্পিক বিকল্পসমূহ গ্ৰহণ কৰে object
।
- $ ( '#মোৰ মডাল' ). মডাল ({
- keyboard : মিছা
- })
এটা মডাল হস্তচালিতভাৱে টগল কৰে।
- $ ( '#মোৰ মডাল' ). modal ( 'টগল' )
হস্তচালিতভাৱে এটা মডাল খোলে।
- $ ( '#মোৰ মডাল' ). modal ( 'দেখান' )
এটা মডাল হস্তচালিতভাৱে লুকুৱাই ৰাখে।
- $ ( '#মোৰ মডাল' ). modal ( 'লুকুৱাওক' )
বুটষ্ট্ৰেপৰ মডাল শ্ৰেণীয়ে মডাল কাৰ্য্যকৰীতাত হুক কৰাৰ বাবে কেইটামান ইভেন্ট উন্মোচন কৰে।
কাৰ্যক্ৰম | বিৱৰণ |
---|---|
প্ৰদৰ্শনী | এই ইভেন্ট তৎক্ষণাত ফায়াৰ হয় যেতিয়া show ইনষ্টেন্স পদ্ধতি কল কৰা হয়। |
দেখুওৱা হৈছে | এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া মডালক ব্যৱহাৰকাৰীৰ বাবে দৃশ্যমান কৰা হয় (css পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হ'বলৈ অপেক্ষা কৰিব)। |
লুকাই থকা | এই ইভেন্ট তৎক্ষণাত ফায়াৰ কৰা হয় যেতিয়া hide ইনষ্টেন্স পদ্ধতি কল কৰা হয়। |
লুকাই থকা | এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া মডাল ব্যৱহাৰকাৰীৰ পৰা লুকুৱাই ৰখা শেষ হয় (css পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হ'বলৈ অপেক্ষা কৰিব)। |
- $ ( '#মোৰ মডাল' ). on ( 'লুকাই থকা' , ফাংচন () {
- // কিবা এটা কৰক...
- })
এই সৰল প্লাগইনৰ সৈতে প্ৰায় যিকোনো বস্তুত ড্ৰপডাউন মেনুসমূহ যোগ কৰক, navbar, tabs, আৰু pills অন্তৰ্ভুক্ত কৰি।
data-toggle="dropdown"
এটা ড্ৰপডাউন টগল কৰিবলৈ এটা লিংক বা বুটামত যোগ কৰক ।
- <div class = "ড্ৰপডাউন" >
- <a class = "ড্ৰপডাউন-টগল" data-toggle = "ড্ৰপডাউন" href = "#" > ড্ৰপডাউন ট্ৰিগাৰ </a>
- <ul class = "ড্ৰপডাউন-মেনু" ভূমিকা = "মেনু" aria-labelledby = "dLabel" >
- ...
- </ul>
- </div>
URL সমূহ অক্ষত ৰাখিবলৈ, data-target
ৰ পৰিবৰ্তে বৈশিষ্ট্য ব্যৱহাৰ কৰক href="#"
।
- <div class = "ড্ৰপডাউন" >
- <a class = "ড্ৰপডাউন-টগল" id = "dLabel" ভূমিকা = "বুটাম" ডাটা-টগল = "ড্ৰপডাউন" ডাটা-লক্ষ্য = "#" href = "/পৃষ্ঠা.html" >
- ড্ৰপডাউন
- <b class = "কেৰেট" </b>
- </a>
- <ul class = "ড্ৰপডাউন-মেনু" ভূমিকা = "মেনু" aria-labelledby = "dLabel" >
- ...
- </ul>
- </div>
জাভাস্ক্রিপ্টৰ জৰিয়তে ড্ৰপডাউনসমূহ কল কৰক:
- $ ( '.ড্ৰপডাউন-টগল' ). ড্ৰপডাউন ()
একো নাই
এটা প্ৰদত্ত navbar বা টেব কৰা নেভিগেচনৰ বাবে মেনুসমূহ টগল কৰাৰ বাবে এটা প্ৰগ্ৰামেটিক api।
ScrollSpy প্লাগইন স্ক্ৰল অৱস্থানৰ ওপৰত ভিত্তি কৰি স্বয়ংক্ৰিয়ভাৱে nav লক্ষ্যসমূহ আপডেইট কৰাৰ বাবে। 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.
ভেনিয়াম মাৰ্ফা গোঁফ স্কেটবৰ্ড, 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.
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. ভিএইচএছ চেম্ব্ৰে লেবৰিছ টেম্পৰ ভেনিয়াম। এনিম মলিট মিনিম কমোডো উলামকো থাণ্ডাৰকেটছ।
আপোনাৰ টপবাৰ নেভিগেচনত সহজে scrollspy আচৰণ যোগ কৰিবলে, মাত্ৰ data-spy="scroll"
আপুনি চোৰাংচোৱাগিৰি কৰিব বিচৰা উপাদানত যোগ কৰক (বেছিভাগ সাধাৰণতে এইটো হ'ব শৰীৰ) আৰু data-target=".navbar"
কোনটো nav ব্যৱহাৰ কৰিব নিৰ্ব্বাচন কৰিবলে। .nav
আপুনি এটা উপাদানৰ সৈতে scrollspy ব্যৱহাৰ কৰিব বিচাৰিব ।
- <body data-spy = "স্ক্ৰল" ডাটা-লক্ষ্য = ".navbar" > ... </body>
জাভাস্ক্রিপ্টৰ জৰিয়তে scrollspy কল কৰক:
- $ ( '#নৱবাৰ' ). scrollspy ()
<a href="#home">home</a>
dom ৰ দৰে কিবা এটাৰ সৈতে মিল খাব লাগিব
<div id="home"></div>
।
DOM ৰ পৰা উপাদানসমূহ যোগ বা আঁতৰোৱাৰ সৈতে scrollspy ব্যৱহাৰ কৰাৰ সময়ত, আপুনি সতেজ পদ্ধতিক এনেদৰে কল কৰিব লাগিব:
- $ ( '[ডাটা-স্পাই="স্ক্ৰ'ল"]' ). প্ৰতিটো ( ফাংচন () {
- var $spy = $ ( এইটো ). scrollspy ( 'সতেজ' )
- });
বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক data-
, যেনে data-offset=""
.
নাম | প্ৰকাৰ | ডিফল্ট | বিৱৰণ |
---|---|---|---|
অফছেট | সংখ্যা | ১০ | স্ক্ৰলৰ অৱস্থান গণনা কৰাৰ সময়ত ওপৰৰ পৰা অফছেট কৰিবলৈ পিক্সেলসমূহ। |
কাৰ্যক্ৰম | বিৱৰণ |
---|---|
সক্ৰিয় কৰক | এই ইভেন্টটো যেতিয়াই এটা নতুন বস্তু স্ক্ৰলস্পাইৰ দ্বাৰা সক্ৰিয় হয় তেতিয়াই ফায়াৰ হয়। |
স্থানীয় বিষয়বস্তুৰ পেনসমূহৰ মাজেৰে পৰিৱৰ্তন কৰিবলৈ দ্ৰুত, গতিশীল টেব কাৰ্য্যকৰীতা যোগ কৰক, আনকি ড্ৰপডাউন মেনুসমূহৰ যোগেদিও।
কেঁচা ডেনিম আপুনি হয়তো তেওঁলোকৰ বিষয়ে শুনা নাই জিন শ্বৰ্ট অষ্টিন। নেচচিউন্ট টোফু ষ্টাম্পটাউন এলিকুৱা, ৰেট্ৰ' চিন্থ মাষ্টাৰ ক্লিনজ। গোঁফ ক্লিচে টেম্পৰ, উইলিয়ামছবাৰ্গ কাৰ্লছ ভেগান হেলভেটিকা। 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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
জাভাস্ক্রিপ্টৰ যোগেদি টেবেবল টেবসমূহ সামৰ্থবান কৰক (প্ৰতিটো টেব পৃথকে পৃথকে সক্ৰিয় কৰিব লাগিব):
- $ ( '#মোৰ টেব এটা' ). ক্লিক কৰক ( ফাংচন ( e ) {
- ঙ . preventDefault ();
- $ ( এইটো ). tab ( 'দেখাওক' );
- })
আপুনি কেইবাটাও উপায়েৰে ব্যক্তিগত টেবসমূহ সক্ৰিয় কৰিব পাৰে:
- $ ( '#মোৰ টেব এটা[href="#প্ৰফাইল"]' ). tab ( 'দেখাওক' ); // নামৰ দ্বাৰা টেব নিৰ্বাচন কৰক
- $ ( '#মোৰ টেব এটা:প্ৰথম' ). tab ( 'দেখাওক' ); // প্ৰথম টেব নিৰ্বাচন কৰক
- $ ( '#মোৰ টেব এটা:শেষ' ). tab ( 'দেখাওক' ); // শেষৰ টেব নিৰ্বাচন কৰক
- $ ( '#মোৰ টেব li:eq(২) a' ). tab ( 'দেখাওক' ); // তৃতীয় টেব নিৰ্ব্বাচন কৰক (0-indexed)
আপুনি কোনো জাভাস্ক্রিপ্ট লিখা নোহোৱাকৈ এটা টেব বা পিল নেভিগেচন সক্ৰিয় কৰিব পাৰে কেৱল এটা উপাদান নিৰ্দিষ্ট কৰি data-toggle="tab"
বা তাৰ ওপৰত। টেবত আৰু শ্ৰেণীসমূহ data-toggle="pill"
যোগ কৰিলে বুটষ্ট্ৰেপ টেব ষ্টাইলিং প্ৰয়োগ কৰিব।nav
nav-tabs
ul
- <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>
কাৰ্যক্ৰম | বিৱৰণ |
---|---|
প্ৰদৰ্শনী | এই ইভেন্ট টেব শ্ব'ত ফায়াৰ কৰে, কিন্তু নতুন টেব দেখুওৱাৰ আগতে। সক্ৰিয় টেব আৰু পূৰ্বৰ সক্ৰিয় টেব (যদি উপলব্ধ) লক্ষ্য কৰিবলে ক্ৰমে event.target আৰু ব্যৱহাৰ কৰক।event.relatedTarget |
দেখুওৱা হৈছে | এই ইভেন্ট এটা টেব দেখুওৱাৰ পিছত টেব শ্ব'ত ফায়াৰ হয়। সক্ৰিয় টেব আৰু পূৰ্বৰ সক্ৰিয় টেব (যদি উপলব্ধ) লক্ষ্য কৰিবলে ক্ৰমে event.target আৰু ব্যৱহাৰ কৰক।event.relatedTarget |
- $ ( 'a[ডাটা-টগল="টেব"]' ). on ( 'দেখা হৈছে' , ফাংচন ( e ) {
- ঙ . লক্ষ্য // সক্ৰিয় কৰা টেব
- ঙ . relatedTarget // পূৰ্বৰ টেব
- })
জেছন ফ্ৰেমৰ দ্বাৰা লিখা চমৎকাৰ jQuery.tipsy প্লাগইনৰ দ্বাৰা অনুপ্ৰাণিত; সঁজুলি টিপসমূহ এটা আপডেইট কৰা সংস্কৰণ, যি ছবিসমূহৰ ওপৰত নিৰ্ভৰ নকৰে, এনিমেচনসমূহৰ বাবে CSS3 ব্যৱহাৰ কৰে, আৰু স্থানীয় শিৰোনাম সংৰক্ষণৰ বাবে ডাটা-বৈশিষ্ট্যসমূহ।
পৰিৱেশনৰ কাৰণে, সঁজুলিটিপ আৰু পপঅভাৰ ডাটা-এপিছসমূহ অপ্ট ইন কৰা হৈছে, অৰ্থাৎ আপুনি নিজেই সিহতক আৰম্ভ কৰিব লাগিব ।
সঁজুলি টিপছ চাবলৈ তলৰ লিংকসমূহৰ ওপৰত হাউভাৰ কৰক:
টাইট পেণ্ট নেক্সট লেভেল কেফিয়েহ আপুনি হয়তো শুনা নাই। ফটো বুথ দাড়ি কেঁচা ডেনিম লেটাৰপ্ৰেছ ভেগান মেচেঞ্জাৰ বেগ stumptown. ফাৰ্ম-টু-টেবল seitan, mcsweeney's fixie বহনক্ষম quinoa 8-বিট আমেৰিকান পোছাক এটা টেৰী richardson vinyl chambray আছে. দাড়ি ষ্টাম্পটাউন, কাৰ্ডিগান বানহ মি লোমো থাণ্ডাৰকেটছ। টোফু বায়'ডিজেল উইলিয়ামছবাৰ্গ মাৰ্ফা, চাৰিটা লোকো mcsweeney's ক্লিনজ ভেগান chambray. 'এটা সঁচাকৈয়ে বিদ্ৰুপৰ শিল্পী যিয়েই নহওক কিয় keytar , scenester ফাৰ্ম-টু-টেবুল banksy অষ্টিন টুইটাৰ হেণ্ডেল freegan cred কেঁচা ডেনিম একক-উৎপত্তি কফি ভাইৰেল.
বুটষ্ট্ৰেপ ইনপুট গোটসমূহৰ সৈতে সঁজুলি টিপসমূহ আৰু পপঅভাৰসমূহ ব্যৱহাৰ কৰাৰ সময়ত, আপুনি container
অবাঞ্চিত পাৰ্শ্বক্ৰিয়াসমূহ এৰাই চলিবলৈ (তলত নথিভুক্ত) বিকল্প সংহতি কৰিব লাগিব।
জাভাস্ক্রিপ্টৰ যোগেদি সঁজুলিটিপ ট্ৰিগাৰ কৰক:
- $ ( '#উদাহৰণ' ). সঁজুলি টিপ ( বিকল্পসমূহ )
বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক data-
, যেনে data-animation=""
.
নাম | প্ৰকাৰ | ডিফল্ট | বিৱৰণ |
---|---|---|---|
এনিমেচন | বুলিয়ান | সঁচা | সঁজুলিটিপত এটা css ফেড পৰিৱৰ্তন প্ৰয়োগ কৰক |
html | বুলিয়ান | মিছা | টুলটিপত html সন্নিৱিষ্ট কৰক। যদি মিছা হয়, jquery ৰ text পদ্ধতি ব্যৱহাৰ কৰা হ'ব dom ত বিষয়বস্তু সন্নিৱিষ্ট কৰিবলৈ। XSS আক্ৰমণৰ বাবে চিন্তিত হ'লে লিখা ব্যৱহাৰ কৰক। |
প্লেচমেণ্ট | ষ্ট্ৰিং | অনুষ্ঠান | 'শীৰ্ষ' | সঁজুলিটিপ কেনেকৈ স্থাপন কৰিব - ওপৰত | তলৰ | বাওঁফালে | শুদ্ধ |
নিৰ্বাচক | তাঁৰ | মিছা | যদি এটা নিৰ্বাচক প্ৰদান কৰা হয়, সঁজুলিটিপ বস্তুসমূহক ধাৰ্য্য কৰা লক্ষ্যসমূহলে প্ৰত্যায়িত কৰা হ'ব। |
অলপ | ষ্ট্ৰিং | অনুষ্ঠান | '' | অবিকল্পিত শিৰোনাম মান যদি `title` টেগ উপস্থিত নহয় |
ট্ৰিগাৰ | তাঁৰ | 'hover focus' | সঁজুলি টিপ কেনেকৈ ট্ৰিগাৰ কৰা হয় - | hover | ফোকাচ | হাতপুথি. মন কৰিব যে আপুনি কেছ পাছ ট্ৰিগাৰ mutliple, স্থান পৃথক, ট্ৰিগাৰ ধৰণসমূহ। |
পলম কৰা | সংখ্যা | বস্তু | ০ | সঁজুলিটিপ দেখুৱা আৰু লুকুৱাবলৈ বিলম্ব (ms) - হস্তচালিত ট্ৰিগাৰ ধৰণৰ বাবে প্ৰযোজ্য নহয় যদি এটা নম্বৰ যোগান ধৰা হয়, তেন্তে লুকুৱাই/দেখা দুয়োটাতে বিলম্ব প্ৰয়োগ কৰা হয় বস্তুৰ গঠন হ'ল: |
পাত্ৰ | ষ্ট্ৰিং | মিছা | মিছা | এটা নিৰ্দিষ্ট উপাদানত সঁজুলিটিপ সংযোজন কৰে |
- <a href = "#" data-toggle = "সঁজুলিৰ টিপ" title = "প্ৰথম সঁজুলি টিপ" > মোৰ ওপৰত মাউছ কৰক </a>
এটা উপাদান সংগ্ৰহৰ সৈতে এটা সঁজুলিটিপ নিয়ন্ত্ৰক সংযুক্ত কৰে।
এটা উপাদানৰ সঁজুলিটিপ প্ৰকাশ কৰে।
- $ ( '#উপাদান' ). tooltip ( 'দেখাওক' )
এটা উপাদানৰ সঁজুলিটিপ লুকুৱাই ৰাখে���
- $ ( '#উপাদান' ). tooltip ( 'লুকুৱাওক' )
এটা উপাদানৰ সঁজুলিটিপ টগল কৰে।
- $ ( '#উপাদান' ). সঁজুলি টিপ ( 'টগল' )
এটা উপাদানৰ সঁজুলিটিপ লুকুৱাই ৰাখে আৰু ধ্বংস কৰে।
- $ ( '#উপাদান' ). tooltip ( 'ধ্বংস' )
আইপেডত থকাৰ দৰে, গৌণ তথ্য আৱাসৰ বাবে যিকোনো উপাদানত বিষয়বস্তুৰ সৰু সৰু অভাৰলে যোগ কৰক। পপঅভাৰ ট্ৰিগাৰ কৰিবলৈ বুটামৰ ওপৰত মাউছ কৰক। টুলটিপ অন্তৰ্ভুক্ত কৰাৰ প্ৰয়োজন ।
চাৰিটা বিকল্প উপলব্ধ: ওপৰ, সোঁ, তললৈ, আৰু বাওঁ প্ৰান্তিককৃত।
ল'বৰ্টিছত চেড প'ছুয়েৰ কনচেক্টেটুৰ এষ্ট। এনিয়ান ইউ লিও কোৱাম। পেলেণ্টেস্ক অৰ্নাৰ ছেম লেচিনিয়া কোৱাম ভেনেনাটিছ ভেষ্টিবুলাম।
ল'বৰ্টিছত চেড প'ছুয়েৰ কনচেক্টেটুৰ এষ্ট। এনিয়ান ইউ লিও কোৱাম। পেলেণ্টেস্ক অৰ্নাৰ ছেম লেচিনিয়া কোৱাম ভেনেনাটিছ ভেষ্টিবুলাম।
ল'বৰ্টিছত চেড প'ছুয়েৰ কনচেক্টেটুৰ এষ্ট। এনিয়ান ইউ লিও কোৱাম। পেলেণ্টেস্ক অৰ্নাৰ ছেম লেচিনিয়া কোৱাম ভেনেনাটিছ ভেষ্টিবুলাম।
ল'বৰ্টিছত চেড প'ছুয়েৰ কনচেক্টেটুৰ এষ্ট। এনিয়ান ইউ লিও কোৱাম। পেলেণ্টেস্ক অৰ্নাৰ ছেম লেচিনিয়া কোৱাম ভেনেনাটিছ ভেষ্টিবুলাম।
পপঅভাৰ হিচাপে দেখুওৱা কোনো মাৰ্কআপ জাভাস্ক্রিপ্ট আৰু এটা data
বৈশিষ্ট্যৰ ভিতৰত থকা বিষয়বস্তুৰ পৰা সৃষ্টি কৰা নহয়।
জাভাস্ক্রিপ্টৰ যোগেদি popovers সামৰ্থবান কৰক:
- $ ( '#উদাহৰণ' ). popover ( বিকল্পসমূহ )
বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক data-
, যেনে data-animation=""
.
নাম | প্ৰকাৰ | ডিফল্ট | বিৱৰণ |
---|---|---|---|
এনিমেচন | বুলিয়ান | সঁচা | সঁজুলিটিপত এটা css ফেড পৰিৱৰ্তন প্ৰয়োগ কৰক |
html | বুলিয়ান | মিছা | popover ত html সন্নিৱিষ্ট কৰক। যদি মিছা হয়, jquery ৰ text পদ্ধতি ব্যৱহাৰ কৰা হ'ব dom ত বিষয়বস্তু সন্নিৱিষ্ট কৰিবলৈ। XSS আক্ৰমণৰ বাবে চিন্তিত হ'লে লিখা ব্যৱহাৰ কৰক। |
প্লেচমেণ্ট | ষ্ট্ৰিং | অনুষ্ঠান | 'শুদ্ধ' | পোপঅভাৰ কেনেকৈ পজিচন কৰিব লাগে - শীৰ্ষ | তলৰ | বাওঁফালে | শুদ্ধ |
নিৰ্বাচক | তাঁৰ | মিছা | যদি এটা নিৰ্বাচক প্ৰদান কৰা হয়, সঁজুলিটিপ বস্তুসমূহক ধাৰ্য্য কৰা লক্ষ্যসমূহলে প্ৰত্যায়িত কৰা হব |
ট্ৰিগাৰ | তাঁৰ | 'ক্লিক' | popover কেনেকৈ ট্ৰিগাৰ কৰা হয় - ক্লিক কৰক | hover | ফোকাচ | হাতপুথি |
অলপ | ষ্ট্ৰিং | অনুষ্ঠান | '' | অবিকল্পিত শিৰোনাম মান যদি `title` বৈশিষ্ট্য উপস্থিত নহয় |
বিষয় | ষ্ট্ৰিং | অনুষ্ঠান | '' | অবিকল্পিত বিষয়বস্তু মান যদি `data-content` বৈশিষ্ট্য উপস্থিত নহয় |
পলম কৰা | সংখ্যা | বস্তু | ০ | popover দেখুৱা আৰু লুকুৱাবলৈ বিলম্ব (ms) - হাতৰ ট্ৰিগাৰ ধৰণৰ বাবে প্ৰযোজ্য নহয় যদি এটা নম্বৰ যোগান ধৰা হয়, তেন্তে লুকুৱাই/দেখা দুয়োটাতে বিলম্ব প্ৰয়োগ কৰা হয় বস্তুৰ গঠন হ'ল: |
পাত্ৰ | ষ্ট্ৰিং | মিছা | মিছা | এটা নিৰ্দিষ্ট উপাদানৰ সৈতে পপঅভাৰ সংযোজন কৰে |
পৰিৱেশন কাৰণৰ বাবে, Tooltip আৰু Popover data-apis opt in হয়। যদি আপুনি সিহতক ব্যৱহাৰ কৰিব বিচাৰে মাত্ৰ এটা নিৰ্বাচক বিকল্প ধাৰ্য্য কৰক।
এটা উপাদান সংগ্ৰহৰ বাবে popovers আৰম্ভ কৰে।
এটা উপাদান popover প্ৰকাশ কৰে।
- $ ( '#উপাদান' ). popover ( 'দেখান' )
এটা উপাদান popover লুকুৱাই ৰাখে।
- $ ( '#উপাদান' ). popover ( 'লুকুৱাওক' )
এটা উপাদান পপঅভাৰ টগল কৰে।
- $ ( '#উপাদান' ). popover ( 'টগল' )
এটা উপাদানৰ পপঅভাৰ লুকুৱাই ৰাখে আৰু ধ্বংস কৰে।
- $ ( '#উপাদান' ). popover ( 'ধ্বংস' )
এই প্লাগ-ইনৰ সৈতে সকলো সতৰ্কবাণী বাৰ্তাত খাৰিজ কাৰ্য্যকৰীতা যোগ কৰক।
এইটো আৰু সেইটো সলনি কৰি পুনৰ চেষ্টা কৰক। ডুইছ মলিছ, এষ্ট নন কমোডো লুক্টাছ, নিচি এৰাট পৰ্টিট'ৰ লিগুলা, এগেট লেচিনিয়া অডিঅ' চেম নেক এলিট। ক্ৰাছ মেটিছ কনচেক্টেটাৰ পুৰুছ আমেট ফাৰ্মেণ্টাম বহা।
জাভাস্ক্রিপ্টৰ যোগেদি এটা সতর্কতা বাতিল সামৰ্থবান কৰক:
- $ ( ".সতৰ্কবাণী" ). সতৰ্কবাণী ()
মাত্ৰ data-dismiss="alert"
আপোনাৰ বন্ধ বুটামত যোগ কৰক স্বয়ংক্ৰিয়ভাৱে এটা সতৰ্কবাণী বন্ধ কাৰ্য্যকৰীতা দিবলৈ।
- <a class = "বন্ধ কৰক" data-dismiss = "সতৰ্কবাণী" href = "#" > × </a>
সকলো সতৰ্কবাণী বন্ধ কাৰ্য্যকৰীতাৰ সৈতে ৰেপ কৰে। আপোনাৰ সতৰ্কবাণীসমূহ বন্ধ কৰাৰ সময়ত এনিমেট আউট কৰিবলৈ, নিশ্চিত কৰক যে সিহঁতৰ ওপৰত ইতিমধ্যে .fade
আৰু .in
শ্ৰেণী প্ৰয়োগ কৰা হৈছে।
এটা সতৰ্কবাণী বন্ধ কৰে।
- $ ( ".সতৰ্কবাণী" ). alert ( 'বন্ধ কৰক' )
বুটষ্ট্ৰেপৰ সতৰ্কতা শ্ৰেণীয়ে সতৰ্কতা কাৰ্য্যকৰীতাত হুক কৰাৰ বাবে কেইটামান ইভেন্ট উন্মোচন কৰে।
কাৰ্যক্ৰম | বিৱৰণ |
---|---|
বন্ধ | এই ইভেন্ট তৎক্ষণাত ফায়াৰ হয় যেতিয়া close ইনষ্টেন্স পদ্ধতি কল কৰা হয়। |
বন্ধ কৰা হৈছে | এই ইভেন্টটো বন্ধ কৰা হয় যেতিয়া সতৰ্কবাণী বন্ধ কৰা হয় (css পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হোৱালৈ অপেক্ষা কৰিব)। |
- $ ( '#মোৰ-সতৰ্কবাণী' ). bind ( 'বন্ধ' , ফাংচন () {
- // কিবা এটা কৰক...
- })
একৰ্ডিয়ন আৰু নেভিগেচনৰ দৰে সংকোচনযোগ্য উপাদানসমূহৰ বাবে ভিত্তি শৈলীসমূহ আৰু নমনীয় সমৰ্থন লাভ কৰক।
* Transitions প্লাগইন অন্তৰ্ভুক্ত কৰাৰ প্ৰয়োজন।
collapse plugin ব্যৱহাৰ কৰি, আমি এটা সৰল accordion শৈলী ৱিজেট নিৰ্মাণ কৰিলোঁ:
- <div class = "একৰ্ডিয়ন" id = "একৰ্ডিয়ন2" >
- <div class = "একৰ্ডিয়ন-গোট" >
- <div class = "একৰ্ডিয়ন-হেডিং" >
- <a class = "একৰ্ডিয়ন-টগল" data-toggle = "সংকোচন" ডাটা-পিৰেণ্ট = "#accordion2" href = "#collapseOne" >
- সংকলনযোগ্য গোট বস্তু #1
- </a>
- </div>
- <div id = "collapseOne" class = "একৰ্ডিয়ন-শৰীৰৰ পতন" >
- <div class = "একৰ্ডিয়ন-অভ্যন্তৰীণ" >
- Anim pariatur ক্লিচে...
- </div>
- </div>
- </div>
- <div class = "একৰ্ডিয়ন-গোট" >
- <div class = "একৰ্ডিয়ন-হেডিং" >
- <a class = "একৰ্ডিয়ন-টগল" data-toggle = "সংকোচন" ডাটা-পিৰেণ্ট = "#accordion2" href = "#collapseTwo" >
- সংকলনযোগ্য গোট বস্তু #2
- </a>
- </div>
- <div id = "collapseTwo" class = "একৰ্ডিয়ন-শৰীৰৰ পতন" >
- <div class = "একৰ্ডিয়ন-অভ্যন্তৰীণ" >
- Anim pariatur ক্লিচে...
- </div>
- </div>
- </div>
- </div>
- ...
আপুনি একৰ্ডিয়ন মাৰ্কআপ অবিহনেও প্লাগইন ব্যৱহাৰ কৰিব পাৰে। এটা বুটাম অন্য উপাদানৰ প্ৰসাৰণ আৰু সংকোচন টগল কৰক।
- <বুটামৰ ধৰণ = "বুটাম" শ্ৰেণী = "btn btn-বিপদ" ডাটা-টগল = "সংকোচন " ডাটা-লক্ষ্য = "#ডেমো" >
- সহজ ভাঙিব পৰা
- </বুটাম>
- <div id = "ডেমো" class = "ত সংকুচিত কৰক" > ... </div>
মাত্ৰ এটা সংকোচনযোগ্য উপাদানৰ নিয়ন্ত্ৰণ স্বয়ংক্ৰিয়ভাৱে নিযুক্ত কৰিবলৈ মাত্ৰ data-toggle="collapse"
এটা উপাদানলৈ যোগ কৰক । data-target
বৈশিষ্ট্যই এটা css নিৰ্বাচক গ্ৰহণ কৰে য'ত data-target
সংকোচন প্ৰয়োগ কৰিবলে। collapse
সংকোচনযোগ্য উপাদানটোত শ্ৰেণীটো নিশ্চিতভাৱে যোগ কৰক । যদি আপুনি ইয়াক অবিকল্পিতভাৱে খোলাটো বিচাৰে, অতিৰিক্ত শ্ৰেণী যোগ কৰক in
।
এটা সংকোচনযোগ্য নিয়ন্ত্ৰণত একৰ্ডিয়ন-ৰ দৰে গোট ব্যৱস্থাপনা যোগ কৰিবলে, তথ্য বৈশিষ্ট্য যোগ কৰক data-parent="#selector"
। ইয়াক কাৰ্য্যত চাবলৈ ডেমো চাওক।
হস্তচালিতভাৱে সামৰ্থবান কৰক:
- $ ( ".সংকোচন" ). পতন ()
বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক data-
, যেনে data-parent=""
.
নাম | প্ৰকাৰ | ডিফল্ট | বিৱৰণ |
---|---|---|---|
অভিভাৱক | নিৰ্বাচক | মিছা | যদি নিৰ্বাচক তেন্তে ধাৰ্য্য কৰা মূলৰ অন্তৰ্গত সকলো সংকোচনযোগ্য উপাদান বন্ধ কৰা হ'ব যেতিয়া এই সংকোচনযোগ্য বস্তু দেখুৱা হয়। (পৰম্পৰাগত একৰ্ডিয়ন আচৰণৰ সৈতে একে) |
টগল কৰক | বুলিয়ান | সঁচা | আমন্ত্ৰণৰ সময়ত সংকোচনযোগ্য উপাদান টগল কৰে |
আপোনাৰ বিষয়বস্তু এটা সংকোচনযোগ্য উপাদান হিচাপে সক্ৰিয় কৰে। এটা বৈকল্পিক বিকল্পসমূহ গ্ৰহণ কৰে object
।
- $ ( '#মোৰ সংকোচনযোগ্য' ). পতন ({
- toggle : মিছা
- })
এটা সংকোচনযোগ্য উপাদান দেখুওৱা বা লুকুৱাবলৈ টগল কৰে।
এটা সংকোচনযোগ্য উপাদান দেখুৱায়।
এটা সংকোচনযোগ্য উপাদান লুকুৱাই ৰাখে।
বুটষ্ট্ৰেপৰ পতন শ্ৰেণীয়ে পতন কাৰ্য্যকৰীতাত হুক কৰাৰ বাবে কেইটামান ইভেন্ট উন্মোচন কৰে।
কাৰ্যক্ৰম | বিৱৰণ |
---|---|
প্ৰদৰ্শনী | এই ইভেন্ট তৎক্ষণাত ফায়াৰ হয় যেতিয়া show ইনষ্টেন্স পদ্ধতি কল কৰা হয়। |
দেখুওৱা হৈছে | এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া এটা সংকুচিত উপাদান ব্যৱহাৰকাৰীৰ বাবে দৃশ্যমান কৰা হয় (css পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হ'বলৈ অপেক্ষা কৰিব)। |
লুকাই থকা | এই ইভেন্টটো তৎক্ষণাত ফায়াৰ কৰা হয় যেতিয়া hide পদ্ধতিটো কল কৰা হয়। |
লুকাই থকা | এই ইভেন্টটো জুই কৰা হয় যেতিয়া এটা সংকুচিত উপাদান ব্যৱহাৰকাৰীৰ পৰা লুকুৱাই ৰখা হয় (css পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হ'বলৈ অপেক্ষা কৰিব)। |
- $ ( '#মোৰ সংকোচনযোগ্য' ). on ( 'লুকাই থকা' , ফাংচন () {
- // কিবা এটা কৰক...
- })
তলৰ স্লাইডশ্ব'ই এটা কেৰউজেলৰ দৰে উপাদানসমূহৰ মাজেৰে চাইক্লিং কৰাৰ বাবে এটা সাধাৰণ প্লাগইন আৰু উপাদান দেখুৱাইছে।
- <div id = "myCarousel" class = "কেৰউজেল স্লাইড" >
- <ol class = "কেৰউজেল-সূচকসমূহ" >
- <li data-target = "#myCarousel" data-slide-to = "0" শ্ৰেণী = "সক্ৰিয়" ></li>
- <li data-target = "#myCarousel" ডাটা-স্লাইড-টু = "1" ></li>
- <li data-target = "#myCarousel" ডাটা-স্লাইড-টু = "2" ></li>
- </ol>
- <!-- কেৰউজেলৰ বস্তু -->
- <div class = "কেৰউজেল-অভ্যন্তৰীণ" >
- <div class = "সক্ৰিয় বস্তু" > ... </div>
- <div শ্ৰেণী = "বস্তু" > ... </div>
- <div শ্ৰেণী = "বস্তু" > ... </div>
- </div>
- <!-- কেৰউজেল নৱ -->
- <a class = "কেৰউজেল-নিয়ন্ত্ৰণ বাওঁফালে" href = "#myCarousel" data-slide = "পূৰ্বৰ" > ‹ </a>
- <a class = "কেৰউজেল-নিয়ন্ত্ৰণ অধিকাৰ" href = "#myCarousel" ডাটা-স্লাইড = "পৰৱৰ্তী" > › </a>
- </div>
কেৰউজেলৰ অৱস্থান সহজে নিয়ন্ত্ৰণ কৰিবলৈ ডাটা এট্ৰিবিউট ব্যৱহাৰ কৰক। data-slide
মূলশব্দসমূহ গ্ৰহণ কৰে prev
বা next
, যি ইয়াৰ বৰ্তমান অৱস্থানৰ তুলনাত স্লাইডৰ অৱস্থান সলনি কৰে। বৈকল্পিকভাৱে, data-slide-to
এটা কেঁচা স্লাইড সূচী কেৰউজেললৈ পাছ কৰিবলৈ ব্যৱহাৰ কৰক data-slide-to="2"
, যি স্লাইডৰ অৱস্থান এটা নিৰ্দিষ্ট সূচীলৈ আৰম্ভ কৰে 0
।
কেৰউজেলক হস্তচালিতভাৱে কল কৰক:
- $ ( '.কেৰউজেল' ). কেৰউজেল ()
বিকল্পসমূহ ডাটা বৈশিষ্ট্যসমূহ বা জাভাস্ক্রিপ্টজৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক data-
, যেনে data-interval=""
.
নাম | প্ৰকাৰ | ডিফল্ট | বিৱৰণ |
---|---|---|---|
ব্যৱধান | সংখ্যা | ৫০০০ টকা | এটা বস্তু স্বয়ংক্ৰিয়ভাৱে চাইকেল চলোৱাৰ মাজত বিলম্ব কৰিবলগীয়া সময়ৰ পৰিমাণ। যদি মিছা হয়, তেন্তে কেৰউজেলে স্বয়ংক্ৰিয়ভাৱে চাইকেল চলাব নোৱাৰে। |
বিৰতি | তাঁৰ | "hover" | মাউছএণ্টাৰত কেৰউজেলৰ চাইক্লিং স্থগিত কৰে আৰু মাউছলিভত কেৰউজেলৰ চাইক্লিং পুনৰ আৰম্ভ কৰে। |
এটা ঐচ্ছিক বিকল্পৰ সৈতে কেৰউজেল আৰম্ভ কৰে object
আৰু বস্তুসমূহৰ মাজেৰে চাইকেল চলাবলৈ আৰম্ভ কৰে।
- $ ( '.কেৰউজেল' ). কেৰউজেল ({
- ব্যৱধান : ২০০০
- })
কেৰউজেলৰ বস্তুবোৰৰ মাজেৰে বাওঁফালৰ পৰা সোঁফাললৈ চক্ৰান্ত কৰে।
বস্তুৰ মাজেৰে চাইকেল চলোৱাৰ পৰা কেৰউজেল বন্ধ কৰে।
কেৰউজেলক এটা নিৰ্দিষ্ট ফ্ৰেমলৈ চক্ৰ কৰে (0 ভিত্তিত, এটা এৰেৰ দৰে)।
পূৰ্বৰ বস্তুটোলৈ চক্ৰ কৰে।
পৰৱৰ্তী বস্তুলৈ চক্ৰ কৰে।
বুটষ্ট্ৰেপৰ কেৰউজেল শ্ৰেণীয়ে কেৰউজেল কাৰ্য্যকৰীতাত হুক কৰাৰ বাবে দুটা ইভেন্ট উন্মোচন কৰে।
কাৰ্যক্ৰম | বিৱৰণ |
---|---|
এফলীয়া | এই ইভেন্ট তৎক্ষণাত ফায়াৰ হয় যেতিয়া slide উদাহৰণ পদ্ধতি আমন্ত্ৰণ কৰা হয়। |
স্লাইড | এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া কেৰউজেলে ইয়াৰ স্লাইড ট্ৰেঞ্জিচন সম্পূৰ্ণ কৰে। |
যিকোনো ফৰ্ম লিখনী ইনপুটৰ সৈতে মাৰ্জিত টাইপহেডসমূহ দ্ৰুতভাৱে সৃষ্টি কৰাৰ বাবে এটা মৌলিক, সহজে সম্প্ৰসাৰিত প্লাগ-ইন।
- <ইনপুট ধৰণ = "পাঠ" ডাটা-প্ৰদান = "টাইপএহেড" >
আপুনি autocomplete="off"
অবিকল্পিত ব্ৰাউজাৰ মেনুসমূহ Bootstrap typeahead ড্ৰপডাউনৰ ওপৰত উপস্থিত হোৱাত বাধা দিবলৈ সংহতি কৰিব বিচাৰিব।
ওপৰৰ উদাহৰণত দেখুওৱাৰ দৰে typeahead কাৰ্য্যকৰীতাৰ সৈতে এটা উপাদান পঞ্জীয়ন কৰিবলে তথ্য বৈশিষ্ট্যসমূহ যোগ কৰক।
typeahead ক হস্তচালিতভাৱে কল কৰক:
- $ ( '.টাইপএহেড' ). টাইপহেড ()
বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক data-
, যেনে data-source=""
.
নাম | প্ৰকাৰ | ডিফল্ট | বিৱৰণ |
---|---|---|---|
উত্স | এৰে, ফাংচন | [ ] | বিৰুদ্ধে প্ৰশ্ন কৰিবলগীয়া তথ্যৰ উৎস। ষ্ট্ৰিংৰ এটা এৰে বা এটা ফাংচন হ'ব পাৰে। ফাংচনটোক দুটা আৰ্গুমেণ্ট পাছ query কৰা হয়, ইনপুট ফিল্ডত থকা মান আৰু process কলবেক। process কলবেকৰ একক যুক্তিৰ যোগেদি তথ্য উৎসক প্ৰত্যক্ষভাৱে বা এচিনক্ৰ'নাছভাৱে ঘূৰাই দি ফাংচনটোক সমকালীনভাৱে ব্যৱহাৰ কৰিব পাৰি । |
সামগ্ৰী | সংখ্যা | ৮ | ড্ৰপডাউনত প্ৰদৰ্শন কৰিবলগীয়া বস্তুৰ সৰ্বাধিক সংখ্যা। |
minLength | সংখ্যা | ১ | স্বয়ংক্ৰিয় সম্পূৰ্ণ পৰামৰ্শসমূহ ট্ৰিগাৰ কৰাৰ আগতে প্ৰয়োজনীয় নূন্যতম আখৰৰ দৈৰ্ঘ্য |
মেচাৰ | অনুষ্ঠান | ডাঙৰ ডাঙৰ সংবেদনশীল | এটা প্ৰশ্ন এটা বস্তুৰ সৈতে মিল আছে নে নাই সেইটো নিৰ্ণয় কৰিবলৈ ব্যৱহাৰ কৰা পদ্ধতি। এটা যুক্তি গ্ৰহণ কৰে, item যাৰ বিপৰীতে প্ৰশ্নটো পৰীক্ষা কৰিব লাগে। ৰ সৈতে বৰ্তমান প্ৰশ্ন অভিগম কৰক this.query । true প্ৰশ্ন এটা মিল হ'লে এটা বুলিয়ান ঘূৰাই দিয়ক । |
সজাই পৰাই তোলা | অনুষ্ঠান | সঠিক মিল, ডাঙৰ ডাঙৰ সংবেদনশীল, ডাঙৰ ডাঙৰ সংবেদনহীন |
স্বয়ংক্ৰিয় সম্পূৰ্ণ ফলাফল সজাবলৈ ব্যৱহৃত পদ্ধতি। এটা যুক্তি গ্ৰহণ কৰে items আৰু typeahead দৃষ্টান্তৰ পৰিসৰ আছে। বৰ্তমান প্ৰশ্নটোক ৰ সৈতে উল্লেখ কৰক this.query । |
আপডেটকাৰী | অনুষ্ঠান | নিৰ্বাচিত বস্তু ঘূৰাই দিয়ে | নিৰ্বাচিত বস্তু ঘূৰাই দিবলৈ ব্যৱহাৰ কৰা পদ্ধতি। এটা যুক্তি গ্ৰহণ কৰে, item আৰু ৰ typeahead দৃষ্টান্তৰ পৰিসৰ আছে। |
হাইলাইটাৰ | অনুষ্ঠান | সকলো অবিকল্পিত মিল হাইলাইট কৰে | স্বয়ংক্ৰিয় সম্পূৰ্ণ ফলাফলসমূহ উজ্জ্বল কৰিবলৈ ব্যৱহাৰ কৰা পদ্ধতি। এটা যুক্তি গ্ৰহণ কৰে item আৰু typeahead দৃষ্টান্তৰ পৰিসৰ আছে। html ঘূৰাই দিব লাগে। |
এটা টাইপএহেডৰ সৈতে এটা ইনপুট আৰম্ভ কৰে।
বাওঁফালে থকা চাবনেভিগেচনটো হৈছে এফিক্স প্লাগইনৰ এটা লাইভ ডেমো।
যিকোনো উপাদানত সহজে affix আচৰণ যোগ data-spy="affix"
কৰিবলৈ, মাত্ৰ আপুনি চোৰাংচোৱাগিৰি কৰিব বিচৰা উপাদানটোত যোগ কৰক। তাৰ পিছত এটা উপাদানৰ পিনিং কেতিয়া অন আৰু অফ কৰিব লাগে সংজ্ঞায়িত কৰিবলৈ অফছেটসমূহ ব্যৱহাৰ কৰক।
- <div ডাটা-স্পাই = "সংলগ্ন" ডাটা-অফছেট-শীৰ্ষ = "২০০" > ... </div>
affix
অৱস্থান ,
affix-top
, আৰু
দ্বাৰা নিয়ন্ত্ৰিত হয়
affix-bottom
। মনত ৰাখিব যেতিয়া প্ৰত্যয়টোৱে কিক ইন কৰে তেতিয়া এটা সম্ভাৱ্যভাৱে সংকুচিত অভিভাৱকৰ বাবে পৰীক্ষা কৰিবলৈ পৰীক্ষা কৰক কাৰণ ই পৃষ্ঠাৰ সাধাৰণ প্ৰবাহৰ পৰা বিষয়বস্তু আঁতৰাই পেলাইছে।
জাভাস্ক্রিপ্টৰ যোগেদি affix প্লাগইন কল কৰক:
- $ ( '#নৱবাৰ' ). affix ()
বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক data-
, যেনে data-offset-top="200"
.
নাম | প্ৰকাৰ | ডিফল্ট | বিৱৰণ |
---|---|---|---|
অফছেট | সংখ্যা | ফাংচন | বস্তু | ১০ | স্ক্ৰলৰ অৱস্থান গণনা কৰাৰ সময়ত পৰ্দাৰ পৰা অফছেট কৰিবলৈ পিক্সেলসমূহ। যদি এটা সংখ্যা দিয়া হয়, তেন্তে ওপৰ আৰু বাওঁ দুয়োটা দিশতে অফছেট প্ৰয়োগ কৰা হ’ব। এটা দিশ, বা একাধিক অনন্য অফছেটৰ বাবে শুনিবলৈ, মাত্ৰ এটা বস্তু প্ৰদান কৰক offset: { x: 10 } । এটা ফলন ব্যৱহাৰ কৰক যেতিয়া আপুনি এটা অফছেট গতিশীলভাৱে প্ৰদান কৰিব লাগে (কিছুমান প্ৰতিক্ৰিয়াশীল ডিজাইনৰ বাবে উপযোগী)। |