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

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

হোম-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 ড্রপডাউন (dropdown.js)

ড্রপডাউন মেনু হলো টোগল মেনু, যা ইউজারকে পূর্বনির্ধারিত তালিকা থেকে একটি ভ্যালু বাছাই করার সুযোগ দেয়।

ড্রপডাউনের টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ ড্রপডাউন টিউটোরিয়ালটি পড়ুন।


data-* এট্রিবিউট মাধ্যম

ড্রপডাউন মেনুকে টোগল করার জন্য বাটন অথবা লিংকে data-toggle="dropdown" এট্রিবিউটটি যুক্ত করুন।

উদাহরণ

<!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>ড্রপডাউন মেনুকে টোগল করার জন্য বাটন অথবা লিংকে data-toggle="dropdown" যুক্ত করুন।</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>
	    </div>

   </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>
        <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();
      });
      </script>

   </body>
</html>

ফলাফল




ড্রপডাউন মেথড

নিচের টেবিলে ড্রপডাউন মেথডগুলো দেয়া হলো।

মেথড বিবরণ উদাহরণ
.dropdown("toggle") ড্রপডাউনকে টোগল করে। উদাহরণ দেখুন

ড্রপডাউন ইভেন্ট

নিচের টেবিলে ড্রপডাউন ইভেন্টগুলো দেয়া হলো।

ইভেন্ট বিবরণ চেষ্টা করি
show.bs.dropdown যখন ড্রপডাউন প্রদর্শন শুরু হয় তখন ঘটে। উদাহরণ দেখুন
shown.bs.dropdown যখন ড্রপডাউন পুরোপুরি প্রদর্শিত হয় তখন ঘটে। (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর) উদাহরণ দেখুন
hide.bs.dropdown যখন ড্রপডাউন লুক্কায়িত হওয়া শুরু করে তখন ঘটে। উদাহরণ দেখুন
hidden.bs.dropdown যখন ড্রপডাউন পুরোপুরি লুক্কায়িত হয় তখন ঘটে। (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর) উদাহরণ দেখুন


আরো কিছু উদাহরণ

ক্লিকে ক্যারেট আইকন পরিবর্তন

নিচের উদাহরণে দেখানো হয়েছে কিভাবে ড্রপডাউনে ক্লিক করা হলে ক্যারেট আইকনটি নিচের দিক থকে ওলট হয়ে উপরের দিকে চলে যায়ঃ

উদাহরণ

<!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>
      <style>
        .caret.caret-up {
           border-top-width: 0;
           border-bottom: 4px solid #fff;
        }
      </style>
   </head>

   <body>

	    <div class="container">
          <h2>ড্রপডাউন এর “caret” সিম্বলটি পরিবর্তন করুন।</h2>
          <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>
	    </div>
      <script>
      $(document).ready(function(){
        $(".dropdown").on("hide.bs.dropdown", function(){
          $(".btn").html('Tutorial <span class="caret"></span>');
        });
        $(".dropdown").on("show.bs.dropdown", function(){
          $(".btn").html('Tutorial <span class="caret"></span>');
        });
      });
      </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>
      <style>
        .caret.caret-up {
           border-top-width: 0;
           border-bottom: 4px solid #fff;
        }
      </style>
   </head>

   <body>

	    <nav class="navbar navbar-inverse">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand" href="#">WebsiteLoge</a>
            </div>
            <div>
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Service</a></li>
                <li><a href="#">Contract</a></li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Log in 
                   <span class="glyphicon glyphicon-log-in"></span></a>
                  <div class="dropdown-menu">
                    <form id="formLogin" class="form container-fluid">
                      <div class="form-group">
                        <label>User Name:</label>
                        <input type="text" class="form-control">
                      </div>
                      <div class="form-group">
                        <label>Password:</label>
                        <input type="password" class="form-control">
                      </div>
                      <button type="button" id="btnLogin" class="btn btn-block">log in</button>
                    </form>
                    <div class="container-fluid">
                      <br>
                      <a class="small" href="#">Forgot Password?</a>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </nav>
          
        <div class="container">
          <h3>ড্রপডাউন এর সাথে ন্যাভবার এর মধ্যে ড্রপডাউন এর ব্যবহার</h3>
          <p>ন্যাভিগেসন বারে “log in” ফর্ম সহ একটি ড্রপডাউন যুক্ত করা হয়েছে।</p>
        </div>

   </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">
          <h2>মাল্টি-লেভেল ড্রপডাউন</h2>
          <p>এই উদাহরণে, আমরা মাল্টি-লেভেল ড্র্পডাউন অপেন করার জন্য জেকুয়েরি ব্যবহার করেছি (নিচের স্ক্রিপ্ট সেকশন এ দেখুন)।</p>
          <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
            <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a tabindex="-1" href="#">Dropdown-1 item</a></li>
              <li><a tabindex="-1" href="#">Dropdown-1 item</a></li>
              <li>
                <a class="test" tabindex="-1" href="#">New Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a tabindex="-1" href="#">Dropdown-2 item</a></li>
                  <li><a tabindex="-1" href="#">Dropdown-3 item</a></li>
                  <li>
                    <a class="test" href="#">New Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Dropdown-3 item</a></li>
                      <li><a href="#">Dropdown-3 item</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <script>
          $(document).ready(function(){
            $('.dropdown a.test').on("click", function(e){
              $(this).next('ul').toggle();
              e.stopPropagation();
              e.preventDefault();
            });
          });
          </script>

   </body>
</html>

ফলাফল