in English

ಕೋಷ್ಟಕಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನೊಂದಿಗೆ (ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್‌ಗಳಲ್ಲಿ ಅವುಗಳ ಪ್ರಚಲಿತ ಬಳಕೆಯನ್ನು ನೀಡಲಾಗಿದೆ) ಟೇಬಲ್‌ಗಳ ಆಯ್ಕೆ-ಸ್ಟೈಲಿಂಗ್‌ಗಾಗಿ ದಾಖಲಾತಿ ಮತ್ತು ಉದಾಹರಣೆಗಳು.

ಉದಾಹರಣೆಗಳು

ಕ್ಯಾಲೆಂಡರ್‌ಗಳು ಮತ್ತು ದಿನಾಂಕ ಪಿಕ್ಕರ್‌ಗಳಂತಹ ಥರ್ಡ್-ಪಾರ್ಟಿ ವಿಜೆಟ್‌ಗಳಾದ್ಯಂತ ಟೇಬಲ್‌ಗಳ ವ್ಯಾಪಕ ಬಳಕೆಯಿಂದಾಗಿ, ನಾವು ನಮ್ಮ ಟೇಬಲ್‌ಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುವಂತೆ ವಿನ್ಯಾಸಗೊಳಿಸಿದ್ದೇವೆ . .tableಯಾವುದಾದರೂ ಮೂಲ ವರ್ಗವನ್ನು ಸೇರಿಸಿ <table>, ನಂತರ ಕಸ್ಟಮ್ ಶೈಲಿಗಳು ಅಥವಾ ನಮ್ಮ ವಿವಿಧ ಒಳಗೊಂಡಿರುವ ಪರಿವರ್ತಕ ವರ್ಗಗಳೊಂದಿಗೆ ವಿಸ್ತರಿಸಿ.

ಅತ್ಯಂತ ಮೂಲಭೂತ ಟೇಬಲ್ ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು, .tableಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಲ್ಲಿ-ಆಧಾರಿತ ಕೋಷ್ಟಕಗಳು ಹೇಗೆ ಕಾಣುತ್ತವೆ ಎಂಬುದು ಇಲ್ಲಿದೆ. ಎಲ್ಲಾ ಟೇಬಲ್ ಶೈಲಿಗಳು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 4 ರಲ್ಲಿ ಆನುವಂಶಿಕವಾಗಿರುತ್ತವೆ , ಅಂದರೆ ಯಾವುದೇ ನೆಸ್ಟೆಡ್ ಟೇಬಲ್‌ಗಳನ್ನು ಪೋಷಕ ರೀತಿಯಲ್ಲಿಯೇ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗುತ್ತದೆ.

# ಪ್ರಥಮ ಕೊನೆಯದು ಹ್ಯಾಂಡಲ್
1 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಪಕ್ಷಿ @twitter 
<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 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಪಕ್ಷಿ @twitter 
<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 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಪಕ್ಷಿ @twitter
# ಪ್ರಥಮ ಕೊನೆಯದು ಹ್ಯಾಂಡಲ್
1 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಪಕ್ಷಿ @twitter 
<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 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಪಕ್ಷಿ @twitter 
<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 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಪಕ್ಷಿ @twitter 
<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 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಬರ್ಡ್ @twitter 
<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 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಬರ್ಡ್ @twitter 
<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ಗಡಿಗಳಿಲ್ಲದ ಟೇಬಲ್‌ಗಾಗಿ ಸೇರಿಸಿ .

# ಪ್ರಥಮ ಕೊನೆಯದು ಹ್ಯಾಂಡಲ್
1 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಬರ್ಡ್ @twitter 
<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ಡಾರ್ಕ್ ಟೇಬಲ್‌ಗಳಲ್ಲಿಯೂ ಬಳಸಬಹುದು.

# ಪ್ರಥಮ ಕೊನೆಯದು ಹ್ಯಾಂಡಲ್
1 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಬರ್ಡ್ @twitter 
<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>.

# ಪ್ರಥಮ ಕೊನೆಯದು ಹ್ಯಾಂಡಲ್
1 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಬರ್ಡ್ @twitter 
<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 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಬರ್ಡ್ @twitter 
<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 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಬರ್ಡ್ @twitter 
<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 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಬರ್ಡ್ @twitter 
<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 ಮಾರ್ಕ್ ಒಟ್ಟೊ @mdo
2 ಜಾಕೋಬ್ ಥಾರ್ನ್ಟನ್ @ಕೊಬ್ಬು
3 ಲ್ಯಾರಿ ಪಕ್ಷಿ @twitter 
<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>