এইচটিএমএল সিএসএস বুটস্ট্রাপ জাভাস্ক্রিপ্ট জেকুয়েরি
ফোরাম
×

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

হোম-Home শুরু করুন-Get Started গ্রীড বেসিক-Grid Basic

সিএসএস কম্পোনেন্ট

টাইপোগ্রাফী-Typography টেবিল-Table ইমেজ-Image জামবোর্টন-Jumbotron বুটস্ট্রাপ Well এলার্ট-Alert বাটন-Button বাটন গ্রুপ-Button Group গ্লিফআইকন-Glypicon ব্যাজ/লেভেল-Badge/Label প্রোগ্রেস বার-Progress Bar পেজিনেশন-Pagination পেজার-Pager লিস্ট গ্রুপ-List Group প্যানেল-Panel ফরম-Form ইনপুট-Input ইনপুট(২)-Input(2) ইনপুটের আকার-Input Sizing সাহায্যকারী-Helper

JS কম্পোনেন্ট

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব/পিল-Tab/Pill ন্যাভবার-Navbar ক্যারোসেল-Carousel মোডাল-Modal টুলটিপ-Tooltip পপওভার-Popover স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

বুটস্ট্রাপ গ্রীড সিস্টেম

গ্রীড সিস্টেম-Grid System বুটস্ট্রাপ Stacked/Horizontal গ্রীড ছোট-Grid Small গ্রীড মিডিয়াম-Grid Medium গ্রীড বড়-Grid Large গ্রীড উদাহরণ-Grid Example

বুটস্ট্রাপ রেফারেন্স

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব-Tab বাটন-Button ক্যারোসেল-Carousel মোডাল-Modal স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

 

বুটস্ট্রাপ JS পপওভার


JS পপওভার (popover.js)

পপওভার প্লাগ-ইনটি টুলটিপসের মত; এটা একটি পপ-আপ বক্সের মত যখন ব্যবহারকারী একটি উপাদানের উপর ক্লিক করে তখন তা দেখা যায় । পার্থক্য এই যে, পপওভারের আরো অনেক বিষয়বস্তু থাকতে পারে ।

প্লাগ-ইন নির্ভরতা: পপওভারেরর জন্য অবশ্যই আপনার বুটস্ট্রাপের ভার্সনে অবশ্যই টুলটিপ প্লাগ-ইন (tooltip.js) অন্তর্ভূক্ত করতে হবে।

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


data-* এট্রিবিউট মাধ্যম

data-toggle="popover" এর দ্বারা পপওভার সক্রিয় করা হয় ।

title এট্রিবিউট দ্বারা পপওভারের হেডার টেক্সটকে নির্দিষ্ট করা হয় ।

data-content এট্রিবিউট দ্বারা পপওভারের বডির ভিতর যে টেক্সট প্রদর্শন করা হয় তা উল্লেখ করে ।

উদাহরণ

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">টোগল পপওভার</a>
নিজে চেষ্টা করি »

জাচাস্ক্রিপ্ট মাধ্যম

পপওভার সিএসএস নয় - শুধুমাত্র প্লাগিন , তাই নির্দিষ্ট এলিমেন্ট নির্বাচন এবং popover() মেথড কল করে জেকুয়েরির মাধ্যমে সক্রিয় করা আবশ্যক।

উদাহরণ

// একটি ডকুমেন্টের সকল পপওভার সক্রিয় করার জন্য এই কোড ব্যবহার করুন।
$('[data-toggle="popover"]').popover();

// Select a specified element
$('#myPopover').popover();
নিজে চেষ্টা করি »

পপওভার অপশন

অপশন data এট্রবিউট অথবা জাভাস্ক্রিপ্টের মাধ্যমে অতিক্রম করতে পারে। data এট্রিবিউটের জন্য, ডেটা প্লেসমেন্ট হিসেবে data-* এর সাথে অপশনের নাম সংযুক্ত করতে হবে । যেমন="data-interval"

নাম ধরন ডিফল্ট বর্ণনা চেষ্টা করি
animation boolean true

যখন পপওভার বন্ধ এবং খোলা হয় তখন সিএসএস ফেড ট্রানজিশন এফেক্ট যোগ করা হবে কি হবে না তা নির্দিষ্ট করে।

  • true - ফেইড এফেক্ট যোগ করে
  • false - ফেইড এফেক্ট যোগ করে না
চেষ্টা করি
container string, or the boolean false false একটি নির্দিষ্ট এলিমেন্টে পপওভার সংযোজন করে।
উদাহরণ : container: 'body'
চেষ্টা করি
content string "" পপওভারের বডির মধ্যে টেক্সট নির্দিষ্ট করে। চেষ্টা করি
delay number, or object 0 পপওভারটি বন্ধ হতে এবং খুলতে কত মিলিসেকেন্ড লাগে তার সংখ্যা উল্লেখ করা হয়।

খোলার জন্য কতোটুকু delay হবে এবং বন্ধ করার জন্য অন্য আরেকটি নির্দিষ্ট করতে অবজেক্ট স্ট্রাকচারে ব্যবহার করা হয়:

delay: {show: 500, hide: 100} - পপওভার ওপেন করতে ৫০০ মিলিসেকেন্ড লাগে, কিন্তু বন্ধ করতে মাত্র ১০০ মিলিসেকেন্ড লাগে
চেষ্টা করি
html boolean  false পপওভারে এইচটিএমএল ট্যাগ গ্রহণযোগ্য হবে কি হবে না তা নির্দিষ্ট করে :
 
  • true - এইচটিএমএল ট্যাগ গ্রহণযোগ্য
  • false - এইচটিএমএল ট্যাগ গ্রহণযোগ্য নয়
নোট:এইচটিএমএলকে অবশই টাইটেল এট্রিবিউটের মধ্যে অন্তর্ভূক্ত করতে হবে। (অথবা টাইটেল অপশন ব্যবহার করতে হবে)

যখন false (এটা ডিফল্ট) সেট করা হয়, তখন জেকুয়েরির text() মেথডটি ব্যবহার করতে হবে । যদি আপনি XSS attack নিয়ে উদ্বিগ্ন থাকেন তাহলে এটা ব্যবহার করুন।
চেষ্টা করি
placement string "right" পপওভারের অবস্থান নির্দিষ্ট করে। সম্ভাব্য ভ্যালু গুলো হল:

  • "top" - পপওভার উপরে দেখাবে।
  • "bottom" - পপওভার নিচে দেখাবে।
  • "left" - পপওভার বামে দেখাবে।
  • "right" - পপওভার ডানে দেখাবে।
  • "auto" - পপওভারের অবস্থান সর্ম্পকে ব্রাউজার সিদ্ধান্ত নেয়। উদাহরণস্বরূপ, যদি ভ্যালুটি "auto left" হয়, তাহলে পপওভারটি সম্ভাব্য ক্ষেত্রে বামে দেখাবে, অন্যথায় ডানে। যদি ভ্যালুটি "auto bottom" হয়, তাহলে পপওভারটি নিচে প্রদর্শিত হবে, অন্যথায় উপরে দেখাবে।
চেষ্টা করি
selector string, or the boolean false false একটি নির্দিষ্ট সিলেক্টরে পপওভার যুক্ত করে। চেষ্টা করি
template string   যখন পপওভার তৈরি করা হয় তখন base এইচটিএমএল ব্যবহার করতে হবে।

যে পপওভারের ক্লাস .popover-title তার সাথে পপওভারের টাইটেল সংযুক্ত হবে।

যে পপওভারের ক্লাস .popover-content তার সাথে পপওভারের কন্টেন্ট সংযুক্ত হবে।

.arrow টি popover এর এরো হয়ে যাবে ।

সর্বোচ্চ এলিমেন্টটিতে অবশ্যই .popover ক্লাস থাকতে হবে।
title string "" পপওভারের হেডার টেক্সট কে নির্দিষ্ট করে। চেষ্টা করি
trigger string "click" কিভাবে পপওভারকে ট্রিগার করা হবে তা নির্দিষ্ট করা হয়। সম্ভাব্য ভ্যালু গুলো হল:

  • "click" - ক্লিকের মাধ্যমে পপওভারকে ট্রিগার করা হয়
  • "hover" - হোভারের মাধ্যমে পপওভারকে ট্রিগার করা হয়
  • "focus" - যখন পপওভারটি ফোকাস হয় তখন এটি ট্রিগার হয় (ট্যাবিং অথবা ক্লিংকিং এর মাধ্যমে)
  • "manual" - পপওভারকে ম্যানুয়েলি ট্রিগার করা হয়
টিপস: একাধিক ভ্যালু পাসের ক্ষেত্রে, স্পেস দ্বারা পৃথক করতে হবে।
চেষ্টা করি
viewport string, or object {selector: "body", padding: 0} এই এলিমেন্টের ভিতরে popover কে রাখবে ।

উদাহরণ : viewport: '#viewport' or {selector: '#viewport', padding: 0}

পপওভার মেথড

পপ\ মেথড গুলো নিম্নোক্ত টেবিল দেওয়া হল

মেথড বর্ণনা চেষ্টা করি
.popover(options) অপশন দ্বারা পপওভারকে সক্রিয় করা হয়। বৈধ ভ্যালুর জন্য উপরের অপশন গুলো দেখুন চেষ্টা করি
.popover("show") পপওভার টিকে প্রদর্শন করে চেষ্টা করি
.popover("hide") পপওভার টিকে হাইড করে চেষ্টা করি
.popover("toggle") পপওভার টিকে এক বার প্রদর্শন আবার হাইড করে (Toggle) চেষ্টা করি
.popover("destroy") পপওভার টিকে হাইড এবং ডিলেট করে দেয় চেষ্টা করি

পপওভার ইভেন্ট

পপওভারে ইভেন্ট গুলো নিম্নোক্ত টেবিল দেওয়া হল।

ইভেন্ট বর্ণনা চেষ্টা করি
show.bs.popover যখন ট্যাব প্রদর্শন করা হয় তখন ঘটে চেষ্টা করি
shown.bs.popover যখন ট্যাবটি সম্পূর্ন প্রদর্শিত হয় তখন এই ইভেন্টটি ঘটে ( সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর) চেষ্টা করি
hide.bs.popover যখন ট্যাব হাইড করা করা হয় তখন ঘটে চেষ্টা করি
hidden.bs.popover যখন ট্যাবটি সম্পূর্ন হাইড হয়ে যায় তখন এই ইভেন্টটি ঘটে (সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর) চেষ্টা করি

Examples

উদাহরণ

কাস্টম পপওভার ডিজাইন

পপওভারে ইচ্ছেমত ডিজাইন করতে সিএসএস ব্যবহার করুন:

উদাহরণ

 /* পপওভার */
.popover {
    border: 2px dotted red;
}

/* পপওভার হেডার */
.popover-title {
    background-color: #73AD21;
    color: #FFFFFF;
    font-size: 28px;
    text-align:center;
}

/* পপওভার বডি */
.popover-content {
    background-color: coral;
    color: #FFFFFF;
    padding: 25px;
}

/* পপওভার এ্যারো */
.arrow {
    border-right-color: red !important;
}
নিজে চেষ্টা করি »