Source

Tables

Takaddun bayanai da misalai don ficewa salon salon tebur (idan aka ba su yawan amfani da su a cikin plugins JavaScript) tare da Bootstrap.

Misalai

Saboda yaɗuwar amfani da tebura a cikin widgets na ɓangare na uku kamar kalanda da masu zaɓen kwanan wata, mun ƙirƙira teburin mu don shiga . Kawai ƙara ajin tushe .tablezuwa kowane <table>, sannan ƙara tare da salo na al'ada ko azuzuwan gyare-gyare daban-daban na mu.

Yin amfani da mafi mahimmancin alamar tebur, ga yadda .tabletebur na tushen ke kallo a cikin Bootstrap. An gaji duk salon tebur a cikin Bootstrap 4 , ma'ana kowane tebur na gida za a tsara shi daidai da iyaye.

# Na farko Karshe Hannu
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry Tsuntsu @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>

Hakanan zaka iya juyar da launuka - tare da rubutu mai haske akan bangon duhu - tare da .table-dark.

# Na farko Karshe Hannu
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry Tsuntsu @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>

Zaɓuɓɓukan shugaban tebur

Kama da teburi da teburi masu duhu, yi amfani da azuzuwan masu gyara .thead-lightko .thead-darkdon sanya <thead>s ya zama haske ko launin toka mai duhu.

# Na farko Karshe Hannu
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry Tsuntsu @twitter
# Na farko Karshe Hannu
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry Tsuntsu @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>

Layukan tsige

Yi amfani .table-stripeddon ƙara zakin zebra zuwa kowane jere na tebur a cikin <tbody>.

# Na farko Karshe Hannu
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry Tsuntsu @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>
# Na farko Karshe Hannu
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry Tsuntsu @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>

Tebur mai iyaka

Ƙara .table-bordereddon iyakoki a duk bangarorin tebur da sel.

# Na farko Karshe Hannu
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry the Bird @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>
# Na farko Karshe Hannu
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry the Bird @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>

Tebur mara iyaka

Ƙara .table-borderlessdon tebur ba tare da iyakoki ba.

# Na farko Karshe Hannu
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry the Bird @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-borderlessHakanan za'a iya amfani dashi akan tebur masu duhu.

# Na farko Karshe Hannu
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry the Bird @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>

Layukan masu shawagi

Ƙara .table-hoverdon kunna yanayin jujjuyawa akan layuka na tebur a cikin <tbody>.

# Na farko Karshe Hannu
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry the Bird @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>
# Na farko Karshe Hannu
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry the Bird @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>

Ƙananan tebur

Ƙara .table-smdon sa tebur ya zama ƙarami ta hanyar yankan tantanin halitta a rabi.

# Na farko Karshe Hannu
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry the Bird @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>
# Na farko Karshe Hannu
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry the Bird @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>

Azuzuwan yanayi

Yi amfani da azuzuwan mahallin don canza launi na tebur ko sel guda ɗaya.

Class Jagora Jagora
Mai aiki Cell Cell
Default Cell Cell
Firamare Cell Cell
Sakandare Cell Cell
Nasara Cell Cell
hadari Cell Cell
Gargadi Cell Cell
Bayani Cell Cell
Haske Cell Cell
Duhu 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>

Ba a samun bambance-bambancen bangon tebur na yau da kullun tare da tebur mai duhu, duk da haka, kuna iya amfani da rubutu ko kayan aikin bango don cimma salo iri ɗaya.

# Jagora Jagora
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>
Isar da ma'ana ga fasahar taimako

Yin amfani da launi don ƙara ma'ana kawai yana ba da alamar gani, wanda ba za a isar da shi ga masu amfani da fasahar taimako ba - kamar masu karanta allo. Tabbatar cewa bayanin da launi ke nunawa ko dai a bayyane yake daga abun cikin kanta (misali rubutun bayyane), ko kuma an haɗa shi ta hanyar madadin, kamar ƙarin rubutu da aka ɓoye tare da .sr-onlyajin.

Ƙirƙirar tebur masu amsawa ta hanyar nannade kowane .tabletare da .table-responsive{-sm|-md|-lg|-xl}, yin teburin gungurawa a kwance a kowane wurin max-widthkarya har zuwa (amma ban haɗa da) 576px, 768px, 992px, da 1120px, bi da bi.

Yi la'akari da cewa tun da masu bincike ba su goyan bayan tambayoyin mahallin kewayo a halin yanzu , muna aiki a kusa da iyakoki min-da max-prefixes da ra'ayi tare da faɗuwar juzu'i (wanda zai iya faruwa a ƙarƙashin wasu yanayi akan manyan na'urorin dpi, alal misali) ta amfani da ƙima tare da madaidaicin madaidaicin waɗannan kwatancen. .

Kalmomi

Ayyuka <caption>kamar tafiya zuwa tebur. Yana taimaka wa masu amfani da masu karanta allo don nemo tebur kuma su fahimci abin da ke cikinsa kuma su yanke shawarar idan suna son karanta shi.

Jerin masu amfani
# Na farko Karshe Hannu
1 Alama Otto @mdo
2 Yakubu Thornton @mai
3 Larry Tsuntsu @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>

Tables masu amsawa

Tables masu amsawa suna ba da damar gungurawa tebur a kwance cikin sauƙi. Sanya kowane tebur mai amsawa a duk wuraren kallo ta hanyar nannade .tableda .table-responsive. Ko, zaɓi matsakaicin matsakaicin wurin da za a sami tebur mai amsawa da shi ta amfani da .table-responsive{-sm|-md|-lg|-xl}.

Yanke/tsatsewa tsaye

Tables masu amsawa suna amfani da overflow-y: hidden, wanda ke cire duk wani abun ciki wanda ya wuce ƙasa ko saman saman teburin. Musamman, wannan na iya kashe menus na zazzagewa da sauran widgets na ɓangare na uku.

Koyaushe mai amsawa

A ko'ina cikin kowane wurin hutu, yi amfani .table-responsiveda teburin gungurawa a kwance.

# Jagora Jagora Jagora Jagora Jagora Jagora Jagora Jagora Jagora
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>

Musamman Breakpoint

Yi amfani .table-responsive{-sm|-md|-lg|-xl}da yadda ake buƙata don ƙirƙirar tebur masu amsawa har zuwa wani wuri na musamman. Tun daga wancan lokacin zuwa sama, tebur ɗin zai kasance kamar yadda aka saba kuma ba zai gungurawa a kwance ba.

Waɗannan teburi na iya bayyana sun karye har sai an yi amfani da salon da suka dace a takamaiman faɗin wurin kallo.

# Jagora Jagora Jagora Jagora Jagora Jagora Jagora Jagora
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Jagora Jagora Jagora Jagora Jagora Jagora Jagora Jagora
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Jagora Jagora Jagora Jagora Jagora Jagora Jagora Jagora
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Jagora Jagora Jagora Jagora Jagora Jagora Jagora Jagora
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>