Source

ਟੇਬਲ

ਬੂਟਸਟਰੈਪ ਦੇ ਨਾਲ (ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਪਲੱਗਇਨਾਂ ਵਿੱਚ ਉਹਨਾਂ ਦੀ ਪ੍ਰਚਲਿਤ ਵਰਤੋਂ ਦੇ ਮੱਦੇਨਜ਼ਰ) ਟੇਬਲਾਂ ਦੀ ਔਪਟ-ਇਨ ਸਟਾਈਲਿੰਗ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ।

ਉਦਾਹਰਨਾਂ

ਕੈਲੰਡਰ ਅਤੇ ਮਿਤੀ ਚੋਣਕਾਰ ਵਰਗੇ ਤੀਜੀ-ਧਿਰ ਵਿਜੇਟਸ ਵਿੱਚ ਟੇਬਲਾਂ ਦੀ ਵਿਆਪਕ ਵਰਤੋਂ ਦੇ ਕਾਰਨ, ਅਸੀਂ ਆਪਣੀਆਂ ਟੇਬਲਾਂ ਨੂੰ ਆਪਟ-ਇਨ ਕਰਨ ਲਈ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਹੈ । ਬਸ .tableਕਿਸੇ ਵੀ ਵਿੱਚ ਬੇਸ ਕਲਾਸ ਸ਼ਾਮਲ ਕਰੋ <table>, ਫਿਰ ਕਸਟਮ ਸਟਾਈਲ ਜਾਂ ਸਾਡੀਆਂ ਵੱਖ-ਵੱਖ ਸ਼ਾਮਲ ਸੋਧਕ ਕਲਾਸਾਂ ਨਾਲ ਵਿਸਤਾਰ ਕਰੋ।

ਸਭ ਤੋਂ ਬੁਨਿਆਦੀ ਟੇਬਲ ਮਾਰਕਅੱਪ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਇੱਥੇ ਦੱਸਿਆ .tableਗਿਆ ਹੈ ਕਿ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਆਧਾਰਿਤ ਟੇਬਲ ਕਿਵੇਂ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ। ਸਾਰੀਆਂ ਟੇਬਲ ਸ਼ੈਲੀਆਂ ਨੂੰ ਬੂਟਸਟਰੈਪ 4 ਵਿੱਚ ਵਿਰਾਸਤ ਵਿੱਚ ਪ੍ਰਾਪਤ ਕੀਤਾ ਗਿਆ ਹੈ , ਮਤਲਬ ਕਿ ਕੋਈ ਵੀ ਨੇਸਟਡ ਟੇਬਲ ਪੇਰੈਂਟ ਵਾਂਗ ਹੀ ਸਟਾਈਲ ਕੀਤਾ ਜਾਵੇਗਾ।

# ਪਹਿਲਾਂ ਆਖਰੀ ਹੈਂਡਲ
1 ਮਾਰਕ ਓਟੋ @mdo
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 ਮਾਰਕ ਓਟੋ @mdo
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ਜਾਂ s ਨੂੰ ਹਲਕਾ ਜਾਂ ਗੂੜ੍ਹਾ ਸਲੇਟੀ ਦਿਖਾਈ .thead-darkਦੇਣ ਲਈ ।<thead>

# ਪਹਿਲਾਂ ਆਖਰੀ ਹੈਂਡਲ
1 ਮਾਰਕ ਓਟੋ @mdo
2 ਜੈਕਬ ਥੋਰਨਟਨ @ਚਰਬੀ
3 ਲੈਰੀ ਪੰਛੀ @ਟਵਿੱਟਰ
# ਪਹਿਲਾਂ ਆਖਰੀ ਹੈਂਡਲ
1 ਮਾਰਕ ਓਟੋ @mdo
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 ਮਾਰਕ ਓਟੋ @mdo
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 ਮਾਰਕ ਓਟੋ @mdo
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 ਮਾਰਕ ਓਟੋ @mdo
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 ਮਾਰਕ ਓਟੋ @mdo
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-borderlessਬਾਰਡਰਾਂ ਤੋਂ ਬਿਨਾਂ ਟੇਬਲ ਲਈ ਸ਼ਾਮਲ ਕਰੋ ।

# ਪਹਿਲਾਂ ਆਖਰੀ ਹੈਂਡਲ
1 ਮਾਰਕ ਓਟੋ @mdo
2 ਜੈਕਬ ਥੋਰਨਟਨ @ਚਰਬੀ
3 ਲੈਰੀ ਦ ਬਰਡ @ਟਵਿੱਟਰ
<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 ਲੈਰੀ ਦ ਬਰਡ @ਟਵਿੱਟਰ
<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 ਲੈਰੀ ਦ ਬਰਡ @ਟਵਿੱਟਰ
<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 ਲੈਰੀ ਦ ਬਰਡ @ਟਵਿੱਟਰ
<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 ਲੈਰੀ ਦ ਬਰਡ @ਟਵਿੱਟਰ
<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 ਲੈਰੀ ਦ ਬਰਡ @ਟਵਿੱਟਰ
<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

ਨੋਟ ਕਰੋ ਕਿ ਕਿਉਂਕਿ ਬ੍ਰਾਊਜ਼ਰ ਇਸ ਵੇਲੇ ਰੇਂਜ ਸੰਦਰਭ ਸਵਾਲਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਨ, ਅਸੀਂ ਇਹਨਾਂ ਤੁਲਨਾਵਾਂ ਲਈ ਉੱਚ ਸ਼ੁੱਧਤਾ ਵਾਲੇ ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਫ੍ਰੈਕਸ਼ਨਲ ਚੌੜਾਈ (ਜੋ ਕਿ ਉੱਚ-dpi ਡਿਵਾਈਸਾਂ 'ਤੇ ਕੁਝ ਸ਼ਰਤਾਂ ਅਧੀਨ ਹੋ ਸਕਦੇ ਹਨ) ਦੇ ਨਾਲ ਅਗੇਤਰਾਂ min-ਅਤੇmax- ਵਿਊਪੋਰਟਾਂ ਦੀਆਂ ਸੀਮਾਵਾਂ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਕੰਮ ਕਰਦੇ ਹਾਂ। .

ਸੁਰਖੀਆਂ

ਇੱਕ <caption>ਫੰਕਸ਼ਨ ਇੱਕ ਟੇਬਲ ਲਈ ਸਿਰਲੇਖ ਵਾਂਗ ਹੈ। ਇਹ ਸਕ੍ਰੀਨ ਰੀਡਰ ਵਾਲੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇੱਕ ਸਾਰਣੀ ਲੱਭਣ ਅਤੇ ਇਹ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਕਿ ਇਹ ਕਿਸ ਬਾਰੇ ਹੈ ਅਤੇ ਫੈਸਲਾ ਕਰਦਾ ਹੈ ਕਿ ਕੀ ਉਹ ਇਸਨੂੰ ਪੜ੍ਹਨਾ ਚਾਹੁੰਦੇ ਹਨ।

ਉਪਭੋਗਤਾਵਾਂ ਦੀ ਸੂਚੀ
# ਪਹਿਲਾਂ ਆਖਰੀ ਹੈਂਡਲ
1 ਮਾਰਕ ਓਟੋ @mdo
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 ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# ਸਿਰਲੇਖ ਸਿਰਲੇਖ ਸਿਰਲੇਖ ਸਿਰਲੇਖ ਸਿਰਲੇਖ ਸਿਰਲੇਖ ਸਿਰਲੇਖ ਸਿਰਲੇਖ
1 ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ
2 ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ
3 ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# ਸਿਰਲੇਖ ਸਿਰਲੇਖ ਸਿਰਲੇਖ ਸਿਰਲੇਖ ਸਿਰਲੇਖ ਸਿਰਲੇਖ ਸਿਰਲੇਖ ਸਿਰਲੇਖ
1 ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ
2 ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ
3 ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# ਸਿਰਲੇਖ ਸਿਰਲੇਖ ਸਿਰਲੇਖ ਸਿਰਲੇਖ ਸਿਰਲੇਖ ਸਿਰਲੇਖ ਸਿਰਲੇਖ ਸਿਰਲੇਖ
1 ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ
2 ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ
3 ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ ਸੈੱਲ
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>