কম্পিউটার টিউটোরিয়াল

Bootstrap Split Button Dropdowns: মূল অ্যাকশন সহ ড্রপডাউন


Split button dropdowns সাধারণ ড্রপডাউন বাটনের মতোই কিন্তু এতে একটি প্রাথমিক অ্যাকশন (primary action) থাকে বাম পাশে এবং ডান পাশে একটি টগল বাটন থাকে যা ড্রপডাউন মেনু খুলে।

উদাহরণ

নিচের কোডে দুটি স্প্লিট বাটন ড্রপডাউন দেখানো হয়েছে:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Example</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="btn-group">
      <button type="button" class="btn btn-default">ভর্তি</button>
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">মাস্টারস</a></li>
        <li><a href="#">ব্যাচেলরস</a></li>
      </ul>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-primary">ফ্যাকাল্টি</button>
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">ম্যানেজমেন্ট</a></li>
        <li><a href="#">টেকনিক্যাল</a></li>
        <li><a href="#">স্টাফ</a></li>
      </ul>
    </div>
  </body>
</html>

ব্যাখ্যা: বাম বাটনটি সরাসরি অ্যাকশন করে, ডান বাটনটি ক্লিক করলে ড্রপডাউন মেনু খোলে।

  1. Bootstrap-এ ড্রপডাউন মেনু তৈরি করা

  2. Bootstrap বাটন

  3. CSS দিয়ে স্প্লিট বাটন ড্রপডাউন তৈরি

  4. বুটস্ট্রাপ হেল্পার ক্লাসগুলো