বুটস্ট্রাপ বাটন - Bootstrap Button
বুটস্ট্রাপ বাটন স্টাইল
বুটস্ট্রাপে সাত ধরনের বাটন স্টাইল রয়েছে।
বুটস্ট্রাপ বাটন স্টাইল করার জন্য নিচের বুটস্ট্রাপ ক্লাসগুলো ব্যবহার করা হয়ঃ
.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.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>
ফলাফল
বাটনের আকার
বুটস্ট্রাপে চার আকারের বাটন রয়েছে। নিচের উদাহরণে বিভিন্ন আকারের বাটন দেখানো হলোঃ
নিচের ক্লাসগুলো দ্বারা ভিন্ন ভিন্ন আকারের বাটন বুঝায়ঃ
.btn-lg.btn-md.btn-sm.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 |
বাটনকে ডিজেবল করে রাখবে। |