বুটস্ট্রাপ বাটন উদাহরণ - Bootstrap Button Example
উদাহরণঃ toggle মেথডের ব্যবহার
<!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>
<p>টোগলেবল বাটন তৈরি করার জন্য <strong>toggle</strong> মেথডটি ব্যবহার করা হয়।
যেখানে বাটনটি চাপ দেয়া আছে এমন দেখায়।</p>
<button type="button" class="btn btn-default">Toggle Button</button>
<button type="button" class="btn btn-default">No Toggle Button</button>
</div>
<script>
$(document).ready(function(){
$(".btn-default:first").click(function(){
$(this).button('toggle');
});
});
</script>
</body>
</html>
ফলাফল
উদাহরণঃ loading মেথডের ব্যবহার
<!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>
<p><strong>loading</strong> মেথড বাটনকে অক্ষম করে দেয় এবং বাটনের টেক্সটকে loading.. এ রুপান্তর করে</p>
<button type="button" class="btn btn-default">বাটন উদাহরণ</button>
</div>
<script>
$(document).ready(function(){
$(".btn").click(function(){
$(this).button('loading');
});
});
</script>
</body>
</html>
ফলাফল
উদাহরণঃ reset মেথডের ব্যবহার
<!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>
<p><strong>reset </strong> মেথড দ্বারা বাটনের টেক্সটকে মূল টেক্সটে রুপান্তরিত করে(যদি পরিবর্তিত হয়)</p>
<button type="button" class="btn btn-default">বাটন </button>
</div>
<script>
$(document).ready(function(){
$(".btn").click(function(){
$(this).button("loading").delay(500).queue(function(){
$(this).button("reset");
$(this).dequeue();
});
});
});
</script>
</body>
</html>
ফলাফল
উদাহরণঃ 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>
</head>
<body>
<div class="container">
<h2>বাটন মেথড</h2>
<p>বাটন এর ভেতরের টেক্সটকে পরিবর্তন করার জন্য <strong>string</strong> মেথডটি ব্যবহার করা হয়।</p>
<p><strong>নোটঃ</strong> এই উদাহরনটি কাজ করার জন্য বাটন টেক্সট এর সাথে আপনাকে অবশ্যই
<strong>data-STRING-text</strong> এট্রিবিউটটি ব্যবহার করতে হবে।</p>
<button type="button" class="btn btn-default" data-somestringvalue-text="লোডিং শেষ" autocomplete="off">বাটন
</button>
</div>
<script>
$(document).ready(function(){
$(".btn").click(function(){
$(this).button('loading').delay(1000).queue(function(){
$(this).button('somestringvalue');
$(this).dequeue();
});
});
});
</script>
</body>
</html>
ফলাফল
