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

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

হোম-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

 

বুটস্ট্রাপ কলাপ্স


বেসিক কলাপ্সিবল

বড় কোনো কন্টেন্টকে লুকিয়ে রেখে টোগল করে দেখোনোর জন্য "কলাপ্স" ব্যবহার করা হয়। নিচের উদাহরণে একটি বেসিক কলাপ্সিবল তৈরি করা দেখানো হলোঃ

উদাহরণ

<!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">
          <h3>বেসিক কলাপ্সিবলের উদাহরণ</h3>
          <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapse">বেসিক কলাপ্সিবল</button>
          <div id="collapse" class="collapse">
            ঢাকা বিশ্ববিদ্যালয় হচ্ছে ঢাকা শহরের শাহবাগে অবস্থিত বাংলাদেশের একটি সরকারী বিশ্ববিদ্যালয়; যা বহু-অনুষদভিত্তিক গবেষণা
            বিশ্ববিদ্যালয় হিসেবে পরিচিত। ১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়। সূচনালগ্নে বিভিন্ন
            প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।
          </div>
	    </div>

   </body>
</html>

ফলাফল




উদাহরণের ব্যাখ্যা

.collapse ক্লাসের মাধ্যমে একটি কলাপ্সিবল এলিমেন্টকে বুঝানো হয়েছে। বাটনে ক্লিক করার সাথে সাথে কন্টেন্ট টি দেখা যায় আর ক্লিক করলে তা চলে যায়।

কলাপ্সিবল কন্টেন্টকে নিয়ন্ত্রন(দেখানো/লুকানো) করার জন্য, <a> অথবা <button> এলিমেন্টের মধ্যে data-toggle="collapse" এট্রিবিউট যুক্ত করুন।

তারপর বাটন বা লিংকের সাথে কলাপ্সিবল কন্টেন্টকে (<div id="collapse">) সংযুক্ত করার জন্য করার জন্য data-target="#idName" এট্রিবিউট যুক্ত করুন।

নোটঃ <a> এলিমেন্টে data-target এট্রিবিউটের পরিবর্তে href এট্রিবিউট ব্যবহার করা যায়ঃ

উদাহরণ

<!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">
          <h3>বেসিক কলাপ্সিবলের উদাহরণ</h3>
          <a href="#collapse" class="btn btn-info" data-toggle="collapse">বেসিক কলাপ্সিবল</a>
          <div id="collapse" class="collapse">
            ঢাকা বিশ্ববিদ্যালয় হচ্ছে ঢাকা শহরের শাহবাগে অবস্থিত বাংলাদেশের একটি সরকারী বিশ্ববিদ্যালয়; যা বহু-অনুষদভিত্তিক গবেষণা
            বিশ্ববিদ্যালয় হিসেবে পরিচিত। ১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়। সূচনালগ্নে বিভিন্ন
            প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।
          </div>
	    </div>

   </body>
</html>

ফলাফল




ডিফল্টভাবে, কলাপ্সিবল কন্টেন্ট লুকানো অবস্থায় থাকে। ডিফল্টভাবে কন্টেন্টকে প্রদর্শিত অবস্থায় রাখার জন্য .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">
          <h3>বেসিক কলাপ্সিবলের উদাহরণ</h3>
          <a href="#collapse" class="btn btn-info" data-toggle="collapse">বেসিক কলাপ্সিবল</a>
          <div id="collapse" class="collapse in">
            ঢাকা বিশ্ববিদ্যালয় হচ্ছে ঢাকা শহরের শাহবাগে অবস্থিত বাংলাদেশের একটি সরকারী বিশ্ববিদ্যালয়; যা বহু-অনুষদভিত্তিক গবেষণা
            বিশ্ববিদ্যালয় হিসেবে পরিচিত। ১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়। সূচনালগ্নে বিভিন্ন
            প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।
          </div>
	    </div>

   </body>
</html>

ফলাফল




কলাপ্সিবল প্যানেল

নিচের উদাহরণে কিভাবে কলাপ্সিবল প্যানেল তৈরি করা যায় তা দেখানো হলোঃ

উদাহরণ

<!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>
            <div class="panel-group">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapse">কলাপ্সিবল প্যানেল</a>
                  </h4>
                </div>
                <div id="collapse" class="panel-collapse collapse">
                  <div class="panel-body">প্যানেল বডি</div>
                  <div class="panel-footer">প্যানেল ফুটার</div>
                </div>
              </div>
            </div>
	    </div>

   </body>
</html>

ফলাফল




কলাপ্সিবল লিষ্ট গ্রুপ

নিচের উদাহরণে লিস্ট গ্রুপ সহ একটি কলাপ্সিবল প্যানেল তৈরি করা দেখানো হলোঃ

উদাহরণ

<!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>
            <div class="panel-group">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapse">কলাপ্সিবল লিষ্ট গ্রুপ</a>
                  </h4>
                </div>
                <div id="collapse" class="panel-collapse collapse">
                  <ul class="list-group">
                    <li class="list-group-item">list-group-item</li>
                    <li class="list-group-item">list-group-item</li>
                    <li class="list-group-item">list-group-item</li>
                  </ul>
                  <div class="panel-footer">footer</div>
                </div>
              </div>
            </div>
	    </div>

   </body>
</html>

ফলাফল




একরডিওন

ঢাকা বিশ্ববিদ্যালয় হচ্ছে ঢাকা শহরের শাহবাগে অবস্থিত বাংলাদেশের একটি সরকারী বিশ্ববিদ্যালয়; যা বহু-অনুষদভিত্তিক গবেষণা বিশ্ববিদ্যালয় হিসেবে পরিচিত। ১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়। সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।
ঢাকা বিশ্ববিদ্যালয় হচ্ছে ঢাকা শহরের শাহবাগে অবস্থিত বাংলাদেশের একটি সরকারী বিশ্ববিদ্যালয়; যা বহু-অনুষদভিত্তিক গবেষণা বিশ্ববিদ্যালয় হিসেবে পরিচিত। ১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়। সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।
ঢাকা বিশ্ববিদ্যালয় হচ্ছে ঢাকা শহরের শাহবাগে অবস্থিত বাংলাদেশের একটি সরকারী বিশ্ববিদ্যালয়; যা বহু-অনুষদভিত্তিক গবেষণা বিশ্ববিদ্যালয় হিসেবে পরিচিত। ১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়। সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।

উপরে প্রদর্শিত উদাহরণে প্যানেল কম্পোনেন্টের মাধ্যমে একটি সহজ একরডিওন দেখানো হয়েছে।

নোটঃ কলাপ্সিবল আইটেমটি প্রদর্শিত হওয়ার সাথে সাথে পেরেন্ট এলিমেন্টের অন্য সব কলাপ্সিবল এলিমেন্ট ক্লোজ করে দেওয়ার জন্য data-parent এট্রিবিউট ব্যবহার করতে হবে।

উদাহরণ

<!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>
          <p>নোট: কলাপ্সিবল আইটেম দেখানোর সাথে সাথে পেরেন্ট এলিমেন্টের অন্য সব কলাপ্সিবল এলিমেন্ট ক্লোজ করার জন্য
              <strong>data-parent</strong> এট্রিবিউট ব্যবহার করুনঃ</p>
          <div class="panel-group" id="accordion">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#coll1">একরডিওন ১</a>
                </h4>
              </div>
              <div id="coll1" class="panel-collapse collapse in">
                <div class="panel-body">ঢাকা বিশ্ববিদ্যালয় হচ্ছে ঢাকা শহরের শাহবাগে অবস্থিত বাংলাদেশের একটি সরকারী বিশ্ববিদ্যালয়;
                   যা বহু-অনুষদভিত্তিক গবেষণা বিশ্ববিদ্যালয় হিসেবে পরিচিত। ১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা
                    অনুসরণে এটি স্থাপিত হয়। সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে
                   এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।</div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#coll2">একরডিওন ২</a>
                </h4>
              </div>
              <div id="coll2" class="panel-collapse collapse">
                <div class="panel-body">ঢাকা বিশ্ববিদ্যালয় হচ্ছে ঢাকা শহরের শাহবাগে অবস্থিত বাংলাদেশের একটি সরকারী বিশ্ববিদ্যালয়;
                   যা বহু-অনুষদভিত্তিক গবেষণা বিশ্ববিদ্যালয় হিসেবে পরিচিত। ১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা
                    অনুসরণে এটি স্থাপিত হয়। সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে
                   এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।</div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#coll3">একরডিওন ৩</a>
                </h4>
              </div>
              <div id="coll3" class="panel-collapse collapse">
                <div class="panel-body">ঢাকা বিশ্ববিদ্যালয় হচ্ছে ঢাকা শহরের শাহবাগে অবস্থিত বাংলাদেশের একটি সরকারী বিশ্ববিদ্যালয়;
                   যা বহু-অনুষদভিত্তিক গবেষণা বিশ্ববিদ্যালয় হিসেবে পরিচিত। ১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা
                    অনুসরণে এটি স্থাপিত হয়। সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে
                   এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।</div>
              </div>
            </div>
          </div>
	    </div>

   </body>
</html>

ফলাফল




বুটস্ট্রাপ কলাপ্সের সম্পূর্ণ রেফারেন্স

বুটস্ট্রাপ কলাপ্স অপশন, মেথড এবং ইভেন্টের সম্পূর্ণ রেফারেন্সের জন্য আমাদের বুটস্ট্রাপ JS কলাপ্স রেফারেন্স পেজে ভিজিট করুন।