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

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

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

 

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


বাটন স্টাইল

বুটস্ট্রাপে সাত ধরনের বাটন স্টাইল রয়েছে।

বাটন স্টাইল করার জন্য নিচের বুটস্ট্রাপ ক্লাসগুলো ব্যবহার করা হয়ঃ

  1. .btn-default
  2. .btn-primary
  3. .btn-success
  4. .btn-info
  5. .btn-warning
  6. .btn-danger
  7. .btn-link

নিচের উদাহরনে বিভিন্ন বাটন স্টাইলের কোড দেখানো হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Button 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>
			<button type="button" class="btn btn-default">Deafult</button>
			<button type="button" class="btn btn-primary">Primary</button>
			<button type="button" class="btn btn-success">Success</button>
			<button type="button" class="btn btn-info">Info</button>
			<button type="button" class="btn btn-warning">Warning</button>
			<button type="button" class="btn btn-danger">Danger</button>
			<button type="button" class="btn btn-link">Link</button>
		</div>

  </body>
</html>

ফলাফল




<a>, <button>, অথবা <input> এলিমেন্টে বাটন ক্লাসগুলো ব্যবহার করা যায়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Button 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>
			<a href="#" class="btn btn-info" role="button">লিংক বাটন</a>
			<button type="button" class="btn btn-success">বাটন</button>
			<input type="button" class="btn btn-danger" value="ইনপুট বাটন">
			<input type="submit" class="btn btn-warning" value="সাবমিট বাটন">
		</div>

  </body>
</html>

ফলাফল




বাটনের আকার

বুটস্ট্রাপে চার আকারের বাটন রয়েছে। নিচের উদাহরণে বিভিন্ন আকারের বাটন দেখানো হলোঃ

নিচের ক্লাসগুলো দ্বারা ভিন্ন ভিন্ন আকারের বাটন বুঝায়ঃ

  1. .btn-lg
  2. .btn-md
  3. .btn-sm
  4. .btn-xs

নিচের উদাহরনে বিভিন্ন আকারের বাটনের কোড দেখানো হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Button 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>
			<button type="button" class="btn btn-info btn-lg">বড় বাটন</button>
			<button type="button" class="btn btn-primary btn-md">মিডিয়াম বাটন</button>
			<button type="button" class="btn btn-success btn-sm">ছোট বাটন</button>
			<button type="button" class="btn btn-warning btn-xs">অতি ছোট বাটন</button>
		</div>

  </body>
</html>

ফলাফল




ব্লক লেভেল বাটন

ব্লক লেভেল বাটন প্যারেন্ট এলিমেন্টের সমগ্র অংশ জুড়ে থাকে।

ব্লক লেভেল বাটন তৈরি করার জন্য .btn ক্লাসের সাথে .btn-block ক্লাস ব্যবহার করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Button 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>
			<button type="button" class="btn btn-primary btn-block">Primary</button>
			<button type="button" class="btn btn-default btn-block">Default</button>

			<h2>বড় আকারের ব্লক লেভেল বাটন</h2>
			<button type="button" class="btn btn-primary btn-lg btn-block">Primary</button>
			<button type="button" class="btn btn-default btn-lg btn-block">Default</button>

			<h2>ছোট আকারের ব্লক লেভেল বাটন</h2>
			<button type="button" class="btn btn-primary btn-sm btn-block">Primary</button>
			<button type="button" class="btn btn-default btn-sm btn-block">Default</button>
		</div>

  </body>
</html>

ফলাফল




সক্রিয়/নিষ্ক্রিয় বাটন

বাটনকে সক্রিয় বা নিষ্ক্রিয় ভাবে সেট করা যায়। এখানে নিষ্ক্রিয় বলতে বুঝানো হয়েছে যেই বাটনে ক্লিক করা যায় না।

.active ক্লাস ব্যবহার করে বাটনকে সক্রিয় ভাবে সেট করা হয় এবং .disabled ক্লাস ব্যবহার করে নিষ্ক্রিয় ভাবে বাটন সেট করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Button 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>
			<button type="button" class="btn btn-primary">প্রাইমারি বাটন</button>
			<button type="button" class="btn btn-info active">সক্রিয় বাটন</button>
			<button type="button" class="btn btn-warning disabled">নিষ্ক্রিয় বাটন</button>
		</div>

  </body>
</html>

ফলাফল




একনজরে বাটন সংক্রান্ত ক্লাসগুলো দেখে নেইঃ

নিচের ক্লাসগুলো যেকোন <a>, <button>, অথবা <input> এলিমেন্টে ব্যবহার করা যায়ঃ

ক্লাস বর্ণনা
.btn যেকোন বাটনে বেসিক স্টাইল যুক্ত করে।
.btn-default ডিফল্ট/স্ট্যান্ডার্ড বাটন তৈরি করে।
.btn-primary প্রাইমারি একশন নির্দেশ করে।
.btn-success একটি সফল বা হ্যাঁ-বোধক কাজকে নির্দেশ করে।
.btn-info তথ্য সরবরাহকৃত ম্যাসেজ দেখানোর জন্য ব্যবহার করা হয়।
.btn-warning বিপদজনক কিছু হতে পারে, এরকম বুঝায়।
.btn-danger বিপদজনক অথবা না-বোধক কিছু বুঝায়।
.btn-link একটি বাটনকে লিঙ্কের মত দেখাবে (কিন্তু আচরন বাটনের মতই হবে)।
.btn-lg বড় আকৃতির বাটন তৈরি করার জন্য ব্যবহার করা হয়।
.btn-sm ছোট আকৃতির বাটন তৈরি করার জন্য ব্যবহার করা হয়।
.btn-xs অতিরিক্ত ছোট আকারের বাটন তৈরি করার জন্য ব্যবহার করা হয়।
.btn-block একটি ব্লক-লেবেল বাটন তৈরি করে (প্যারেন্ট এলিমেন্টের সম্পূর্ন প্রস্থ নিয়ে নেয়)।
.active বাটনটি প্রেস করা অবস্থায় রয়েছে দেখাবে।
.disabled বাটনকে ডিজেবল করে রাখবে।