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>

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 sanya tebur ɗin 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.

Lura 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 kallon kallo 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 daidaito mafi girma don 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 gungurawa a kwance ba.

#	Jagora	Jagora	Jagora	Jagora	Jagora
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Jagora	Jagora	Jagora	Jagora	Jagora
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Jagora	Jagora	Jagora	Jagora	Jagora
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Jagora	Jagora	Jagora	Jagora	Jagora
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

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