তালিকা গ্রুপ
তালিকা গোষ্ঠীগুলি বিষয়বস্তুর একটি সিরিজ প্রদর্শনের জন্য একটি নমনীয় এবং শক্তিশালী উপাদান। এর মধ্যে যেকোনো বিষয়বস্তুকে সমর্থন করার জন্য এগুলিকে সংশোধন এবং প্রসারিত করুন।
মৌলিক উদাহরণ
সবচেয়ে মৌলিক তালিকা গোষ্ঠী হল তালিকা আইটেম এবং সঠিক ক্লাস সহ একটি ক্রমবিহীন তালিকা। অনুসরণ করা বিকল্পগুলি বা প্রয়োজন অনুসারে আপনার নিজস্ব CSS দিয়ে এটি তৈরি করুন।
- ক্রাস জাস্টো অডিও
- ড্যাপিবাস এসি ফ্যাসিলিসিস ইন
- মরবি লিও রিসাস
- পোর্টা এসি কনসেক্টেতুর এসি
- ইরোস এ ভেস্টিবুলাম
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>সক্রিয় আইটেম
বর্তমান সক্রিয় নির্বাচন নির্দেশ .activeকরতে একটি যোগ করুন ।.list-group-item
- ক্রাস জাস্টো অডিও
- ড্যাপিবাস এসি ফ্যাসিলিসিস ইন
- মরবি লিও রিসাস
- পোর্টা এসি কনসেক্টেতুর এসি
- ইরোস এ ভেস্টিবুলাম
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>অক্ষম আইটেম
এটিকে নিষ্ক্রিয় দেখাতে.disabled a এ যোগ করুন । মনে রাখবেন যে কিছু উপাদানের সাথে তাদের ক্লিক ইভেন্টগুলি সম্পূর্ণরূপে নিষ্ক্রিয় করার জন্য কাস্টম জাভাস্ক্রিপ্টের প্রয়োজন হবে (যেমন, লিঙ্কগুলি)।.list-group-item.disabled
- ক্রাস জাস্টো অডিও
- ড্যাপিবাস এসি ফ্যাসিলিসিস ইন
- মরবি লিও রিসাস
- পোর্টা এসি কনসেক্টেতুর এসি
- ইরোস এ ভেস্টিবুলাম
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>লিঙ্ক এবং বোতাম
যোগ করে হোভার, অক্ষম, এবং সক্রিয় অবস্থা সহ অ্যাকশনযোগ্য তালিকা গ্রুপ আইটেম তৈরি করতে <a>s বা s ব্যবহার করুন ৷ অ-ইন্টারেক্টিভ উপাদান (যেমন s বা s) দ্বারা তৈরি তালিকা গোষ্ঠীগুলি একটি ক্লিক বা ট্যাপ সামর্থ্য প্রদান করে না তা নিশ্চিত করার জন্য আমরা এই ছদ্ম-শ্রেণীগুলিকে আলাদা করি৷<button>.list-group-item-action<li><div>
এখানে স্ট্যান্ডার্ড .btnক্লাস ব্যবহার না করা নিশ্চিত করুন ।
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>s দিয়ে , আপনি ক্লাসের পরিবর্তে অ্যাট্রিবিউট <button>ব্যবহার করতে পারেন । দুঃখের বিষয়, s অক্ষম বৈশিষ্ট্য সমর্থন করে না।disabled.disabled<a>
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">
Cras justo odio
</button>
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
<button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>ফ্লাশ
.list-group-flushএকটি প্যারেন্ট কন্টেনারে (যেমন, কার্ড) তালিকা গ্রুপ আইটেম প্রান্ত থেকে প্রান্ত রেন্ডার করতে কিছু সীমানা এবং গোলাকার কোণগুলি সরাতে যোগ করুন ।
- ক্রাস জাস্টো অডিও
- ড্যাপিবাস এসি ফ্যাসিলিসিস ইন
- মরবি লিও রিসাস
- পোর্টা এসি কনসেক্টেতুর এসি
- ইরোস এ ভেস্টিবুলাম
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>অনুভূমিক
.list-group-horizontalসমস্ত ব্রেকপয়েন্ট জুড়ে উল্লম্ব থেকে অনুভূমিক তালিকা গ্রুপ আইটেমগুলির বিন্যাস পরিবর্তন করতে যোগ করুন । .list-group-horizontal-{sm|md|lg|xl}বিকল্পভাবে, সেই ব্রেকপয়েন্ট থেকে শুরু করে একটি তালিকা গ্রুপকে অনুভূমিক করতে একটি প্রতিক্রিয়াশীল বৈকল্পিক চয়ন করুন min-width। বর্তমানে অনুভূমিক তালিকা গোষ্ঠীগুলিকে ফ্লাশ তালিকা গোষ্ঠীগুলির সাথে একত্রিত করা যায় না৷
প্রোটিপ: অনুভূমিক অবস্থায় সম-প্রস্থের তালিকা গ্রুপ আইটেম চান? .flex-fillপ্রতিটি তালিকা গ্রুপ আইটেম যোগ করুন.
- ক্রাস জাস্টো অডিও
- ড্যাপিবাস এসি ফ্যাসিলিসিস ইন
- মরবি লিও রিসাস
<ul class="list-group list-group-horizontal">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>- ক্রাস জাস্টো অডিও
- ড্যাপিবাস এসি ফ্যাসিলিসিস ইন
- মরবি লিও রিসাস
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>- ক্রাস জাস্টো অডিও
- ড্যাপিবাস এসি ফ্যাসিলিসিস ইন
- মরবি লিও রিসাস
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>- ক্রাস জাস্টো অডিও
- ড্যাপিবাস এসি ফ্যাসিলিসিস ইন
- মরবি লিও রিসাস
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>- ক্রাস জাস্টো অডিও
- ড্যাপিবাস এসি ফ্যাসিলিসিস ইন
- মরবি লিও রিসাস
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>প্রাসঙ্গিক ক্লাস
একটি স্টেটফুল ব্যাকগ্রাউন্ড এবং রঙ সহ আইটেমগুলিকে স্টাইল করতে প্রাসঙ্গিক ক্লাসগুলি ব্যবহার করুন৷
- ড্যাপিবাস এসি ফ্যাসিলিসিস ইন
- একটি সাধারণ প্রাথমিক তালিকা গ্রুপ আইটেম
- একটি সাধারণ মাধ্যমিক তালিকা গ্রুপ আইটেম
- একটি সহজ সাফল্য তালিকা গ্রুপ আইটেম
- একটি সাধারণ বিপদ তালিকা গ্রুপ আইটেম
- একটি সাধারণ সতর্কতা তালিকা গ্রুপ আইটেম
- একটি সহজ তথ্য তালিকা গ্রুপ আইটেম
- একটি সাধারণ আলো তালিকা গ্রুপ আইটেম
- একটি সাধারণ অন্ধকার তালিকা গ্রুপ আইটেম
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
<li class="list-group-item list-group-item-info">A simple info list group item</li>
<li class="list-group-item list-group-item-light">A simple light list group item</li>
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>প্রাসঙ্গিক ক্লাসের সাথেও কাজ করে .list-group-item-action। লক্ষ্য করুন এখানে হোভার শৈলীর সংযোজন পূর্ববর্তী উদাহরণে উপস্থিত নয়। রাষ্ট্রও সমর্থিত .active; একটি প্রাসঙ্গিক তালিকা গ্রুপ আইটেমের সক্রিয় নির্বাচন নির্দেশ করতে এটি প্রয়োগ করুন।
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>সহায়ক প্রযুক্তির অর্থ বোঝানো
অর্থ যোগ করার জন্য রঙ ব্যবহার করা শুধুমাত্র একটি ভিজ্যুয়াল ইঙ্গিত দেয়, যা সহায়ক প্রযুক্তির ব্যবহারকারীদের - যেমন স্ক্রিন রিডারদের কাছে জানানো হবে না। নিশ্চিত করুন যে রঙ দ্বারা নির্দেশিত তথ্য হয় বিষয়বস্তু থেকে স্পষ্ট হয় (যেমন দৃশ্যমান পাঠ্য), অথবা বিকল্প উপায়ে অন্তর্ভুক্ত করা হয়েছে, যেমন .sr-onlyক্লাসের সাথে লুকানো অতিরিক্ত পাঠ্য।
ব্যাজ সহ
কিছু ইউটিলিটিগুলির সাহায্যে অপঠিত গণনা, কার্যকলাপ এবং আরও অনেক কিছু দেখানোর জন্য যেকোনো তালিকা গ্রুপ আইটেমে ব্যাজ যোগ করুন ।
- ক্রাস জাস্টো অডিও14
- ড্যাপিবাস এসি ফ্যাসিলিসিস ইন2
- মরবি লিও রিসাস1
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>কাস্টম কন্টেন্ট
ফ্লেক্সবক্স ইউটিলিটিগুলির সাহায্যে নীচের মত লিঙ্ক করা তালিকার গোষ্ঠীগুলির জন্যও, এর মধ্যে প্রায় কোনও HTML যোগ করুন ৷
গ্রুপ আইটেম শিরোনাম তালিকা
3 দিন আগেDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.গ্রুপ আইটেম শিরোনাম তালিকা
3 দিন আগেDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.গ্রুপ আইটেম শিরোনাম তালিকা
3 দিন আগেDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
</div>জাভাস্ক্রিপ্ট আচরণ
bootstrap.jsস্থানীয় বিষয়বস্তুর ট্যাবেবল প্যান তৈরি করতে আমাদের তালিকা গোষ্ঠীকে প্রসারিত করতে ট্যাব JavaScript প্লাগইনটি ব্যবহার করুন—এটি পৃথকভাবে বা সংকলিত ফাইলের মাধ্যমে অন্তর্ভুক্ত করুন ।
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>ডেটা বৈশিষ্ট্য ব্যবহার করে
আপনি কোনো জাভাস্ক্রিপ্ট না লিখে একটি তালিকা গ্রুপ নেভিগেশন সক্রিয় করতে পারেন শুধুমাত্র নির্দিষ্ট করে data-toggle="list"বা একটি উপাদানের উপর। এই তথ্য বৈশিষ্ট্য ব্যবহার করুন .list-group-item.
<!-- List group -->
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>জাভাস্ক্রিপ্টের মাধ্যমে
জাভাস্ক্রিপ্টের মাধ্যমে ট্যাবযোগ্য তালিকা আইটেম সক্ষম করুন (প্রতিটি তালিকা আইটেম পৃথকভাবে সক্রিয় করা প্রয়োজন):
$('#myList a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
})আপনি বিভিন্ন উপায়ে পৃথক তালিকা আইটেম সক্রিয় করতে পারেন:
$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tabবিবর্ণ প্রভাব
ট্যাব প্যানেল ফেড ইন করতে, .fadeপ্রতিটিতে যোগ করুন .tab-pane। প্রথম ট্যাব ফলকেও .showপ্রাথমিক বিষয়বস্তু দৃশ্যমান করতে হবে।
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>পদ্ধতি
$() ট্যাব
একটি তালিকা আইটেম উপাদান এবং বিষয়বস্তু ধারক সক্রিয় করে। ট্যাবে একটি data-targetবা একটি hrefটার্গেটিং একটি কন্টেইনার নোড থাকা উচিত।
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
<script>
$(function () {
$('#myList a:last-child').tab('show')
})
</script>ট্যাব('শো')
প্রদত্ত তালিকা আইটেম নির্বাচন করে এবং এর সংশ্লিষ্ট ফলক দেখায়। পূর্বে নির্বাচিত অন্য কোনো তালিকা আইটেম অনির্বাচিত হয়ে যায় এবং এর সংশ্লিষ্ট ফলক লুকানো হয়। ট্যাব ফলকটি আসলে দেখানো হওয়ার আগে কলারের কাছে ফিরে আসে (উদাহরণস্বরূপ, shown.bs.tabইভেন্ট হওয়ার আগে)।
$('#someListItem').tab('show')ঘটনা
একটি নতুন ট্যাব দেখানোর সময়, ইভেন্টগুলি নিম্নলিখিত ক্রমানুসারে আগুন লাগে:
hide.bs.tab(বর্তমান সক্রিয় ট্যাবে)show.bs.tab(দেখানো ট্যাবে)hidden.bs.tabhide.bs.tab(পূর্ববর্তী সক্রিয় ট্যাবে, ইভেন্টের মতো একই )shown.bs.tabshow.bs.tab(সদ্য-সক্রিয় এইমাত্র দেখানো ট্যাবে, ইভেন্টের মতোই )
যদি কোনও ট্যাব ইতিমধ্যে সক্রিয় না থাকে, তাহলে hide.bs.tabএবং hidden.bs.tabইভেন্টগুলি ফায়ার করা হবে না।
| ইভেন্টের ধরণ | বর্ণনা |
|---|---|
| show.bs.tab | এই ইভেন্টটি ট্যাব শোতে ফায়ার করে, কিন্তু নতুন ট্যাব দেখানোর আগে। যথাক্রমে সক্রিয় ট্যাব এবং পূর্ববর্তী সক্রিয় ট্যাব (যদি উপলব্ধ হয়) ব্যবহার করুন event.targetএবং লক্ষ্য করুন।event.relatedTarget |
| দেখানো.bs.tab | একটি ট্যাব দেখানোর পরে এই ইভেন্টটি ট্যাব শোতে ফায়ার হয়৷ যথাক্রমে সক্রিয় ট্যাব এবং পূর্ববর্তী সক্রিয় ট্যাব (যদি উপলব্ধ হয়) ব্যবহার করুন event.targetএবং লক্ষ্য করুন।event.relatedTarget |
| hide.bs.tab | এই ইভেন্টটি চালু হয় যখন একটি নতুন ট্যাব দেখানো হবে (এবং এইভাবে পূর্ববর্তী সক্রিয় ট্যাবটি লুকানো হবে)। যথাক্রমে বর্তমান সক্রিয় ট্যাব এবং নতুন শীঘ্রই সক্রিয় ট্যাব ব্যবহার করুন event.targetএবং লক্ষ্য করুন।event.relatedTarget |
| hidden.bs.tab | একটি নতুন ট্যাব দেখানোর পরে এই ইভেন্টটি চালু হয় (এবং এইভাবে আগের সক্রিয় ট্যাবটি লুকানো হয়)। যথাক্রমে পূর্ববর্তী সক্রিয় ট্যাব এবং নতুন সক্রিয় ট্যাব ব্যবহার করুন event.targetএবং লক্ষ্য করুন।event.relatedTarget |
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})