Header Ads

Bootstrap Button Group বুটস্ট্রাপ বাটন গ্রুপ

October 26, 2019 0

বুটস্ট্রাপ বাটন গ্রুপ

Related image

বাটন গ্রুপ

বুটস্ট্রাপে একাধিক বাটনকে একটি বাটন গ্রুপে(এক লাইনে) একত্রে করে রাখা যায়।
বাটন গ্রুপ তৈরি করার জন্য <div> এলিমেন্টের সাথে .btn-group ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Button Group 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>
   <div class="btn-group">
    <button type="button" class="btn btn-success">Samsung</button>
    <button type="button" class="btn btn-success">Nokia</button>
    <button type="button" class="btn btn-success">Blackberry</button>
   </div>
  </div>

  </body>
</html>




Copy

ফলাফল
পরামর্শঃ কোন একটি গ্রুপের বাটনগুলোর আকার আলাদা আলাদা সেট করার চেয়ে গ্রুপের সকল বাটনের আকার একত্রে সেট করার জন্য .btn-group-* ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Button Group 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>
   <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-success">Samsung</button>
    <button type="button" class="btn btn-success">Nokia</button>
    <button type="button" class="btn btn-success">Blackberry</button>
   </div>
  </div>

  </body>
</html>




Copy

ফলাফল

ভার্টিক্যাল বাটন গ্রুপ

বুটস্ট্রাপের মাধ্যমে ভার্টিক্যাল বাটন গ্রুপও তৈরি করা যায়।
ভার্টিক্যাল বাটন গ্রুপ তৈরি করার জন্য .btn-group-vertical ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Button Group 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>
   <div class="btn-group-vertical">
    <button type="button" class="btn btn-success">Samsung</button>
    <button type="button" class="btn btn-success">Nokia</button>
    <button type="button" class="btn btn-success">Blackberry</button>
   </div>
  </div>

  </body>
</html>




Copy

ফলাফল

জাস্টিফাইড বাটন গ্রুপ

প্যারেন্ট এলিমেন্টের সম্পূর্ণ প্রস্থ জুড়ে বাটন গ্রুপ তৈরি করার জন্য় .btn-group-justified ক্লাস ব্যবহার করুন।
কিভাবে <a> এলিমেন্টের মাধ্যমেও বাটন গ্রুপ তৈরি যায় তা নিচের উদাহরণে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Button Group 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>
    <div class="btn-group btn-group-justified">
     <a href="#" class="btn btn-info">Samsung</a>
     <a href="#" class="btn btn-info">Nokia</a>
     <a href="#" class="btn btn-info">Blackberry</a>
    </div>
  </div>

  </body>
</html>




Copy

ফলাফল
নোটঃ<button> এলিমেন্টর ক্ষেত্রে অবশ্যই প্রত্যেকটি বাটনকে .btn-group ক্লাসের আওতায় রাখতে হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Button Group 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>
    <div class="btn-group btn-group-justified">
     <div class="btn-group">
      <button type="button" class="btn btn-warning">Walton</button>
     </div>
     <div class="btn-group">
      <button type="button" class="btn btn-warning">Symphony</button>
     </div>
     <div class="btn-group">
      <button type="button" class="btn btn-warning">Samsung</button>
     </div>
    </div>
  </div>

  </body>
</html>




Copy

ফলাফল

বাটন গ্রুপ এবং ড্রপডাউন মেনুর একত্র ব্যবহার

ড্রপডাউন মেনু তৈরি করার জন্য নেস্টেড বাটন গ্রুপ নিচের উদাহরণে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Button Group 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="btn-group">
    <button type="button" class="btn btn-success">Samsung</button>
    <button type="button" class="btn btn-success">Nokia</button>
       <div class="btn-group">
        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
        Blackberry <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
         <li><a href="#">Blackberry 1</a></li>
         <li><a href="#">Blackberry 2</a></li>
         </ul>
       </div>
   </div>
  </div>

  </body>
</html>




Copy

ফলাফল

Split ড্রপডাউন বাটন

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Button Group 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>
   <div class="btn-group">
    <button type="button" class="btn btn-info">Samsung</button>
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
     <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
     <li><a href="#">Television</a></li>
     <li><a href="#">Air Condition</a></li>
    </ul>
   </div>
  </div>

  </body>
</html>




Copy

ফলাফল

Tags:

No comments

Subscribe to: Post Comments ( Atom )
Powered by Blogger.