Source

Miisaska

Dukumeenti iyo tusaaleyaal door-bixsiga qaabaynta miisaska (iyada oo la siinayo isticmaalkooda baahsan ee JavaScript plugins) oo wata Bootstrap.

Tusaalooyinka

Sababo la xiriira isticmaalka baahsan ee miisaska guud ahaan widget-yada qolo saddexaad sida jadwaladaha iyo taariikhda-dooriyeyaasha, waxaanu u qaabaynnay miisaskayada inay noqdaan kuwo doorta . Kaliya ku dar fasalka saldhiga .tablemid kasta <table>, ka dibna ku kordhi qaababka gaarka ah ama fasaladayada kala duwan ee wax ka beddelka ah ee ku jira.

Isticmaalka calaamadaynta miiska ugu aasaasiga ah, halkan waa sida .tablemiisaska ku salaysan u eegaan Bootstrap. Dhammaan qaababka miiska waxaa lagu dhaxlayaa Bootstrap 4 , taasoo la micno ah in miisas kasta oo buul ah loo qaabeeyey si la mid ah habka waalidka.

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry Shimbirka @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>

Waxa kale oo aad rogi kartaa midabada—oo wata qoraal khafiif ah oo asal madow ah—oo wata .table-dark.

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry Shimbirka @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>

Doorashooyinka madaxa miiska

Si la mid ah miisaska iyo miisaska mugdiga ah, isticmaal fasallada wax ka beddelka .thead-lightama .thead-darksi aad uga dhigto <thead>s iftiin ama cawl madow.

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry Shimbirka @twitter
# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry Shimbirka @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>

Safafka la jeexay

Isticmaal .table-stripedsi aad ugu darto xariijimo zebra saf kasta oo ku dhex jira <tbody>.

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry Shimbirka @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>
# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry Shimbirka @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>

Miis xuduudeed

Ku dar .table-borderedsoohdimaha dhammaan dhinacyada miiska iyo unugyada.

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
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>
# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
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>

Miis aan xuduud lahayn

Ku dar .table-borderlessmiis aan xuduud lahayn.

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
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-borderlessWaxa kale oo loo isticmaali karaa miisaska mugdiga ah.

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
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>

Safafka lulsan kara

Ku dar .table-hoversi aad awood ugu yeelatid heerka dulmanaha ee safafka miiska gudaha a <tbody>.

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
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>
# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
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>

Miis yar

Ku dar .table-smsi aad miisaska uga dhigto kuwo is haysta adiga oo gooyay suufka unugga kala badh.

# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
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>
# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
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>

Fasalada macnaha guud

Isticmaal fasallada macnaha guud si aad u midabayso safafka miiska ama unugyada gaarka ah.

Fasalka Ciwaanka Ciwaanka
Firfircoon Unug Unug
Asal ahaan Unug Unug
Asal ahaan Unug Unug
Sare Unug Unug
Guul Unug Unug
Khatar Unug Unug
Digniin Unug Unug
Xog Unug Unug
Iftiin Unug Unug
Madow Unug Unug 
<!-- 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>

Kala duwanaanshaha asalka caadiga ah ee miiska lama heli karo miiska mugdiga ah, si kastaba ha ahaatee, waxaad isticmaali kartaa qoraalka ama agabka dambe si aad u gaarto qaabab isku mid ah.

# Ciwaanka Ciwaanka
1 Unug Unug
2 Unug Unug
3 Unug Unug
4 Unug Unug
5 Unug Unug
6 Unug Unug
7 Unug Unug
8 Unug Unug
9 Unug Unug 
<!-- 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>
U gudbinta macnaha tignoolajiyada caawinta

Isticmaalka midabka si loogu daro macnaha kaliya waxay bixisaa tilmaam muuqaal ah, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda. Hubi in macluumaadka lagu tilmaamay midabku ay ka cad yihiin waxa ku jira laftiisa (tusaale qoraalka muuqda), ama lagu soo daro habab kale, sida qoraal dheeraad ah oo .sr-onlyfasalka dhexdiisa ku qarsoon.

Samee jadwal jawaab celin leh adigoo ku duubaya mid kasta , .tableadoo .table-responsive{-sm|-md|-lg|-xl}ka dhigaya miiska si toosan ugu rogrogmado meel kasta oo max-widthjaban oo ah ilaa (laakiin aan lagu darin) 576px, 768px, 992px, iyo 1120px, siday u kala horreeyaan.

Ogsoonow maadaama daalacayaashu aysan hadda taageerin su'aalaha macnaha guud , waxaan ka shaqeyneynaa xaddidaadaha min-iyo max-horgalayaasha iyo muuqaallada leh ballacyada jajabka ah (kuwaas oo ku dhici kara xaalado gaar ah aaladaha-dpi-ga sare, tusaale ahaan) annaga oo adeegsanayna qiimayaal leh saxsanaan sare oo isbarbardhiggan ah. .

Qoraallo

Shaqooyin sida <caption>miiska loo socdo. Waxay ka caawisaa isticmaalayaasha akhristayaasha shaashadda si ay u helaan miis oo ay fahmaan waxa ku saabsan oo ay go'aansadaan haddii ay rabaan inay akhriyaan.

Liiska isticmaalayaasha
# Marka hore Dambe Qabasho
1 Calaamadee Otto @mdo
2 Yacquub Thornton @ buuran
3 Larry Shimbirka @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>

Miisaska jawaab celinta

Jadwalka jawaabaha leh ayaa u oggolaanaya miisaska in si sahlan loo rogo si toos ah. Miis kasta ka dhig mid u jawaabaya dhammaan goobaha daawashada adiga oo ku .tableduubaya .table-responsive. Ama, soo qaado meesha ugu sarreysa ee aad ku yeelan karto miis jawaab celin leh adigoo isticmaalaya .table-responsive{-sm|-md|-lg|-xl}.

Goyn toosan/goyn

Miisaska ka jawaaba ayaa isticmaala overflow-y: hidden, kaas oo gooya wax kasta oo ka baxsan cidhifyada hoose ama sare ee miiska. Gaar ahaan, tani waxay gooyn kartaa liiska hoos-u-dhaca iyo aaladaha kale ee qolo saddexaad.

Had iyo jeer u jawaaba

Meel kasta oo jaban, isticmaal .table-responsivemiisaska si toosan u rogrogaya.

# Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka Ciwaanka
1 Unug Unug Unug Unug Unug Unug Unug Unug Unug
2 Unug Unug Unug Unug Unug Unug Unug Unug Unug
3 Unug Unug Unug Unug Unug Unug Unug Unug Unug 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Burbur gaar ah

Isticmaal .table-responsive{-sm|-md|-lg|-xl}hadba sida loogu baahdo si aad u abuurto jadwal jawaab celin ah ilaa meel goyn gaar ah. Laga bilaabo meeshaas jaban iyo kor, miisku si caadi ah ayuu u dhaqmi doonaa oo si siman uma rogrogmi doono.

Jaantusyadani waxa laga yaabaa inay u muuqdaan kuwo jaban ilaa qaababkooda ka jawaabaya lagu dabaqo ballaadhka muuqaalka gaarka ah.

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