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

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

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

 


উদাহরণঃ .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-info" data-toggle="collapse" data-target="#collapse">সাধারণ কলাপ্স</button>
            <div id="collapse" class="collapse">
                <h2>স্যাট একাডেমী,</h2>
                দেশের বৃহত্তম কম্পিউটার প্রোগ্রামিং শেখার একমাত্র বৃহত্তম প্রতিষ্ঠান স্যাট একাডেমী।<br>
                এখানে সম্পূর্ণ বিনামূল্যে কম্পিউটার প্রোগ্রামিং এর উপর প্রশিক্ষণ দেয়া হয়।
            </div>
	    </div>

   </body>
</html>

ফলাফল






উদাহরণঃ .collapse .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 in">
                <h2>স্যাট একাডেমী,</h2>
                দেশের বৃহত্তম কম্পিউটার প্রোগ্রামিং শেখার একমাত্র বৃহত্তম প্রতিষ্ঠান স্যাট একাডেমী।<br>
                এখানে সম্পূর্ণ বিনামূল্যে কম্পিউটার প্রোগ্রামিং এর উপর প্রশিক্ষণ দেয়া হয়।
            </div>
	    </div>

   </body>
</html>

ফলাফল






উদাহরণঃ .collapsing ক্লাসের ব্যবহার

<!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>
      <style>
        .collapsing {
            background-color: green;
            color: red;
        }
      </style>

   </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>

ফলাফল






উদাহরণঃ কলাপ্স মেথডের ব্যবহার

<!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>Toggle মেথড দ্বারা কলাপ্স কন্টেন্ট গুলোকে টোগল করা হয়।</p>
            <p>show মেথড দ্বারা কলাপ্স কন্টেন্ট গুলোকে প্রদর্শন করা হয়।</p>
            <p>hide মেথড দ্বারা কলাপ্স কন্টেন্ট গুলোকে হাইড করা হয়।</p>
            <button type="button" class="btn btn-primary">Toggle</button>
            <button type="button" class="btn btn-success">Show</button>
            <button type="button" class="btn btn-warning">Hide</button>
                
            <div class="collapse">
                <h2>স্যাট একাডেমী,</h2>
                দেশের বৃহত্তম কম্পিউটার প্রোগ্রামিং শেখার একমাত্র বৃহত্তম প্রতিষ্ঠান স্যাট একাডেমী।<br>
                এখানে সম্পূর্ণ বিনামূল্যে কম্পিউটার প্রোগ্রামিং এর উপর প্রশিক্ষণ দেয়া হয়।
            </div>
        </div>

        <script>
        $(document).ready(function(){
            $(".btn-primary").click(function(){
                $(".collapse").collapse('toggle');
            });
            $(".btn-success").click(function(){
                $(".collapse").collapse('show');
            });
            $(".btn-warning").click(function(){
                $(".collapse").collapse('hide');
            });
        });
        </script>

   </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>
            <p>Toggle মেথড দ্বারা কলাপ্স কন্টেন্ট গুলোকে টোগল করা হয়।</p>
            <p>show মেথড দ্বারা কলাপ্স কন্টেন্ট গুলোকে প্রদর্শন করা হয়।</p>
            <p>hide মেথড দ্বারা কলাপ্স কন্টেন্ট গুলোকে হাইড করা হয়।</p>
            <button type="button" class="btn btn-primary">Toggle</button>
            <button type="button" class="btn btn-success">Show</button>
            <button type="button" class="btn btn-warning">Hide</button>
                
            <div class="collapse">
                <h2>স্যাট একাডেমী,</h2>
                দেশের বৃহত্তম কম্পিউটার প্রোগ্রামিং শেখার একমাত্র বৃহত্তম প্রতিষ্ঠান স্যাট একাডেমী।<br>
                এখানে সম্পূর্ণ বিনামূল্যে কম্পিউটার প্রোগ্রামিং এর উপর প্রশিক্ষণ দেয়া হয়।
            </div>
        </div>

        <script>
        $(document).ready(function(){
            $(".btn-primary").click(function(){
                $(".collapse").collapse('toggle');
            });
            $(".btn-success").click(function(){
                $(".collapse").collapse('show');
            });
            $(".btn-warning").click(function(){
                $(".collapse").collapse('hide');
            });
        });
        </script>

   </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>
        <p>Toggle মেথড দ্বারা কলাপ্স কন্টেন্ট গুলোকে টোগল করা হয়।</p>
        <p>show মেথড দ্বারা কলাপ্স কন্টেন্ট গুলোকে প্রদর্শন করা হয়।</p>
        <p>hide মেথড দ্বারা কলাপ্স কন্টেন্ট গুলোকে হাইড করা হয়।</p>
        <button type="button" class="btn btn-primary">Toggle</button>
        <button type="button" class="btn btn-success">Show</button>
        <button type="button" class="btn btn-warning">Hide</button>
            
        <div class="collapse">
            <h2>স্যাট একাডেমী,</h2>
            দেশের বৃহত্তম কম্পিউটার প্রোগ্রামিং শেখার একমাত্র বৃহত্তম প্রতিষ্ঠান স্যাট একাডেমী।<br>
            এখানে সম্পূর্ণ বিনামূল্যে কম্পিউটার প্রোগ্রামিং এর উপর প্রশিক্ষণ দেয়া হয়।
        </div>
        </div>

        <script>
            $(document).ready(function(){
                $(".btn-primary").click(function(){
                    $(".collapse").collapse('toggle');
                });
                $(".btn-success").click(function(){
                    $(".collapse").collapse('show');
                });
                $(".btn-warning").click(function(){
                    $(".collapse").collapse('hide');
                });
                $(".collapse").on('show.bs.collapse', function(){
                    alert('The collapsible content is about to be shown.');
                });
                $(".collapse").on('shown.bs.collapse', function(){
                    alert('The collapsible content is now fully shown.');
                });
                $(".collapse").on('hide.bs.collapse', function(){
                    alert('The collapsible content is about to be hidden.');
                });
                $(".collapse").on('hidden.bs.collapse', function(){
                    alert('The collapsible content is now hidden.');
                });
            });
        </script>

   </body>
</html>

ফলাফল