বুটস্ট্র্যাপ
🌈বুটস্ট্র্যাপ কি?
📋বুটস্ট্র্যাপ হলো তালিকা তৈরি করার পদ্ধতি।
⚒️বুটস্ট্র্যাপ তালিকা তৈরি করতে ব্যবহৃত হয়।
বুটস্ট্র্যাপ সমূহ
বুটস্ট্র্যাপ এবং সেগুলোর ব্যবহারের তালিকা
- ➡️ list-group - লিস্ট গ্রুপ তৈরি করা
- ➡️ list-group-item - লিস্ট আইটেম নির্ধারণ করা
- ➡️ list-group-flush - গোলাকার কোণ অপসারণ করা
- ➡️ list-group-numbered - ক্রমিক নম্বরসহ প্রদর্শন করা
- ➡️ list-group-horizontal - অনুভূমিকভাবে প্রদর্শন করা
- ➡️ list-group-item-success - সাকসেস স্টাইল নির্ধারণ করা
- ➡️ list-group-item-secondary - সেকেন্ডারি স্টাইল নির্ধারণ করা
- ➡️ list-group-item-info - ইনফো স্টাইল নির্ধারণ করা
- ➡️ list-group-item-warning - ওয়ার্নিং স্টাইল নির্ধারণ করা
- ➡️ list-group-item-danger - ডেঞ্জার স্টাইল নির্ধারণ করা
- ➡️ list-group-item-primary - প্রাইমারি স্টাইল নির্ধারণ করা
- ➡️ list-group-item-dark - ডার্ক স্টাইল নির্ধারণ করা
- ➡️ list-group-item-light - লাইট স্টাইল নির্ধারণ করা
list-group - লিস্ট গ্রুপ তৈরি করার উদাহরণ।
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>
<ul class="list-group">
<li class="list-group-item">পিএইচপি</li>
<li class="list-group-item">জাভা</li>
<li class="list-group-item">পাইথন</li>
<li class="list-group-item">জাভাস্ক্রিপ্ট</li>
</ul>
</body>
</html>list-group-item - লিস্ট আইটেম নির্ধারণ করার উদাহরণ।
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>
<ul class="list-group">
<li class="list-group-item">পিএইচপি</li>
<li class="list-group-item">জাভা</li>
<li class="list-group-item">পাইথন</li>
<li class="list-group-item">জাভাস্ক্রিপ্ট</li>
</ul>
</body>
</html>list-group-flush - গোলাকার কোণ অপসারণ করার উদাহরণ।
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>
<ul class="list-group list-group-flush">
<li class="list-group-item">পিএইচপি</li>
<li class="list-group-item">জাভা</li>
<li class="list-group-item">পাইথন</li>
<li class="list-group-item">জাভাস্ক্রিপ্ট</li>
</ul>
</body>
</html>list-group-numbered - ক্রমিক নম্বরসহ প্রদর্শন করার উদাহরণ।
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>
<ul class="list-group list-group-numbered">
<li class="list-group-item">পিএইচপি</li>
<li class="list-group-item">জাভা</li>
<li class="list-group-item">পাইথন</li>
<li class="list-group-item">জাভাস্ক্রিপ্ট</li>
</ul>
</body>
</html>list-group-horizontal - অনুভূমিকভাবে প্রদর্শন করার উদাহরণ।
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>
<ul class="list-group list-group-horizontal">
<li class="list-group-item">পিএইচপি</li>
<li class="list-group-item">জাভা</li>
<li class="list-group-item">পাইথন</li>
<li class="list-group-item">জাভাস্ক্রিপ্ট</li>
</ul>
</body>
</html>list-group-item-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>
<ul class="list-group list-group-item-success">
<li class="list-group-item">পিএইচপি</li>
<li class="list-group-item">জাভা</li>
<li class="list-group-item">পাইথন</li>
<li class="list-group-item">জাভাস্ক্রিপ্ট</li>
</ul>
</body>
</html>list-group-item-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>
<ul class="list-group list-group-item-secondary">
<li class="list-group-item">পিএইচপি</li>
<li class="list-group-item">জাভা</li>
<li class="list-group-item">পাইথন</li>
<li class="list-group-item">জাভাস্ক্রিপ্ট</li>
</ul>
</body>
</html>list-group-item-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>
<ul class="list-group list-group-item-info">
<li class="list-group-item">পিএইচপি</li>
<li class="list-group-item">জাভা</li>
<li class="list-group-item">পাইথন</li>
<li class="list-group-item">জাভাস্ক্রিপ্ট</li>
</ul>
</body>
</html>list-group-item-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>
<ul class="list-group list-group-item-warning">
<li class="list-group-item">পিএইচপি</li>
<li class="list-group-item">জাভা</li>
<li class="list-group-item">পাইথন</li>
<li class="list-group-item">জাভাস্ক্রিপ্ট</li>
</ul>
</body>
</html>list-group-item-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>
<ul class="list-group list-group-item-danger">
<li class="list-group-item">পিএইচপি</li>
<li class="list-group-item">জাভা</li>
<li class="list-group-item">পাইথন</li>
<li class="list-group-item">জাভাস্ক্রিপ্ট</li>
</ul>
</body>
</html>list-group-item-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>
<ul class="list-group list-group-item-primary">
<li class="list-group-item">পিএইচপি</li>
<li class="list-group-item">জাভা</li>
<li class="list-group-item">পাইথন</li>
<li class="list-group-item">জাভাস্ক্রিপ্ট</li>
</ul>
</body>
</html>list-group-item-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>
<ul class="list-group list-group-item-dark">
<li class="list-group-item">পিএইচপি</li>
<li class="list-group-item">জাভা</li>
<li class="list-group-item">পাইথন</li>
<li class="list-group-item">জাভাস্ক্রিপ্ট</li>
</ul>
</body>
</html>list-group-item-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>
<ul class="list-group list-group-item-light">
<li class="list-group-item">পিএইচপি</li>
<li class="list-group-item">জাভা</li>
<li class="list-group-item">পাইথন</li>
<li class="list-group-item">জাভাস্ক্রিপ্ট</li>
</ul>
</body>
</html>বুটস্ট্র্যাপ সম্পর্কিত বিস্তারিত তথ্য
কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক
| নাম | বিবরণ |
|---|---|
| list-group | লিস্ট গ্রুপ তৈরি করতে ব্যবহৃত হয়। |
| list-group-item | লিস্ট আইটেম নির্ধারণ করতে ব্যবহৃত হয়। |
| list-group-flush | গোলাকার কোণ অপসারণ করতে ব্যবহৃত হয়। |
| list-group-numbered | ক্রমিক নম্বরসহ প্রদর্শন করতে ব্যবহৃত হয়। |
| list-group-horizontal | অনুভূমিকভাবে প্রদর্শন করতে ব্যবহৃত হয়। |
| list-group-item-success | সাকসেস স্টাইল নির্ধারণ করতে ব্যবহৃত হয়। |
| list-group-item-secondary | সেকেন্ডারি স্টাইল নির্ধারণ করতে ব্যবহৃত হয়। |
| list-group-item-info | ইনফো স্টাইল নির্ধারণ করতে ব্যবহৃত হয়। |
| list-group-item-warning | ওয়ার্নিং স্টাইল নির্ধারণ করতে ব্যবহৃত হয়। |
| list-group-item-danger | ডেঞ্জার স্টাইল নির্ধারণ করতে ব্যবহৃত হয়। |
| list-group-item-primary | প্রাইমারি স্টাইল নির্ধারণ করতে ব্যবহৃত হয়। |
| list-group-item-dark | ডার্ক স্টাইল নির্ধারণ করতে ব্যবহৃত হয়। |
| list-group-item-light | লাইট স্টাইল নির্ধারণ করতে ব্যবহৃত হয়। |