বুটস্ট্র্যাপের সাথে টেবিলের অপ্ট-ইন স্টাইলিংয়ের জন্য ডকুমেন্টেশন এবং উদাহরণ (জাভাস্ক্রিপ্ট প্লাগইনগুলিতে তাদের প্রচলিত ব্যবহার দেওয়া হয়েছে)।
এই পৃষ্ঠায়
ওভারভিউ
<table>ক্যালেন্ডার এবং তারিখ পিকারের মতো তৃতীয় পক্ষের উইজেটগুলিতে উপাদানগুলির ব্যাপক ব্যবহারের কারণে , বুটস্ট্র্যাপের টেবিলগুলি অপ্ট-ইন করা হয়েছে ৷ .tableযেকোনও বেস ক্লাস যোগ করুন <table>, তারপর আমাদের ঐচ্ছিক পরিবর্তনকারী ক্লাস বা কাস্টম শৈলী দিয়ে প্রসারিত করুন। সমস্ত টেবিল শৈলী বুটস্ট্র্যাপে উত্তরাধিকারসূত্রে পাওয়া যায় না, যার অর্থ যে কোনো নেস্টেড টেবিল প্যারেন্ট থেকে স্বাধীনভাবে স্টাইল করা যেতে পারে।
সবচেয়ে বেসিক টেবিল মার্কআপ ব্যবহার করে, .tableবুটস্ট্র্যাপে কীভাবে ভিত্তিক টেবিল দেখায় তা এখানে।
#
প্রথম
শেষ
হাতল
1
মার্ক
অটো
@এমডিও
2
জ্যাকব
থর্নটন
@ফ্যাট
3
ল্যারি দ্য বার্ড
@টুইটার
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
বৈকল্পিক
সারণি, টেবিল সারি বা পৃথক কক্ষে রঙ করার জন্য প্রাসঙ্গিক ক্লাস ব্যবহার করুন।
ক্লাস
শিরোনাম
শিরোনাম
ডিফল্ট
সেল
সেল
প্রাথমিক
সেল
সেল
মাধ্যমিক
সেল
সেল
সফলতা
সেল
সেল
বিপদ
সেল
সেল
সতর্কতা
সেল
সেল
তথ্য
সেল
সেল
আলো
সেল
সেল
অন্ধকার
সেল
সেল
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
সহায়ক প্রযুক্তির অর্থ বোঝানো
অর্থ যোগ করার জন্য রঙ ব্যবহার করা শুধুমাত্র একটি ভিজ্যুয়াল ইঙ্গিত দেয়, যা সহায়ক প্রযুক্তির ব্যবহারকারীদের - যেমন স্ক্রিন রিডারদের কাছে জানানো হবে না। নিশ্চিত করুন যে রঙ দ্বারা নির্দেশিত তথ্য হয় বিষয়বস্তু থেকে স্পষ্ট হয় (যেমন দৃশ্যমান পাঠ্য), অথবা বিকল্প উপায়ে অন্তর্ভুক্ত করা হয়েছে, যেমন .visually-hiddenক্লাসের সাথে লুকানো অতিরিক্ত পাঠ্য।
উচ্চারিত টেবিল
ডোরাকাটা সারি
.table-stripedএর মধ্যে যেকোনো টেবিল সারিতে জেব্রা-স্ট্রাইপিং যোগ করতে ব্যবহার করুন <tbody>।
#
প্রথম
শেষ
হাতল
1
মার্ক
অটো
@এমডিও
2
জ্যাকব
থর্নটন
@ফ্যাট
3
ল্যারি দ্য বার্ড
@টুইটার
<tableclass="table table-striped">
...
</table>
এই ক্লাসগুলি টেবিলের বৈকল্পিকগুলিতেও যোগ করা যেতে পারে:
--bs-table-bgআমরা কাস্টম বৈশিষ্ট্য সহ একটি টেবিল ঘরের পটভূমি সেট করে শুরু করি । সমস্ত টেবিল বৈকল্পিক তারপর টেবিল ঘর রঙিন করতে সেই কাস্টম বৈশিষ্ট্য সেট করে। এইভাবে, আধা-স্বচ্ছ রঙগুলি টেবিলের পটভূমি হিসাবে ব্যবহার করা হলে আমরা সমস্যায় পড়ি না।
তারপরে আমরা টেবিলের ঘরগুলিতে একটি ইনসেট বক্স শ্যাডো যুক্ত করি যার সাথে box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);কোনও নির্দিষ্ট করা উপরের স্তরে background-color। কারণ আমরা একটি বিশাল স্প্রেড ব্যবহার করি এবং কোন অস্পষ্টতা নেই, রঙটি একঘেয়ে হবে। যেহেতু --bs-table-accent-bgডিফল্টরূপে আনসেট করা আছে, তাই আমাদের কোনো ডিফল্ট বক্স শ্যাডো নেই।
যখন হয় .table-striped, .table-hoverবা .table-activeক্লাস যোগ করা হয়, তখন --bs-table-accent-bgপটভূমিকে রঙিন করতে একটি অর্ধস্বচ্ছ রঙে সেট করা হয়।
প্রতিটি টেবিল ভেরিয়েন্টের জন্য, আমরা --bs-table-accent-bgসেই রঙের উপর নির্ভর করে সর্বোচ্চ বৈসাদৃশ্য সহ একটি রঙ তৈরি করি। উদাহরণস্বরূপ, অ্যাকসেন্টের রঙ .table-primaryগাঢ় এবং .table-darkএকটি হালকা অ্যাকসেন্ট রঙ।
টেক্সট এবং সীমানা রং একই ভাবে তৈরি করা হয়, এবং তাদের রং ডিফল্টভাবে উত্তরাধিকারসূত্রে পাওয়া যায়।
টেবিলের ঘরগুলি <thead>সর্বদা নীচে উল্লম্বভাবে সারিবদ্ধ থাকে। সারণি কক্ষগুলি <tbody>তাদের প্রান্তিককরণের উত্তরাধিকারসূত্রে প্রাপ্ত হয় <table>এবং ডিফল্টরূপে শীর্ষে সারিবদ্ধ থাকে। যেখানে প্রয়োজন সেখানে পুনরায় সারিবদ্ধ করতে উল্লম্ব সারিবদ্ধ ক্লাসগুলি ব্যবহার করুন ।
শিরোনাম 1
শিরোনাম 2
শিরোনাম 3
শিরোনাম 4
এই কোষটি vertical-align: middle;টেবিল থেকে উত্তরাধিকারসূত্রে প্রাপ্ত
এই কোষটি vertical-align: middle;টেবিল থেকে উত্তরাধিকারসূত্রে প্রাপ্ত
এই কোষটি vertical-align: middle;টেবিল থেকে উত্তরাধিকারসূত্রে প্রাপ্ত
এটি এখানে কিছু স্থানধারক পাঠ্য, যা পূর্ববর্তী কক্ষগুলিতে উল্লম্ব প্রান্তিককরণ কীভাবে কাজ করে তা প্রদর্শন করার জন্য বেশ খানিকটা উল্লম্ব স্থান নেওয়ার উদ্দেশ্যে।
এই ঘরটি vertical-align: bottom;টেবিল সারি থেকে উত্তরাধিকার সূত্রে প্রাপ্ত
এই ঘরটি vertical-align: bottom;টেবিল সারি থেকে উত্তরাধিকার সূত্রে প্রাপ্ত
এই ঘরটি vertical-align: bottom;টেবিল সারি থেকে উত্তরাধিকার সূত্রে প্রাপ্ত
এটি এখানে কিছু স্থানধারক পাঠ্য, যা পূর্ববর্তী কক্ষগুলিতে উল্লম্ব প্রান্তিককরণ কীভাবে কাজ করে তা প্রদর্শন করার জন্য বেশ খানিকটা উল্লম্ব স্থান নেওয়ার উদ্দেশ্যে।
এই কোষটি vertical-align: middle;টেবিল থেকে উত্তরাধিকারসূত্রে প্রাপ্ত
এই কোষটি vertical-align: middle;টেবিল থেকে উত্তরাধিকারসূত্রে প্রাপ্ত
এই ঘরটি শীর্ষে সারিবদ্ধ।
এটি এখানে কিছু স্থানধারক পাঠ্য, যা পূর্ববর্তী কক্ষগুলিতে উল্লম্ব প্রান্তিককরণ কীভাবে কাজ করে তা প্রদর্শন করার জন্য বেশ খানিকটা উল্লম্ব স্থান নেওয়ার উদ্দেশ্যে।
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
বাসা বাঁধে
সীমানা শৈলী, সক্রিয় শৈলী, এবং টেবিল বৈকল্পিক নেস্টেড টেবিল দ্বারা উত্তরাধিকারসূত্রে পাওয়া যায় না।
নেস্টেড টেবিলে যে কোনো স্টাইল লিক হওয়া প্রতিরোধ করতে , আমরা >আমাদের CSS-এ চাইল্ড কম্বিনেটর ( ) সিলেক্টর ব্যবহার করি। যেহেতু আমাদের , , এবং এর মধ্যে সমস্ত tds এবং s টার্গেট করতে হবে , আমাদের নির্বাচক এটি ছাড়া বেশ দীর্ঘ দেখাবে। যেমন, আমরা সবগুলো s এবং s কে লক্ষ্য করার জন্য বরং অদ্ভুত চেহারার নির্বাচক ব্যবহার করি , কিন্তু কোনো সম্ভাব্য নেস্টেড টেবিলের কোনোটিই নয়।ththeadtbodytfoot.table > :not(caption) > * > *tdth.table
মনে রাখবেন যে আপনি যদি <tr>একটি টেবিলের সরাসরি সন্তান হিসাবে s যোগ করেন তবে সেগুলি ডিফল্টরূপে <tr>একটি তে মোড়ানো হবে <tbody>, এইভাবে আমাদের নির্বাচকদের উদ্দেশ্য হিসাবে কাজ করবে।
অ্যানাটমি
টেবিলের মাথা
টেবিল এবং গাঢ় টেবিলের মতো, মডিফায়ার ক্লাস ব্যবহার করুন .table-lightবা .table-darkগুলিকে <thead>হালকা বা গাঢ় ধূসর দেখান।
একটি <caption>টেবিলের জন্য একটি শিরোনাম মত একটি ফাংশন. এটি স্ক্রিন রিডার সহ ব্যবহারকারীদের একটি টেবিল খুঁজে পেতে এবং এটির বিষয়ে বুঝতে এবং তারা এটি পড়তে চায় কিনা তা নির্ধারণ করতে সহায়তা করে৷
ব্যবহারকারীদের তালিকা
#
প্রথম
শেষ
হাতল
1
মার্ক
অটো
@এমডিও
2
জ্যাকব
থর্নটন
@ফ্যাট
3
ল্যারি দ্য বার্ড
@টুইটার
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>
প্রতিক্রিয়াশীল টেবিল
রেসপন্সিভ টেবিলগুলি সারণিগুলিকে সহজেই অনুভূমিকভাবে স্ক্রোল করার অনুমতি দেয়৷ .tableএকটি দিয়ে মোড়ানোর মাধ্যমে সমস্ত ভিউপোর্ট জুড়ে যেকোনো টেবিলকে প্রতিক্রিয়াশীল করুন .table-responsive। অথবা, একটি সর্বোচ্চ ব্রেকপয়েন্ট বেছে নিন যার সাথে ব্যবহার করে একটি প্রতিক্রিয়াশীল টেবিল থাকতে হবে .table-responsive{-sm|-md|-lg|-xl|-xxl}।
উল্লম্ব ক্লিপিং/ছাঁটা
প্রতিক্রিয়াশীল টেবিলগুলি ব্যবহার করে overflow-y: hidden, যা টেবিলের নীচে বা উপরের প্রান্তের বাইরে যে কোনও সামগ্রীকে ক্লিপ করে। বিশেষ করে, এটি ড্রপডাউন মেনু এবং অন্যান্য তৃতীয় পক্ষের উইজেটগুলিকে ক্লিপ করতে পারে৷
সবসময় প্রতিক্রিয়াশীল
প্রতিটি ব্রেকপয়েন্ট জুড়ে, .table-responsiveঅনুভূমিকভাবে স্ক্রলিং টেবিলের জন্য ব্যবহার করুন।
.table-responsive{-sm|-md|-lg|-xl|-xxl}একটি নির্দিষ্ট ব্রেকপয়েন্ট পর্যন্ত প্রতিক্রিয়াশীল টেবিল তৈরি করতে প্রয়োজন অনুযায়ী ব্যবহার করুন । সেই ব্রেকপয়েন্ট থেকে এবং উপরে, টেবিলটি স্বাভাবিকভাবে আচরণ করবে এবং অনুভূমিকভাবে স্ক্রোল করবে না।
এই টেবিলগুলি ভাঙ্গা দেখা যেতে পারে যতক্ষণ না তাদের প্রতিক্রিয়াশীল শৈলী নির্দিষ্ট ভিউপোর্ট প্রস্থে প্রযোজ্য হয়।