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

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

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

 

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


বাটন গ্রুপ

বুটস্ট্রাপে একাধিক বাটনকে একটি বাটন গ্রুপে(এক লাইনে) একত্রে করে রাখা যায়।

বাটন গ্রুপ তৈরি করার জন্য <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>

ফলাফল