Source

કોષ્ટકો

બુટસ્ટ્રેપ સાથે કોષ્ટકોના ઑપ્ટ-ઇન સ્ટાઇલ માટે દસ્તાવેજીકરણ અને ઉદાહરણો (જાવાસ્ક્રિપ્ટ પ્લગિન્સમાં તેમના પ્રચલિત ઉપયોગને જોતાં).

ઉદાહરણો

કૅલેન્ડર્સ અને તારીખ પીકર જેવા તૃતીય-પક્ષ વિજેટ્સમાં કોષ્ટકોના વ્યાપક ઉપયોગને કારણે, અમે અમારા કોષ્ટકોને પસંદ કરવા માટે ડિઝાઇન કર્યા છે . .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અથવા s ને આછો અથવા ઘેરો રાખોડી દેખાવા .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-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

નોંધ કરો કે બ્રાઉઝર્સ હાલમાં શ્રેણી સંદર્ભ ક્વેરીઝને સમર્થન આપતા નથી, તેથી અમે આ સરખામણીઓ માટે ઉચ્ચ ચોકસાઇ સાથે મૂલ્યોનો ઉપયોગ કરીને અપૂર્ણાંક પહોળાઈ (જે દાખલા તરીકે, ઉચ્ચ-dpi ઉપકરણો પર ચોક્કસ પરિસ્થિતિઓમાં થઈ શકે છે) સાથે ઉપસર્ગો 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>