বুটস্ট্রাপ সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট জেকুয়েরি পিএইচপি এসকিউএল এঙ্গুলার জেএস
ফোরাম
×

বুটস্ট্রাপ টিউটোরিয়াল

হোম-Home শুরু করুন-Get Started গ্রীড বেসিক-Grid Basic

সিএসএস কম্পোনেন্ট

টাইপোগ্রাফী-Typography টেবিল-Table ইমেজ-Image জামবোর্টন-Jumbotron বুটস্ট্রাপ Well এলার্ট-Alert বাটন-Button বাটন গ্রুপ-Button Group গ্লিফআইকন-Glypicon ব্যাজ/লেভেল-Badge/Label প্রোগ্রেস বার-Progress Bar পেজিনেশন-Pagination পেজার-Pager লিস্ট গ্রুপ-List Group প্যানেল-Panel ফরম-Form ইনপুট-Input ইনপুট(২)-Input(2) ইনপুটের আকার-Input Sizing সাহায্যকারী-Helper

JS কম্পোনেন্ট

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব/পিল-Tab/Pill ন্যাভবার-Navbar ক্যারোসেল-Carousel মোডাল-Modal টুলটিপ-Tooltip পপওভার-Popover স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

বুটস্ট্রাপ গ্রীড সিস্টেম

গ্রীড সিস্টেম-Grid System বুটস্ট্রাপ Stacked/Horizontal গ্রীড ছোট-Grid Small গ্রীড মিডিয়াম-Grid Medium গ্রীড বড়-Grid Large গ্রীড উদাহরণ-Grid Example

বুটস্ট্রাপ রেফারেন্স

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব-Tab বাটন-Button ক্যারোসেল-Carousel মোডাল-Modal স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

 

বুটস্ট্রাপ লিষ্ট গ্রুপ


বেসিক লিষ্ট গ্রুপ

অধিকাংশ ক্ষেত্রেই বেসিক লিষ্ট গ্রুপ তৈরি করার জন্য আনওর্ডার লিষ্টের সাথে লিষ্ট আইটেম ব্যবহার করা হয়। একটি বেসিক লিষ্ট গ্রুপ তৈরি করার জন্য <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>

ফলাফল