বুটস্ট্রাপ লিষ্ট গ্রুপ - Bootstrap List Group
বুটস্ট্রাপ বেসিক লিষ্ট গ্রুপ
অধিকাংশ ক্ষেত্রেই বুটস্ট্রাপ বেসিক লিষ্ট গ্রুপ তৈরি করার জন্য আনওর্ডার লিষ্টের সাথে লিষ্ট আইটেম ব্যবহার করা হয়। একটি বেসিক লিষ্ট গ্রুপ তৈরি করার জন্য <ul> এলিমেন্টে .list-group ক্লাস এবং <li> এলিমেন্টে .list-group-item ক্লাস ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap List Group 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>
<ul class="list-group">
<li class="list-group-item">list-group-item</li>
<li class="list-group-item">list-group-item</li>
<li class="list-group-item">list-group-item</li>
</ul>
</div>
</body>
</html>
ফলাফল
লিষ্ট গ্রুপের মধ্যে ব্যাজের ব্যবহার
লিষ্ট গ্রুপে ব্যাজ সংযুক্ত করে ব্যবহার করা যায়। ব্যাজ স্বয়ংক্রিয়ভাবে তার অবস্থান ডানে নিয়ে নিবে।
লিষ্ট আইটেমের সাথে একত্রে ব্যাজ ব্যবহার করার জন্য (<li class="list-group-item") এর মধ্যে .badge ক্লাসযুক্ত একটি <span> এলিমেন্ট যুক্ত করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap List Group 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>
<ul class="list-group">
<li class="list-group-item">list-group-item<span class="badge">badge</span></li>
<li class="list-group-item">list-group-item<span class="badge">badge</span></li>
<li class="list-group-item">list-group-item<span class="badge">badge</span></li>
</ul>
</div>
</body>
</html>
ফলাফল
লিংক যুক্ত লিষ্ট গ্রুপ
লিষ্ট গ্রুপ আইটেমগুলো হাইপারলিংকযুক্ত হতে পারে। এর ফলে হোভারে করলে ব্যাকগ্রাউন্ড কালার ধূসর দেখাবে। লিংকযুক্ত লিষ্ট গ্রুপ তৈরি করার জন্য <ul> পরিবর্তে <div> এলিমেন্ট এবং <li> এর পরিবর্তে <a> এলিমেন্ট ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap List Group 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>
<ul class="list-group">
<a href="#" class="list-group-item">list-group-item</a>
<a href="#" class="list-group-item">list-group-item</a>
<a href="#" class="list-group-item">list-group-item</a>
</ul>
</div>
</body>
</html>
ফলাফল
একটিভ স্টেট
কোন একটি লিস্ট আইটেমকে একটিব হিসেবে হাইলাইট করার জন্য .active ক্লাস ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap List Group 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>
<ul class="list-group">
<li class="list-group-item">list-group-item</li>
<li class="list-group-item active">list-group-item</li>
<li class="list-group-item">list-group-item</li>
</ul>
</div>
</body>
</html>
ফলাফল
Disabled আইটেম
লিষ্ট গ্রুপের কোনো একটি আইটেমকে disable করে রাখার জন্য ঐ এলিমেন্টের মধ্যে .disabled ক্লাস ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap List Group 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>Disabled স্টেট সহকারে লিষ্ট গ্রুপ</h2>
<ul class="list-group">
<li class="list-group-item">list-group-item</li>
<li class="list-group-item disabled">list-group-item</li>
<li class="list-group-item">list-group-item</li>
</ul>
</div>
</body>
</html>
ফলাফল
কনটেকচুয়াল ক্লাস
কনটেকচুয়াল ক্লাস ব্যবহার করে লিষ্ট আইটেমকে কালার করা যায়ঃ
- list-group-item-success
- list-group-item-info
- list-group-item-warning
- list-group-item-danger
লিষ্ট আইটেমকে কালার করার জন্য
.list-group-item ক্লাসের সাথে নিম্নলিখিত ক্লাসগুলো ব্যবহার করা হয়
.list-group-item-success, list-group-item-info, list-group-item-warning এবং .list-group-item-danger।
কাস্টম কনটেন্ট
লিষ্ট গ্রুপ আইটেমের মধ্যে এইচটিএমএলের প্রায় সবগুলো এলিমেন্ট ব্যবহার করা যায়।
বুটস্ট্রাপে এই সংক্রান্ত দুটি ক্লাস রয়েছে। ক্লাস দুটি হলো- .list-group-item-heading এবং
.list-group-item-text। নিম্নে এদের ব্যবহার দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap List Group 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>
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List Gorup Item Heading</h4>
<p class="list-group-item-text">List Gorup Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List Gorup Item Heading</h4>
<p class="list-group-item-text">List Gorup Item Text</p>
</a>
</div>
</div>
</body>
</html>
ফলাফল