বুটস্ট্র্যাপের সাথে টেবিলের অপ্ট-ইন স্টাইলিংয়ের জন্য ডকুমেন্টেশন এবং উদাহরণ (জাভাস্ক্রিপ্ট প্লাগইনগুলিতে তাদের প্রচলিত ব্যবহার দেওয়া হয়েছে)।
উদাহরণ
ক্যালেন্ডার এবং তারিখ বাছাইকারীর মত তৃতীয় পক্ষের উইজেটগুলিতে টেবিলের ব্যাপক ব্যবহারের কারণে, আমরা আমাদের টেবিলগুলিকে অপ্ট-ইন করার জন্য ডিজাইন করেছি ৷ .tableশুধু যেকোনও বেস ক্লাস যোগ করুন <table>, তারপর কাস্টম স্টাইল বা আমাদের বিভিন্ন অন্তর্ভুক্ত মডিফায়ার ক্লাসের সাথে প্রসারিত করুন।
সবচেয়ে বেসিক টেবিল মার্কআপ ব্যবহার করে, .tableবুটস্ট্র্যাপে কীভাবে ভিত্তিক টেবিল দেখায় তা এখানে। সমস্ত টেবিল শৈলী বুটস্ট্র্যাপ 4-এ উত্তরাধিকারসূত্রে পাওয়া যায় , যার অর্থ যে কোনো নেস্টেড টেবিল প্যারেন্টের মতো একইভাবে স্টাইল করা হবে।
.table-borderedটেবিল এবং কক্ষের চারপাশে সীমানা যোগ করুন ।
#
প্রথম
শেষ
হাতল
1
মার্ক
অটো
@এমডিও
2
জ্যাকব
থর্নটন
@ফ্যাট
3
ল্যারি দ্য বার্ড
@টুইটার
<tableclass="table table-bordered"><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>
#
প্রথম
শেষ
হাতল
1
মার্ক
অটো
@এমডিও
2
জ্যাকব
থর্নটন
@ফ্যাট
3
ল্যারি দ্য বার্ড
@টুইটার
<tableclass="table table-bordered table-dark"><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>
সীমানাবিহীন টেবিল
.table-borderlessসীমানা ছাড়া একটি টেবিলের জন্য যোগ করুন .
#
প্রথম
শেষ
হাতল
1
মার্ক
অটো
@এমডিও
2
জ্যাকব
থর্নটন
@ফ্যাট
3
ল্যারি দ্য বার্ড
@টুইটার
<tableclass="table table-borderless"><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>
.table-borderlessঅন্ধকার টেবিলেও ব্যবহার করা যেতে পারে।
#
প্রথম
শেষ
হাতল
1
মার্ক
অটো
@এমডিও
2
জ্যাকব
থর্নটন
@ফ্যাট
3
ল্যারি দ্য বার্ড
@টুইটার
<tableclass="table table-borderless table-dark"><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>
ঘোরাফেরাযোগ্য সারি
.table-hoverএকটি এর মধ্যে টেবিলের সারিতে একটি হোভার অবস্থা সক্ষম করতে যোগ করুন <tbody>।
#
প্রথম
শেষ
হাতল
1
মার্ক
অটো
@এমডিও
2
জ্যাকব
থর্নটন
@ফ্যাট
3
ল্যারি দ্য বার্ড
@টুইটার
<tableclass="table table-hover"><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>
#
প্রথম
শেষ
হাতল
1
মার্ক
অটো
@এমডিও
2
জ্যাকব
থর্নটন
@ফ্যাট
3
ল্যারি দ্য বার্ড
@টুইটার
<tableclass="table table-hover table-dark"><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>
ছোট টেবিল
.table-smঅর্ধেক সেল প্যাডিং কাটা দ্বারা টেবিল আরো কম্প্যাক্ট করতে যোগ করুন .
#
প্রথম
শেষ
হাতল
1
মার্ক
অটো
@এমডিও
2
জ্যাকব
থর্নটন
@ফ্যাট
3
ল্যারি দ্য বার্ড
@টুইটার
<tableclass="table table-sm"><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>
#
প্রথম
শেষ
হাতল
1
মার্ক
অটো
@এমডিও
2
জ্যাকব
থর্নটন
@ফ্যাট
3
ল্যারি দ্য বার্ড
@টুইটার
<tableclass="table table-sm table-dark"><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 rows --><trclass="table-active">...</tr><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-active">...</td><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>
<!-- On rows --><trclass="bg-primary">...</tr><trclass="bg-success">...</tr><trclass="bg-warning">...</tr><trclass="bg-danger">...</tr><trclass="bg-info">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="bg-primary">...</td><tdclass="bg-success">...</td><tdclass="bg-warning">...</td><tdclass="bg-danger">...</td><tdclass="bg-info">...</td></tr>
সহায়ক প্রযুক্তির অর্থ বোঝানো
অর্থ যোগ করার জন্য রঙ ব্যবহার করা শুধুমাত্র একটি ভিজ্যুয়াল ইঙ্গিত দেয়, যা সহায়ক প্রযুক্তির ব্যবহারকারীদের - যেমন স্ক্রিন রিডারদের কাছে জানানো হবে না। নিশ্চিত করুন যে রঙ দ্বারা নির্দেশিত তথ্য হয় বিষয়বস্তু থেকে স্পষ্ট হয় (যেমন দৃশ্যমান পাঠ্য), অথবা বিকল্প উপায়ে অন্তর্ভুক্ত করা হয়েছে, যেমন .sr-onlyক্লাসের সাথে লুকানো অতিরিক্ত পাঠ্য।
.tableযেকোনও দিয়ে মোড়ানোর মাধ্যমে প্রতিক্রিয়াশীল টেবিল তৈরি করুন .table-responsive{-sm|-md|-lg|-xl}, টেবিলটিকে প্রতিটিতে অনুভূমিকভাবে স্ক্রোল করুনmax-width576px, 768px, 992px, এবং 1120px পর্যন্ত (তবে অন্তর্ভুক্ত নয়)
মনে রাখবেন যেহেতু ব্রাউজারগুলি বর্তমানে
পরিসরের প্রসঙ্গ প্রশ্নগুলিকে সমর্থন করে না, তাই আমরা এই তুলনাগুলির জন্য উচ্চতর নির্ভুলতার সাথে মানগুলি ব্যবহার করে ভগ্নাংশের প্রস্থ (যেটি উচ্চ-ডিপিআই ডিভাইসে নির্দিষ্ট শর্তে ঘটতে পারে) সহ উপসর্গ min-এবংmax- ভিউপোর্টগুলির সীমাবদ্ধতাগুলিকে ঘিরে কাজ করি
। .
ক্যাপশন
একটি <caption>টেবিলের জন্য একটি শিরোনাম মত একটি ফাংশন. এটি স্ক্রিন রিডার সহ ব্যবহারকারীদের একটি টেবিল খুঁজে পেতে এবং এটির বিষয়ে বুঝতে এবং তারা এটি পড়তে চায় কিনা তা নির্ধারণ করতে সহায়তা করে৷
ব্যবহারকারীদের তালিকা
#
প্রথম
শেষ
হাতল
1
মার্ক
অটো
@এমডিও
2
জ্যাকব
থর্নটন
@ফ্যাট
3
ল্যারি
পাখি
@টুইটার
<tableclass="table"><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}।
উল্লম্ব ক্লিপিং/ছাঁটা
প্রতিক্রিয়াশীল টেবিলগুলি ব্যবহার করে overflow-y: hidden, যা টেবিলের নীচে বা উপরের প্রান্তের বাইরে যে কোনও সামগ্রীকে ক্লিপ করে। বিশেষ করে, এটি ড্রপডাউন মেনু এবং অন্যান্য তৃতীয় পক্ষের উইজেটগুলিকে ক্লিপ করতে পারে৷
সবসময় প্রতিক্রিয়াশীল
প্রতিটি ব্রেকপয়েন্ট জুড়ে, .table-responsiveঅনুভূমিকভাবে স্ক্রলিং টেবিলের জন্য ব্যবহার করুন।
.table-responsive{-sm|-md|-lg|-xl}একটি নির্দিষ্ট ব্রেকপয়েন্ট পর্যন্ত প্রতিক্রিয়াশীল টেবিল তৈরি করতে প্রয়োজন অনুযায়ী ব্যবহার করুন । সেই ব্রেকপয়েন্ট থেকে এবং উপরে, টেবিলটি স্বাভাবিকভাবে আচরণ করবে এবং অনুভূমিকভাবে স্ক্রোল করবে না।
এই টেবিলগুলি ভাঙ্গা দেখা যেতে পারে যতক্ষণ না তাদের প্রতিক্রিয়াশীল শৈলী নির্দিষ্ট ভিউপোর্ট প্রস্থে প্রযোজ্য হয়।