বুটস্ট্র্যাপ বাটন
🌈বুটস্ট্র্যাপ বাটন কি?
📋বুটস্ট্র্যাপ বাটন হলো বাটন তৈরি ও স্টাইল করার পদ্ধতি।
⚒️বুটস্ট্র্যাপ বাটন বাটন তৈরি ও স্টাইল করতে ব্যবহৃত হয়।
বুটস্ট্র্যাপ বাটন সমূহ
বুটস্ট্র্যাপ বাটন এবং সেগুলোর ব্যবহারের তালিকা
- ➡️ btn - btn ক্লাস নির্দিষ্ট করা
- ➡️ btn-primary - বাটনের ব্যাকগ্রাউন্ড primary সেট করা
- ➡️ btn-secondary - বাটনের ব্যাকগ্রাউন্ড secondary সেট করা
- ➡️ btn-success - বাটনের ব্যাকগ্রাউন্ড success সেট করা
- ➡️ btn-info - বাটনের ব্যাকগ্রাউন্ড info সেট করা
- ➡️ btn-warning - বাটনের ব্যাকগ্রাউন্ড warning সেট করা
- ➡️ btn-danger - বাটনের ব্যাকগ্রাউন্ড danger সেট করা
- ➡️ btn-dark - বাটনের ব্যাকগ্রাউন্ড dark সেট করা
- ➡️ btn-light - বাটনের ব্যাকগ্রাউন্ড light সেট করা
- ➡️ btn-link - বাটন লিংক আকারে প্রদর্শন করা
btn - btn ক্লাস নির্দিষ্ট করার উদাহরণ।
bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<button type="button" class="btn">ক্লিক করুন</button>
</body>
</html>btn-primary - বাটনের ব্যাকগ্রাউন্ড primary সেট করার উদাহরণ।
bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary">ক্লিক করুন</button>
</body>
</html>btn-secondary - বাটনের ব্যাকগ্রাউন্ড secondary সেট করার উদাহরণ।
bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-secondary">ক্লিক করুন</button>
</body>
</html>btn-success - বাটনের ব্যাকগ্রাউন্ড success সেট করার উদাহরণ।
bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-success">ক্লিক করুন</button>
</body>
</html>btn-info - বাটনের ব্যাকগ্রাউন্ড info সেট করার উদাহরণ।
bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-info">ক্লিক করুন</button>
</body>
</html>btn-warning - বাটনের ব্যাকগ্রাউন্ড warning সেট করার উদাহরণ।
bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-warning">ক্লিক করুন</button>
</body>
</html>btn-danger - বাটনের ব্যাকগ্রাউন্ড danger সেট করার উদাহরণ।
bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-danger">ক্লিক করুন</button>
</body>
</html>btn-dark - বাটনের ব্যাকগ্রাউন্ড dark সেট করার উদাহরণ।
bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-dark">ক্লিক করুন</button>
</body>
</html>btn-light - বাটনের ব্যাকগ্রাউন্ড light সেট করার উদাহরণ।
bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-light">ক্লিক করুন</button>
</body>
</html>btn-link - বাটন লিংক আকারে প্রদর্শন করার উদাহরণ।
bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-link">ক্লিক করুন</button>
</body>
</html>বুটস্ট্র্যাপ বাটন সম্পর্কিত বিস্তারিত তথ্য
কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক
| নাম | বিবরণ |
|---|---|
| btn | btn ক্লাস নির্দিষ্ট করতে ব্যবহৃত হয়। |
| btn-primary | বাটনের ব্যাকগ্রাউন্ড primary সেট করতে ব্যবহৃত হয়। |
| btn-secondary | বাটনের ব্যাকগ্রাউন্ড secondary সেট করতে ব্যবহৃত হয়। |
| btn-success | বাটনের ব্যাকগ্রাউন্ড success সেট করতে ব্যবহৃত হয়। |
| btn-info | বাটনের ব্যাকগ্রাউন্ড info সেট করতে ব্যবহৃত হয়। |
| btn-warning | বাটনের ব্যাকগ্রাউন্ড warning সেট করতে ব্যবহৃত হয়। |
| btn-danger | বাটনের ব্যাকগ্রাউন্ড danger সেট করতে ব্যবহৃত হয়। |
| btn-dark | বাটনের ব্যাকগ্রাউন্ড dark সেট করতে ব্যবহৃত হয়। |
| btn-light | বাটনের ব্যাকগ্রাউন্ড light সেট করতে ব্যবহৃত হয়। |
| btn-link | বাটন লিংক আকারে প্রদর্শন করতে ব্যবহৃত হয়। |