জাভাস্ক্রিপ্ট
এক ডজনেরও বেশি কাস্টম jQuery প্লাগইনগুলির সাথে বুটস্ট্র্যাপের উপাদানগুলিকে জীবন্ত করে তুলুন৷ সহজে তাদের সব, বা এক এক অন্তর্ভুক্ত.
এক ডজনেরও বেশি কাস্টম jQuery প্লাগইনগুলির সাথে বুটস্ট্র্যাপের উপাদানগুলিকে জীবন্ত করে তুলুন৷ সহজে তাদের সব, বা এক এক অন্তর্ভুক্ত.
প্লাগইনগুলি পৃথকভাবে অন্তর্ভুক্ত করা যেতে পারে (বুটস্ট্র্যাপের স্বতন্ত্র *.js
ফাইলগুলি ব্যবহার করে), বা সবগুলি একবারে (ব্যবহার করে bootstrap.js
বা ছোট করা bootstrap.min.js
)।
উভয়ই bootstrap.js
এবং bootstrap.min.js
একটি একক ফাইলে সমস্ত প্লাগইন রয়েছে৷ শুধুমাত্র একটি অন্তর্ভুক্ত.
কিছু প্লাগইন এবং CSS উপাদান অন্যান্য প্লাগইনের উপর নির্ভর করে। আপনি যদি পৃথকভাবে প্লাগইনগুলি অন্তর্ভুক্ত করেন, তাহলে ডক্সে এই নির্ভরতাগুলি পরীক্ষা করা নিশ্চিত করুন৷ এছাড়াও মনে রাখবেন যে সমস্ত প্লাগইন jQuery এর উপর নির্ভর করে ( এর মানে প্লাগইন ফাইলের আগে jQuery অন্তর্ভুক্ত করা আবশ্যক )। jQuery এর কোন সংস্করণগুলি সমর্থিত তা দেখতে আমাদের সাথে যোগাযোগ করুন৷bower.json
আপনি জাভাস্ক্রিপ্টের একটি লাইন না লিখে মার্কআপ API এর মাধ্যমে বিশুদ্ধভাবে সমস্ত বুটস্ট্র্যাপ প্লাগইন ব্যবহার করতে পারেন। এটি বুটস্ট্র্যাপের প্রথম-শ্রেণীর API এবং প্লাগইন ব্যবহার করার সময় আপনার প্রথম বিবেচনা করা উচিত।
এটি বলেছে, কিছু পরিস্থিতিতে এই কার্যকারিতা বন্ধ করা বাঞ্ছনীয় হতে পারে। তাই, আমরা ডকুমেন্ট নেমস্পেসে থাকা সমস্ত ইভেন্টকে আনবাইন্ড করে ডেটা অ্যাট্রিবিউট API নিষ্ক্রিয় করার ক্ষমতাও প্রদান করি data-api
। এটি এই মত দেখায়:
বিকল্পভাবে, একটি নির্দিষ্ট প্লাগইনকে টার্গেট করতে, শুধু প্লাগইনের নামটি একটি নামস্থান হিসাবে অন্তর্ভুক্ত করুন এবং ডেটা-এপিআই নামস্থানের সাথে এইভাবে:
একই উপাদানে একাধিক প্লাগইন থেকে ডেটা অ্যাট্রিবিউট ব্যবহার করবেন না। উদাহরণস্বরূপ, একটি বোতামে একটি টুলটিপ থাকতে পারে না এবং একটি মডেল টগল করতে পারে না। এটি সম্পন্ন করতে, একটি মোড়ানো উপাদান ব্যবহার করুন।
আমরা এটাও বিশ্বাস করি যে আপনি জাভাস্ক্রিপ্ট API এর মাধ্যমে সম্পূর্ণরূপে সমস্ত বুটস্ট্র্যাপ প্লাগইন ব্যবহার করতে সক্ষম হবেন। সমস্ত পাবলিক API একক, চেইনযোগ্য পদ্ধতি এবং এর উপর কাজ করা সংগ্রহ ফেরত দেয়।
সমস্ত পদ্ধতির একটি ঐচ্ছিক বিকল্প অবজেক্ট গ্রহণ করা উচিত, একটি স্ট্রিং যা একটি নির্দিষ্ট পদ্ধতিকে লক্ষ্য করে, বা কিছুই নয় (যা ডিফল্ট আচরণ সহ একটি প্লাগইন শুরু করে):
প্রতিটি প্লাগইন একটি Constructor
সম্পত্তিতে তার কাঁচা কনস্ট্রাক্টরকেও প্রকাশ করে $.fn.popover.Constructor
: আপনি যদি একটি নির্দিষ্ট প্লাগইন উদাহরণ পেতে চান, তাহলে একটি উপাদান থেকে সরাসরি এটি পুনরুদ্ধার করুন $('[rel="popover"]').data('popover')
:
Constructor.DEFAULTS
আপনি প্লাগইনের অবজেক্ট পরিবর্তন করে একটি প্লাগইনের জন্য ডিফল্ট সেটিংস পরিবর্তন করতে পারেন :
কখনও কখনও অন্যান্য UI ফ্রেমওয়ার্কের সাথে বুটস্ট্র্যাপ প্লাগইনগুলি ব্যবহার করা প্রয়োজন। এই পরিস্থিতিতে, নামস্থানের সংঘর্ষ মাঝে মাঝে ঘটতে পারে। যদি এটি ঘটে, আপনি .noConflict
যে প্লাগইনটির মান ফিরিয়ে আনতে চান সেটিকে কল করতে পারেন।
বুটস্ট্র্যাপ বেশিরভাগ প্লাগইনের অনন্য কর্মের জন্য কাস্টম ইভেন্ট প্রদান করে। সাধারণত, এগুলি একটি অসীম এবং অতীত কণা আকারে আসে - যেখানে show
একটি ইভেন্টের শুরুতে ইনফিনিটিভ (উদাহরণস্বরূপ ) shown
ট্রিগার করা হয় এবং একটি ক্রিয়া সম্পূর্ণ হওয়ার সময় এর অতীত কণা রূপ (উদাহরণস্বরূপ) ট্রিগার হয়।
3.0.0 হিসাবে, সমস্ত বুটস্ট্র্যাপ ইভেন্ট নামস্থানে রয়েছে।
সমস্ত অসীম ইভেন্ট preventDefault
কার্যকারিতা প্রদান করে। এটি শুরু হওয়ার আগে একটি ক্রিয়া সম্পাদন বন্ধ করার ক্ষমতা প্রদান করে।
বুটস্ট্র্যাপের jQuery প্লাগইনগুলির প্রতিটির সংস্করণ VERSION
প্লাগইনের কনস্ট্রাক্টরের সম্পত্তির মাধ্যমে অ্যাক্সেস করা যেতে পারে। উদাহরণস্বরূপ, টুলটিপ প্লাগইনের জন্য:
বুটস্ট্র্যাপের প্লাগইনগুলি জাভাস্ক্রিপ্ট অক্ষম করা হলে বিশেষভাবে সুন্দরভাবে ফিরে আসে না। আপনি যদি এই ক্ষেত্রে ব্যবহারকারীর অভিজ্ঞতার বিষয়ে যত্নশীল হন, তাহলে আপনার ব্যবহারকারীদের <noscript>
পরিস্থিতি (এবং কীভাবে জাভাস্ক্রিপ্ট পুনরায় সক্ষম করবেন) ব্যাখ্যা করতে এবং/অথবা আপনার নিজস্ব কাস্টম ফলব্যাক যোগ করুন।
বুটস্ট্র্যাপ আনুষ্ঠানিকভাবে প্রোটোটাইপ বা jQuery UI এর মতো তৃতীয় পক্ষের জাভাস্ক্রিপ্ট লাইব্রেরি সমর্থন করে না । ইভেন্ট এবং নেমস্পেস থাকা সত্ত্বেও .noConflict
, সামঞ্জস্যপূর্ণ সমস্যা থাকতে পারে যা আপনাকে নিজেরাই ঠিক করতে হবে।
সাধারণ ট্রানজিশন ইফেক্টের জন্য, transition.js
অন্য JS ফাইলগুলির সাথে একবার অন্তর্ভুক্ত করুন। আপনি যদি কম্পাইল করা (বা মিনিফাইড) ব্যবহার করেন bootstrap.js
, তাহলে এটিকে অন্তর্ভুক্ত করার দরকার নেই—এটি ইতিমধ্যেই আছে।
Transition.js ইভেন্টের জন্য একটি মৌলিক সাহায্যকারীর transitionEnd
পাশাপাশি একটি CSS ট্রানজিশন এমুলেটর। এটি অন্যান্য প্লাগইন দ্বারা CSS ট্রানজিশন সমর্থন পরীক্ষা করতে এবং ঝুলন্ত ট্রানজিশন ধরার জন্য ব্যবহার করা হয়।
নিম্নলিখিত জাভাস্ক্রিপ্ট স্নিপেট ব্যবহার করে ট্রানজিশনগুলি বিশ্বব্যাপী অক্ষম করা যেতে পারে, যা লোড হওয়ার পরে transition.js
(বা bootstrap.js
বা bootstrap.min.js
, যেমন হতে পারে) আসতে হবে:
মডেলগুলি স্ট্রীমলাইনড, কিন্তু নমনীয়, ন্যূনতম প্রয়োজনীয় কার্যকারিতা এবং স্মার্ট ডিফল্ট সহ ডায়ালগ প্রম্পট।
অন্যটি দৃশ্যমান থাকাকালীন একটি মোডাল না খুলতে ভুলবেন না। একবারে একাধিক মডেল দেখানোর জন্য কাস্টম কোডের প্রয়োজন।
মোডালের চেহারা এবং/অথবা কার্যকারিতাকে প্রভাবিত করে এমন অন্যান্য উপাদানগুলি এড়াতে সর্বদা আপনার নথিতে একটি শীর্ষ-স্তরের অবস্থানে একটি মডেলের HTML কোড রাখার চেষ্টা করুন৷
মোবাইল ডিভাইসে মডেল ব্যবহার সংক্রান্ত কিছু সতর্কতা আছে। বিস্তারিত জানার জন্য আমাদের ব্রাউজার সমর্থন ডক্স দেখুন.
HTML5 কীভাবে এর শব্দার্থবিদ্যাকে সংজ্ঞায়িত করে তার কারণে, autofocus
বুটস্ট্র্যাপ মডেলগুলিতে এইচটিএমএল অ্যাট্রিবিউটের কোনো প্রভাব নেই। একই প্রভাব অর্জন করতে, কিছু কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করুন:
হেডার, বডি এবং ফুটারে অ্যাকশনের সেট সহ একটি রেন্ডার করা মডেল।
নিচের বোতামে ক্লিক করে জাভাস্ক্রিপ্টের মাধ্যমে একটি মডেল টগল করুন। এটি নীচে স্লাইড হবে এবং পৃষ্ঠার শীর্ষ থেকে বিবর্ণ হয়ে যাবে৷
মডেল শিরোনাম, থেকে এবং নিজেই যোগ করতে এবং , উল্লেখ করতে ভুলবেন না role="dialog"
।aria-labelledby="..."
.modal
role="document"
.modal-dialog
অতিরিক্তভাবে, আপনি aria-describedby
on এর সাথে আপনার মডেল ডায়ালগের একটি বিবরণ দিতে পারেন .modal
।
মডেলগুলিতে YouTube ভিডিওগুলি এম্বেড করার জন্য স্বয়ংক্রিয়ভাবে প্লেব্যাক এবং আরও অনেক কিছু বন্ধ করতে বুটস্ট্র্যাপে নয় অতিরিক্ত জাভাস্ক্রিপ্টের প্রয়োজন৷ আরও তথ্যের জন্য এই সহায়ক স্ট্যাক ওভারফ্লো পোস্টটি দেখুন।
মোডেলগুলির দুটি ঐচ্ছিক মাপ আছে, যা মডিফায়ার ক্লাসের মাধ্যমে উপলব্ধ একটি .modal-dialog
.
দেখার জন্য বিবর্ণ হওয়ার পরিবর্তে সহজভাবে প্রদর্শিত মডেলগুলির জন্য, .fade
আপনার মোডাল মার্কআপ থেকে ক্লাসটি সরিয়ে দিন।
একটি মডেলের মধ্যে বুটস্ট্র্যাপ গ্রিড সিস্টেমের সুবিধা নিতে, শুধুমাত্র নেস্ট .row
s এর মধ্যে .modal-body
এবং তারপর সাধারণ গ্রিড সিস্টেম ক্লাসগুলি ব্যবহার করুন।
একগুচ্ছ বোতাম আছে যা একই মোডাল ট্রিগার করে, সামান্য ভিন্ন বিষয়বস্তু সহ? কোন বোতামে ক্লিক করা হয়েছে তার উপর নির্ভর করে মডেলের বিষয়বস্তু পরিবর্তিত করতে event.relatedTarget
HTML গুণাবলী data-*
( সম্ভবত jQuery এর মাধ্যমে ) ব্যবহার করুন। বিস্তারিত জানার জন্য মডেল ইভেন্ট ডক্স দেখুন relatedTarget
,
মোডাল প্লাগইন ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে চাহিদা অনুযায়ী আপনার লুকানো বিষয়বস্তু টগল করে। এটি ডিফল্ট স্ক্রোলিং আচরণকে ওভাররাইড .modal-open
করার জন্য যুক্ত করে এবং মডেলের বাইরে ক্লিক করার সময় দেখানো মডেলগুলি খারিজ করার জন্য একটি ক্লিক এলাকা প্রদান করে।<body>
.modal-backdrop
জাভাস্ক্রিপ্ট না লিখে একটি মডেল সক্রিয় করুন। data-toggle="modal"
একটি কন্ট্রোলার উপাদানের উপর সেট করুন, একটি বোতামের মতো, একটি সহ data-target="#foo"
বা href="#foo"
টগল করার জন্য একটি নির্দিষ্ট মডেলকে লক্ষ্য করতে।
myModal
জাভাস্ক্রিপ্টের একটি লাইন সহ আইডি সহ একটি মডেল কল করুন :
বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-
, যেমনটি data-backdrop=""
।
নাম | প্রকার | ডিফল্ট | বর্ণনা |
---|---|---|---|
ব্যাকড্রপ | বুলিয়ান বা স্ট্রিং'static' |
সত্য | একটি মডেল-ব্যাকড্রপ উপাদান অন্তর্ভুক্ত। বিকল্পভাবে, static একটি পটভূমির জন্য নির্দিষ্ট করুন যা ক্লিকে মোডাল বন্ধ করে না। |
কীবোর্ড | বুলিয়ান | সত্য | এস্কেপ কী চাপলে মোডাল বন্ধ করে |
প্রদর্শন | বুলিয়ান | সত্য | আরম্ভ করার সময় মডেল দেখায়। |
দূরবর্তী | পথ | মিথ্যা | এই বিকল্পটি v3.3.0 থেকে অবহেলিত হয়েছে এবং v4 এ সরানো হয়েছে। আমরা এর পরিবর্তে ক্লায়েন্ট-সাইড টেমপ্লেটিং বা ডেটা বাইন্ডিং ফ্রেমওয়ার্ক ব্যবহার করার বা jQuery.load নিজে কল করার পরামর্শ দিই। যদি একটি দূরবর্তী URL প্রদান করা হয়, তাহলে বিষয়বস্তু jQuery এর পদ্ধতির মাধ্যমে একবার লোড করা হবে |
.modal(options)
একটি মডেল হিসাবে আপনার বিষয়বস্তু সক্রিয়. একটি ঐচ্ছিক বিকল্প গ্রহণ করে object
।
.modal('toggle')
ম্যানুয়ালি একটি মডেল টগল করে। মডেলটি আসলে দেখানো বা লুকানোর আগে (অর্থাৎ ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।shown.bs.modal
hidden.bs.modal
.modal('show')
ম্যানুয়ালি একটি মডেল খোলে। মডেলটি আসলে দেখানো হওয়ার আগে (অর্থাৎ ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।shown.bs.modal
.modal('hide')
ম্যানুয়ালি একটি মডেল লুকিয়ে রাখে। মডেলটি আসলে লুকানো হওয়ার আগে (অর্থাৎ ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।hidden.bs.modal
.modal('handleUpdate')
একটি স্ক্রলবার উপস্থিত হওয়ার ক্ষেত্রে মোডলটির অবস্থান পরিবর্তন করে, যা মোডালটিকে বাম দিকে লাফিয়ে দেবে৷
এটি খোলা থাকাকালীন মোডেলের উচ্চতা পরিবর্তিত হলেই কেবল প্রয়োজন।
বুটস্ট্র্যাপের মডেল ক্লাস মোডাল কার্যকারিতার সাথে হুক করার জন্য কয়েকটি ইভেন্ট প্রকাশ করে।
সমস্ত মডেল ইভেন্ট মডেল নিজেই (অর্থাৎ <div class="modal">
) এ গুলি করা হয়।
ইভেন্টের ধরণ | বর্ণনা |
---|---|
show.bs.modal | এই ইভেন্টটি অবিলম্বে ফায়ার করে যখন show ইনস্ট্যান্স পদ্ধতিটি কল করা হয়। যদি একটি ক্লিকের কারণে হয়, ক্লিক করা উপাদানটি relatedTarget ইভেন্টের সম্পত্তি হিসাবে উপলব্ধ। |
দেখানো হয়েছে.bs.modal | এই ইভেন্টটি বরখাস্ত করা হয় যখন মডেলটি ব্যবহারকারীর কাছে দৃশ্যমান করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। যদি একটি ক্লিকের কারণে হয়, ক্লিক করা উপাদানটি relatedTarget ইভেন্টের সম্পত্তি হিসাবে উপলব্ধ। |
hide.bs.modal | এই ইভেন্টটি অবিলম্বে বহিস্কার করা হয় যখন hide উদাহরণ পদ্ধতিটি কল করা হয়। |
hidden.bs.modal | এই ইভেন্টটি বরখাস্ত করা হয় যখন মডেলটি ব্যবহারকারীর কাছ থেকে লুকানো শেষ হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। |
loaded.bs.modal | এই ইভেন্টটি বরখাস্ত করা হয় যখন মডেল remote বিকল্পটি ব্যবহার করে সামগ্রী লোড করে। |
নেভিবার, ট্যাব এবং বড়ি সহ এই সাধারণ প্লাগইনের সাহায্যে প্রায় যেকোনো কিছুতে ড্রপডাউন মেনু যোগ করুন।
.open
ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে, ড্রপডাউন প্লাগইনটি অভিভাবক তালিকা আইটেমে ক্লাস টগল করে লুকানো সামগ্রী (ড্রপডাউন মেনু) টগল করে ।
মোবাইল ডিভাইসে, একটি ড্রপডাউন খোলা .dropdown-backdrop
মেনুর বাইরে ট্যাপ করার সময় ড্রপডাউন মেনু বন্ধ করার জন্য একটি ট্যাপ এলাকা হিসেবে যোগ করে, সঠিক iOS সমর্থনের জন্য একটি প্রয়োজনীয়তা। এর মানে হল একটি খোলা ড্রপডাউন মেনু থেকে অন্য ড্রপডাউন মেনুতে স্যুইচ করার জন্য মোবাইলে একটি অতিরিক্ত ট্যাপ প্রয়োজন৷
দ্রষ্টব্য: data-toggle="dropdown"
অ্যাট্রিবিউটটি একটি অ্যাপ্লিকেশন স্তরে ড্রপডাউন মেনু বন্ধ করার জন্য নির্ভর করে, তাই এটি সর্বদা ব্যবহার করা একটি ভাল ধারণা।
data-toggle="dropdown"
একটি ড্রপডাউন টগল করতে একটি লিঙ্ক বা বোতামে যোগ করুন ।
লিঙ্ক বোতামগুলির সাথে URLগুলি অক্ষত রাখতে, data-target
এর পরিবর্তে বৈশিষ্ট্যটি ব্যবহার করুন href="#"
৷
জাভাস্ক্রিপ্টের মাধ্যমে ড্রপডাউনগুলি কল করুন:
data-toggle="dropdown"
এখনও প্রয়োজনআপনি JavaScript এর মাধ্যমে আপনার ড্রপডাউন কল করুন বা ডাটা-এপিআই ব্যবহার করুন না কেন data-toggle="dropdown"
, ড্রপডাউনের ট্রিগার উপাদানে সবসময় উপস্থিত থাকা প্রয়োজন।
কোনোটিই নয়
$().dropdown('toggle')
একটি প্রদত্ত নেভিবার বা ট্যাবড নেভিগেশনের ড্রপডাউন মেনু টগল করে।
সমস্ত ড্রপডাউন ইভেন্ট .dropdown-menu
এর মূল উপাদানে গুলি করা হয়৷
সমস্ত ড্রপডাউন ইভেন্টের একটি relatedTarget
বৈশিষ্ট্য আছে, যার মান হল টগল করা অ্যাঙ্কর উপাদান৷
ইভেন্টের ধরণ | বর্ণনা |
---|---|
show.bs.ড্রপডাউন | শো ইনস্ট্যান্স পদ্ধতি কল করা হলে এই ইভেন্টটি অবিলম্বে চালু হয়। |
দেখানো হয়েছে.বিএস.ড্রপডাউন | ড্রপডাউনটি ব্যবহারকারীর কাছে দৃশ্যমান হয়ে গেলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। |
hide.bs.ড্রপডাউন | হাইড ইনস্ট্যান্স পদ্ধতি কল করা হলে এই ইভেন্টটি অবিলম্বে বহিস্কার করা হয়। |
hidden.bs.ড্রপডাউন | ড্রপডাউনটি ব্যবহারকারীর কাছ থেকে লুকানো শেষ হলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। |
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.
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 আপনি সম্ভবত তাদের কথা শোনেন নি ফলে হুডি গ্লুটেন-মুক্ত লো-ফাই ফ্যাপ অ্যালিকুইপ। তারা বিক্রি হওয়ার আগেই শ্রম অভিজাত স্থান, টেরি রিচার্ডসন প্রিডেন্ট ব্রাঞ্চ নেসিয়েন্ট কুইস কসবি সোয়েটার প্যারিয়াতুর কেফিয়েহ ইউটি হেলভেটিকা আর্টিসান। কার্ডিগান ক্রাফ্ট বিয়ার সিটান রেডিমেড ভেলিট। ভিএইচএস চেম্ব্রে টেম্পোর ভেনিয়াম। আনিম মল্লিট মিনিম কমোডো উল্লামকো বজ্রপাত।
Navbar লিঙ্কে অবশ্যই সমাধানযোগ্য আইডি টার্গেট থাকতে হবে। উদাহরণস্বরূপ, একটি <a href="#home">home</a>
অবশ্যই DOM-এর মতো কিছুর সাথে সঙ্গতিপূর্ণ হবে <div id="home"></div>
।
:visible
লক্ষ্য উপাদান উপেক্ষা করা হয়েছে:visible
jQuery অনুযায়ী নয় এমন লক্ষ্য উপাদানগুলিকে উপেক্ষা করা হবে এবং তাদের সংশ্লিষ্ট নেভি আইটেমগুলি কখনই হাইলাইট করা হবে না।
বাস্তবায়ন পদ্ধতি যাই হোক না কেন, স্ক্রোলস্পাই-এর জন্য position: relative;
আপনি যে উপাদানটির উপর গুপ্তচরবৃত্তি করছেন সেটির ব্যবহার প্রয়োজন। বেশিরভাগ ক্ষেত্রে এটি হল <body>
. ব্যতীত অন্য উপাদানগুলিতে স্ক্রোলস্পাই করার সময় , একটি সেট এবং প্রয়োগ <body>
করতে ভুলবেন না ।height
overflow-y: scroll;
আপনার টপবার নেভিগেশনে সহজেই স্ক্রোলস্পি আচরণ যোগ data-spy="scroll"
করতে, আপনি যে উপাদানটি গুপ্তচর করতে চান তাতে যোগ করুন (সাধারণত এটি হবে <body>
)। তারপর কোনো বুটস্ট্র্যাপ কম্পোনেন্টের data-target
প্যারেন্ট এলিমেন্টের আইডি বা ক্লাসের সাথে অ্যাট্রিবিউট যোগ করুন।.nav
আপনার CSS যোগ করার পরে position: relative;
, JavaScript এর মাধ্যমে scrollspy কল করুন:
.scrollspy('refresh')
DOM থেকে উপাদান যোগ বা অপসারণের সাথে স্ক্রোলস্পাই ব্যবহার করার সময়, আপনাকে রিফ্রেশ পদ্ধতিতে কল করতে হবে:
বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-
, যেমনটি data-offset=""
।
নাম | প্রকার | ডিফল্ট | বর্ণনা |
---|---|---|---|
অফসেট | সংখ্যা | 10 | স্ক্রলের অবস্থান গণনা করার সময় উপরে থেকে অফসেট করা পিক্সেল। |
ইভেন্টের ধরণ | বর্ণনা |
---|---|
activate.bs.scrollspy | যখনই স্ক্রোলস্পাই দ্বারা একটি নতুন আইটেম সক্রিয় হয় তখনই এই ইভেন্টটি চালু হয়। |
এমনকি ড্রপডাউন মেনুর মাধ্যমেও স্থানীয় বিষয়বস্তুর প্যানে স্থানান্তরের জন্য দ্রুত, গতিশীল ট্যাব কার্যকারিতা যোগ করুন। নেস্টেড ট্যাব সমর্থিত নয়।
কাঁচা ডেনিম আপনি সম্ভবত তাদের জিন শর্টস অস্টিন শুনেনি। 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.
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.
এই প্লাগইন ট্যাবড নেভিগেশন কম্পোনেন্টকে ট্যাবযোগ্য এলাকা যোগ করার জন্য প্রসারিত করে।
জাভাস্ক্রিপ্টের মাধ্যমে ট্যাবযোগ্য ট্যাবগুলি সক্ষম করুন (প্রতিটি ট্যাব পৃথকভাবে সক্রিয় করা প্রয়োজন):
আপনি বিভিন্ন উপায়ে পৃথক ট্যাব সক্রিয় করতে পারেন:
আপনি একটি ট্যাব বা পিল নেভিগেশন সক্রিয় করতে পারেন কোনো জাভাস্ক্রিপ্ট না লিখে শুধুমাত্র নির্দিষ্ট করে data-toggle="tab"
বা data-toggle="pill"
কোনো উপাদানে। nav
ট্যাবে এবং nav-tabs
ক্লাস যোগ ul
করলে বুটস্ট্র্যাপ ট্যাব স্টাইলিংnav
প্রয়োগ করা হবে, এবং ক্লাস যোগ করলে পিল স্টাইলিংnav-pills
প্রযোজ্য হবে ।
ট্যাবগুলিকে বিবর্ণ করতে, .fade
প্রতিটিতে যোগ করুন .tab-pane
। প্রথম ট্যাব ফলকেও .in
প্রাথমিক বিষয়বস্তু দৃশ্যমান করতে হবে।
$().tab
একটি ট্যাব উপাদান এবং বিষয়বস্তু ধারক সক্রিয় করে। ট্যাবে একটি data-target
বা একটি href
টার্গেটিং একটি কন্টেইনার নোড থাকা উচিত। উপরের উদাহরণগুলিতে, ট্যাবগুলি বৈশিষ্ট্য <a>
সহ s ।data-toggle="tab"
.tab('show')
প্রদত্ত ট্যাবটি নির্বাচন করে এবং এর সংশ্লিষ্ট বিষয়বস্তু দেখায়। পূর্বে নির্বাচিত অন্য কোনো ট্যাব অনির্বাচিত হয়ে যায় এবং এর সংশ্লিষ্ট বিষয়বস্তু লুকানো হয়। ট্যাব ফলকটি আসলে দেখানো হওয়ার আগে (অর্থাৎ shown.bs.tab
ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।
একটি নতুন ট্যাব দেখানোর সময়, ইভেন্টগুলি নিম্নলিখিত ক্রমানুসারে আগুন লাগে:
hide.bs.tab
(বর্তমান সক্রিয় ট্যাবে)show.bs.tab
(দেখানো ট্যাবে)hidden.bs.tab
hide.bs.tab
(পূর্ববর্তী সক্রিয় ট্যাবে, ইভেন্টের মতো একই )shown.bs.tab
show.bs.tab
(সদ্য-সক্রিয় এইমাত্র দেখানো ট্যাবে, ইভেন্টের মতোই )যদি কোনও ট্যাব ইতিমধ্যে সক্রিয় না থাকে, তাহলে hide.bs.tab
এবং hidden.bs.tab
ইভেন্টগুলি ফায়ার করা হবে না।
ইভেন্টের ধরণ | বর্ণনা |
---|---|
show.bs.tab | এই ইভেন্টটি ট্যাব শোতে ফায়ার করে, কিন্তু নতুন ট্যাব দেখানোর আগে। যথাক্রমে সক্রিয় ট্যাব এবং পূর্ববর্তী সক্রিয় ট্যাব (যদি উপলব্ধ হয়) ব্যবহার করুন event.target এবং লক্ষ্য করুন।event.relatedTarget |
দেখানো.bs.tab | একটি ট্যাব দেখানোর পরে এই ইভেন্টটি ট্যাব শোতে ফায়ার হয়৷ যথাক্রমে সক্রিয় ট্যাব এবং পূর্ববর্তী সক্রিয় ট্যাব (যদি উপলব্ধ হয়) ব্যবহার করুন event.target এবং লক্ষ্য করুন।event.relatedTarget |
hide.bs.tab | এই ইভেন্টটি চালু হয় যখন একটি নতুন ট্যাব দেখানো হবে (এবং এইভাবে পূর্ববর্তী সক্রিয় ট্যাবটি লুকানো হবে)। যথাক্রমে বর্তমান সক্রিয় ট্যাব এবং নতুন শীঘ্রই সক্রিয় ট্যাব ব্যবহার করুন event.target এবং লক্ষ্য করুন।event.relatedTarget |
hidden.bs.tab | একটি নতুন ট্যাব দেখানোর পরে এই ইভেন্টটি চালু হয় (এবং এইভাবে আগের সক্রিয় ট্যাবটি লুকানো হয়)। যথাক্রমে পূর্ববর্তী সক্রিয় ট্যাব এবং নতুন সক্রিয় ট্যাব ব্যবহার করুন event.target এবং লক্ষ্য করুন।event.relatedTarget |
জেসন ফ্রেম দ্বারা লিখিত চমৎকার jQuery.tipsy প্লাগইন দ্বারা অনুপ্রাণিত; টুলটিপস একটি আপডেটেড সংস্করণ, যা চিত্রের উপর নির্ভর করে না, অ্যানিমেশনের জন্য CSS3 ব্যবহার করে এবং স্থানীয় শিরোনাম সঞ্চয়ের জন্য ডেটা-অ্যাট্রিবিউট ব্যবহার করে।
শূন্য-দৈর্ঘ্যের শিরোনাম সহ টুলটিপগুলি কখনই প্রদর্শিত হয় না।
টুলটিপগুলি দেখতে নীচের লিঙ্কগুলিতে হোভার করুন:
টাইট প্যান্ট পরের স্তর keffiyeh আপনি সম্ভবত তাদের শুনেনি. ফটো বুথ দাড়ি কাঁচা ডেনিম লেটারপ্রেস ভেগান মেসেঞ্জার ব্যাগ স্টাম্পটাউন। ফার্ম-টু-টেবিল সিটান, mcsweeney's fixie sustainable quinoa 8-bit আমেরিকান পোশাকে একটি টেরি রিচার্ডসন ভিনাইল চেম্ব্রে রয়েছে। দাড়ি স্টাম্পটাউন, কার্ডিগান বান মি লোমো থান্ডারক্যাটস। টোফু বায়োডিজেল উইলিয়ামসবার্গ মারফা, চার লোকো ম্যাকসুইনির ক্লিনজ ভেগান চেম্ব্রে। একজন সত্যিকারের বিদ্রূপাত্মক কারিগর যাই হোক না কেন কীটার , সিনস্টার ফার্ম-টু-টেবিল ব্যাঙ্কসি অস্টিন টুইটার হ্যান্ডেল ফ্রিগান ক্রেড কাঁচা ডেনিম একক-অরিজিন কফি ভাইরাল।
চারটি বিকল্প উপলব্ধ: উপরে, ডান, নীচে এবং বাম প্রান্তিককৃত।
কার্যক্ষমতার কারণে, টুলটিপ এবং পপওভার ডেটা-এপিস অপ্ট-ইন করা হয়েছে, যার অর্থ আপনাকে সেগুলি নিজেই শুরু করতে হবে ৷
একটি পৃষ্ঠায় সমস্ত টুলটিপ শুরু করার একটি উপায় হল তাদের data-toggle
বৈশিষ্ট্য অনুসারে তাদের নির্বাচন করা:
টুলটিপ প্লাগইন চাহিদা অনুযায়ী সামগ্রী এবং মার্কআপ তৈরি করে এবং ডিফল্টভাবে তাদের ট্রিগার উপাদানের পরে টুলটিপগুলি রাখে।
জাভাস্ক্রিপ্টের মাধ্যমে টুলটিপটি ট্রিগার করুন:
একটি টুলটিপের জন্য প্রয়োজনীয় মার্কআপ শুধুমাত্র একটি data
বৈশিষ্ট্য এবং title
HTML উপাদানে আপনি একটি টুলটিপ পেতে চান৷ একটি টুলটিপের জেনারেট করা মার্কআপটি বেশ সহজ, যদিও এটির জন্য একটি অবস্থানের প্রয়োজন হয় (ডিফল্টরূপে, top
প্লাগইন দ্বারা সেট করা)।
কখনও কখনও আপনি একটি হাইপারলিঙ্কে একটি টুলটিপ যোগ করতে চান যা একাধিক লাইন মোড়ানো হয়। টুলটিপ প্লাগইনের ডিফল্ট আচরণ হল এটিকে অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্রে রাখা। white-space: nowrap;
এটি এড়াতে আপনার নোঙ্গর যোগ করুন .
.btn-group
a বা an-এর মধ্যে উপাদানগুলির উপর টুলটিপগুলি ব্যবহার করার সময় .input-group
বা টেবিল-সম্পর্কিত উপাদানগুলিতে ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, ), আপনাকে অবাঞ্ছিত পার্শ্বপ্রতিক্রিয়াগুলি এড়াতে (যেমন উপাদানটি আরও প্রশস্ত হওয়া এবং/) এড়ানোর জন্য <tfoot>
বিকল্পটি (নীচে নথিভুক্ত) উল্লেখ করতে হবে container: 'body'
অথবা টুলটিপ ট্রিগার হলে এর বৃত্তাকার কোণগুলি হারাবে)।
একটি কীবোর্ড দিয়ে নেভিগেট করা ব্যবহারকারীদের জন্য, এবং বিশেষ করে সহায়ক প্রযুক্তির ব্যবহারকারীদের জন্য, আপনাকে শুধুমাত্র কীবোর্ড-ফোকাসেবল উপাদান যেমন লিঙ্ক, ফর্ম কন্ট্রোল, বা কোনো tabindex="0"
অ্যাট্রিবিউট সহ যেকোনো স্বেচ্ছাচারী উপাদানে টুলটিপ যোগ করা উচিত।
disabled
একটি বা উপাদানে একটি টুলটিপ যোগ করতে .disabled
, একটি উপাদানটির ভিতরে রাখুন <div>
এবং এর পরিবর্তে টুলটিপ প্রয়োগ করুন <div>
।
বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-
, যেমনটি data-animation=""
।
নাম | টাইপ | ডিফল্ট | বর্ণনা |
---|---|---|---|
অ্যানিমেশন | বুলিয়ান | সত্য | টুলটিপে একটি CSS ফেইড ট্রানজিশন প্রয়োগ করুন |
ধারক | স্ট্রিং | মিথ্যা | মিথ্যা | একটি নির্দিষ্ট উপাদানে টুলটিপ যুক্ত করে। উদাহরণ: |
বিলম্ব | সংখ্যা | বস্তু | 0 | টুলটিপ (ms) দেখানো এবং লুকানো বিলম্ব - ম্যানুয়াল ট্রিগার প্রকারে প্রযোজ্য নয় যদি একটি নম্বর সরবরাহ করা হয়, বিলম্ব লুকান/দেখানো উভয় ক্ষেত্রেই প্রয়োগ করা হয় বস্তুর গঠন হল: |
html | বুলিয়ান | মিথ্যা | টুলটিপে HTML ঢোকান। মিথ্যা হলে, text DOM-এ বিষয়বস্তু সন্নিবেশ করতে jQuery-এর পদ্ধতি ব্যবহার করা হবে। আপনি যদি XSS আক্রমণ সম্পর্কে চিন্তিত হন তবে পাঠ্য ব্যবহার করুন৷ |
বসানো | স্ট্রিং | ফাংশন | 'শীর্ষ' | টুলটিপ - শীর্ষ | নীচে | বাম | ডান | স্বয়ংক্রিয় প্লেসমেন্ট নির্ধারণ করতে যখন একটি ফাংশন ব্যবহার করা হয়, তখন এটিকে টুলটিপ DOM নোডের সাথে প্রথম আর্গুমেন্ট এবং ট্রিগারিং উপাদান DOM নোডটিকে দ্বিতীয় হিসাবে বলা হয়। |
নির্বাচক | স্ট্রিং | মিথ্যা | যদি একটি নির্বাচক প্রদান করা হয়, টুলটিপ বস্তুগুলি নির্দিষ্ট লক্ষ্যগুলিতে অর্পণ করা হবে। অনুশীলনে, এটি ডাইনামিক HTML কন্টেন্টকে টুলটিপ যোগ করতে সক্ষম করতে ব্যবহৃত হয়। এটি এবং একটি তথ্যপূর্ণ উদাহরণ দেখুন । |
টেমপ্লেট | স্ট্রিং | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
টুলটিপ তৈরি করার সময় ব্যবহার করার জন্য বেস HTML। টুলটিপ এর
সবচেয়ে বাইরের মোড়ক উপাদান |
শিরোনাম | স্ট্রিং | ফাংশন | ' |
|
ট্রিগার | স্ট্রিং | 'হোভার ফোকাস' | টুলটিপ কিভাবে ট্রিগার হয় - ক্লিক করুন | হোভার | ফোকাস | ম্যানুয়াল আপনি একাধিক ট্রিগার পাস করতে পারেন; একটি স্থান দিয়ে তাদের আলাদা করুন। manual অন্য কোন ট্রিগার সঙ্গে মিলিত করা যাবে না. |
ভিউপোর্ট | স্ট্রিং | বস্তু | ফাংশন | { নির্বাচক: 'বডি', প্যাডিং: 0 } | এই উপাদানের সীমার মধ্যে টুলটিপ রাখে। উদাহরণ: যদি একটি ফাংশন দেওয়া হয়, এটিকে ট্রিগারিং এলিমেন্ট DOM নোডের একমাত্র যুক্তি হিসাবে বলা হয়। |
পৃথক টুলটিপগুলির জন্য বিকল্পগুলি ডেটা অ্যাট্রিবিউট ব্যবহারের মাধ্যমে নির্দিষ্ট করা যেতে পারে, যেমন উপরে ব্যাখ্যা করা হয়েছে।
$().tooltip(options)
একটি উপাদান সংগ্রহে একটি টুলটিপ হ্যান্ডলার সংযুক্ত করে।
.tooltip('show')
একটি উপাদানের টুলটিপ প্রকাশ করে। টুলটিপ আসলে দেখানোর আগে (অর্থাৎ shown.bs.tooltip
ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে। এটি টুলটিপের একটি "ম্যানুয়াল" ট্রিগারিং হিসাবে বিবেচিত হয়৷ শূন্য-দৈর্ঘ্যের শিরোনাম সহ টুলটিপগুলি কখনই প্রদর্শিত হয় না।
.tooltip('hide')
একটি উপাদানের টুলটিপ লুকিয়ে রাখে। টুলটিপ আসলে লুকিয়ে রাখার আগে (অর্থাৎ hidden.bs.tooltip
ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে। এটি টুলটিপের একটি "ম্যানুয়াল" ট্রিগারিং হিসাবে বিবেচিত হয়৷
.tooltip('toggle')
একটি উপাদানের টুলটিপ টগল করে। টুলটিপ আসলে দেখানো বা লুকানো হওয়ার আগে কলারের কাছে ফিরে আসে (অর্থাৎ shown.bs.tooltip
বা hidden.bs.tooltip
ঘটনা ঘটার আগে)। এটি টুলটিপের একটি "ম্যানুয়াল" ট্রিগারিং হিসাবে বিবেচিত হয়৷
.tooltip('destroy')
একটি উপাদানের টুলটিপ লুকিয়ে রাখে এবং ধ্বংস করে। যে টুলটিপগুলি ডেলিগেশন ব্যবহার করে (যা বিকল্পটি ব্যবহার করেselector
তৈরি করা হয় ) বংশধর ট্রিগার উপাদানগুলিতে পৃথকভাবে ধ্বংস করা যাবে না।
ইভেন্টের ধরণ | বর্ণনা |
---|---|
show.bs.tooltip | এই ইভেন্টটি অবিলম্বে ফায়ার করে যখন show ইনস্ট্যান্স পদ্ধতিটি কল করা হয়। |
দেখানো.bs.tooltip | টুলটিপটি ব্যবহারকারীর কাছে দৃশ্যমান হয়ে গেলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। |
hide.bs.tooltip | এই ইভেন্টটি অবিলম্বে বহিস্কার করা হয় যখন hide উদাহরণ পদ্ধতিটি কল করা হয়। |
hidden.bs.tooltip | টুলটিপটি ব্যবহারকারীর কাছ থেকে লুকানো শেষ হলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। |
inserted.bs.tooltip | show.bs.tooltip যখন টুলটিপ টেমপ্লেটটি DOM-এ যোগ করা হয় তখন ইভেন্টের পরে এই ইভেন্টটি বরখাস্ত করা হয় । |
হাউজিং সেকেন্ডারি তথ্যের জন্য যেকোনো উপাদানে আইপ্যাডের মতো বিষয়বস্তুর ছোট ওভারলে যোগ করুন।
Popovers যাদের শিরোনাম এবং বিষয়বস্তু উভয়ই শূন্য-দৈর্ঘ্যের হয় তা কখনই প্রদর্শিত হয় না।
Popovers এর জন্য টুলটিপ প্লাগইন আপনার বুটস্ট্র্যাপের সংস্করণে অন্তর্ভুক্ত করা প্রয়োজন।
কার্যক্ষমতার কারণে, টুলটিপ এবং পপওভার ডেটা-এপিস অপ্ট-ইন করা হয়েছে, যার অর্থ আপনাকে সেগুলি নিজেই শুরু করতে হবে ৷
একটি পৃষ্ঠায় সমস্ত পপওভার শুরু করার একটি উপায় হল তাদের data-toggle
বৈশিষ্ট্য অনুসারে তাদের নির্বাচন করা:
.btn-group
a বা an এর মধ্যে থাকা উপাদানগুলিতে .input-group
বা টেবিল-সম্পর্কিত উপাদানগুলিতে ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, ) পপওভার ব্যবহার করার সময় , অবাঞ্ছিত পার্শ্বপ্রতিক্রিয়াগুলি এড়াতে আপনাকে <tfoot>
বিকল্পটি নির্দিষ্ট করতে হবে (নিচে নথিভুক্ত) container: 'body'
বা পপওভার ট্রিগার হলে এর গোলাকার কোণগুলি হারানো)।
disabled
একটি বা উপাদানে একটি পপওভার যোগ করতে .disabled
, একটি উপাদানটির ভিতরে <div>
রাখুন এবং এর পরিবর্তে পপওভারটি প্রয়োগ করুন <div>
।
কখনও কখনও আপনি একটি হাইপারলিঙ্কে একটি পপওভার যোগ করতে চান যা একাধিক লাইন মোড়ানো হয়। পপওভার প্লাগইনের ডিফল্ট আচরণ হল এটিকে অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্রে রাখা। white-space: nowrap;
এটি এড়াতে আপনার নোঙ্গর যোগ করুন .
চারটি বিকল্প উপলব্ধ: উপরে, ডান, নীচে এবং বাম প্রান্তিককৃত।
সেড পোস্যুয়ার কনসেক্টেটুর লোবোর্টিসে রয়েছে। Aenean eu leo quam. Pellentesque ornare Sem lacinia quam venenatis vestibulum.
সেড পোস্যুয়ার কনসেক্টেটুর লোবোর্টিসে রয়েছে। Aenean eu leo quam. Pellentesque ornare Sem lacinia quam venenatis vestibulum.
সেড পোস্যুয়ার কনসেক্টেটুর লোবোর্টিসে রয়েছে। Aenean eu leo quam. Pellentesque ornare Sem lacinia quam venenatis vestibulum.
সেড পোস্যুয়ার কনসেক্টেটুর লোবোর্টিসে রয়েছে। Aenean eu leo quam. Pellentesque ornare Sem lacinia quam venenatis vestibulum.
focus
ব্যবহারকারীর পরবর্তী ক্লিকে পপওভার খারিজ করতে ট্রিগারটি ব্যবহার করুন ।
সঠিক ক্রস-ব্রাউজার এবং ক্রস-প্ল্যাটফর্ম আচরণের জন্য, আপনাকে ট্যাগ ব্যবহার করতে হবে, <a>
ট্যাগ নয় ,<button>
এবং আপনাকে অবশ্যই role="button"
এবং tabindex
বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করতে হবে।
জাভাস্ক্রিপ্টের মাধ্যমে পপওভার সক্ষম করুন:
বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-
, যেমনটি data-animation=""
।
নাম | টাইপ | ডিফল্ট | বর্ণনা |
---|---|---|---|
অ্যানিমেশন | বুলিয়ান | সত্য | পপওভারে একটি CSS ফেইড ট্রানজিশন প্রয়োগ করুন |
ধারক | স্ট্রিং | মিথ্যা | মিথ্যা | একটি নির্দিষ্ট উপাদানের সাথে পপওভার যুক্ত করে। উদাহরণ: |
বিষয়বস্তু | স্ট্রিং | ফাংশন | ' |
যদি একটি ফাংশন দেওয়া হয়, এটিকে |
বিলম্ব | সংখ্যা | বস্তু | 0 | পপওভার (ms) দেখানো এবং লুকানো বিলম্ব - ম্যানুয়াল ট্রিগার প্রকারে প্রযোজ্য নয় যদি একটি নম্বর সরবরাহ করা হয়, বিলম্ব লুকান/দেখানো উভয় ক্ষেত্রেই প্রয়োগ করা হয় বস্তুর গঠন হল: |
html | বুলিয়ান | মিথ্যা | পপওভারে HTML ঢোকান। মিথ্যা হলে, text DOM-এ বিষয়বস্তু সন্নিবেশ করতে jQuery-এর পদ্ধতি ব্যবহার করা হবে। আপনি যদি XSS আক্রমণ সম্পর্কে চিন্তিত হন তবে পাঠ্য ব্যবহার করুন৷ |
বসানো | স্ট্রিং | ফাংশন | 'ঠিক' | কিভাবে পপওভারের অবস্থান - শীর্ষ | নীচে | বাম | ডান | স্বয়ংক্রিয় প্লেসমেন্ট নির্ধারণ করতে যখন একটি ফাংশন ব্যবহার করা হয়, তখন এটিকে প্রথম আর্গুমেন্ট হিসাবে পপওভার DOM নোড এবং দ্বিতীয় হিসাবে ট্রিগারিং উপাদান DOM নোডকে বলা হয়। |
নির্বাচক | স্ট্রিং | মিথ্যা | একটি নির্বাচক প্রদান করা হলে, পপওভার অবজেক্টগুলি নির্দিষ্ট লক্ষ্যগুলিতে অর্পণ করা হবে৷ অনুশীলনে, এটি ডাইনামিক এইচটিএমএল কন্টেন্টকে পপওভার যোগ করতে সক্ষম করতে ব্যবহৃত হয়। এটি এবং একটি তথ্যপূর্ণ উদাহরণ দেখুন । |
টেমপ্লেট | স্ট্রিং | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
পপওভার তৈরি করার সময় ব্যবহার করার জন্য বেস HTML। পপওভার এর পপওভার এর
সবচেয়ে বাইরের মোড়ক উপাদান |
শিরোনাম | স্ট্রিং | ফাংশন | ' |
যদি একটি ফাংশন দেওয়া হয়, এটিকে |
ট্রিগার | স্ট্রিং | 'ক্লিক' | কিভাবে পপওভার ট্রিগার হয় - ক্লিক করুন | হোভার | ফোকাস | ম্যানুয়াল আপনি একাধিক ট্রিগার পাস করতে পারেন; একটি স্থান দিয়ে তাদের আলাদা করুন। manual অন্য কোন ট্রিগার সঙ্গে মিলিত করা যাবে না. |
ভিউপোর্ট | স্ট্রিং | বস্তু | ফাংশন | { নির্বাচক: 'বডি', প্যাডিং: 0 } | এই উপাদানের সীমার মধ্যে পপওভার রাখে। উদাহরণ: যদি একটি ফাংশন দেওয়া হয়, এটিকে ট্রিগারিং এলিমেন্ট DOM নোডের একমাত্র যুক্তি হিসাবে বলা হয়। |
পৃথক পপোভারের বিকল্পগুলি বিকল্পভাবে ডেটা অ্যাট্রিবিউট ব্যবহারের মাধ্যমে নির্দিষ্ট করা যেতে পারে, যেমন উপরে ব্যাখ্যা করা হয়েছে।
$().popover(options)
একটি উপাদান সংগ্রহের জন্য পপওভার শুরু করে।
.popover('show')
একটি উপাদানের পপওভার প্রকাশ করে। পপওভার আসলে দেখানোর আগে (অর্থাৎ shown.bs.popover
ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে। এটি পপওভারের একটি "ম্যানুয়াল" ট্রিগারিং হিসাবে বিবেচিত হয়। Popovers যাদের শিরোনাম এবং বিষয়বস্তু উভয়ই শূন্য-দৈর্ঘ্যের হয় তা কখনই প্রদর্শিত হয় না।
.popover('hide')
একটি উপাদানের পপওভার লুকিয়ে রাখে। পপওভারটি আসলে লুকানো হওয়ার আগে (অর্থাৎ hidden.bs.popover
ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে। এটি পপওভারের একটি "ম্যানুয়াল" ট্রিগারিং হিসাবে বিবেচিত হয়।
.popover('toggle')
একটি উপাদানের পপওভার টগল করে। পপওভারটি আসলে দেখানো বা লুকানোর আগে (অর্থাৎ ঘটনা ঘটার আগে) কলারের কাছেshown.bs.popover
ফিরে আসে hidden.bs.popover
। এটি পপওভারের একটি "ম্যানুয়াল" ট্রিগারিং হিসাবে বিবেচিত হয়।
.popover('destroy')
একটি উপাদানের পপওভার লুকায় এবং ধ্বংস করে। ডেলিগেশন ব্যবহার করে পপোভার (যা বিকল্প ব্যবহার করেselector
তৈরি করা হয় ) বংশধর ট্রিগার উপাদানগুলিতে পৃথকভাবে ধ্বংস করা যাবে না।
ইভেন্টের ধরণ | বর্ণনা |
---|---|
show.bs.popover | এই ইভেন্টটি অবিলম্বে ফায়ার করে যখন show ইনস্ট্যান্স পদ্ধতিটি কল করা হয়। |
দেখানো.বিএস.পপওভার | পপওভারটি ব্যবহারকারীর কাছে দৃশ্যমান হয়ে গেলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। |
hide.bs.popover | এই ইভেন্টটি অবিলম্বে বহিস্কার করা হয় যখন hide উদাহরণ পদ্ধতিটি কল করা হয়। |
hidden.bs.popover | পপওভার ব্যবহারকারীর কাছ থেকে লুকানো শেষ হলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। |
inserted.bs.popover | show.bs.popover DOM-এ পপওভার টেমপ্লেট যোগ করা হলে ইভেন্টের পরে এই ইভেন্টটি বরখাস্ত করা হয় । |
এই প্লাগইন সহ সমস্ত সতর্কতা বার্তাগুলিতে খারিজ কার্যকারিতা যুক্ত করুন৷
একটি .close
বোতাম ব্যবহার করার সময়, এটি অবশ্যই এর প্রথম সন্তান হতে .alert-dismissible
হবে এবং মার্কআপে এর আগে কোনও পাঠ্য সামগ্রী আসতে পারে না।
এটি এবং এটি পরিবর্তন করুন এবং আবার চেষ্টা করুন। Duis mollis, est non commodo luctus, Nisi erat Porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
data-dismiss="alert"
স্বয়ংক্রিয়ভাবে একটি সতর্কতা বন্ধ কার্যকারিতা দিতে শুধু আপনার বন্ধ বোতাম যোগ করুন . একটি সতর্কতা বন্ধ করা এটি DOM থেকে সরিয়ে দেয়।
আপনার সতর্কতাগুলি বন্ধ করার সময় অ্যানিমেশন ব্যবহার করার জন্য, নিশ্চিত করুন যে সেগুলিতে ইতিমধ্যেই প্রয়োগ করা হয়েছে .fade
এবং ক্লাস রয়েছে৷.in
$().alert()
data-dismiss="alert"
অ্যাট্রিবিউট আছে এমন বংশধর উপাদানগুলিতে ক্লিক ইভেন্টগুলির জন্য একটি সতর্কতা শোনায় ৷ (ডেটা-এপিআই-এর স্বয়ংক্রিয়-সূচনা ব্যবহার করার সময় প্রয়োজনীয় নয়।)
$().alert('close')
DOM থেকে এটিকে সরিয়ে একটি সতর্কতা বন্ধ করে। যদি .fade
এবং .in
ক্লাসগুলি উপাদানটিতে উপস্থিত থাকে তবে সতর্কতাটি সরানোর আগে বিবর্ণ হয়ে যাবে।
বুটস্ট্র্যাপের সতর্কতা প্লাগইন সতর্কতার কার্যকারিতার সাথে হুক করার জন্য কয়েকটি ইভেন্ট প্রকাশ করে।
ইভেন্টের ধরণ | বর্ণনা |
---|---|
বন্ধ.বিএস.সতর্ক | এই ইভেন্টটি অবিলম্বে ফায়ার করে যখন close ইনস্ট্যান্স পদ্ধতিটি কল করা হয়। |
বন্ধ.বিএস.সতর্ক | সতর্কতা বন্ধ হয়ে গেলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। |
বোতাম দিয়ে আরও কিছু করুন। কন্ট্রোল বোতাম স্টেট বা টুলবারের মত আরো উপাদানের জন্য বোতামের গ্রুপ তৈরি করুন।
ফায়ারফক্স পৃষ্ঠা লোড জুড়ে নিয়ন্ত্রণ অবস্থা (অক্ষমতা এবং চেকডনেস) গঠন করে । এই জন্য একটি workaround ব্যবহার করা হয় autocomplete="off"
. মজিলা বাগ #654072 দেখুন ।
data-loading-text="Loading..."
একটি বোতামে একটি লোডিং অবস্থা ব্যবহার করতে যোগ করুন ।
এই বৈশিষ্ট্যটি v3.3.5 থেকে অবহেলিত হয়েছে এবং v4 এ সরানো হয়েছে।
এই প্রদর্শনের জন্য, আমরা ব্যবহার করছি data-loading-text
এবং $().button('loading')
, কিন্তু এটি একমাত্র রাষ্ট্র নয় যা আপনি ব্যবহার করতে পারেন। নীচের $().button(string)
ডকুমেন্টেশনে এটি সম্পর্কে আরও দেখুন ।
data-toggle="button"
একটি একক বোতামে টগলিং সক্রিয় করতে যোগ করুন ।
.active
এবংaria-pressed="true"
প্রি-টগল করা বোতামগুলির জন্য, আপনাকে অবশ্যই নিজের সাথে .active
ক্লাস এবং aria-pressed="true"
অ্যাট্রিবিউট যোগ করতে হবে button
।
তাদের নিজ নিজ শৈলীতে টগলিং সক্ষম data-toggle="buttons"
করতে একটি সমন্বিত চেকবক্স বা রেডিও ইনপুট যোগ করুন।.btn-group
.active
পূর্বনির্বাচিত বিকল্পগুলির জন্য, আপনাকে অবশ্যই ইনপুটটিতে .active
ক্লাস যোগ করতে হবে label
।
যদি একটি চেকবক্স বোতামের চেক করা অবস্থাটি বোতামে একটি click
ইভেন্ট ফায়ার না করে আপডেট করা হয় (যেমন ইনপুটের সম্পত্তি <input type="reset">
সেট করার মাধ্যমে বা মাধ্যমে ), আপনাকে ইনপুটের নিজের ক্লাসটি checked
টগল করতে হবে ।.active
label
$().button('toggle')
পুশ স্টেট টগল করে। বোতামটিকে এমন চেহারা দেয় যে এটি সক্রিয় করা হয়েছে।
$().button('reset')
বোতামের অবস্থা রিসেট করে - পাঠ্যকে মূল পাঠ্যে অদলবদল করে। এই পদ্ধতিটি অ্যাসিঙ্ক্রোনাস এবং রিসেটিংটি আসলে শেষ হওয়ার আগে ফিরে আসে।
$().button(string)
যেকোনো ডেটা সংজ্ঞায়িত পাঠ্য অবস্থায় পাঠ্য অদলবদল করে।
নমনীয় প্লাগইন যা সহজ টগল আচরণের জন্য মুষ্টিমেয় ক্লাস ব্যবহার করে।
সঙ্কুচিত করার জন্য আপনার বুটস্ট্র্যাপের সংস্করণে ট্রানজিশন প্লাগইন অন্তর্ভুক্ত করা প্রয়োজন।
ক্লাস পরিবর্তনের মাধ্যমে অন্য একটি উপাদান দেখাতে এবং লুকানোর জন্য নীচের বোতামগুলিতে ক্লিক করুন:
.collapse
বিষয়বস্তু লুকিয়ে রাখে.collapsing
পরিবর্তনের সময় প্রয়োগ করা হয়.collapse.in
বিষয়বস্তু দেখায়আপনি বৈশিষ্ট্য সহ একটি লিঙ্ক href
বা বৈশিষ্ট্য সহ একটি বোতাম ব্যবহার করতে পারেন data-target
। উভয় ক্ষেত্রে, এটি data-toggle="collapse"
প্রয়োজনীয়।
প্যানেল উপাদানের সাথে একটি অ্যাকর্ডিয়ন তৈরি করতে ডিফল্ট পতন আচরণ প্রসারিত করুন।
.panel-body
এটি s এর সাথে s অদলবদল করাও সম্ভব .list-group
।
aria-expanded
নিয়ন্ত্রণ উপাদান যোগ করতে ভুলবেন না . এই অ্যাট্রিবিউটটি স্ক্রিন রিডার এবং অনুরূপ সহায়ক প্রযুক্তির জন্য কোলাপসিবল এলিমেন্টের বর্তমান অবস্থাকে স্পষ্টভাবে সংজ্ঞায়িত করে। যদি সংকোচনযোগ্য উপাদানটি ডিফল্টরূপে বন্ধ থাকে, তবে এটির একটি মান থাকা উচিত aria-expanded="false"
। আপনি in
ক্লাস ব্যবহার করে ডিফল্টরূপে খোলার জন্য সংকোচনযোগ্য উপাদান সেট করে থাকলে aria-expanded="true"
, পরিবর্তে নিয়ন্ত্রণে সেট করুন। প্লাগইন স্বয়ংক্রিয়ভাবে এই অ্যাট্রিবিউটটি টগল করবে যেটি সংকোচনযোগ্য উপাদানটি খোলা বা বন্ধ করা হয়েছে কিনা তার উপর ভিত্তি করে।
অতিরিক্তভাবে, যদি আপনার কন্ট্রোল এলিমেন্ট একটি একক কলাপসিবল এলিমেন্টকে টার্গেট করে - যেমন data-target
অ্যাট্রিবিউটটি একটি id
সিলেক্টরের দিকে নির্দেশ করে - তাহলে আপনি কন্ট্রোল এলিমেন্টে একটি অতিরিক্ত aria-controls
অ্যাট্রিবিউট যোগ করতে পারেন, যার মধ্যে id
রয়েছে কোলাপসিবল এলিমেন্ট। আধুনিক স্ক্রিন রিডার এবং অনুরূপ সহায়ক প্রযুক্তিগুলি এই বৈশিষ্ট্যটি ব্যবহার করে ব্যবহারকারীদেরকে অতিরিক্ত শর্টকাট প্রদান করে যাতে তারা সরাসরি কলাপসিবল এলিমেন্টে নেভিগেট করতে পারে।
পতন প্লাগইন ভারী উত্তোলন পরিচালনা করতে কয়েকটি ক্লাস ব্যবহার করে:
.collapse
বিষয়বস্তু লুকিয়ে রাখে.collapse.in
বিষয়বস্তু দেখায়.collapsing
ট্রানজিশন শুরু হলে যোগ করা হয় এবং শেষ হলে সরিয়ে দেওয়া হয়এই ক্লাস পাওয়া যাবে component-animations.less
.
একটি সংকোচনযোগ্য উপাদানের নিয়ন্ত্রণ স্বয়ংক্রিয়ভাবে বরাদ্দ করতে উপাদানটিতে শুধু যোগ করুন data-toggle="collapse"
এবং a । data-target
অ্যাট্রিবিউটটি data-target
একটি সিএসএস নির্বাচককে গ্রহন করে যাতে এটি সঙ্কুচিত হয়। collapse
কলাপসিবল এলিমেন্টে ক্লাস যোগ করতে ভুলবেন না । আপনি যদি এটি ডিফল্ট খুলতে চান তবে অতিরিক্ত ক্লাস যোগ করুন in
।
একটি কোলাপসিবল কন্ট্রোলে অ্যাকর্ডিয়নের মতো গ্রুপ ম্যানেজমেন্ট যোগ করতে, ডেটা অ্যাট্রিবিউট যোগ করুন data-parent="#selector"
। এটি কর্মে দেখতে ডেমো পড়ুন।
এর সাথে ম্যানুয়ালি সক্ষম করুন:
বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-
, যেমনটি data-parent=""
।
নাম | প্রকার | ডিফল্ট | বর্ণনা |
---|---|---|---|
অভিভাবক | নির্বাচক | মিথ্যা | যদি একটি নির্বাচক প্রদান করা হয়, তাহলে এই সংকোচনযোগ্য আইটেমটি দেখানো হলে নির্দিষ্ট প্যারেন্টের অধীনে সমস্ত সংকোচনযোগ্য উপাদান বন্ধ হয়ে যাবে। panel (প্রথাগত অ্যাকর্ডিয়ন আচরণের অনুরূপ - এটি ক্লাসের উপর নির্ভরশীল ) |
টগল | বুলিয়ান | সত্য | কলাপসিবল এলিমেন্টকে আমন্ত্রণে টগল করে |
.collapse(options)
একটি সংকোচনযোগ্য উপাদান হিসাবে আপনার সামগ্রী সক্রিয় করে। একটি ঐচ্ছিক বিকল্প গ্রহণ করে object
।
.collapse('toggle')
দেখানো বা লুকানোর জন্য একটি সংকোচনযোগ্য উপাদান টগল করে। কলাপসিবল এলিমেন্টটি আসলে দেখানো বা লুকানোর আগে (অর্থাৎ shown.bs.collapse
বা hidden.bs.collapse
ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।
.collapse('show')
একটি সংকোচনযোগ্য উপাদান দেখায়। কলাপসিবল এলিমেন্ট আসলে দেখানো হওয়ার আগে (অর্থাৎ shown.bs.collapse
ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।
.collapse('hide')
একটি সংকোচনযোগ্য উপাদান লুকায়। কলাপসিবল এলিমেন্টটি আসলে লুকিয়ে রাখার আগে (অর্থাৎ hidden.bs.collapse
ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।
বুটস্ট্র্যাপের পতনের শ্রেণীটি পতন কার্যকারিতার মধ্যে হুক করার জন্য কয়েকটি ইভেন্টকে প্রকাশ করে।
ইভেন্টের ধরণ | বর্ণনা |
---|---|
show.bs.collaps | এই ইভেন্টটি অবিলম্বে ফায়ার করে যখন show ইনস্ট্যান্স পদ্ধতিটি কল করা হয়। |
দেখানো হয়েছে | এই ইভেন্টটি বরখাস্ত করা হয় যখন একটি পতনের উপাদান ব্যবহারকারীর কাছে দৃশ্যমান করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। |
hide.bs.collaps | এই ইভেন্ট অবিলম্বে বহিস্কার করা হয় যখন hide পদ্ধতি বলা হয়েছে. |
hidden.bs.collapse | এই ইভেন্টটি বরখাস্ত করা হয় যখন একটি পতনের উপাদান ব্যবহারকারীর কাছ থেকে লুকানো থাকে (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। |
একটি ক্যারোজেলের মতো উপাদানগুলির মাধ্যমে সাইকেল চালানোর জন্য একটি স্লাইডশো উপাদান৷ নেস্টেড ক্যারোসেল সমর্থিত নয়।
ক্যারোজেল উপাদানটি সাধারণত অ্যাক্সেসযোগ্যতার মানগুলির সাথে সঙ্গতিপূর্ণ নয়৷ আপনি অনুগত হতে হলে, আপনার বিষয়বস্তু উপস্থাপনের জন্য অন্যান্য বিকল্প বিবেচনা করুন.
বুটস্ট্র্যাপ তার অ্যানিমেশনের জন্য একচেটিয়াভাবে CSS3 ব্যবহার করে, কিন্তু ইন্টারনেট এক্সপ্লোরার 8 এবং 9 প্রয়োজনীয় CSS বৈশিষ্ট্য সমর্থন করে না। সুতরাং, এই ব্রাউজারগুলি ব্যবহার করার সময় কোনও স্লাইড ট্রানজিশন অ্যানিমেশন নেই৷ আমরা ইচ্ছাকৃতভাবে ট্রানজিশনের জন্য jQuery-ভিত্তিক ফলব্যাক অন্তর্ভুক্ত না করার সিদ্ধান্ত নিয়েছি।
একটি .active
স্লাইডে ক্লাস যোগ করতে হবে। অন্যথায়, ক্যারোজেল দৃশ্যমান হবে না।
.glyphicon .glyphicon-chevron-left
নিয়ন্ত্রণের জন্য এবং ক্লাসের .glyphicon .glyphicon-chevron-right
প্রয়োজন হয় না। বুটস্ট্র্যাপ সরবরাহ করে .icon-prev
এবং .icon-next
প্লেইন ইউনিকোড বিকল্প হিসাবে।
আপনার স্লাইডে ক্যাপশন যোগ করুন সহজেই .carousel-caption
যেকোনো উপাদানের সাথে .item
। সেখানে যেকোন ঐচ্ছিক HTML রাখুন এবং এটি স্বয়ংক্রিয়ভাবে সারিবদ্ধ এবং বিন্যাসিত হবে।
ক্যারোসেলগুলি সঠিকভাবে কাজ করার জন্য ক্যারোজেল নিয়ন্ত্রণগুলির জন্য বাইরেরতম পাত্রে একটি ব্যবহার করা প্রয়োজন id
(the )৷ .carousel
একাধিক ক্যারোসেল যোগ করার সময়, বা একটি ক্যারোসেল পরিবর্তন করার সময় id
, প্রাসঙ্গিক নিয়ন্ত্রণগুলি আপডেট করতে ভুলবেন না।
ক্যারোজেলের অবস্থান সহজে নিয়ন্ত্রণ করতে ডেটা অ্যাট্রিবিউট ব্যবহার করুন। data-slide
কীওয়ার্ড গ্রহণ করে prev
বা next
, যা স্লাইডের অবস্থানকে তার বর্তমান অবস্থানের সাপেক্ষে পরিবর্তন করে। বিকল্পভাবে, data-slide-to
ক্যারোজেলে একটি কাঁচা স্লাইড সূচক পাস করতে ব্যবহার করুন data-slide-to="2"
, যা স্লাইডের অবস্থানকে একটি নির্দিষ্ট সূচীতে স্থানান্তরিত করে যা দিয়ে শুরু হয় 0
।
অ্যাট্রিবিউটটি data-ride="carousel"
পৃষ্ঠা লোড থেকে শুরু করে একটি ক্যারোজেলকে অ্যানিমেটিং হিসাবে চিহ্নিত করতে ব্যবহৃত হয়। এটি একই ক্যারোজেলের (অপ্রয়োজনীয় এবং অপ্রয়োজনীয়) সুস্পষ্ট জাভাস্ক্রিপ্ট আরম্ভের সাথে সংমিশ্রণে ব্যবহার করা যাবে না।
এর সাথে ম্যানুয়ালি ক্যারোজেল কল করুন:
বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-
, যেমনটি data-interval=""
।
নাম | প্রকার | ডিফল্ট | বর্ণনা |
---|---|---|---|
অন্তর | সংখ্যা | 5000 | একটি আইটেমকে স্বয়ংক্রিয়ভাবে সাইকেল চালানোর মধ্যে বিলম্বের পরিমাণ। মিথ্যা হলে, ক্যারোজেল স্বয়ংক্রিয়ভাবে চক্রাকারে যাবে না। |
বিরতি | স্ট্রিং | শূন্য | "হোভার" | যদি সেট করা থাকে "hover" , ক্যারোজেলের সাইক্লিংকে বিরতি দেয় এবং ক্যারোজেলের mouseenter সাইক্লিং আবার চালু করে mouseleave ৷ যদি সেট করা হয় null , ক্যারোজেলের উপর ঘোরাফেরা করলে এটি থামবে না। |
মোড়ানো | বুলিয়ান | সত্য | ক্যারোজেল ক্রমাগত সাইকেল চালাতে হবে নাকি হার্ড স্টপ থাকতে হবে। |
কীবোর্ড | বুলিয়ান | সত্য | ক্যারোজেল কীবোর্ড ইভেন্টগুলিতে প্রতিক্রিয়া জানাবে কিনা। |
.carousel(options)
একটি ঐচ্ছিক বিকল্প সহ ক্যারোজেল object
শুরু করে এবং আইটেমগুলির মাধ্যমে সাইকেল চালানো শুরু করে৷
.carousel('cycle')
বাম থেকে ডানে ক্যারোজেল আইটেমগুলির মধ্যে দিয়ে সাইকেল করুন৷
.carousel('pause')
আইটেমগুলির মধ্য দিয়ে সাইকেল চালানো থেকে ক্যারোসেল বন্ধ করে।
.carousel(number)
ক্যারোজেলকে একটি নির্দিষ্ট ফ্রেমে সাইকেল করে (0 ভিত্তিক, অ্যারের মতো)।
.carousel('prev')
পূর্ববর্তী আইটেম চক্র.
.carousel('next')
পরবর্তী আইটেম সাইকেল.
বুটস্ট্র্যাপের ক্যারোজেল ক্লাস ক্যারোজেল কার্যকারিতা মধ্যে হুক করার জন্য দুটি ইভেন্ট প্রকাশ করে।
উভয় ইভেন্টের নিম্নলিখিত অতিরিক্ত বৈশিষ্ট্য রয়েছে:
direction
: ক্যারোজেল যে দিকে স্লাইডিং হয় (হয় "left"
বা "right"
)।relatedTarget
: DOM উপাদান যা সক্রিয় আইটেম হিসাবে জায়গায় স্লাইড করা হচ্ছে৷সমস্ত ক্যারোজেল ইভেন্ট ক্যারোসেল নিজেই (অর্থাৎ <div class="carousel">
) এ গুলি করা হয়।
ইভেন্টের ধরণ | বর্ণনা |
---|---|
slide.bs.carousel | এই ইভেন্টটি অবিলম্বে ফায়ার হয়ে যায় যখন slide ইনস্ট্যান্স পদ্ধতিটি চালু করা হয়। |
slid.bs.carousel | যখন ক্যারোজেল তার স্লাইড ট্রানজিশন সম্পন্ন করে তখন এই ইভেন্টটি চালু করা হয়। |
অ্যাফিক্স প্লাগইনটি position: fixed;
চালু এবং বন্ধ টগল করে, এর সাথে পাওয়া প্রভাবটি অনুকরণ করে position: sticky;
। ডানদিকের সাবনেভিগেশনটি অ্যাফিক্স প্লাগইনের একটি লাইভ ডেমো।
ডেটা অ্যাট্রিবিউটের মাধ্যমে বা ম্যানুয়ালি আপনার নিজের জাভাস্ক্রিপ্টের মাধ্যমে অ্যাফিক্স প্লাগইন ব্যবহার করুন।উভয় পরিস্থিতিতেই, আপনাকে অবশ্যই আপনার সংযুক্ত সামগ্রীর অবস্থান এবং প্রস্থের জন্য CSS প্রদান করতে হবে।
দ্রষ্টব্য: Safari রেন্ডারিং বাগের কারণে একটি টানা বা ধাক্কা দেওয়া কলামের মতো তুলনামূলকভাবে অবস্থানকারী উপাদানে থাকা একটি উপাদানে অ্যাফিক্স প্লাগইন ব্যবহার করবেন না ।
অ্যাফিক্স প্লাগইন তিনটি শ্রেণীর মধ্যে টগল করে, প্রতিটি একটি নির্দিষ্ট অবস্থার প্রতিনিধিত্ব করে: .affix
, .affix-top
, এবং .affix-bottom
. প্রকৃত অবস্থানগুলি পরিচালনা করার জন্য আপনাকে অবশ্যই এই শ্রেণীগুলির জন্য (এই প্লাগইন থেকে স্বাধীন) position: fixed;
on বাদ দিয়ে শৈলীগুলি প্রদান করতে হবে ।.affix
অ্যাফিক্স প্লাগইন কীভাবে কাজ করে তা এখানে:
.affix-top
শুরু করার জন্য, উপাদানটি তার শীর্ষস্থানীয় অবস্থানে রয়েছে তা নির্দেশ করতে প্লাগইন যোগ করে। এই মুহুর্তে কোন CSS অবস্থানের প্রয়োজন নেই।.affix
প্রতিস্থাপন .affix-top
এবং সেট position: fixed;
(বুটস্ট্র্যাপের সিএসএস দ্বারা সরবরাহ করা হয়)।.affix
সাথে প্রতিস্থাপন করা উচিত .affix-bottom
। যেহেতু অফসেটগুলি ঐচ্ছিক, একটি সেট করার জন্য আপনাকে উপযুক্ত CSS সেট করতে হবে৷ এই ক্ষেত্রে, position: absolute;
প্রয়োজনে যোগ করুন। প্লাগইনটি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্ট বিকল্প ব্যবহার করে সেখান থেকে উপাদানটি কোথায় অবস্থান করবে তা নির্ধারণ করতে।নিচের যেকোনো একটি ব্যবহারের বিকল্পের জন্য আপনার CSS সেট করতে উপরের ধাপগুলি অনুসরণ করুন।
যেকোন এলিমেন্টে সহজে অ্যাফিক্স আচরণ যোগ data-spy="affix"
করতে, আপনি যে উপাদানটি গুপ্তচর করতে চান তাতে যোগ করুন। কখন একটি উপাদানের পিনিং টগল করতে হবে তা নির্ধারণ করতে অফসেটগুলি ব্যবহার করুন৷
জাভাস্ক্রিপ্টের মাধ্যমে অ্যাফিক্স প্লাগইনটি কল করুন:
বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-
, যেমনটি data-offset-top="200"
।
নাম | প্রকার | ডিফল্ট | বর্ণনা |
---|---|---|---|
অফসেট | সংখ্যা | ফাংশন | বস্তু | 10 | স্ক্রলের অবস্থান গণনা করার সময় স্ক্রীন থেকে অফসেট করা পিক্সেল। যদি একটি একক সংখ্যা প্রদান করা হয়, অফসেটটি উপরের এবং নীচে উভয় দিকেই প্রয়োগ করা হবে। একটি অনন্য, নীচে এবং শীর্ষ অফসেট প্রদান করতে শুধুমাত্র একটি বস্তু প্রদান করুন offset: { top: 10 } বা offset: { top: 10, bottom: 5 } । যখন আপনি গতিশীলভাবে একটি অফসেট গণনা করতে চান তখন একটি ফাংশন ব্যবহার করুন। |
লক্ষ্য | নির্বাচক | নোড | jQuery উপাদান | window বস্তু _ |
অ্যাফিক্সের লক্ষ্য উপাদান নির্দিষ্ট করে। |
.affix(options)
সংযুক্ত বিষয়বস্তু হিসাবে আপনার বিষয়বস্তু সক্রিয়. একটি ঐচ্ছিক বিকল্প গ্রহণ করে object
।
.affix('checkPosition')
প্রাসঙ্গিক উপাদানগুলির মাত্রা, অবস্থান এবং স্ক্রোল অবস্থানের উপর ভিত্তি করে প্রত্যয়ের অবস্থা পুনঃগণনা করে। , .affix
, .affix-top
এবং .affix-bottom
শ্রেণীগুলি নতুন অবস্থা অনুসারে সংযুক্ত সামগ্রীতে যুক্ত বা সরানো হয়। সংযুক্ত বিষয়বস্তুর সঠিক অবস্থান নিশ্চিত করার জন্য যখনই সংযুক্ত বিষয়বস্তুর মাত্রা বা লক্ষ্য উপাদান পরিবর্তন করা হয় তখন এই পদ্ধতিটি কল করা প্রয়োজন।
বুটস্ট্র্যাপের অ্যাফিক্স প্লাগইন অ্যাফিক্স কার্যকারিতার সাথে হুক করার জন্য কয়েকটি ঘটনা প্রকাশ করে।
ইভেন্টের ধরণ | বর্ণনা |
---|---|
affix.bs.affix | এই ইভেন্টটি উপাদানটি লাগানোর আগে অবিলম্বে আগুন হয়ে যায়। |
affixed.bs.affix | উপাদানটি লাগানোর পরে এই ইভেন্টটি বরখাস্ত করা হয়। |
affix-top.bs.affix | এই ইভেন্টটি উপাদানটি শীর্ষে লাগানোর আগে অবিলম্বে আগুন হয়ে যায়। |
affixed-top.bs.affix | উপাদানটি শীর্ষে লাগানোর পরে এই ইভেন্টটি বরখাস্ত করা হয়৷ |
affix-bottom.bs.affix | এই ইভেন্টটি অবিলম্বে অগ্নিসংযোগ করা হয়েছে উপাদানটি নীচে লাগানো হয়েছে। |
affixed-bottom.bs.affix | এই ইভেন্টটি অ্যাফিক্সড-বটম করার পরে বরখাস্ত করা হয়। |