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

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

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

 


উদাহরণঃ toggle মেথডের ব্যবহার

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Dropdown 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>
            <p>ড্রপডাউনকে টোগল করার জন্য <strong>toggle</strong> মেথডটি ব্যবহার করা হয়।</p>
            <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Tutorial
            <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">C programming </a></li>
                <li><a href="#">C++ programming</a></li>
                <li><a href="#">Java Programming</a></li>
            </ul>
            </div>
            <p><strong>নোটঃ</strong> যদি কিনা আপনি dropdown() মেথড কল করেন, তাহলে অবশ্যই data-toggle="dropdown"
                   এট্রিবিউটটি ব্যবহার করতে হবে।</p>
        </div>
        <script>
        $(document).ready(function(){
            $(".dropdown-toggle").dropdown("toggle");
        });
        </script>

   </body>
</html>

ফলাফল






উদাহরণঃ ড্রপডাউন ইভেন্টের ব্যবহার

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Dropdown 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>
            <p>যখন ড্রপডাউন প্রদর্শন শুরু হয় তখন <strong>show.bs.dropdown</strong> ইভেন্টি কাজ করে।</p>
            <p>যখন ড্রপডাউন পুরোপুরি প্রদর্শিত হয় তখন <strong>shown.bs.dropdown</strong> ইভেন্টি কাজ করে।</p>
            <p>যখন ড্রপডাউন লুক্কায়িত হওয়া শুরু করে তখন <strong>hide.bs.dropdown</strong> ইভেন্টি কাজ করে।</p>
            <p>যখন ড্রপডাউন পুরোপুরি লুক্কায়িত হয় তখন <strong>hidden.bs.dropdown</strong> ইভেন্টি কাজ করে।
            (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর)</p>
            <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Tutorial
            <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">C programming </a></li>
                <li><a href="#">C++ programming</a></li>
                <li><a href="#">Java Programming</a></li>
            </ul>
            </div>
            <p><strong>নোটঃ</strong> ড্রপডাউন এর ক্ষেত্রে toggle method ব্যবহার করা ঠিক হবে না কারণ এটি সকল ব্রাউজারে সাপোর্ট 
                নাও করতে পারে। তাই ড্রপডাউন এর জন্য সবসময় data-toggle="dropdown" এট্রিবিউটটি ব্যবহার করা উচিত।</p>
	    </div>
        <script>
            $(document).ready(function(){
                $('.dropdown').on('show.bs.dropdown', function(){
                    alert('The dropdown is about to be shown.');
                });
                $('.dropdown').on('shown.bs.dropdown', function(){
                    alert('The dropdown is now fully shown.');
                });
                $('.dropdown').on('hide.bs.dropdown', function(e){
                    alert('The dropdown is about to be hidden.');
                });
                $('.dropdown').on('hidden.bs.dropdown', function(){
                    alert('The dropdown is now fully hidden.');
                });
            });
            </script>

   </body>
</html>

ফলাফল