Source

টেবিল

বুটস্ট্র্যাপের সাথে টেবিলের অপ্ট-ইন স্টাইলিংয়ের জন্য ডকুমেন্টেশন এবং উদাহরণ (জাভাস্ক্রিপ্ট প্লাগইনগুলিতে তাদের প্রচলিত ব্যবহার দেওয়া হয়েছে)।

উদাহরণ

ক্যালেন্ডার এবং তারিখ বাছাইকারীর মত তৃতীয় পক্ষের উইজেটগুলিতে টেবিলের ব্যাপক ব্যবহারের কারণে, আমরা আমাদের টেবিলগুলিকে অপ্ট-ইন করার জন্য ডিজাইন করেছি ৷ .tableশুধু যেকোনও বেস ক্লাস যোগ করুন <table>, তারপর কাস্টম স্টাইল বা আমাদের বিভিন্ন অন্তর্ভুক্ত মডিফায়ার ক্লাসের সাথে প্রসারিত করুন।

সবচেয়ে বেসিক টেবিল মার্কআপ ব্যবহার করে, .tableবুটস্ট্র্যাপে কীভাবে ভিত্তিক টেবিল দেখায় তা এখানে। সমস্ত টেবিল শৈলী বুটস্ট্র্যাপ 4-এ উত্তরাধিকারসূত্রে পাওয়া যায় , যার অর্থ যে কোনো নেস্টেড টেবিল প্যারেন্টের মতো একইভাবে স্টাইল করা হবে।

#	প্রথম	শেষ	হাতল
1	মার্ক	অটো	@এমডিও
2	জ্যাকব	থর্নটন	@ফ্যাট
3	ল্যারি	পাখি	@টুইটার

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

এছাড়াও আপনি রং উল্টাতে পারেন—অন্ধকার ব্যাকগ্রাউন্ডে হালকা টেক্সট-এর সাথে .table-dark।

#	প্রথম	শেষ	হাতল
1	মার্ক	অটো	@এমডিও
2	জ্যাকব	থর্নটন	@ফ্যাট
3	ল্যারি	পাখি	@টুইটার

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

টেবিল হেড অপশন

টেবিল এবং গাঢ় টেবিলের মতো, মডিফায়ার ক্লাস ব্যবহার করুন .thead-lightবা .thead-darkগুলিকে <thead>হালকা বা গাঢ় ধূসর দেখান।

#	প্রথম	শেষ	হাতল
1	মার্ক	অটো	@এমডিও
2	জ্যাকব	থর্নটন	@ফ্যাট
3	ল্যারি	পাখি	@টুইটার

#	প্রথম	শেষ	হাতল
1	মার্ক	অটো	@এমডিও
2	জ্যাকব	থর্নটন	@ফ্যাট
3	ল্যারি	পাখি	@টুইটার

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

ডোরাকাটা সারি

.table-stripedএর মধ্যে যেকোনো টেবিল সারিতে জেব্রা-স্ট্রাইপিং যোগ করতে ব্যবহার করুন <tbody>।

#	প্রথম	শেষ	হাতল
1	মার্ক	অটো	@এমডিও
2	জ্যাকব	থর্নটন	@ফ্যাট
3	ল্যারি	পাখি	@টুইটার

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	প্রথম	শেষ	হাতল
1	মার্ক	অটো	@এমডিও
2	জ্যাকব	থর্নটন	@ফ্যাট
3	ল্যারি	পাখি	@টুইটার

<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

সীমানাযুক্ত টেবিল

.table-borderedটেবিল এবং কক্ষের চারপাশে সীমানা যোগ করুন ।

#	প্রথম	শেষ	হাতল
1	মার্ক	অটো	@এমডিও
2	জ্যাকব	থর্নটন	@ফ্যাট
3	ল্যারি দ্য বার্ড		@টুইটার

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	প্রথম	শেষ	হাতল
1	মার্ক	অটো	@এমডিও
2	জ্যাকব	থর্নটন	@ফ্যাট
3	ল্যারি দ্য বার্ড		@টুইটার

<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

ঘোরাফেরাযোগ্য সারি

.table-hoverএকটি এর মধ্যে টেবিলের সারিতে একটি হোভার অবস্থা সক্ষম করতে যোগ করুন <tbody>।

#	প্রথম	শেষ	হাতল
1	মার্ক	অটো	@এমডিও
2	জ্যাকব	থর্নটন	@ফ্যাট
3	ল্যারি দ্য বার্ড		@টুইটার

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	প্রথম	শেষ	হাতল
1	মার্ক	অটো	@এমডিও
2	জ্যাকব	থর্নটন	@ফ্যাট
3	ল্যারি দ্য বার্ড		@টুইটার

<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

ছোট টেবিল

.table-smঅর্ধেক সেল প্যাডিং কাটা দ্বারা টেবিল আরো কম্প্যাক্ট করতে যোগ করুন .

#	প্রথম	শেষ	হাতল
1	মার্ক	অটো	@এমডিও
2	জ্যাকব	থর্নটন	@ফ্যাট
3	ল্যারি দ্য বার্ড		@টুইটার

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	প্রথম	শেষ	হাতল
1	মার্ক	অটো	@এমডিও
2	জ্যাকব	থর্নটন	@ফ্যাট
3	ল্যারি দ্য বার্ড		@টুইটার

<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

প্রাসঙ্গিক ক্লাস

সারণি সারি বা পৃথক ঘর রঙ করতে প্রাসঙ্গিক ক্লাস ব্যবহার করুন।

ক্লাস	শিরোনাম	শিরোনাম
সক্রিয়	সেল	সেল
ডিফল্ট	সেল	সেল
প্রাথমিক	সেল	সেল
মাধ্যমিক	সেল	সেল
সফলতা	সেল	সেল
বিপদ	সেল	সেল
সতর্কতা	সেল	সেল
তথ্য	সেল	সেল
আলো	সেল	সেল
অন্ধকার	সেল	সেল

<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

ডার্ক টেবিলের সাথে নিয়মিত টেবিলের ব্যাকগ্রাউন্ড ভেরিয়েন্ট পাওয়া যায় না, তবে আপনি অনুরূপ শৈলী অর্জন করতে টেক্সট বা ব্যাকগ্রাউন্ড ইউটিলিটি ব্যবহার করতে পারেন।

#	শিরোনাম	শিরোনাম
1	সেল	সেল
2	সেল	সেল
3	সেল	সেল
4	সেল	সেল
5	সেল	সেল
6	সেল	সেল
7	সেল	সেল
8	সেল	সেল
9	সেল	সেল

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>

সহায়ক প্রযুক্তির অর্থ বোঝানো

অর্থ যোগ করার জন্য রঙ ব্যবহার করা শুধুমাত্র একটি ভিজ্যুয়াল ইঙ্গিত দেয়, যা সহায়ক প্রযুক্তির ব্যবহারকারীদের - যেমন স্ক্রিন রিডারদের কাছে জানানো হবে না। নিশ্চিত করুন যে রঙ দ্বারা নির্দেশিত তথ্য হয় বিষয়বস্তু থেকে স্পষ্ট হয় (যেমন দৃশ্যমান পাঠ্য), অথবা বিকল্প উপায়ে অন্তর্ভুক্ত করা হয়েছে, যেমন .sr-onlyক্লাসের সাথে লুকানো অতিরিক্ত পাঠ্য।

576px, 768px, 992px, এবং 1120px পর্যন্ত (তবে অন্তর্ভুক্ত নয়) প্রতিটি ব্রেকপয়েন্টে টেবিলটিকে অনুভূমিকভাবে স্ক্রোল করে, যেকোনো একটি .tableদিয়ে মোড়ানোর মাধ্যমে প্রতিক্রিয়াশীল টেবিল তৈরি করুন ।.table-responsive{-sm|-md|-lg|-xl}max-width

মনে রাখবেন যেহেতু ব্রাউজারগুলি বর্তমানে পরিসরের প্রসঙ্গ প্রশ্নগুলিকে সমর্থন করে না, তাই আমরা এই তুলনাগুলির জন্য উচ্চতর নির্ভুলতার সাথে মানগুলি ব্যবহার করে ভগ্নাংশের প্রস্থ (যেটি উচ্চ-ডিপিআই ডিভাইসে নির্দিষ্ট শর্তে ঘটতে পারে) সহ উপসর্গ min-এবংmax- ভিউপোর্টগুলির সীমাবদ্ধতাগুলিকে ঘিরে কাজ করি । .

ক্যাপশন

একটি <caption>টেবিলের জন্য একটি শিরোনাম মত একটি ফাংশন. এটি স্ক্রিন রিডার সহ ব্যবহারকারীদের একটি টেবিল খুঁজে পেতে এবং এটির বিষয়ে বুঝতে এবং তারা এটি পড়তে চায় কিনা তা নির্ধারণ করতে সহায়তা করে৷

ব্যবহারকারীদের তালিকা
#	প্রথম	শেষ	হাতল
1	মার্ক	অটো	@এমডিও
2	জ্যাকব	থর্নটন	@ফ্যাট
3	ল্যারি	পাখি	@টুইটার

<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="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অনুভূমিকভাবে স্ক্রলিং টেবিলের জন্য ব্যবহার করুন।

#	শিরোনাম	শিরোনাম	শিরোনাম	শিরোনাম	শিরোনাম	শিরোনাম	শিরোনাম	শিরোনাম	শিরোনাম
1	সেল	সেল	সেল	সেল	সেল	সেল	সেল	সেল	সেল
2	সেল	সেল	সেল	সেল	সেল	সেল	সেল	সেল	সেল
3	সেল	সেল	সেল	সেল	সেল	সেল	সেল	সেল	সেল

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ব্রেকপয়েন্ট নির্দিষ্ট

.table-responsive{-sm|-md|-lg|-xl}একটি নির্দিষ্ট ব্রেকপয়েন্ট পর্যন্ত প্রতিক্রিয়াশীল টেবিল তৈরি করতে প্রয়োজন অনুযায়ী ব্যবহার করুন । সেই ব্রেকপয়েন্ট থেকে এবং উপরে, টেবিলটি স্বাভাবিকভাবে আচরণ করবে এবং অনুভূমিকভাবে স্ক্রোল করবে না।

#	শিরোনাম	শিরোনাম	শিরোনাম	শিরোনাম	শিরোনাম
1	সেল	সেল	সেল	সেল	সেল
2	সেল	সেল	সেল	সেল	সেল
3	সেল	সেল	সেল	সেল	সেল

#	শিরোনাম	শিরোনাম	শিরোনাম	শিরোনাম	শিরোনাম
1	সেল	সেল	সেল	সেল	সেল
2	সেল	সেল	সেল	সেল	সেল
3	সেল	সেল	সেল	সেল	সেল

#	শিরোনাম	শিরোনাম	শিরোনাম	শিরোনাম	শিরোনাম
1	সেল	সেল	সেল	সেল	সেল
2	সেল	সেল	সেল	সেল	সেল
3	সেল	সেল	সেল	সেল	সেল

#	শিরোনাম	শিরোনাম	শিরোনাম	শিরোনাম	শিরোনাম
1	সেল	সেল	সেল	সেল	সেল
2	সেল	সেল	সেল	সেল	সেল
3	সেল	সেল	সেল	সেল	সেল

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>