तालिकाहरू
बुटस्ट्र्यापको साथ (जाभास्क्रिप्ट प्लगइनहरूमा तिनीहरूको प्रचलित प्रयोग दिएर) तालिकाहरूको अप्ट-इन स्टाइलको लागि कागजात र उदाहरणहरू।
क्यालेन्डरहरू र मिति पिकरहरू जस्ता तेस्रो-पक्ष विजेटहरूमा तालिकाहरूको व्यापक प्रयोगको कारणले, हामीले हाम्रा तालिकाहरूलाई अप्ट-इन गर्न डिजाइन गरेका छौं । केवल आधार वर्गलाई .table
कुनै पनि मा थप्नुहोस् <table>
, त्यसपछि अनुकूलन शैलीहरू वा हाम्रा विभिन्न समावेश परिमार्जनक वर्गहरूसँग विस्तार गर्नुहोस्।
सबैभन्दा आधारभूत तालिका मार्कअप प्रयोग गर्दै, यहाँ .table
बुटस्ट्र्यापमा कसरी आधारित तालिकाहरू देखिन्छन्। सबै तालिका शैलीहरू बुटस्ट्र्याप 4 मा इनहेरिट गरिएका छन् , जसको अर्थ कुनै पनि नेस्टेड तालिकाहरू अभिभावक जस्तै शैलीमा हुनेछन्।
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
<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
.
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
<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
वा s .thead-dark
लाई <thead>
हल्का वा गाढा खैरो देखाउनको लागि।
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
<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>
।
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
<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>
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
<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
तालिका र कक्षहरूको सबै छेउमा किनाराहरू थप्नुहोस् ।
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी द बर्ड |
<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>
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी द बर्ड |
<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-borderless
बोर्डर बिना तालिकाको लागि थप्नुहोस् ।
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी द बर्ड |
<table class="table table-borderless">
<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-borderless
अँध्यारो टेबलहरूमा पनि प्रयोग गर्न सकिन्छ।
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी द बर्ड |
<table class="table table-borderless 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>
।
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी द बर्ड |
<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>
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी द बर्ड |
<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
सेल प्याडिङलाई आधामा काटेर तालिकाहरू थप कम्प्याक्ट बनाउन थप्नुहोस् ।
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी द बर्ड |
<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>
# | पहिले | अन्तिम | ह्यान्डल |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी द बर्ड |
<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>
तालिका पङ्क्तिहरू वा व्यक्तिगत कक्षहरू रङ गर्न सन्दर्भ वर्गहरू प्रयोग गर्नुहोस्।
कक्षा | हेडिङ | हेडिङ |
---|---|---|
सक्रिय | सेल | सेल |
पूर्वनिर्धारित | सेल | सेल |
प्राथमिक | सेल | सेल |
माध्यमिक | सेल | सेल |
सफलता | सेल | सेल |
Danger | Cell | Cell |
Warning | Cell | Cell |
Info | Cell | Cell |
Light | Cell | Cell |
Dark | Cell | Cell |
<!-- 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>
Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.
# | Heading | Heading |
---|---|---|
1 | Cell | Cell |
2 | Cell | Cell |
3 | Cell | Cell |
4 | Cell | Cell |
5 | Cell | Cell |
6 | Cell | Cell |
7 | Cell | Cell |
8 | Cell | Cell |
9 | Cell | Cell |
<!-- 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>
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only
class.
Create responsive tables by wrapping any .table
with .table-responsive{-sm|-md|-lg|-xl}
, making the table scroll horizontally at each max-width
breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.
Note that since browsers do not currently support range context queries, we work around the limitations of min-
and max-
prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.
A <caption>
functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<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>
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table
with .table-responsive
. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}
.
Vertical clipping/truncation
Responsive tables make use of overflow-y: hidden
, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
Across every breakpoint, use .table-responsive
for horizontally scrolling tables.
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Use .table-responsive{-sm|-md|-lg|-xl}
as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
यी तालिकाहरू भ्युपोर्ट चौडाइहरूमा तिनीहरूको प्रतिक्रियाशील शैलीहरू लागू नभएसम्म बिग्रेको देखिन सक्छ।
# | हेडिङ | हेडिङ | हेडिङ | हेडिङ | हेडिङ | हेडिङ | हेडिङ | हेडिङ |
---|---|---|---|---|---|---|---|---|
१ | सेल | सेल | सेल | सेल | सेल | सेल | सेल | सेल |
२ | सेल | सेल | सेल | सेल | सेल | सेल | सेल | सेल |
३ | सेल | सेल | सेल | सेल | सेल | सेल | सेल | सेल |
<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>