Source

მაგიდები

დოკუმენტაცია და მაგალითები ცხრილების სტილისტიკისთვის (მათი გავრცელებული გამოყენება JavaScript დანამატებში) Bootstrap-ით.

მაგალითები

ცხრილების ფართო გამოყენების გამო მესამე მხარის ვიჯეტებში, როგორიცაა კალენდრები და თარიღების ამომრჩევები, ჩვენ შევქმენით ჩვენი ცხრილები, რომ იყოს ჩართვა . უბრალოდ დაამატეთ საბაზისო კლასი .tableნებისმიერს <table>, შემდეგ გააფართოვეთ მორგებული სტილებით ან ჩვენი სხვადასხვა მოდიფიკატორის კლასებით.

ცხრილის ყველაზე ძირითადი მარკირების გამოყენებით, აი, როგორ .tableგამოიყურება დაფუძნებული ცხრილები Bootstrap-ში. ცხრილის ყველა სტილი მემკვიდრეობით მიიღება Bootstrap 4-ში , რაც ნიშნავს, რომ ნებისმიერი ჩადგმული ცხრილი იქნება სტილიზებული ისევე, როგორც მშობელი.

# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
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 იაკობ თორნტონი @ fat
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ან .thead-darkიმისათვის, რომ <thead>s გამოჩნდეს ღია ან მუქი ნაცრისფერი.

# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter
# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
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 იაკობ თორნტონი @ fat
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 იაკობ თორნტონი @ fat
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 იაკობ თორნტონი @ fat
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 იაკობ თორნტონი @ fat
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 იაკობ თორნტონი @ fat
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 იაკობ თორნტონი @ fat
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 იაკობ თორნტონი @ fat
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 იაკობ თორნტონი @ fat
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კლასში.

შექმენით პასუხისმგებელი ცხრილები ნებისმიერის შეფუთვით .table, .table-responsive{-sm|-md|-lg|-xl}რითაც ცხრილი გადაახვიეთ ჰორიზონტალურად ყოველი max-widthწყვეტის წერტილზე (მაგრამ არ მოიცავს) შესაბამისად 576 პიქსელი, 768 პიქსელი, 992 პიქსელი და 1120 პიქსელი.

გაითვალისწინეთ, რომ რადგან ბრაუზერებს ამჟამად არ აქვთ დიაპაზონის კონტექსტური მოთხოვნების მხარდაჭერა, ჩვენ ვმუშაობთ ფრაქციული სიგანით პრეფიქსებისა min-დაmax- ხედების შეზღუდვების გარშემო (რაც შეიძლება მოხდეს გარკვეულ პირობებში, მაგალითად, მაღალი dpi მოწყობილობებზე) ამ შედარებისთვის უფრო მაღალი სიზუსტით მნიშვნელობების გამოყენებით. .

წარწერები

A <caption>ფუნქციონირებს, როგორც სათაური მაგიდისთვის. ის ეხმარება მომხმარებლებს, რომლებსაც აქვთ ეკრანის წამკითხველი, იპოვონ ცხრილი და გაიგონ, რაზეა საუბარი და გადაწყვიტონ, სურთ თუ არა მისი წაკითხვა.

მომხმარებელთა სია
# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
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>