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

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

হোম-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 কলাপ্স (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>

ফলাফল