বুটস্ট্রাপ বাটন গ্রুপ - Bootstrap Button Group
বুটস্ট্রাপ বাটন গ্রুপ
বুটস্ট্রাপ বাটন গ্রুপ: বুটস্ট্রাপে একাধিক বাটনকে একটি বাটন গ্রুপে(এক লাইনে) একত্রে করে রাখা যায়।
বুটস্ট্রাপ বাটন গ্রুপ তৈরি করার জন্য <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>
ফলাফল
পরামর্শঃ কোন একটি গ্রুপের বাটনগুলোর আকার আলাদা আলাদা সেট করার চেয়ে গ্রুপের সকল বাটনের আকার একত্রে সেট করার জন্য .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>
ফলাফল
ভার্টিক্যাল বাটন গ্রুপ
বুটস্ট্রাপের মাধ্যমে ভার্টিক্যাল বাটন গ্রুপও তৈরি করা যায়।
ভার্টিক্যাল বাটন গ্রুপ তৈরি করার জন্য .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>
ফলাফল
জাস্টিফাইড বাটন গ্রুপ
প্যারেন্ট এলিমেন্টের সম্পূর্ণ প্রস্থ জুড়ে বাটন গ্রুপ তৈরি করার জন্য় .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>
ফলাফল
নোটঃ<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>
ফলাফল
বাটন গ্রুপ এবং ড্রপডাউন মেনুর একত্র ব্যবহার
ড্রপডাউন মেনু তৈরি করার জন্য নেস্টেড বাটন গ্রুপ নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!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>
ফলাফল
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>
ফলাফল