TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে বুটস্ট্র্যাপ 5 Popovers তৈরি করবেন?

1

পপওভার একটি পপআপ বক্সে দেখানো এবং ট্রিগারড এলিমেন্টের দিকে নির্দেশ করে একটি বড় টুলটিপ ছাড়া আর কিছুই নয়। অনুরূপ বুটস্ট্র্যাপ টুলটিপ উপাদান, popover উপাদান একটি তৃতীয় পক্ষের পজিশনিং জন্য JavaScript লাইব্রেরি popper.min.js প্রয়োজন। প্রয়োজনীয় সিএসএস এবং স্ক্রিপ্ট ফাইল ব্যবহারের জন্য আপনি সম্পূর্ণ বুটস্ট্র্যাপ স্টার্টার টেমপ্লেট উল্লেখ করতে পারেন ।

বুটস্ট্র্যাপ 5 পপওভার টিউটোরিয়াল

  1. বুটস্ট্র্যাপ পপওভার দিয়ে শুরু করা
  2. বুটস্ট্র্যাপ উপাদান শুরু করা
  3. বোতামে পপওভার
  4. পপওভারের অবস্থান
  5. খারিজ পপওভার
  6. পপওভার কাস্টমাইজ করা

1 পপওভার দিয়ে শুরু করা

পপওভার কম্পোনেন্ট ব্যবহার করার আগে নিচের বিষয়গুলো মনে রাখবেন:

  • পপওভারের টুলটিপ প্লাগইন দরকার যার মানে আপনার HTML টেমপ্লেটে "bootstrap.min.js" ফাইলটি অন্তর্ভুক্ত করা উচিত।
  • উপযুক্ত অবস্থানের জন্য এটি একটি তৃতীয় পক্ষের জাভাস্ক্রিপ্ট লাইব্রেরি "popper.min.js" প্রয়োজন।
  • সঙ্গে বুটস্ট্র্যাপ 4, আপনি precompiled "bootstrap.bundle.min.js" ফাইল "bootstrap.min.js" এবং "popper.min.js" ধারণকারী ব্যবহার করতে পারেন।
  • পৃষ্ঠা লোডিং এর কার্যকারিতা উন্নত করার জন্য, ডিফল্টভাবে পপওভার পৃষ্ঠায় লোড হবে না। পপওভার লোড করার জন্য আপনাকে প্যারেন্ট এলিমেন্টের সাথে স্পষ্টভাবে শুরু করতে হবে।
  • পপওভারের ভিতরে কোন শিরোনাম বা বিষয়বস্তু না থাকলে পপওভার দেখানো হবে না।
  • ডিফল্ট পপওভার তখনই লুকিয়ে থাকবে যদি আপনি আবার ট্রিগারড এলিমেন্টে ক্লিক করেন। অন্যথায় এটি দেখানো হবে এমনকি আপনি পৃষ্ঠার বিষয়বস্তু স্ক্রোল করুন।
  • আপনি যে কোন জায়গায় ক্লিক করলে খারিজ পপওভার লুকিয়ে থাকবে।

2 পপওভারের সূচনা

টুলটিপের মতো, পপওভারগুলিও ব্যবহারের আগে আরম্ভ করা প্রয়োজন। সবচেয়ে সাধারণ উপায় হল নীচের মত বিশ্বব্যাপী শুরু করা:

<script> $(function() { $('[data-toggle="popover"]').popover() }) </script>

যদি আপনি দেখতে পান যে শৈলীগুলি পপওভারের সাথে কোডে হস্তক্ষেপ করছে তবে আপনি নির্দিষ্ট উপাদানের জন্য একটি পৃথক ধারক সংজ্ঞায়িত করতে পারেন।

<script> $(function() { $('.example-popover').popover({ container: 'body' }) }) </script>

মনে রাখবেন "popper.min.js" এবং "bootstrap.min.js" স্ক্রিপ্টের ঠিক পরে ইনিশিয়ালাইজেশন স্ক্রিপ্ট অন্তর্ভুক্ত করতে ভুলবেন না।

3 বোতামে পপওভার

আসুন একটি বোতাম উপাদানটিতে একটি পপওভার যোগ করা শুরু করি:

<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Large Button Element </button>

যদি আপনি শরীরের জন্য আরম্ভ করেন তবে আপনার বোতামটিতে ডেটা-কন্টেইনার = "বডি" বৈশিষ্ট্য যুক্ত করা উচিত।

যখন হাভারে টুলটিপস দেখানো হয়, পপওভারগুলি কেবল উপাদানটিতে ক্লিক করার পরে দেখানো হয়। উপরের উদাহরণ কোডে, বোতাম এলিমেন্টে ক্লিক করলে পপআপ বক্সটি সঠিক দিক থেকে নিচে দেখানো হবে:

কিভাবে বুটস্ট্র্যাপ 5 Popovers তৈরি করবেন?

4 পজিশনিং Popovers

বাম, ডান, উপরে এবং নীচে ট্রিগারিং উপাদান থেকে পপওভার চার দিকে অবস্থান করা যেতে পারে। এটি নিচের কোডের মত "ডেটা-প্লেসমেন্ট" অ্যাট্রিবিউট ব্যবহার করে অর্জন করা হয়:

<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="left" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Popover on Left </button> <button type="button" class="btn btn-danger" data-toggle="popover" data-placement="right" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Popover on Right </button> <button type="button" class="btn btn-info" data-toggle="popover" data-placement="top" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Popover on Top </button> <button type="button" class="btn btn-success" data-toggle="popover" data-placement="bottom" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Popover on Bottom </button>

পপওভারগুলির বিভিন্ন অবস্থান নীচে দেখানো হয়েছে:

কিভাবে বুটস্ট্র্যাপ 5 Popovers তৈরি করবেন?

5 খারিজ পপওভার

ডিফল্টরূপে পপওভার প্রদর্শিত হবে যখন আপনি উপাদানটিতে ক্লিক করবেন এবং আবার উপাদানটিতে ক্লিক করার সময় অদৃশ্য হয়ে যাবে। যখন আপনি এলিমেন্টের বাইরে পৃষ্ঠায় এলোমেলোভাবে ক্লিক করেন তখন এটি অদৃশ্য হবে না। আপনি নীচের কোড ব্যবহার করে একটি খারিজযোগ্য পপওভার তৈরি করতে পারেন:

<a tabindex="0" class="btn btn-lg btn-warning" role="button" data-toggle="popover" data-trigger="focus" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading."> Dismissble Popover on A Tag </a>

ডেটা-ট্রিগার = "ফোকাস" অ্যাট্রিবিউট ব্যবহার করা হয় যাতে কীবোর্ড ট্যাব কী দিয়ে হাইলাইট করার সময় পপওভার উপস্থিত হয় / অদৃশ্য হয়ে যায়।

কিভাবে বুটস্ট্র্যাপ 5 Popovers তৈরি করবেন?

লক্ষ্য করুন যে ট্যাগটি পরিবর্তে ব্যবহার করা হয়েছে

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত