বুটস্ট্রাপ জেএস কলাপ্স রেফারেন্স - bootstrap JS Collapse Reference
বুটস্ট্রাপ জেএস কলাপ্স (collapse.js)
এটি একরডিয়ন এবং ন্যাভিগেশন এর মতো কলাপ্সিবল কম্পোনেন্টের জন্য মূল স্টাইল এবং নমনীয় সাপোর্ট প্রদান করে।
প্লাগ-ইন ডিপেনডেন্সিঃ কলাপ্সের জন্য আপনার বুটস্ট্রাপ ভার্সনে ট্রানজিশন প্লাগ-ইন অন্তর্ভুক্ত করা প্রয়োজন হয়।
কলাপ্সিবলের টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ কলাপ্সিবল টিউটোরিয়ালটি পড়ুন।
কলাপ্স প্লাগ-ইন ক্লাসসমূহ
| ক্লাস | বিবরণ | উদাহরণ |
|---|---|---|
.collapse |
কন্টেন্টকে হাইড করে। | উদাহরণ দেখুন |
.collapse in |
কন্টেন্টকে প্রদর্শন করে। | উদাহরণ দেখুন |
.collapsing |
যখন ট্রানজিশন শুরু হয় তখন যুক্ত করে, এবং যখন শেষ করে তখন রিমোভ করে। | উদাহরণ দেখুন |
বুটস্ট্রাপ data-* এট্রিবিউট মাধ্যম
একটি কলাপ্সিবল এলিমেন্টের নিয়ন্ত্রন স্বয়ংক্রিয়ভাবে অর্পন করার জন্য ঐ এলিমেন্টে শুধুমাত্র data-toggle="collapse" এবং data-target যুক্ত করুন। data-target এট্রিবিউটটি সিএসএস সিলেক্টরকে কলাপ্স প্রয়োগ করার জন্য গ্রহন করে। মনে রাখবেন যেন কলাপ্সিবল এলিমেন্টে কলাপ্স ক্লাস যুক্ত করা হয়। যদি আপনি ডিফল্টভাবে ওপেন রাখতে চান, তাহলে অতিরিক্ত ক্লাস .in যুক্ত করুন।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Collapse Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>সাধারণ কলাপ্স</h2>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapse">সাধারণ কলাপ্স</button>
<div id="collapse" class="collapse">
<h2>স্যাট একাডেমী,</h2>
দেশের বৃহত্তম কম্পিউটার প্রোগ্রামিং শেখার একমাত্র বৃহত্তম প্রতিষ্ঠান স্যাট একাডেমী।<br>
এখানে সম্পূর্ণ বিনামূল্যে কম্পিউটার প্রোগ্রামিং এর উপর প্রশিক্ষণ দেয়া হয়।
</div>
</div>
</body>
</html>
ফলাফল
টিপসঃ কলাপ্সিবল কন্ট্রোলে গ্রুপ ম্যানেজমেন্টের মতো একরডিয়ন যুক্ত করতে data এট্রিবিউট data-parent="#selector" যুক্ত করুন।
বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম
ম্যানুয়েললি যুক্ত করার জন্যঃ
$('.collapse').collapse()
বুটস্ট্রাপ কলাপ্স মেথড
নিচের টেবিলে কলাপ্স মেথডগুলো দেয়া হলো।
| মেথড | বিবরণ | উদাহরণ |
|---|---|---|
.collapse("toggle") |
কলাপ্সিবল এলিমেন্টকে টোগল করে। | উদাহরণ দেখুন |
.collapse("show") |
কলাপ্সিবল এলিমেন্টকে প্রদর্শন করে। | উদাহরণ দেখুন |
.collapse("hide") |
কলাপ্সিবল এলিমেন্টকে হাইড করে। | উদাহরণ দেখুন |
বুটস্ট্রাপ কলাপ্স ইভেন্ট
নিচের টেবিলে কলাপ্স ইভেন্টগুলো দেয়া হলো।
| ইভেন্ট | বিবরণ | উদাহরণ |
|---|---|---|
show.bs.collapse |
কলাপ্সিবল এলিমেন্টটি প্রদর্শিত হওয়ার সময় ঘটে। | উদাহরণ দেখুন |
shown.bs.collapse |
কলাপ্সিবল এলিমেন্টটি পুরোপুরি প্রদর্শিত হওয়ার পর ঘটে (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর) | উদাহরণ দেখুন |
hide.bs.collapse |
কলাপ্সিবল এলিমেন্টটি হাইড হওয়ার ঘটে। | উদাহরণ দেখুন |
hidden.bs.collapse |
কলাপ্সিবল এলিমেন্ট পুরোপুরি হাইড হওয়ার পর ঘটে। (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর) | উদাহরণ দেখুন |
আরো উদাহরণ
আইকন বা টেক্সটকে এক্সপান্ড এবং কলাপ্স
নিচের উদাহরণে যখন কলাপ্সিবল কন্টেন্টটি ওপেন এবং ক্লোজ হয় তখন বাটনের টেক্সট এবং আইকন পরিবর্তিত হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Collapse Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>আইকন বা টেক্সটকে এক্সপান্ড এবং কলাপ্স</h2>
<button type="button" class="btn btn-success" data-toggle="collapse" data-target="#demo">
<span class="glyphicon glyphicon-collapse-down"></span> ওপেন
</button>
<div id="demo" class="collapse">
<h2>স্যাট একাডেমী</h2>
দেশের বৃহত্তম কম্পিউটার প্রোগ্রামিং শেখার একমাত্র বৃহত্তম প্রতিষ্ঠান স্যাট একাডেমী।<br>
এখানে সম্পূর্ণ বিনামূল্যে কম্পিউটার প্রোগ্রামিং এর উপর প্রশিক্ষণ দেয়া হয়।
</div>
</div>
<script>
$(document).ready(function(){
$("#demo").on("hide.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> ওপেন');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> ক্লোজ');
});
});
</script>
</body>
</html>
ফলাফল