বুটস্ট্র্যাপের জন্য জাভাস্ক্রিপ্ট

বুটস্ট্র্যাপের উপাদানগুলিকে জীবন্ত করে তুলুন—এখন 12টি কাস্টম jQuery প্লাগইন সহ৷

মডেল

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

ড্রপডাউন

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

স্ক্রলস্পাই

স্ক্রোল অবস্থানের উপর ভিত্তি করে বর্তমান সক্রিয় লিঙ্ক দেখাতে আপনার নেভিবারে স্বয়ংক্রিয়ভাবে লিঙ্কগুলি আপডেট করতে scrollspy ব্যবহার করুন।

টগলযোগ্য ট্যাব

ট্যাব এবং বড়িগুলিকে স্থানীয় সামগ্রীর ট্যাবেবল প্যানের মাধ্যমে টগল করার অনুমতি দিয়ে আরও দরকারী করতে এই প্লাগইনটি ব্যবহার করুন৷

টুলটিপস

jQuery টিপসি প্লাগইনের একটি নতুন গ্রহণ, টুলটিপগুলি ছবির উপর নির্ভর করে না—তারা স্থানীয় শিরোনাম স্টোরেজের জন্য অ্যানিমেশন এবং ডেটা-অ্যাট্রিবিউটগুলির জন্য CSS3 ব্যবহার করে৷

পপোভার *

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

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

সতর্কতা বার্তা

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

বোতাম

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

সঙ্কুচিত

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

ক্যারোসেল

আপনি বিষয়বস্তুর একটি ইন্টারেক্টিভ স্লাইডশো প্রদান করতে চান এমন যেকোনো বিষয়বস্তুর একটি আনন্দময়-গো-রাউন্ড তৈরি করুন।

টাইপহেড

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

রূপান্তর *

সাধারণ ট্রানজিশন ইফেক্টের জন্য, bootstrap-transition.js একবার মোডালে স্লাইড করতে বা ফেইড আউট অ্যালার্ট অন্তর্ভুক্ত করুন।

* প্লাগইনগুলিতে অ্যানিমেশনের জন্য প্রয়োজনীয়

মাথা আপ! সমস্ত জাভাস্ক্রিপ্ট প্লাগইনগুলির জন্য jQuery এর সর্বশেষ সংস্করণ প্রয়োজন৷

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

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

ডাউনলোড ফাইল

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

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

সরাসরি নমুনা

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

ডেমো মডেল চালু করুন

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

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

  1. $ ( '#myModal' )। মডেল ( বিকল্প )

অপশন

নাম প্রকার ডিফল্ট বর্ণনা
ব্যাকড্রপ বুলিয়ান সত্য একটি মডেল-ব্যাকড্রপ উপাদান অন্তর্ভুক্ত। বিকল্পভাবে, staticএকটি পটভূমির জন্য নির্দিষ্ট করুন যা ক্লিকে মোডাল বন্ধ করে না।
কীবোর্ড বুলিয়ান সত্য এস্কেপ কী চাপলে মোডাল বন্ধ করে
প্রদর্শন বুলিয়ান সত্য আরম্ভ করার সময় মডেল দেখায়।

মার্কআপ

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

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

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

পদ্ধতি

.modal(বিকল্প)

একটি মডেল হিসাবে আপনার বিষয়বস্তু সক্রিয়. একটি ঐচ্ছিক বিকল্প গ্রহণ করে object

  1. $ ( '#myModal' )। মডেল ({
  2. কীবোর্ড : মিথ্যা
  3. })

.modal('টগল')

ম্যানুয়ালি একটি মডেল টগল করে।

  1. $ ( '#myModal' )। মডেল ( 'টগল' )

.modal('শো')

ম্যানুয়ালি একটি মডেল খোলে।

  1. $ ( '#myModal' )। মডেল ( 'শো' )

.modal('লুকান')

ম্যানুয়ালি একটি মডেল লুকিয়ে রাখে।

  1. $ ( '#myModal' )। মডেল ( 'লুকান' )

ঘটনা

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

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

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

ডাউনলোড ফাইল

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

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

@ফ্যাট

অ্যাড লেগিংস কিটার, ব্রাঞ্চ আইডি আর্ট পার্টি ডলার লেবারে। Pitchfork yr enim lo-fi আগে তারা বিক্রি আউট qui. টাম্বলার খামার থেকে টেবিল সাইকেল অধিকার যাই হোক না কেন. আনিম কেফিয়েহ কার্লেস কার্ডিগান। Velit seitan mcsweeney এর ফটো বুথ 3 উলফ মুন ইরিরে। কসবি সোয়েটার লোমো জিন শর্টস, উইলিয়ামসবার্গ হুডি মিনিম কুই আপনি সম্ভবত এগুলি শুনেননি এবং কার্ডিগান ট্রাস্ট ফান্ড culpa বায়োডিজেল ওয়েস অ্যান্ডারসন নান্দনিক। নিহিল ট্যাটু আকুসামাস, ক্রেড বিড়ম্বনা বায়োডিজেল কেফিয়েহ কারিগর উল্লামকো ফলাফল।

@এমডিও

ভেনিয়াম মারফা গোঁফ স্কেটবোর্ড, এডিপিসিসিং ফুগিয়াট ভেলিট পিচফর্ক দাড়ি। ফ্রিগান দাড়ি aliqua cupidatat mcsweeney's vero. কিউপিডাত চার লোকো নিসি, ইএ হেলভেটিকা ​​নুল্লা কার্লেস। ট্যাটু করা cosby সোয়েটার ফুড ট্রাক, mcsweeney's quis non freegan vinyl. লো-ফাই ওয়েস অ্যান্ডারসন +1 সর্টোরিয়াল। কার্লেস অ নান্দনিক ব্যায়াম quis gentrify. ব্রুকলিন এডিপিসিসিং ক্রাফ্ট বিয়ার ভাইস কিটার ডিজারেন্ট।

এক

Occaecat কমোডো aliqua delectus. ফ্যাপ ক্রাফ্ট বিয়ার ডেজারন্ট স্কেটবোর্ড ইএ। Lomo বাইসাইকেল অধিকার adipisising banh mi, velit ea sunt next level locavore single-origin coffee in Magna Veniam. হাই লাইফ আইডি ভিনাইল, ইকো পার্ক কনসকুয়েট কুইস অ্যালিকুইপ ব্যান মি পিচফর্ক। ভেরো ভিএইচএস এডিপিসিসিং। DIY ন্যূনতম মেসেঞ্জার ব্যাগ ব্যবহার করুন। ক্রেড প্রাক্তন, টেকসই ডিলেক্টাস কনসেক্টেটার ফ্যানি প্যাক আইফোন।

দুই

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.

কীটার টুই ব্লগ, কুলপা মেসেঞ্জার ব্যাগ মারফা যাই হোক না কেন ডেলেক্টাস ফুড ট্রাক। Sapiente synth id অনুমান. Locavore sed helvetica cliche irony, thundercats আপনি সম্ভবত তাদের কথা শোনেন নি ফলে হুডি গ্লুটেন-মুক্ত লো-ফাই ফ্যাপ অ্যালিকুইপ। তারা বিক্রি হওয়ার আগেই শ্রম অভিজাত স্থান, টেরি রিচার্ডসন প্রিডেন্ট ব্রাঞ্চ নেসিয়েন্ট কুইস কসবি সোয়েটার প্যারিয়াতুর কেফিয়েহ ইউটি হেলভেটিকা ​​আর্টিসান। কার্ডিগান ক্রাফ্ট বিয়ার সিটান রেডিমেড ভেলিট। ভিএইচএস চেম্ব্রে টেম্পোর ভেনিয়াম। আনিম মল্লিট মিনিম কমোডো উল্লামকো বজ্রপাত।


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

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

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

মার্কআপ

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

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

পদ্ধতি

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

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

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

অপশন

নাম প্রকার ডিফল্ট বর্ণনা
অফসেট সংখ্যা 10 স্ক্রলের অবস্থান গণনা করার সময় উপরে থেকে অফসেট করা পিক্সেল।

ঘটনা

ঘটনা বর্ণনা
সক্রিয় করা যখনই স্ক্রোলস্পাই দ্বারা একটি নতুন আইটেম সক্রিয় হয় তখনই এই ইভেন্টটি চালু হয়।

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

ডাউনলোড ফাইল

উদাহরণ ট্যাব

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

কাঁচা ডেনিম আপনি সম্ভবত তাদের জিন শর্টস অস্টিন শুনেনি। Nesciunt tofu stumptown aliqua, retro synth master cleanse. গোঁফ ক্লিচ টেম্পোর, উইলিয়ামসবার্গ কার্লস ভেগান হেলভেটিকা। Reprehenderit কসাই বিপরীতমুখী keffiyeh dreamcatcher synth. Cosby সোয়েটার eu banh mi, qui irure টেরি রিচার্ডসন প্রাক্তন স্কুইড। অ্যালিকুইপ প্লেসেট সালভিয়া সিলাম আইফোন। 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. $ ( '#myTab a' )। ক্লিক করুন ( ফাংশন ( ) {
  2. e _ প্রতিরোধ ডিফল্ট ();
  3. $ ( এই )। ট্যাব ( 'দেখান' );
  4. })

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

  1. $ ( '#myTab a[href="#profile"]' )। ট্যাব ( 'দেখান' ); // নামের দ্বারা ট্যাব নির্বাচন করুন
  2. $ ( '#myTab a:first' )। ট্যাব ( 'দেখান' ); // প্রথম ট্যাব নির্বাচন করুন
  3. $ ( '#myTab a:last' )। ট্যাব ( 'দেখান' ); // শেষ ট্যাব নির্বাচন করুন
  4. $ ( '#myTab li:eq(2) a' )। ট্যাব ( 'দেখান' ); // তৃতীয় ট্যাব নির্বাচন করুন (0-সূচীযুক্ত)

মার্কআপ

আপনি একটি ট্যাব বা পিল নেভিগেশন সক্রিয় করতে পারেন কোনো জাভাস্ক্রিপ্ট না লিখে শুধুমাত্র নির্দিষ্ট করে data-toggle="tab"বা data-toggle="pill"কোনো উপাদানে। navট্যাবে এবং nav-tabsক্লাস যোগ করা ulবুটস্ট্র্যাপ ট্যাব স্টাইলিং প্রয়োগ করবে।

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Home </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > প্রোফাইল </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Messages </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > সেটিংস </a></li>
  6. </ul>

পদ্ধতি

$() ট্যাব

একটি ট্যাব উপাদান এবং বিষয়বস্তু ধারক সক্রিয় করে। ট্যাবে একটি data-targetবা একটি hrefটার্গেটিং একটি কন্টেইনার নোড থাকা উচিত।

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > হোম </a></li>
  3. <li><a href = "#profile" > প্রোফাইল </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 = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( ফাংশন () {
  17. $ ( '#myTab a:last' )। ট্যাব ( 'দেখান' );
  18. })
  19. </script>

ঘটনা

ঘটনা বর্ণনা
প্রদর্শন এই ইভেন্টটি ট্যাব শোতে ফায়ার করে, কিন্তু নতুন ট্যাব দেখানোর আগে। যথাক্রমে সক্রিয় ট্যাব এবং পূর্ববর্তী সক্রিয় ট্যাব (যদি উপলব্ধ হয়) ব্যবহার করুন event.targetএবং লক্ষ্য করুন।event.relatedTarget
দেখানো একটি ট্যাব দেখানোর পরে এই ইভেন্টটি ট্যাব শোতে ফায়ার হয়৷ যথাক্রমে সক্রিয় ট্যাব এবং পূর্ববর্তী সক্রিয় ট্যাব (যদি উপলব্ধ হয়) ব্যবহার করুন event.targetএবং লক্ষ্য করুন।event.relatedTarget
  1. $ ( 'a[data-toggle="tab"]' )। অন ​​( 'দেখানো' , ফাংশন ( ) {
  2. e _ লক্ষ্য // সক্রিয় ট্যাব
  3. e _ সম্পর্কিত লক্ষ্য // পূর্ববর্তী ট্যাব
  4. })

টুলটিপস সম্পর্কে

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

ডাউনলোড ফাইল

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

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

টাইট প্যান্ট পরের স্তর keffiyeh আপনি সম্ভবত তাদের শুনেনি. ফটো বুথ দাড়ি কাঁচা ডেনিম লেটারপ্রেস ভেগান মেসেঞ্জার ব্যাগ স্টাম্পটাউন। ফার্ম-টু-টেবিল সিটান, mcsweeney's fixie sustainable quinoa 8-bit আমেরিকান পোশাকে একটি টেরি রিচার্ডসন ভিনাইল চেম্ব্রে রয়েছে। দাড়ি স্টাম্পটাউন, কার্ডিগান বান মি লোমো থান্ডারক্যাটস। টোফু বায়োডিজেল উইলিয়ামসবার্গ মারফা, চার লোকো ম্যাকসুইনির ক্লিনজ ভেগান চেম্ব্রে। একজন সত্যিকারের বিদ্রূপাত্মক কারিগর যাই হোক না কেন কীটার , সিনস্টার ফার্ম-টু-টেবিল ব্যাঙ্কসি অস্টিন টুইটার হ্যান্ডেল ফ্রিগান ক্রেড কাঁচা ডেনিম একক-অরিজিন কফি ভাইরাল।


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

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

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

অপশন

নাম প্রকার ডিফল্ট বর্ণনা
অ্যানিমেশন বুলিয়ান সত্য টুলটিপে একটি সিএসএস ফেইড ট্রানজিশন প্রয়োগ করুন
বসানো স্ট্রিং|ফাংশন 'শীর্ষ' টুলটিপ - শীর্ষে কিভাবে অবস্থান করবেন নীচে | বাম | অধিকার
নির্বাচক স্ট্রিং মিথ্যা যদি একটি নির্বাচক প্রদান করা হয়, টুলটিপ বস্তুগুলি নির্দিষ্ট লক্ষ্যগুলিতে অর্পণ করা হবে।
শিরোনাম স্ট্রিং | ফাংশন ' ডিফল্ট শিরোনাম মান যদি `শিরোনাম` ট্যাগ উপস্থিত না থাকে
ট্রিগার স্ট্রিং 'হোভার' কিভাবে টুলটিপ ট্রিগার হয় - হোভার | ফোকাস | ম্যানুয়াল
বিলম্ব সংখ্যা | বস্তু 0

টুলটিপ (ms) দেখানো এবং লুকানো বিলম্ব - ম্যানুয়াল ট্রিগার প্রকারে প্রযোজ্য নয়

যদি একটি নম্বর সরবরাহ করা হয়, বিলম্ব লুকান/দেখানো উভয় ক্ষেত্রেই প্রয়োগ করা হয়

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

মাথা আপ! পৃথক টুলটিপগুলির জন্য বিকল্পগুলি ডেটা বৈশিষ্ট্যগুলির ব্যবহারের মাধ্যমে বিকল্পভাবে নির্দিষ্ট করা যেতে পারে।

মার্কআপ

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

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

পদ্ধতি

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ডাউনলোড ফাইল

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

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


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

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

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

অপশন

নাম প্রকার ডিফল্ট বর্ণনা
অ্যানিমেশন বুলিয়ান সত্য টুলটিপে একটি সিএসএস ফেইড ট্রানজিশন প্রয়োগ করুন
বসানো স্ট্রিং|ফাংশন 'ঠিক' কিভাবে পপওভারের অবস্থান - শীর্ষ | নীচে | বাম | অধিকার
নির্বাচক স্ট্রিং মিথ্যা যদি একটি নির্বাচক প্রদান করা হয়, টুলটিপ বস্তুগুলি নির্দিষ্ট লক্ষ্যগুলিতে অর্পণ করা হবে
ট্রিগার স্ট্রিং 'হোভার' কিভাবে টুলটিপ ট্রিগার হয় - হোভার | ফোকাস | ম্যানুয়াল
শিরোনাম স্ট্রিং | ফাংশন ' ডিফল্ট শিরোনাম মান যদি `শিরোনাম` অ্যাট্রিবিউট উপস্থিত না থাকে
বিষয়বস্তু স্ট্রিং | ফাংশন ' যদি `ডেটা-কন্টেন্ট` অ্যাট্রিবিউট উপস্থিত না থাকে তাহলে ডিফল্ট কন্টেন্ট মান
বিলম্ব সংখ্যা | বস্তু 0

পপওভার (ms) দেখানো এবং লুকানো বিলম্ব - ম্যানুয়াল ট্রিগার প্রকারের ক্ষেত্রে প্রযোজ্য নয়

যদি একটি নম্বর সরবরাহ করা হয়, বিলম্ব লুকান/দেখানো উভয় ক্ষেত্রেই প্রয়োগ করা হয়

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

মাথা আপ! পৃথক পপোভারের জন্য বিকল্পগুলি বিকল্পভাবে ডেটা বৈশিষ্ট্যগুলির ব্যবহারের মাধ্যমে নির্দিষ্ট করা যেতে পারে।

মার্কআপ

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

পদ্ধতি

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

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

.popover('শো')

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

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

.popover('লুকান')

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

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

.popover('টগল')

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

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

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

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

ডাউনলোড করুন

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

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

পবিত্র গুয়াকামোল! নিজেকে ভালো করে দেখুন, আপনি খুব ভালো দেখাচ্ছেন না।

ওহ স্ন্যাপ! আপনি একটি ত্রুটি পেয়েছেন!

এটি এবং এটি পরিবর্তন করুন এবং আবার চেষ্টা করুন। Duis mollis, est non commodo luctus, Nisi erat Porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

এই ব্যবস্থা নিন অথবা এই কাজ


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

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

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

মার্কআপ

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

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

পদ্ধতি

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

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

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

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

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

ঘটনা

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

ঘটনা বর্ণনা
বন্ধ এই ইভেন্টটি অবিলম্বে ফায়ার করে যখন closeইনস্ট্যান্স পদ্ধতিটি কল করা হয়।
বন্ধ সতর্কতা বন্ধ হয়ে গেলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।
  1. $ ( '#আমার-সতর্ক' )। আবদ্ধ ( 'বন্ধ' , ফাংশন () {
  2. // কিছু কর…
  3. })

সম্পর্কিত

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

ডাউনলোড ফাইল

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

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

রাষ্ট্রীয়
একক টগল
চেকবক্স
রেডিও

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

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

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

মার্কআপ

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

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

পদ্ধতি

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

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

মাথা আপ! আপনি বৈশিষ্ট্য ব্যবহার করে একটি বোতামের স্বয়ংক্রিয় টগলিং সক্ষম করতে পারেন data-toggle
  1. <বাটন ক্লাস = "বিটিএন" ডেটা-টগল = "বোতাম" > </ বোতাম>

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

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

  1. <button class = "btn" data-loading-text = "স্টাফ লোড হচ্ছে..." > ... </ বোতাম>
মাথা আপ! ফায়ারফক্স পৃষ্ঠা লোড জুড়ে অক্ষম অবস্থা বজায় রাখে । এই জন্য একটি workaround ব্যবহার করা হয় autocomplete="off".

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

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

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

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

  1. <বোতাম ক্লাস = "btn" data-complete-text = "সমাপ্ত!" > ... </ বোতাম>
  2. <script>
  3. $ ( '.btn' )। বোতাম ( 'সম্পূর্ণ' )
  4. </script>

সম্পর্কিত

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

ডাউনলোড ফাইল

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

উদাহরণ অ্যাকর্ডিয়ন

পতন প্লাগইন ব্যবহার করে, আমরা একটি সাধারণ অ্যাকর্ডিয়ন শৈলী উইজেট তৈরি করেছি:

Anim pariatur cliche reprehenderit, enim eiusmod High life accusamus টেরি রিচার্ডসন অ্যাড স্কুইড। 3 উলফ মুন অফিসিয়া আউট, নন কাপিডাটাট স্কেটবোর্ড ডলোর ব্রাঞ্চ। খাদ্য ট্রাক quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee Nulla assumenda shoreditch et. নিহিল অ্যানিম কেফিয়েহ হেলভেটিকা, ক্রাফ্ট বিয়ার লেবার ওয়েস অ্যান্ডারসন ক্রেড নেসিয়েন্ট সেপিয়েন্ট ইএ প্র��ডেন্ট। অ্যাড ভেগান ছাড়া কসাই ভাইস লোমো। লেগিংস ওক্যাকেট ক্রাফ্ট বিয়ার ফার্ম-টু-টেবিল, কাঁচা ডেনিম নান্দনিক সিন্থ নেসসিউন্ট যা আপনি সম্ভবত টেকসই ভিএইচএসের জন্য শ্রমের অভিযোগ শুনেননি।
Anim pariatur cliche reprehenderit, enim eiusmod High life accusamus টেরি রিচার্ডসন অ্যাড স্কুইড। 3 উলফ মুন অফিসিয়া আউট, নন কাপিডাটাট স্কেটবোর্ড ডলোর ব্রাঞ্চ। খাদ্য ট্রাক quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee Nulla assumenda shoreditch et. নিহিল অ্যানিম কেফিয়েহ হেলভেটিকা, ক্রাফ্ট বিয়ার লেবার ওয়েস অ্যান্ডারসন ক্রেড নেসিয়েন্ট সেপিয়েন্ট ইএ প্রিডেন্ট। অ্যাড ভেগান ছাড়া কসাই ভাইস লোমো। লেগিংস ওক্যাকেট ক্রাফ্ট বিয়ার ফার্ম-টু-টেবিল, কাঁচা ডেনিম নান্দনিক সিন্থ নেসসিউন্ট যা আপনি সম্ভবত টেকসই ভিএইচএসের জন্য শ্রমের অভিযোগ শুনেননি।
Anim pariatur cliche reprehenderit, enim eiusmod High life accusamus টেরি রিচার্ডসন অ্যাড স্কুইড। 3 উলফ মুন অফিসিয়া আউট, নন কাপিডাটাট স্কেটবোর্ড ডলোর ব্রাঞ্চ। খাদ্য ট্রাক quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee Nulla assumenda shoreditch et. নিহিল অ্যানিম কেফিয়েহ হেলভেটিকা, ক্রাফ্ট বিয়ার লেবার ওয়েস অ্যান্ডারসন ক্রেড নেসিয়েন্ট সেপিয়েন্ট ইএ প্রিডেন্ট। অ্যাড ভেগান ছাড়া কসাই ভাইস লোমো। লেগিংস ওক্যাকেট ক্রাফ্ট বিয়ার ফার্ম-টু-টেবিল, কাঁচা ডেনিম নান্দনিক সিন্থ নেসসিউন্ট যা আপনি সম্ভবত টেকসই ভিএইচএসের জন্য শ্রমের অভিযোগ শুনেননি।

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

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

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

অপশন

নাম প্রকার ডিফল্ট বর্ণনা
অভিভাবক নির্বাচক মিথ্যা নির্বাচক হলে, এই সংকোচনযোগ্য আইটেমটি দেখানো হলে নির্দিষ্ট প্যারেন্টের অধীনে সমস্ত সংকোচনযোগ্য উপাদান বন্ধ হয়ে যাবে। (প্রথাগত অ্যাকর্ডিয়ন আচরণের অনুরূপ)
টগল বুলিয়ান সত্য কলাপসিবল এলিমেন্টকে আমন্ত্রণে টগল করে

মার্কআপ

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

  1. <বোতাম ক্লাস = "btn btn-ডেঞ্জার" ডেটা-টগল = "পতন" ডেটা-টার্গেট = "#ডেমো" >
  2. সহজ সঙ্কুচিত
  3. </ বোতাম>
  4.  
  5. <div id = "demo" class = "colapse in" > </div>
মাথা আপ! একটি কোলাপসিবল কন্ট্রোলে অ্যাকর্ডিয়নের মতো গ্রুপ ম্যানেজমেন্ট যোগ করতে, ডেটা অ্যাট্রিবিউট যোগ করুন data-parent="#selector"। এটি কর্মে দেখতে ডেমো পড়ুন।

পদ্ধতি

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

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

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

.পতন ('টগল')

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

.পতন ('শো')

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

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

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

ঘটনা

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

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

সম্পর্কিত

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

ডাউনলোড ফাইল

উদাহরণ

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


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

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

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

অপশন

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

মার্কআপ

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

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

পদ্ধতি

.typeahead(বিকল্প)

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