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

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

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

   </body>
</html>

ফলাফল




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

.dropdown ক্লাসের মাধ্যমে ড্রপডাউন মেনুকে বুঝায়।

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

.caret ক্লাসের দ্বারা একটি ক্যারেট চিহ্ন তৈরি হয় (), যেটি দ্বারা বুঝা যায় যে এটি একটি ড্রপডাউন বাটন।

প্রকৃত ড্রপডাউন মেনু তৈরি করতে <ul> এলিমেন্টে .dropdown-menu ক্লাস যুক্ত করুন।


ড্রপডাউন ডিভাইডার

ড্রপডাউন মেনুর মধ্যে লিংকগুলোকে আলাদা করার জন্য .divider ক্লাস ব্যবহার করা হয়ঃ

উদাহরণ

<!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>
            <li class="divider"></li>
            <li><a href="#">About us</a></li>
          </ul>
        </div>
	    </div>

   </body>
</html>

ফলাফল




ড্রপডাউন হেডার

ড্রপডাউন মেনুর মধ্যে হেডার যুক্ত করার জন্য .dropdown-header ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!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 class="dropdown-header">Computer</li>
            <li><a href="#">C programming</a></li>
            <li><a href="#">C++ programming</a></li>
            <li><a href="#">Java Programming</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Web</li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Javascript</a></li>
          </ul>
        </div>
	    </div>

   </body>
</html>

ফলাফল




ডিসেবল আইটেম

ড্রপডাউন মেনুর কোনো একটি আইটেমকে ডিসেবল করার জন্য .disabled ক্লাস ব্যবহার করুন।



ড্রপডাউনের অবস্থান নির্ধারণ

ড্রপডাউন মেনুকে ডান পাশে নেওয়ার জন্য .dropdown-menu ক্লাসের সাথে .dropdown-menu-right ক্লাস ব্যবহার করুন।



যদি আপনি ড্রপডাউন মেনুকে নিচের দিকে প্রদর্শনের পরিবর্তে উপরের দিকে প্রদর্শন করতে চান, তাহলে <div> এলিমেন্টের মধ্যে "dropdown" ক্লাসের পরিবর্তে "dropup" ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!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="dropup">
          <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>
            <li class="divider"></li>
            <li><a href="#">About us</a></li>
          </ul>
        </div>
	    </div>

   </body>
</html>

ফলাফল




ড্রপডাউন এক্সেসিবিলিটি

যখন ড্রপডাউন মেনু তৈরি করবেন তখন role এবং aria-* এট্রিবিউট ব্যবহার করবেন, এতে স্ক্রিন রিডারদের ব্যবহারে সুবিধা হবেঃ

উদাহরণ

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorial
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" href="#">C programming</a></li>
      <li role="presentation"><a role="menuitem" href="#">C++ programming</a></li>
      <li role="presentation"><a role="menuitem" href="#">Java programming</a></li>
      <li role="presentation" class="divider"></li>
      <li role="presentation"><a role="menuitem" href="#">About us</a></li>
    </ul>
  </div>

একনজরে ড্রপডাউন সংক্রান্ত ক্লাসগুলো দেখে নেইঃ

ক্লাস বর্ণনা
.dropdown একটি ড্রপডাউন মেনুকে নির্দেশ করে।
.dropdown-menu একটি ড্রপডাউন মেনু তৈরী করে।
.dropdown-menu-right ড্রপডাউন মেনুকে ডানে এ্যালাইন করে।
.dropdown-header ড্রপডাউন মেনুর মধ্যে একটি হেডার যুক্ত করে।
.dropup একটি ড্রপআপ মেনুকে নির্দেশ করে।
.disabled ড্রপডাউন মেনুর একটি আইটেমকে ডিজেবল করে রাখার জন্য ব্যবহার করা হয়।
.divider ড্রপডাউন মেনুর আইটেমগুলোকে হরিজন্টাল লাইনের মাধ্যমে আলাদা করার জন্য ব্যবহার করা হয়।