বুটস্ট্রাপ জেএস বাটন রেফারেন্স | bootstrap JS Button Reference
বুটস্ট্রাপ জেএস বাটন (button.js)
যদি আপনি বাটনের উপর আরো অধিক কন্ট্রোল পেতে চান তাহলে প্লাগ-ইন ব্যবহার করুন।
বাটন টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ বাটন টিউটোরিয়ালটি পড়ুন।
বুটস্ট্রাপ বাটন প্লাগ-ইন ক্লাসসমূহ
নিচের ক্লাসগুলো যেকোন <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 |
বাটনকে disable করে দিবে। |
বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম
ম্যানুয়েললি যুক্ত করার জন্যঃ
$('.btn').button();
বুটস্ট্রাপ বাটন মেথড
নিচের টেবিলের মধ্যে বাটন মেথডগুলো দেখানো হলোঃ
নোট: এই প্লাগ-ইনের ক্ষেত্রে মেথড data এট্রিবিউটের মাধ্যমে অতিক্রম করতে পারে।
| মেথড | বিবরণ | উদাহরণ |
|---|---|---|
.button("toggle") |
বাটনটি চাপ দেয়া আছে এমন দেখায়। | উদাহরণ দেখুন |
.button("loading") |
বাটনকে অক্ষম করে দেয় এবং বাটনের টেক্সটকে loading.. এ রুপান্তর করে। | উদাহরণ দেখুন |
.button("reset") |
বাটনের টেক্সটকে মূল টেক্সটে রুপান্তর করে(যদি পরিবর্তিত হয়) | উদাহরণ দেখুন |
.button("string") |
নতুন বাটন টেক্সট নির্দিষ্ট করে। | উদাহরণ দেখুন |
বাটন সংক্রান্ত আরো কিছু উদাহরণ
বাটনকে কাস্টমাইজ করতে সিএসএস ব্যবহার করুন।
কিভাবে রাউন্ড বর্ডার বাদ দিবেনঃ
উদাহরণ
<!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>
<style>
.btn-default {
border-radius: 0;
}
</style>
</head>
<body>
<div class="container">
<h2>কাস্টমাইজ বাটন</h2>
<p>বাটনের গোলাকার বর্ডার কিভাবে বাদ দিবেনঃ</p>
<button type="button" class="btn btn-success">গোলাকার কর্ণার বাটন</button>
<button type="button" class="btn btn-default">কোনাকুনি কর্ণার বাটন</button>
</div>
</body>
</html>
ফলাফল
কিভাবে বাটনে বিশেষ কালার যুক্ত করা যায়ঃ
উদাহরণ
<!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>
<style>
.btn-default {
background: purple;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
}
</style>
</head>
<body>
<div class="container">
<h2>কাস্টমাইজ বাটন</h2>
<p>Purple কালারের বাটনঃ</p>
<button type="button" class="btn btn-default">বাটন</button>
</div>
</body>
</html>
ফলাফল
কিভাবে বাটনে স্যাডো যুক্ত কয়া যায়ঃ
কিভাবে বাটনে বিশেষ কালার যুক্ত করা যায়ঃ
উদাহরণ
<!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>
<style>
.btn-default {
box-shadow: 1px 2px 5px #000000;
}
</style>
</head>
<body>
<div class="container">
<h2>কাস্টমাইজ বাটন</h2>
<p>বাটনে স্যাডো ইফেক্ট যুক্ত করা হলোঃ</p>
<button type="button" class="btn btn-default">বাটন</button>
</div>
</body>
</html>
ফলাফল