Bootstrap 5 টেবিল
মৌলিক টেবিল
একটি মৌলিক Bootstrap 5 টেবিল একটি অনুকূল অভ্যন্তরীণ মাঝবারী এবং হলোকর সেপারেটর যোগ করে:
.table ক্লাস টেবিলকে মূল স্টাইল যোগ করুন:
উদাহরণ
হাড়িযুক্ত টেবিল
.table-bordered ক্লাস ও সেলের সব হাড়িকে হাড়িকে যোগ করুন:
উদাহরণ
হলোকর ইফেক্ট যোগ্য রেকর্ড
.table-hover ক্লাস টেবিল রেকর্ডের ওপর হলোকর ইফেক্ট যোগ করুন (গ্রীষ্মকমল প্রকাশ):
উদাহরণ
কালো/গ্রীষ্মকমল টেবিল
.table-dark ক্লাস টেবিলকে কালো প্রকাশ যোগ করুন:
উদাহরণ
গ্রীষ্মকমল স্ট্রিপ টেবিল
মিশ্রণ .table-dark এবং .table-striped গ্রীষ্মকমল স্ট্রিপ টেবিল তৈরি করতে:
উদাহরণ
হলোকর টেবিল
.table-hover ক্লাস টেবিল রেকর্ডের ওপর হলোকর ইফেক্ট যোগ করুন (গ্রীষ্মকমল প্রকাশ):
উদাহরণ
কনটেক্স্ট শ্রেণী
কনটেক্স্ট শ্রেণী সম্পূর্ণ টেবিল (<table>) বা টেবিল সারি (<tr>) বা টেবিল সেল (<td>) রঙ করা
উদাহরণ
উপলব্ধ কনটেক্স্ট শ্রেণী:
| শ্রেণী | বর্ণনা |
|---|---|
.table-primary |
অলঙ্কৃত: গুরুত্বপূর্ণ কাজ |
.table-success |
অলঙ্কৃত: সফল বা ইতিবাচক কাজ |
.table-danger |
অলঙ্কৃত: ঝুঁকি বা বিকারক কাজ |
.table-info |
অলঙ্কৃত: মধ্যম তথ্য পরিবর্তন বা কাজ |
.table-warning |
অলঙ্কৃত: সতর্কতা করার প্রয়োজন থাকে |
.table-active |
গোলাপী: টেবিল সারি বা টেবিল সেলের ওভারলে রঙ আপনাকে প্রদান করে |
.table-secondary |
গোলাপী: খুবই অপরিমাপ্য কাজ |
.table-light |
সূক্ষ্ম গোলাপী টেবিল বা টেবিল সারির পটভূমি |
.table-dark |
গাঢ় গোলাপী টেবিল বা টেবিল সারির পটভূমি |
শিরোনাম রঙ
আপনি একটি কোনো কনটেক্স্ট শ্রেণীকে শুধুমাত্র টেবিল শিরোনামে পটভূমি রঙ সংযুক্ত করতেও পারেন:
উদাহরণ
ছোট টেবিল
.table-sm শ্রেণী টেবিলকে কোনো সেলের পূর্ণ ফাঁটা দ্বারা ছোট করে তোলে:
উদাহরণ
রেসপনসিভ টেবিল
.table-responsive শ্রেণী টেবিলকে স্ক্রোল টেবিল হিসাবে করে এক্ষেত্রে সংযুক্ত করে (যখন তা আড়াইভাবে বড় হয়):
উদাহরণ
<div class="table-responsive">
<table class="table">
...
</table>
</div>
আপনি এক্ষেত্রে সমস্ত পরিস্থিতির জন্য কেউ একটি স্ক্রোল টেবিলকে সংযুক্ত করতে পারেন, যা স্ক্রীন প্রস্থের উপর নির্ভর করে:
| শ্রেণী | স্ক্রীন প্রস্থ |
|---|---|
.table-responsive-sm |
< 576px |
.table-responsive-md |
< 768px |
.table-responsive-lg |
< 992px |
.table-responsive-xl |
< 1200px |
.table-responsive-xxl |
< 1400px |
উদাহরণ
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
